Chapter 05無料公開

Railsアプリケーションにブログ機能を追加する

北山淳也
北山淳也
2020.10.02に更新

起動中のサーバーを止める

rails server でサーバーを立ち上げている状態で
再度左メニューにある「ターミナル」をクリックすることで別ターミナルを開き
Railsサーバー を立ち上げたまま他の操作を進めることもできますが、
本書ではサーバーを停止させて次以降の作業を進めましょう。
Railsサーバー を停止するには Ctrl を押しながら C キーを押します。

^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2020-10-02 03:06:02 +0000 ===
- Goodbye!
Exiting
~/myapp$

これで Railsサーバー が停止しました。

ブログ機能を設計する

今回作成した myapp はブログ機能を実現するアプリケーションとしましょう。

機能を追加するためには、簡単でもいいのでまずは設計をする必要がありますね。
ブログ機能を作成するには以下のような情報があればできそうです。

  • ブログ投稿を管理する posts テーブル
    • title 項目:文字列:ブログタイトルを格納
    • body 項目:長文文字列:本文を格納
    • postdate 項目:日時:投稿日時を格納
    • published 項目:true or false:投稿の公開/非公開を格納

ブログ機能を追加する

それでは実際に今回作成した myapp にブログ機能を追加していきましょう。
Rails では rails generate scaffold というコマンドを使うことで
必要なプログラムなどを自動で一気に用意してくれる機能が備わっています。
以下コマンド入力しEnterです。

~/myapp$ rails generate scaffold post title:string body:text postdate:datetime published:boolean

※ posts は post と単数形になっていますが、
rails generate scaffold コマンドは単数形で指定したオブジェクトを
複数形として生成を行ってくれるのでこのようになっています。

rails generate scaffoldが成功し、以下のように表示されます。

それでは作成したテーブルをデータベースに反映します。
rails db:migrate コマンドを入力しEnterです。

~/myapp$ rails db:migrate

以下のように表示され、データベースに反映されました。

それでは、実際にどういうものが生成されたのか確認してみましょう。
Railsサーバー を立ち上げるのは rails server コマンドでしたね。

~/myapp$ rails server
=> Booting Puma
=> Rails 6.0.3.3 application starting in development
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.6 (ruby 2.7.0-p0), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop

🌍 3000 のボタンをクリックすることでブラウザが開きましたね。

開いたブラウザのアドレスの最後に posts と入力しアクセスしてみましょう。
※本書の例では
https://localhost-rails-practice.paiza-user-free.cloud:3000/posts
となっていますが、
http://localhost:3000/posts と入力すればそれぞれの環境で /posts へアクセスすることが可能です。

おめでとうございます! posts が表示されました。
せっかくなので「New Post」をクリックしましょう。

Post を作成する画面も生成されています。
入力してみましょう。入力が完了したら、「Create Post」をクリックします。

うまく投稿が完了したようです。「Back」をクリックして Posts へ戻りましょう。

Posts にも投稿した内容が表示されています。

この調子でいくつか入力し、Posts の表示を増やしてみましょう。
5つほど投稿を入力してみました。

Posts ページの見た目を変える

画面の表示が Posts ではカッコがつかないので
ページタイトルを変えてみましょう。

左側のディレクトリエクスプローラーから
/home/ubuntu/myapp/app/views/posts/index.html.erb を開きます。

ここをクリック(ダブルクリック)することでエディタが開きます。

タイトルである h1 タグの中身を下記のように変えてみましょう

変更したら、「保存」ボタンで保存します。

保存したらエディタを閉じ、今回はサーバーを停止していないので
開いてあったブラウザで /posts ページを再読み込みしましょう。
表示が変わりましたね!
※画像では "PaizaCkoud" とtypo していますね…… 適宜修正しておいてください💦

次の項では、もう少し見た目を整えていきたいと思います。
合わせてページの表示だけでなく Controller を編集し表示する posts の取得条件なども変えてみましょう。