Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

sampleblog4.png
画像は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
 ┗ページネーションとテストデータを一括登録します。

matcham
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした