LoginSignup
1
7

More than 5 years have passed since last update.

Rails初心者のためのBlog作成チュートリアル

Last updated at Posted at 2019-01-17

Rails初心者のためのBlog作成チュートリアル

概要

Railsにこれから初めて触れる方を対象にしたチュートリアルです

チュートリアル

Railsのひな型を作る

まず、rails newを実行し、Railsアプリのひな型を作成します。

rails new blog

次に、作成したRailsアプリのディレクトリへと移動します。

cd blog

ScaffoldでCRUDを作成

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.rbCommentとの関連付けを記述します

app/models/post.rb
class Post < ApplicationRecord
    has_many :comments
end

そして、config/routes.rb にてルーティングを設定します

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を変更します

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 を作成し、下記のようにします。

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を作成します

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を作成します

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でリッチなテキストエディターを使う

trixGemfileに追加します

Gemfile
gem 'trix'

その後、bundle install を実行します

bundle install

bundle installした後、app/assets/javascripts/application.js//= require trixを追加します

app/assets/javascripts/application.js
// 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/javascripts/application.cssapp/assets/javascripts/application.scssにリネームして以下のように変更します

app/assets/javascripts/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.erbapp/views/show.html.erbを以下のように変更します。

app/views/posts/_form.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 %>
app/views/show.html.erb
<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 %>

これで、リッチなテキストエディタが使用できるようになります。

Bootstrap4の適用

このままではデザインなどが簡素すぎるのでBootstrapを使いたいと思います。

まず、Gemfilegem 'bootstrap', '~> 4.2.1'gem 'jquery-rails'を追加し、bundle installします。

Gemfile
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
bundle install

その後、app/assets/javascripts/application.jsapp/assets/stylesheets/application.scssを下記のように変更します

app/assets/javascripts/application.js
// 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 .
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 "bootstrap";

その後、config/boot.rbを以下のように修正します

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でパーシャルとして呼び出します。

app/views/layouts/_header.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>
app/views/layouts/application.html.erb
<!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です。

Heroku へのデプロイ

こちら を参考にしてHeroku CLI をインストールします。

次に、HerokuへデプロイするようにGemfileを修正します。

まず、sqlite3 を本番環境で使用せず、開発環境で使用するように変更します。

Gemfile
group :development do
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
end

HerokuではPostgresを本番環境で使用するため、以下のように本番環境用にpgを使用します

Gemfile
group :production do
  gem 'pg'
end

変更後、bundle install を実行します

bundle install

Heroku CLIを使用してデプロイ先のアプリを作成します

heroku login
heroku apps:create -a blog-sample

デプロイするために、herokuというリモートリポジトリを追加します

heroku git:remote -a blog-sample

ここまでの変更をcommitしてpushします。

git commit -am "deploy to Heroku"
git push heroku master

その後、rails db:migrateを実行します。

heroku run rails db:migrate -a blog-sample

最後に、https://blog-sample.herokuapp.comにアクセスしてブログが表示されていればOKです

1
7
12

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
1
7