[学習用]Rails5コメント付きブログを簡単に作成してデザインも一緒にする手順1

画像はBootstrap4とFontAwesome5を入れて簡単に作ったブログの様なもの。

こちらの記事を参考に次の環境で動作させました。
https://qiita.com/schroneko/items/0208a4f16fc1e4b6f152

実装した環境

Ubuntu 16.04.4
ruby 2.5.1
rails 5.0.7
gem 2.7.6

まずはいつも通りアプリを作成

rails new myblog
cd myblog

Gemfile に下記を追加

gem 'execjs'
gem 'therubyracer'
gem 'bootstrap', '~> 4.1.0'
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.0.9'

Bootstrap4とfont awesome5 も一緒に入れてしまいます。

動作確認

$ bundle install
$ rails s

動作しているかどうかチェックします。

TOPページの作成

$ rails g controller home index 

これは慣れたら作らなくても良い。
あとで、Post indexをTOPページにしても良いため。

config/routes.rb　を編集します

routes.rb

# root 'home#index'
root 'posts#index'
resources :posts do
  resources :comments
end

resources :posts do
resources :comments
これはこの後にコメントを実装するときに記入する部分ですが、先に入力してしまいます。

scaffold Postで作成

$ rails g scaffold Post name:string title:string content:text
$ rake db:migrate

基本的な機能がつくれるはずです。

TOPページにリンクを追加

index.html.erb

<%= link_to "My Blog", posts_path %>

app/views/index.html.erb
これを編集してリンクを追加します。

バリデーションの設定

post.rb

# validates :name,  :presence => true
# validates :title, :presence => true, :length => { :minimum => 5 }
validates :name, presence: true, uniqueness: true, length: { minimum: 2, message: '短すぎます!'}
validates :title, presence: true, length: { minimum: 3, message: '短すぎます!'}
validates :content, presence: true, length: { minimum: 3, message: '短すぎます!'}

has_many :comments

app/models/post.rb　にバリデーションの設定。
has_many :comments　はこの後コメント機能を実装するのに後から入れますが
先に挿入してしまいます。

コメントの機能を実装する

$ rails g model Comment commenter:string body:text post:references
$ rake db:migrate
$ rails g controller Comments

これだけで必要な実装は完了。

posts_controller 追加修正

posts_controller.rb

  def index
    @posts = Post.all.order(created_at: 'desc')
  end

app/controllers/posts_controller.rb のIndexを上記へ修正

コメント機能の実装とコメントのコントローラーの作成

show.html.erb

<h2>コメント</h2>
<% @post.comments.each do |comment| %>
  <p>
    <%= comment.commenter %>: <%= comment.body %>
    <%= link_to '削除', [comment.post, comment],
               :confirm => 'よろしいですか？',
               :method => :delete %>

  </p>
<% end %>

<h2>コメントを書く</h2>
<%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <%= f.label :commenter %><br />
    <%= f.text_field :commenter %>
  </div>
  <div class="field">
    <%= f.label :body %><br />
    <%= f.text_area :body %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

app/views/posts/show.html.erb　に追記。
書き換えではなく、show.html.erb　の下部へ追記します。
もともと記述してあるコードを消さない様に。

comments_controller.rbに追加とハマりポイント

comments_controller.rb

  def create
    @post = Post.find(params[:post_id])
    # @comment = @post.comments.create(params[:comment])
    @comment = @post.comments.create(comment_params)
    redirect_to post_path(@post)
  end

  def destroy
    @post = Post.find(params[:post_id])
    @comment = @post.comments.find(params[:id])
    @comment.destroy
    redirect_to post_path(@post)
  end

  private
  def comment_params
    params.require(:comment).permit(:body, :commenter)
  end

app/controllers/comments_controller.rb
comments_controller.rb　に下記を記述。

ここはハマった部分です。
@comment = @post.comments.create(params[:comment])
参考サイトの様に記述したところ
自分の環境ではこれだけだと不完全でエラーになってしまいました。

そのため
@comment = @post.comments.create(comment_params)
この様に書き換えて、
private
def comment_params
params.require(:comment).permit(:body, :commenter)
end
を追記しました。

次にデザイン

Bootstrap4を導入

既に一番初めのGemfile編集のときに記入して Bundle install済みです。

CSSからSCSSへ変更

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

上記のコマンドでCSSからSCSSへ変更。
application.css → application.scss にファイル名を変更します。

SCSSへBootstrapとfontAwesomeをimport

application.scss

@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

上記を追加してください。
app/assets/stylesheets/application.scss
application.scssの中身を全部消して良いです。

application.jsに追加

application.js

//= require jquery3
//= require popper
//= require bootstrap-sprockets

app/assets/javascripts/application.jsに追記します。
これでBootstrapの導入は完了になります。

Bootstrap4を導入したとき、エラーが出る場合

Sass::SyntaxError at /
File to import not found or unreadable: bootstrap-sprockets.

何回やってもエラーになるのでここもハマった部分。
解決方法は単純で、一通り設定が終わったらサーバーの再起動。
これで無事解決しました。

$ rails s -b 192.xxx.xxx.xxx -d
$ cat tmp/pids/server.pid
$ kill -9 番号

バックグラウンドでサーバーを動かしてると忘れやすい。
上記コマンドでバックグラウンドでサーバーを動かしている場合でも終了できる。

Railsサーバーだけ停止すれば良いです。
Vagrantや仮想サーバーごと停止する必要は御座いません。

これに沿って、あと何回か同じ手順で実装してみたいと思います。
Bootstrapを取り込んだhtmlも後ほど追記したいと思います。

学習項目

[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順1
　┗ブログ(掲示板)の様なものを作成します。
[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順2
　┗Bootstrapをテンプレートに当てはめてきれいに表示します。
[Rails5学習用]コメント付きブログを簡単に作成してデザインも一緒にする手順3
　┗ページネーションとテストデータを一括登録します。