LoginSignup
20

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-02

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20