単一の投稿(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社エンジニアの「?」を「!」に。原著者の許諾を得て翻訳・公開いたします。GRails5中級チュートリアルはセットアップが短めで、RDBMSにはPostgreSQL、テストにはRSpecを用います。原文が非常に長いので分割します。章ごとのリンクは順次追加します。Railsチュートリアル(https://railstutorial.jp/)(Railsチュートリアル)とは著者も対象読者も異なります。単一の投稿(翻訳)新しいブランチに切り替えます。interestedボタンをクリックするとエラーが表示されます。このボタンをクリックしたら、選択した投稿のページにリダイレクトされるようにしたいと思います。PostsControllerの内部にshowアクションを作成します。ここでクエリをかけて特定のpostオブジェクトをインスタンス変数に保存します(Gist)。interestedボタンは、選択した投稿へのリダイレクトを行います。このボタンのhref属性には投稿へのパスが保存されます。投稿を1件取得するためのGETリクエストを送信すると、Railsはshowアクションを呼び出します。このshowアクションの中ではidパラメータ(params)にアクセスします。このidは、特定の投稿を1件取得するためのGETリクエストからのものです。ブラウザで/posts/1パスにアクセスすると、idが1の投稿を取得するリクエストが送信されます。portsディレクトリの下にshow.html.erbテンプレートを作成します。views/posts/show.html.erbこのファイルに以下のコードを追加します(Gist)。--></div>postsディレクトリの下にshow.scssファイルを作成し、以下のCSSを追加してページのスタイルを整えます(Gist)。}}ここではページの高さを100vh-50pxで定義しているので、ページのコンテンツの高さはビューポート(viewport)の高さいっぱいになります。これにより、要素内のコンテンツの量が多くても少なくても、このコンテナの色はブラウザの高さいっぱいまで白になります。vhは「ビューポートの高さ」を表すので、100vhという値を指定すると要素はビューポートの高さの100%まで引き伸ばされます。ナビゲーションバーの高さを100vh-50pxから引いておく必要があります。しておかないと、コンテナの高さが50px余分に伸びてしまいます。interestedボタンをクリックするとページがリダイレクトされて以下のように表示されます。show.html.erbテンプレートには後で他にも機能を追加しますので、今は変更をcommitしておきましょう。CSS"specこういうモーダルウインドウや選択した投稿のリダイレクトといった機能が正常に動くかどうかのチェックは、手動で行わず、すべてspecに含めておきましょう。capybaraを使ってユーザーのアプリ操作をシミュレートすることにします。featuresディレクトリの下にpostsディレクトリを作成します。specをそこに追加します。追加後のファイルは以下のようになります(Gist)。endendここでは、手動での操作手順をすべて定義しています。最初にhomeページを開き、投稿をクリックすると、モーダルウインドウがポップアップすることを期待(expect)しています。interestedボタンをクリックすると、投稿ページにリダイレクトしてコンテンツが表示されることを期待しています。RSpecのhave_selectorやhave_cssなどのマッチャーは、ある要素がユーザーに実際に見える状態になっているとデフォルトでtrueを返します。したがって、投稿でクリックした後にテスティングフレームワークはモーダルウインドウが表示されることを期待します。false引数を追加します。テストを実行してみましょう。spec/features/posts/visit_single_post_spec.rb変更をcommitします。page"single_postブランチをmasterにmergeします。コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。チュートリアル第2版の監修および半分程度を翻訳、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れて更新翻訳中。enno.jpを運営。実は最近Go言語が好きで、Goで書かれたRubyライクなGoby言語のメンテナーでもある。仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。Storageを使ってはいけない(翻訳)#Tags#会社紹介#自社サービス#勉強会#Rails#PHP#デザイン#実績#週刊RailsウオッチCONTACTお気軽にご相談ください。(翻訳)CONTACTTechRachoでは、パートナーシップをご検討いただける方からのご連絡をお待ちしております。お気軽にご意見・ご相談ください。