メインフィード(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。原著者の許諾を得て翻訳・公開いたします。GRails5中級チュートリアルはセットアップが短めで、RDBMSにはPostgreSQL、テストにはRSpecを用います。原文が非常に長いので分割します。章ごとのリンクは順次追加します。Railsチュートリアル(https://railstutorial.jp/)(Railsチュートリアル)とは著者も対象読者も異なります。メインフィード(翻訳)homeページで投稿のフィードを作成することにします。このフィードには、すべての種類の投稿をカード形式で表示することにしましょう。新しいブランチを切ります。main_feedPostというモデルを生成します。post投稿を分類するためのCategoryモデルも必要になります。categoryそれではUserモデル、Categoryモデル、Postモデル同士の関連付けを作成しましょう。1件の投稿ごとにカテゴリを1つとその作者(ユーザー)を1人関連付けることにします。モデルのファイルを開いて以下のように関連付けを追加します。:destroyは、ユーザーを1人削除したときに、そのユーザーが作成したすべての投稿も削除するということを指示します。続いてマイグレーションファイルでデータのカラムと関連付けを定義しなければなりません(Gist、Gist)。endendマイグレーションを実行します。db:migrate変更をcommitします。tables."spec新しく作成したモデルをテストできる状態になりました。テスト用のサンプルデータは後で必要になります。1件の投稿は1つのカテゴリに属するので、関連付けを設定するためのサンプルカテゴリのデータも必要になります。factoriesディレクトリでcategoryファクトリを作成します(Gist)。原文のFactoryGirlはFactoryBotに置き換えました。endendfactoryディレクトリにpostファクトリーを作成します(Gist)。endendファクトリーで関連付けを設定するのはご覧のとおり非常に簡単です。postファクトリーの中にファクトリーの名前を書くだけで、userとcategoryの関連付けをpostファクトリー用に設定できます。変更をcommitします。factories"現時点ではモデルのコードしか書いていないので、テストは関連付けについてのみ行います。post_spec.rbをエディタで開きます。spec/models/post_spec.rb関連付けをテストするspecを追加します。追加後は以下のようになります(Gist)。endendこのコードでは、現在のコンテキストのクラスを取得するのに[described_class](https://relishapp.com/rspec/rspec-core/docs/metadata/described-class)メソッドを使っています。これはPostのときに書いたテストと基本的に同じです。続いて[reflect_on_association](https://apidock.com/rails/v2.3.2/ActiveRecord/Reflection/ClassMethods/reflect_on_association)メソッドを用いて、正しい関連付けが返されるかどうかをチェックしています。他のモデルについても同様のテストを書きます(Gist、Gist)。endend変更をcommitします。page”しかない空っぽの状態です。ここらでBootstrapを用いたレイアウトの作成に取りかかりましょう。homeページのビューファイルviews/pages/index.html.erbを開き、ファイルの中身を以下のコードで置き換えてページのレイアウトを作成します(Gist)。-->CSSをいくつか追加して、要素のスタイルとレスポンシブな動作を定義しましょう。stylesheets/partialsディレクトリでhome_page.scssファイルを作成します。assets/stylesheets/partials/home_page.scss以下のコードをCSSファイルに追加します(Gist)。767pxメディアクエリを追加します(Gist)。}これで、画面が大きいときのhomeページは以下のようになるはずです。画面が小さいときは以下のようになります。変更をcommitします。changes"Seedshomeページに投稿を表示するには、データベースに何か入れておく必要があります。データを手作りするのは退屈かつ時間がかかるので、seedを使って自動化します。seeds.rbファイルを開きます。db/seeds.rb以下のコードを追加します(Gist)。endendseed_usersseed_categoriesseed_postsコードからわかるように、seed_usersメソッドでUserレコードを、seed_categoriesでCategoryレコードを、seed_postsでPostのレコードをそれぞれdevelopmentデータベース内に作成しています。gemを追加しましょう。'faker'続いて以下を実行します。installseeds.rbを使ってデータをseedするには、以下を実行します。db:seed変更をcommitします。database"投稿のレンダリング投稿を表示するには、ビューにpostsディレクトリが必要です。Postsというコントローラを生成すると、自動的にpostsディレクトリがビューに作成されます。postsこのアプリではPagesControllerがhomeページを担当するので、pages_controller.rbファイルのindexアクションでデータのクエリを行って、postsテーブルからレコードを取得する必要があります。取り出したレコードをインスタンス変数に代入して、取り出したオブジェクトにhomeページのビューでアクセスできるようにします。Rubyの変数がよくわからない方は、こちらのガイドをお読みください。クエリインターフェイスガイドをお読みください。現時点のindexアクションは以下のようになります。Post.limit(5)endhomeページのテンプレートに移動します。views/pages/index.html.erb.main-content要素の内側に以下を追加します。%>このコードによって、indexアクションで取り出したすべての投稿が表示されます。パーシャルテンプレートをレンダリングしようとします。views/posts/_post.html.erbまだパーシャルファイルを作っていなかったので、ここでパーシャルを作成して以下のコードを追加しましょう。cardコンポーネントを使いました。投稿のコンテンツとパスを要素の中に配置し、すべての投稿を表示するリンクも追加しました。本チュートリアルではビューのパーシャルが多用されていますが、パーシャルは使いすぎるとレンダリングが遅くなることがあるのでご注意ください。この時点では、投稿へのルーティングがまだ定義されていません。ルーティングが必要なのでここで宣言しましょう。routes.rbファイルを開き、以下のコードを追加します(Gist)。endendここではresourcesメソッドを用いて、index/show/new/edit/create/update/destroyアクションへのルーティングを一括で宣言しています。カスタムのcollectionルーティングを使ってさまざまなPostインスタンスを持つページへのルーティングも宣言しています。これらのページについては別のブランチで宣言を行うので、後ほど作成します。サーバーを再起動してhttp://localhost:3000をブラウザで開くと、投稿が画面に表示されるはずです。このときのアプリは以下のように表示されます。変更をcommitします。content"投稿のスタイルを整えるため、partialsディレクトリにscssファイルを1つ作成します。assets/stylesheets/partials/posts.scssこのファイルに以下のCSSを追加します(Gist)。none;}homeページの表示は次のように変わるはずです。変更をcommitします。it"JavaScriptでスタイルを整える現在のサイトの画面はかなりイケてない状態なので、投稿に色を追加してコントラストを付けましょう。CSSでただ色を付けるだけではつまらないので、JavaScriptを使って、ユーザーがWebサイトを更新するたびに色が変わるようにしてみます。しょうもないアイデアではありますが、まあ楽しいんじゃないでしょうかc(o_u)?assetsの下のjavascriptsにpostsというディレクトリを作成し、その中にstyle.jsというファイルを作成します。お好みによっては、javascriptディレクトリ内にデフォルトで生成されている.coffeeファイルを削除しても構いません(本チュートリアルではCoffeeScriptを使いません)。assets/javascripts/posts/style.jsstyle.jsファイルに以下のコードを追加します(Gist)。color;}このコードでは、ブラウザ画面を再読込したときに投稿に属性を追加して2種類のスタイルモードのいずれかをランダムに設定します。スタイルの1つは色付きボーダーのみの投稿、もう1つは単色の投稿です。ページが変更されたりブラウザが更新されたりするたびに、投稿の色をランダムに変更します。定義済みのカラースキームはrandomColorSet()関数の中にあります。mouseenterイベントハンドラとmouseleaveイベントハンドラは、今後特定のページの投稿で必要になります。そちらの投稿では、homeページの投稿と異なるスタイルにする予定です。投稿をマウスオーバーすると、下のボーダー線の色がわずかに変わります。後でやってみればわかります。変更をcommitします。style"もう少しCSSを足してスタイルを補いましょう。posts.scssファイルを開きます。assets/stylesheets/partials/posts.scss以下のCSSを追加します(Gist)。white;}mobile.scssに以下のコードも追加して、小画面でテキストが大きくなりすぎる問題を修正します(Gist)。}}これでhomeページは以下のように表示されるはずです。変更をcommitします。screens"モーダルウィンドウ投稿の1つをクリックすると、他のページに遷移せずに投稿の内容をすべて表示するようにしたいと思います。componentを使うことにします。postsディレクトリに_modal.html.erbパーシャルファイルを作成します。views/posts/_modal.html.erb以下のコードを追加します(Gist)。</div></div>ここではこの特定のタスクを達成するため、Bootstrapのコンポーネントをほんの少しだけ変更しています。homeページテンプレートの冒頭でこのパーシャルを表示します(Gist)。%>モーダルウィンドウを動かすためにJavaScriptコードを少々追加しなければなりません。postsディレクトリにmodal.jsというファイルを作成します。assets/javascripts/posts/modal.jsこのファイルに以下のコードを追加します(Gist)。});});選択した投稿のデータをいくつかの変数に保存してモーダルウィンドウの要素にこのデータを表示する簡単なコードです。コードの最後の部分でモーダルウィンドウの表示がオンになります。モーダルウィンドウの外観を強調するためにCSSを少し追加しましょう。その前に、stylesheetsディレクトリで簡単な管理作業を行います。partialsディレクトリの下にpostsというディレクトリを作成します。assets/stylesheets/partials/postsこのpostsディレクトリの下にhome_page.scssファイルを作成し、posts.scssの内容をカットしてこのファイルに貼り付け、posts.scssを削除します。CSSコードをよりよく管理するために、1つの大規模なファイルにすべてをぶち込むのではなく、異なる目的ごとに小規模なCSSファイルを使って見通しをよくします。postsディレクトリの下にmodal.scssファイルを作成し、以下のCSSを追加します(Gist)。}}これで、投稿をクリックすると以下のように表示されるはずです。変更をcommitします。modal"main_feedブランチをmasterにmergeします。main_feedmain_feedを削除します。コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。enno.jpを運営。実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。