Railsにこれから初めて触れる方を対象にしたチュートリアルです
まず、rails newを実行し、Railsアプリのひな型を作成します。
rails new blog
次に、作成したRailsアプリのディレクトリへと移動します。
cd blog
rails g scaffold コマンドを使い、ブログに必要な一覧ページや記事作成ページなどを作ります
rails g scaffold post title:string content:text date:date
その後、rails db:migrateでマイグレーションを行います
rails db:migrate
あとはrails sを実行して、localhost:3000/postsにアクセスします
折角ですので、コメントを投稿できるようにしたいですよね？
まず、コメントを取り扱うCommentモデルを作成します。
rails g model comment content:text post:references
マイグレーションを行います
rails db:migrate
app/models/post.rbにCommentとの関連付けを記述します
class Post < ApplicationRecord
has_many :comments
end
そして、config/routes.rb にてルーティングを設定します
Rails.application.routes.draw do
root 'posts#index'
resources :posts do
resources :comments, :only => [:create, :destroy]
end
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
次に、各記事へのコメントフォームを作成していきます。
まずは下記のようにapp/views/posts/show.html.erbを変更します
<p id="notice"><%= notice %></p>
<p>
<strong>Title:</strong>
<%= @post.title %>
</p>
<p>
<strong>Content:</strong>
<%= @post.content %>
</p>
<p>
<strong>Date:</strong>
<%= @post.date %>
</p>
<h2>Comments</h2>
<div id="comments">
<%= render @post.comments %>
</div>
<%= render 'comments/new', post: @post %>
<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
変更箇所としてはこの部分になります
<h2>Comments</h2>
<div id="comments">
<%= render @post.comments %>
</div>
<%= render 'comments/new', post: @post %>
<%= render @post.comments %> の部分でコメントを一覧できるviewファイルをパーシャルとして呼び出しています
また、<%= render 'comments/new', post: @post %> の部分では新規作成するコメントのviewファイルをパーシャルとして呼び出しています
パーシャルとして呼び出している部分をそれぞれ作っていきます
まず、app/views/comments/_comment.html.erb を作成し、下記のようにします。
<p><%= comment.content %></p>
<p><%= link_to "Delete", "#{comment.post_id}/comments/#{comment.id}", method: :delete, data: { confirm: 'Are you sure?' } %>
次に、app/views/comments/_new.html.erbを作成します
<%= form_with(model: [ @post, Comment.new ], remote: true) do |form| %>
Your Comment:<br>
<%= form.text_area :content, size: '50x20' %><br>
<%= form.submit %>
<% end %>
これで、コメントの入力フォームが表示されるようになっているはずです
次に、コメントの作成と削除を行うアクションを作成します
app/controllers/comments_controller.rbを作成します
class CommentsController < ApplicationController
before_action :set_post
def create
@post.comments.create! comments_params
redirect_to @post
end
def destroy
@post.comments.destroy params[:id]
redirect_to @post
end
private
def set_post
@post = Post.find(params[:post_id])
end
def comments_params
params.required(:comment).permit(:content)
end
end
あとは、rails s でローカルサーバを建てて実際にコメントが作成&削除できていればOKです。
trixをGemfileに追加します
gem 'trix'
その後、bundle install を実行します
bundle install
bundle installした後、app/assets/javascripts/application.jsに//= require trixを追加します
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require trix
//= require turbolinks
//= require_tree .
次に、app/assets/stylesheets/application.cssをapp/assets/stylesheets/application.scssにリネームして以下のように変更します
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import "trix";
@import "trix"; を追加しただけですね
最後に、app/views/posts/_form.html.erb、app/views/posts/show.html.erb、app/views/comments/_comment.html.erb、 app/views/comments/_new.html.erbを以下のように変更します。
<%= form_with(model: post, local: true) do |form| %>
<% if post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% post.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= form.label :title %>
<%= form.text_field :title %>
</div>
<div class="field">
<%= form.label :content %>
<%= form.hidden_field :content, id: :article_text %>
<trix-editor input="article_text"></trix-editor>
</div>
<div class="field">
<%= form.label :date %>
<%= form.date_select :date %>
</div>
<div class="actions">
<%= form.submit %>
</div>
<% end %>
<p id="notice"><%= notice %></p>
<p>
<strong>Title:</strong>
<%= @post.title %>
</p>
<p>
<strong>Content:</strong>
<%= sanitize @post.content, tags: %w(h1 h2 h3 h4 h5 h6 ul ol li p a img table tr td em br strong div), attributes: %w(id class href) %>
</p>
<p>
<strong>Date:</strong>
<%= @post.date %>
</p>
<h2>Comments</h2>
<div id="comments">
<%= render @post.comments %>
</div>
<%= render 'comments/new', post: @post %>
<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
<p><%= sanitize comment.content, tags: %w(h1 h2 h3 h4 h5 h6 ul ol li p a img table tr td em br strong div), attributes: %w(id class href) %></p>
<p><%= link_to "Delete", "#{comment.post_id}/comments/#{comment.id}", method: :delete, data: { confirm: 'Are you sure?' } %>
<%= form_with(model: [ @post, Comment.new ], remote: true) do |form| %>
Your Comment:<br>
<%= form.hidden_field :content, id: :article_comments %>
<trix-editor input="article_comments"></trix-editor>
<%= form.submit %>
<% end %>
これで、リッチなテキストエディタが使用できるようになります。
このままではデザインなどが簡素すぎるのでBootstrapを使いたいと思います。
まず、Gemfileにgem 'bootstrap', '~> 4.2.1'とgem 'jquery-rails'を追加し、bundle installします。
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
bundle install
もし、gemの依存関係でうまくいかない場合は、bundle updateを実行してからbundle installを実行してください
bundle update
bundle install
その後、app/assets/javascripts/application.jsとapp/assets/stylesheets/application.scssを下記のように変更します
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require trix
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import "trix";
@import "bootstrap";
その後、config/boot.rbを以下のように修正します
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
ENV['EXECJS_RUNTIME'] = 'Node'
require 'bundler/setup' # Set up gems listed in the Gemfile.
require 'bootsnap/setup' # Speed up boot time by caching expensive operations.
これでBootstrapが使用できるようになりました。
最後に、app/views/layouts/_header.html.erbを作成し、app/views/layouts/application.html.erbでパーシャルとして呼び出します。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "Blog", root_path, class: "navbar-brand" %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<!DOCTYPE html>
<html>
<head>
<title>BlogTutorial</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header'%>
<div class="container">
<%= yield %>
</div>
</body>
</html>
rails sでサーバを起動し、ナビゲーションバーが表示されていればOKです。