前回作ったアプリを元に、swiperを導入してみようと思います。 swiperとは スライダーが作れるJavaScriptのライブラリです。 こんなやつです。よく見ますよね。 導入 いくつか方法があるようですが僕はyarnを使いました。 yarn自体のインストール方法は省略…
以前、Active Storageで画像をアップロードという記事を書いたのですが、 今回は複数の画像をアップロードしてみます。 準備 rails new images_app cd images_app rails g scaffold User name:string rails newしてscaffoldします。 rails active_storage:in…
アプリにyoutube動画とtwitterのtweetを表示させてみました。 APIを使う方法とローカルで埋め込む方法がありますが、今回はローカルで埋め込む方法でやっていきます。 レイアウトが崩れてますが完成形はこんな感じです。 ではアプリの新規作成からやっていき…
simple_formとは 入力フォームを簡単に作成できるgemです。 導入方法 Gemfileに gem 'simple_form' としてbundle installします。 rails g simple_form:install bootstrapを適用したい場合は下記 rails g simple_form:install --bootstrap こちらのコマンド…
Active Storageとは ファイルアップロードを簡単に実装できるgemです。 railsの標準のgemで、rails5.2から追加されました。 scaffoldアプリの作成 rails new active_storage_app 名前はactive_storage_appとしておきます。 rails newしたら cd active_storag…
ユーザーによってページの表示を許可、拒否したり、アクションを制限したりしたいことがあると思います。 今回は認可の仕組みを提供してくれるgem Punditを使って実装してみたいと思います。 単純なuserのCRUD機能とログイン機能を持ったアプリを作りました…
FormObjectについて学んだのでまとめてみます。 FormObjectとは form_withのmodelにActiveRecord以外のオブジェクトを渡すデザインパターン(設計手法)です。 メリットとしては ・DBを使わないフォームでも、ActiveRecordを利用した場合と同じお作法を利用で…
今回は記事投稿アプリにバッチ処理の実装をしてみます。 最終的にはこんなことをやりたいです。 やりたいこと 記事の状態が「下書き」「公開」「公開待ち」と3種類あります。 例えば記事の公開日を1日後にすると記事の状態は「公開待ち」になります。 時間が…
記事投稿アプリで公開日が過去の日付なら「公開」、未来の日付なら「公開待ち」と状態を変えるのにつまづいたので忘備録として残しておきます。 前提として記事の状態stateはenumで定義されています。 # draft: 下書き, published: 公開, publish_wait: 公開…
エラーの解決過程を記録しておきます。 記事投稿アプリで記事内容を未入力で投稿しようとすると以下のようなエラーが発生しました。 TypeError - no implicit conversion of nil into String: TypeErrorとは メソッドの引数に期待される型ではないオブジェク…
今回はパンくずリストを作ってみたいと思います。 パンくずリストとは 自分が今サイトのどこにいるかわかりやすく表示したものです。 こんなやつです。 アプリ立ち上げ アプリの新規作成からやっていきます。 rails new gretel_app 名前はgretel_appとしてお…
RailsではデフォルトのテンプレートエンジンはERBですが、他にもslimやhamlがあります。 今回はslimの記法について見て行きます。 テンプレートエンジンとは HTML画面を直感的にわかりやすいテンプレート形式で記述することができます。 必要gemの導入 slim…
前回の続きで今回はSystemSpecを書いてみます。 SystemSpecとは システムテストのことをRspecではシステムスペックと言います。 システムテストとは、実際に使用される状況と同じ設定でテストを行い、想定通りに動作するか検証することを言います。 テストの…
初めてテストコードを書いたのでおさらいのためにまとめてみます。 RailsはMInitestというテスティングフレームワークを備えていますが今回は 以前作った簡単なCRUDアプリ を元にRspecを導入してテストを書いてみました。 テストが必要なほどの機能はないの…
git、githubについてあまり分かってないまま学習してきたので、かなり初歩的な内容になると思いますがまとめてみます。 gitとは gitとは分散型バージョン管理システムのことです。 分散型と集中型がありますが集中型についてはここでは扱いません。 バージョ…
今回はJavaScriptのDOM操作を練習してみます。 DOMとは DOM (Document Object Model) とは、すべての HTML または XML 文書を表現・操作する API です。 DOM はブラウザーで文書構造をノードのツリーとして読み込み、それぞれのノードを文書の一部 (例えば要…
メニューリストとかで現在のページに応じて色がついてたらサイトが見やすくなりますよね。 Boardsページにいる時 Usersページにいる時 こんな感じにしたいです。 今回はこれを実装していきます。 前回作ったアプリにBootstrapを導入してBoardのCRUD機能をつ…
今回はgem ransackで検索機能を実装します。 以前の記事でフリーワード検索を実装したのですが、今回は作成日での検索とセレクトボックスでの検索を実装していきます。 1つ前の記事で作ったscaffoldアプリを元にやっていきます。 このアプリではi18n、enum、…
制作中の掲示板アプリにenum_helpを導入しました。 ちゃんと定着させるためにもう一度実際に手を動かしながらやってみようと思います。 今回やりたいのは フォームにセレクトボックスを作り選択肢を日本語で表示する です。 こんな感じの作ります。 i18n、en…
今回はAdmin-LTEを使って管理者用ページを作りたいと思います。 Admin-LTEとは管理画面に特化したBootstrapベースのCSSフレームワークです。 管理者用なので凝ったデザインにする必要はないですよね。なのでフレームワークを使ってサクッと作ってしまいたい…
ユーザー登録ができるサービスには必ず付いていると言っても過言ではないであろう機能、パスワードリセット機能を実装していきます。 今回はgem sorceryのモジュールであるreset_passwordを導入します。sorceryの導入を前提で進めていきます。 パスワードリ…
form_withってよく使うけど曖昧なままきてるなあ、と思ったので振り返ってみます。以前にも一度記事にしたので2回目です。 色々やってくれる優秀なform_withですが、model渡したりurl渡したり、結局どんな動きしてるの? form_withとは 情報を送信するための…
今回は検索フォームを実装したいと思います。 こちらが完成品です。 掲示板のタイトルか本文にワードが含まれていたら検索結果を一覧で表示させるようにします。 ransack ransackとは簡単に検索機能を実装できるgemです。 インストール まずはGemfileに gem …
今回はコンテンツの一覧表示画面なんかでよく見る これを実装します。 Googleの検索結果表示画面とかでも(デザインは違うけど)使われてるこれですがページネーションと言います。 一覧ページの表示件数が多くなるとこのページネーションか、TwitterやYouTube…
ルーティングの設定をする際、脳死でresourcesを使っていてresourceとの違いがよく分からなかったので2つの違いやどう使い分けるかを調べてみました。 違い resourcesは7つのアクションのルーティングをid付きで生成する resourceはindex以外のルーティング…
作成中のCRUDアプリの一部機能をAjax化させました。Ajax化には①「form系のヘルパーメソッドにremote: trueを設定して実装する方法」 ②「jQueryの$.ajax()などで実装する方法」の2つがあるそうです。①は簡単な処理に対応でき、②は複雑な処理になる場合に使う…
Ajaxってよく聞くけどどういうものなのか、かなりざっくりした説明になってしまいますが自分なりにまとめてみました。 同期通信と非同期通信 Ajaxを知るためにまずは非同期通信、そして対になる同期通信について知る必要があります。 同期通信 通常の通信方…
Railsを学習していてrenderを使うことは多々あります。 なんとなく使っていて理解が浅いと感じたので、一度しっかりおさらいして renderを使いこなせるようにしたい、と思いアウトプットすることに。 renderを使う場面 renderを使う場面は大きく分けて2種類…
サイトのタイトルを各ページ毎に変えたいときの手順です。 ・ヘルパーの作成 ・共通レイアウトに埋め込み ・各viewページで呼び出し の流れでやっていきます。 ヘルパーの作成 module ApplicationHelper def page_title(page_title = '') base_title = 'hoge…
フォームに値が入っていない時にエラーメッセージを表示させたい。 エラーメッセージは使い回したいのでパーシャル化しておきます。 <% if object.errors.any? %> # 特定の変数ではなくobjectとすることで汎用化 <div class='alert alert-danger'> <ul class='mb-0'> <% object.errors.full_messages.each do |</ul></div>…