ビューはレスポンスとして見た目を返すものになります。
コントローラーの次にビューが実行される。
app/views/コントローラー名ディレクトリにアクション名.html.erbというファイル名で作成される。

コントローラにインスタンス変数を定義

#app/controllers/posts_controller.rbに定義する場合

class PostsController < ApplicationController
  def index
    @post = "これはコントローラーで定義したインスタンス変数を確認するための文字列です"
  end
end

#ビューファイル(app/views/posts/index.html.erb)にインスタンス変数を定義

<h1>トップページ</h1>
<%= @post %>

これで以下のようになる。

なぜできる？

ルーティングを設定したらコントローラーを設定します。
コントローラーはルーティングで振り分けられたリクエストを実際に処理する役割を持っています。

コントローラーの作成

$ rails g controller コントローラー名

postsコントローラーを作成する場合

$ rails g controller posts

#app/controllers/posts_controller.rbが作成されているか確認

コントローラー内にアクションを記載する

class PostsController < ApplicationController

end

#作ったばっかりでは何も記載はない

indexアクションを定義する場合↓

class PostsController < ApplicationController

  def index  # indexアクションを定義した
  end

end 

これでコントローラーの大まかな作業は完了です。続きはビュー編でお伝えします。

ルーティングとはどの要求を受けたら、どのコントローラを呼び出すかを決めている場所。

ルーティングの記載

【例】config/routes.rbに記載
以下はHTTPメソッドとリクエスト、そして行き先のコントローラーとアクションが明示されている形です。

HTTPメソッド

クライアントから送られたリクエスト(GET[ページを表示する操作]、POST[データを登録する操作]、PUT[データを変更する操作]、DELETE[データを削除する操作])のこと。

URIパターン

URLのようなもの。例えば、http://localhost:3000/posts
にアクセスする際はpostsのみを記載。

コントローラー

ルーティングの次にやってくる処理のこと。

アクション

コントローラー内における、処理のカテゴリの事。
ルーティングは「どのようなリクエスト」=>「どのようなコントローラー・アクション」をイメージ。

Rails.application.routes.draw do
  [HTTPメソッド] '[URIパターン]', to: '[コントローラー名]#[アクション名]'
end

#例として以下のように記載
Rails.application.routes.draw do
  root to: 'posts#index'
  get 'posts', to: 'posts#index'
  get 'posts/new', to: 'posts#new'
  post 'posts', to: 'posts#create'
end

#get 'posts', to: 'posts#index'を例にとる。
#リクエスト:　GETのHTTPメソッド、URLはhttp://localhost:3000/posts
#行き先:　postsコントローラーという名前のコントローラー、indexアクションという名前のアクション

resources メソッドを使用したバージョン

resourcesを使用すると7つのアクション(index[一覧表示ページを表示]、new[新規投稿ページを表示]、create[データの投稿を行う]、show[個別詳細ページを表示]、edit[投稿編集ページを表示]、update[データの編集を行う]、destroy[データの削除])全てを実装したことになる。

onlyオプション

指定したアクションのルーティングのみを設定できる。

Rails.application.routes.draw do
  root to: 'posts#index'
  resources :posts, only: [:index, :new, :create]
end

rails routesコマンド

ルーティングの確認ができる。

Prefixとは

Prefixを指定した場合はパスの書き方が変わります。詳しくはビューファイル設定の際に説明します。

実際にアプリケーションを作成するにあたっての説明です。

rails new コマンド

Railsで新規アプリケションを作成する際に使用します。

$ rails new アプリケーション名 -オプション名
# オプションを付けてアプリケーションを作成

例:sample_appleを作成する場合

# Railsのバージョン5.2.3を用いて、「sample_apple」を「-d」オプションでMySQLを指定して作成。
$ rails _5.2.3_ new sample_apple -d mysql

# 「sample_apple」ディレクトリに移動
$ cd sample_apple

# 現在のディレクトリのパスを表示
$ pwd

データベースを作成

rails db:create

を実行して新しくデータベースを作成します。

$ rails db:create  # データベースの作成
Created database 'sample_apple_development'
Created database 'sample_apple_test'

これで開発環境とテスト環境用のデータベースが作成完了。
確認はdatabase.ymlで確認できます。

データベースはSequel Proで管理する前提で説明します。
以下の設定でデータベース接続。

rails s

開発者のみがローカルでサーバーを立ち上げるためのコマンドです。
control + cでサーバーを切ることができる。

本記事の対象者

「rubocopを導入するときにrequire: falseにしてたけど、理由がよく分からない」

そんな方に向けてこの記事を書いています。

rubocopの導入方法

rubocopの公式ドキュメントでは、以下のコマンドを実行する

$ gem install rubocop`

もしくは、Gemfileに以下を記載して、bundlerで導入してくださいと書いてあります。

$ gem 'rubocop', require: false`

この記事では、後者について記載していきます。

bundlerの特徴

rubocopを導入するうえで、覚えておきたいbundlerの特徴は、
「bundlerでは、Gemfileに書いたgemをまとめて自動でrequireする仕組みになっている」ということです。

rubocopはどこで使うの？

rubocopは、ソースコードが規約に沿っているか確認するために、ターミナル等でコマンドを実行します。

結論

rubocopは、ターミナル等で使用するため、bundlerによってアプリ側に自動で読み込む必要がない。よって、require: falseにする。

参考

主に以下を参考にさせていただきました。ありがとうございます！

• 【Rails】RuboCopの基本的な使用方法と出力の見方 https://qiita.com/terufumi1122/items/ad55bf8713c0df053f58
• Home - RuboCop: The Ruby Linter that Serves and Protects https://rubocop.readthedocs.io/en/latest/

はじめに

　先日、Railsでチェックボックスを使った複数選択を実装した際に詰まったところがあったので書いておきます。

やりたかったこと

• 好きな果物
• みかん
• りんご
• ぶどう
• バナナ

　選択肢の要素はEnumerizeで管理し、ビュー側では上のように複数選択でき、String型でDBに保存し、CSVで出力する際に"りんご, バナナ"という形式にする。

詰まったところ

　CSVに出力しようとするとnilが返ってきた。

解決法

　以下のようにマイグレーションファイルでarray: trueを追加する。

def change
  add_column :users, :favorite_fruits, :string, array: true
end

原因

　複数選択の際にEnumerizeは配列を返す（#<Enumerize::Set {apple, banana}>）ので、array: trueの指定によって配列を許容しておかないとDBに保存できなかったのではないか(おそらく)。

おまけ

　今回使ったRailsで複数選択をする実装をついでに書いておきます。いろんな実装があると思うので個人の責任でお願いします。ちなみに、カラムに複数値を入れるのはアンチパターンです（『SQLアンチパターン』の最初に出てきたような気がする）。ご利用は計画的に！

model

class User < ActiveRecord::Base
  extend Enumerize

  enumerize :favorite_fruits,
    in: %i[
      orange
      apple
      grape
      banana
    ], multiple: true
  end
end

view

<%= form_for @user do |f| %>
  <% User.favorite_fruits.options.each do |name, value| %>
    <%= f.check_box :favorite_fruits, { id: "user_favorite_fruits_#{value}", multiple: true } %>
    <%= f.label :favorite_fruits, name, value: value %>
  <% end %>
<% end %>

controller

class User < ApplicationController
  def show
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      # 処理省略
    end
  end

  private

  def user_params
    params.require(:user).permit(favorite_fruits: [])
    # ストロングパラメーターの配列のための書き方
  end
end

locale

ja:
  user:
    favorite_fruits:
      orange: 'みかん'
      apple: 'りんご'
      grape: 'ぶどう'
      banana: 'バナナ'

csvに出力するとき

@user.favorite_topics.texts.join(', ')

おわり

　今回の記事におけるミスやもっと良い実装があれば気軽に教えてください！

参考

Enumerizeのドキュメント

某スクールのチーム開発にてpay.jpを活用したクレジットカード登録と商品購入機能実装を担当させていただくことになりました！
色々と苦戦しましたがなんとか実装できましたので、以下にまとめてみたいと思います。
今回は商品購入機能実装から商品購入後の設定までまとめております！
カスタムフォームを使用したクレジットカード登録については、以下の過去記事をご参照いただけますと幸いです。
https://qiita.com/Tatsu88/items/23fe4b83d0ff8d78709d

実装内容

購入イメージ
Payjpのアカウント情報を取得して、商品の購入を行ってます。

購入後イメージ
購入後はその製品の写真にSoldとつけ、さらに購入ボタンを使用できないようにしています。

全体の流れ

1. [購入]コントローラの編集
2. [購入後]viewの編集
3. ルーティングの設定
4. 注意点（公開鍵と秘密鍵について）

1. [購入]コントローラの編集

今回、実装するページ遷移としては以下のようになってます。
商品一覧ページ=>商品詳細ページ=>商品購入確認ページ=>商品購入（コントローラのみ）=>購入完了ページ
*商品一覧ページと商品詳細ページと購入完了ページは既にあるものとして割愛させていただきます。

商品購入確認ページの実装

それでは、商品購入確認ページから実装していきます。
こちらの内容に関しては、以下をポイントとしてコントローラを設定します。
1.　商品/ユーザー/クレジットカードの変数設定
2.　Payjpの秘密鍵を取得
3.　Payjpから顧客情報を取得し、表示

controller

  def buy
　#商品/ユーザー/クレジットカードの変数設定
    @user = current_user
    @creditcard = Creditcard.where(user_id: current_user.id).first
    @address = Address.where(user_id: current_user.id).first
    @product = Product.find(params[:id])
  #Payjpの秘密鍵を取得
    Payjp.api_key = ”秘密鍵”
  #Payjpから顧客情報を取得し、表示
    customer = Payjp::Customer.retrieve(@creditcard.customer_id)
    @creditcard_information = customer.cards.retrieve(@creditcard.card_id)
    @card_brand = @creditcard_information.brand 
    case @card_brand
    when "Visa"
      @card_src = "visa.svg"
    when "JCB"
      @card_src = "jcb.svg"
    when "MasterCard"
      @card_src = "master-card.svg"
    when "American Express"
      @card_src = "american_express.svg"
    when "Diners Club"
      @card_src = "dinersclub.svg"
    when "Discover"
      @card_src = "discover.svg"
    end
  end

Viewは以下のように実装しております。（参考まで）

view

=render 'single-container'

%main.buy-main 
  = form_tag(action: :purchase, method: :post) do
    .buy-item-container
      %h2.buy-item-head 購入内容の確認
      %section.buy-content.buy-item
        .buy-content-inner
          .buy-item-box
            .buy-item-image
              =image_tag(@product.images[0].product_image.url,class:"buy-image")
            .buy-item-detail
              %p.buy-item-name
                =@product.name
                %p.buy-item-price.bold
                  = number_to_currency(@product.price,format: "%u%n",unit:"¥",precision: 0)
                  %span.item-shipping-fee.f14.bold
                    (税込)送料込み
      %section.buy-content.buy-user-info
        .buy-content-inner
          %ul.buy-price-table
            %li.buy-price-row.buy-you-pay.bold
            %li.buy-price-cell 支払い金額
            %li.buy-price-cell
              = number_to_currency(@product.price,format: "%u%n",unit:"¥",precision: 0)
          %section.buy-content.buy-user-info
        .buy-content-inner
          %h3 支払方法
          .payment-content__creditcards__list
            %figure
              = image_tag "#{@card_src}",alt: @card_brand, id: "card_image"
            .payment-content__creditcards__list__number
              = "**** **** **** " + @creditcard_information.last4
            .payment-content__creditcards__list__number
              - exp_month = @creditcard_information.exp_month.to_s
              - exp_year = @creditcard_information.exp_year.to_s.slice(2,3)
              = exp_month + " / " + exp_year
          %section.buy-content.buy-user-info
        .buy-content-inner
          %h3 配送先
          %address.buy-user-info-text
            =@address.postal_code
            %br
            =@address.prefecture
            %br
            =@address.city
            =@address.address
            =@address.apartment
            %br
            =@user.last_name
            =@user.first_name
          %section.buy-content.buy-user-info
          = submit_tag("購入する", class:"purchase")
.exhibit-page__footer
  .exhibit-page__footer__content
    .exhibit-page__footer__content__main
      %ul.exhibit-page__footer__lists
        %li.exhibit-page__footer__list
          プライバシーポリシー
        %li.exhibit-page__footer__list
          メルカリ利用規約
        %li.exhibit-page__footer__list
          特定商取引に関する表記
        %p.exhibit-page__footer__copyright
          © 2019 Mercari

商品購入（コントローラのみ）

上記で実装した商品購入確認ページ情報の購入するを押した時に動くメソッドをコントローラに記載します。
ここでのポイントは以下の通りです。
1. クレジットカードと製品の変数を設定
2. Payjpの秘密鍵を取得
3. payjp経由で支払いを実行
4. 製品のbuyer_idを付与（このbuyer_id、現状は不要ですが、以降の記述で使用します）

支払いについては、下記リファレンスをご参照ください。
https://pay.jp/docs/api/#%E6%94%AF%E6%89%95%E3%81%84%E3%82%92%E4%BD%9C%E6%88%90

controller

  def purchase
　#クレジットカードと製品の変数を設定
    @creditcard = Creditcard.where(user_id: current_user.id).first
    @product = Product.find(params[:id])
 #Payjpの秘密鍵を取得
    Payjp.api_key= '秘密鍵'
 #payjp経由で支払いを実行
    charge = Payjp::Charge.create(
      amount: @product.price,
      customer: Payjp::Customer.retrieve(@creditcard.customer_id),
      currency: 'jpy'
    )
　#製品のbuyer_idを付与
    @product_buyer= Product.find(params[:id])
    @product_buyer.update( buyer_id: current_user.id)
    redirect_to purchased_product_path
  end

以上で商品の購入ができました。
Payjpでログインし、売り上げにしっかりと反映されているか確認しましょう。

続いて購入後のviewの編集を行います。

2. [購入後]viewの編集

購入された製品がいつまで経っても一覧に残っていたり、また購入できたりすると問題です。
そのような事態を防ぐために以下の記述を行いましょう。

商品一覧ページの編集

まず、商品一覧ページのサムネイルに”SOLD”の画像を追加しましょう。
ここでのポイントは以下の通りです。
1. 製品に関して、"buyer_id"の有無を確認
2. "buyer_id"がある場合には、追加の記述を行う

view*一部抜粋

  %li.products__list
    %figure.product
      %figucaption.product__text
        = product.name
      .product__thumbnail
        .product__thumbnail--label
          = "¥ #{product.price.to_s(:delimited)}"
        .product__thumbnail--image
          =image_tag(product.images[0].product_image.url)
 #製品に関して、"buyer_id"の有無を確認
            -if product.buyer_id.present? 
 #"buyer_id"がある場合には、追加の記述を行う。
            .items-box_photo__sold
              .items-box_photo__sold__inner SOLD

追加されるクラスのCSSは以下のようになってます。
ポイントとしてSOLDの赤三角形を左上に表示するのですが、その部分はborderを使って実装してます。
width: 0;とheight: 0;にして、border-widthは上と右側のみを幅を設定し、
border-colorは上部のみに設定しています。

css*一部抜粋

.items-box_photo__sold{
  width: 0;
  height: 0;
  border-width: 120px 120px 0 0;
  border-color: #ea352d transparent transparent transparent;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border-style: solid;
  &__inner{
    top: -90px;
    font-size: 30px;
    position: absolute;
    left: 0;
    z-index: 2;
    color: #fff;
    transform: rotate(-45deg);
    letter-spacing: 2px;
    font-weight: 600;
  }
}

商品購入確認ページの編集

続いて商品購入確認ページも編集します。
既に購入された製品は購入できないようにしましょう。
＊写真に関しては、上記と同様のため割愛します。

ここでのポイントは以下の通りです。
1. 製品に関して、"buyer_id"の有無を確認
2. "buyer_id"がある場合には、”売り切れました”と表示する。（ボタンもdisableにします）

view*一部抜粋

        .product-buy__btn__box       
        - if user_signed_in? && current_user.id ==@product.user_id
          = link_to "削除する", product_path(@product.id), method: :delete,class:"product-details-delete__btn"
          = link_to "編集する", edit_product_path(@product.id),class:"product-details-edit__btn"
 #製品に関して、"buyer_id"の有無を確認
        - elsif @product.buyer_id.present? 
          = link_to "売り切れました",buy_product_path,class:"disabled-button bold"
        - else
          = link_to "購入画面に進む",buy_product_path,class:"product-purchase__btn"

追加されるクラスのCSSは以下のようになってます。

css*一部抜粋

.disabled-button{
  text-align: center;
  margin: 16px 0 0;
  background: #888888;
  color: #fff;
  display: block;
  width: 100%;
  font-size: 24px;
  line-height: 60px;
  cursor: not-allowed;
}

以上で購入後に行うべき変更が実装できました。

3. ルーティングの設定

上記にてコントローラとviewの設定が完了しました！
最後にルーティングを設定しましょう。
注意点としては、memberを使用することにあります。
こちらをcollectionにしてしまうと、productのidを取得できなくなってしまいますので、
idを取得するためにmemberで設定しましょう。（私はここで迷走しました笑）

route.rb*一部抜粋

resources :products do
    member do
      post 'purchase'
      get 'purchased'
      get 'buy'
    end
end

4. 注意点（公開鍵と秘密鍵について）

上記にて機能の実装ができました。
そこで一点注意がございます。
公開鍵と秘密鍵をそのまま記述してしまうのは危険なため、secrets.ymlなどに記述しましょう。

公開鍵と秘密鍵を.bash_profileに格納

まず、公開鍵と秘密鍵を隠しファイルに格納します。

ターミナル

#公開鍵と秘密鍵を記述します。
$ vim ~/.bash_profile

#まず「i」を押して入力モードにしましょう
export PAYJP_ACCESS_KEY='sk_test_*************'
export PAYJP_PUBLIC_KEY='pk_test_*************'
#入力後、"escキー"=> ":" => "w" => "q"の順でコマンドを打ちましょう。

#公開鍵と秘密鍵を記述後、保存を行います。
$ source ~/.bash_profile

Vimのコマンド詳細は以下を確認ください
https://qiita.com/hide/items/5bfe5b322872c61a6896

以上で隠しファイルへの記述は完了です。
続いてsecrets.ymlに記述しましょう。

secrets.ymlに記載

今回、rubyのver的にsecrets.ymlに記載しております。
verが新しい方はcredential.ymlに記載ください。

secrets.yml

#developmentとproduction、共に記載します。
  payjp_access_key: <%= ENV["PAYJP_ACCESS_KEY"] %>
  payjp_public_key: <%= ENV["PAYJP_PUBLIC_KEY"] %>

各コントローラへの記述をベタ打ちから変更

上記にてやっと準備が整いました。
コントローラへの記述をベタ打ちから変更しましょう。

contoroller

#どちらでも機能します。どちらかを記述ください
Payjp.api_key =ENV["PAYJP_ACCESS_KEY"]

Payjp.api_key = Rails.application.secrets.payjp_access_key

参照

PAYjp　支払いを行う
https://pay.jp/docs/charge

Payjpに登録したクレジットカードで商品購入を実装する(Rails)
https://qiita.com/takachan_coding/items/d21c0d2621368c9b0d9b

RailsでPayjpを使った購入機能を実装する
https://qiita.com/suzy1031/items/7964829086eb929471a6

商品購入後の商品にSOLDを表記（某フリマアプリのSOLD機能）
https://qiita.com/kortaban/items/ddc613b330c19fcedbeb

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。

実装すること

①ユーザーは問い合わせフォームから問い合わせを送ることができる
②管理者はユーザーからのお問い合わせ一覧から問い合わせの確認ができる
③管理者が問い合わせ詳細から返信すると、ユーザーの登録しているメールアドレスに届く

ActionMailerとは

ActionMailerを使うと、railsアプリケーションのメイラークラスやビューでメールを送信することができます。
(例)
・メールマガジンの一斉送信
・ウェブサイトに会員登録した時のthank youメール
・お問い合わせフォームの記入内容が管理者にメールでも送信される

参考：Railsガイド　https://railsguides.jp/action_mailer_basics.html

ER図

User:Contact = 1:N の関係になります。

モデルの作成

今回はUserモデル、Adminモデル、Contactモデルを作成します。
Userモデル、Adminモデルはdeviseを使用してモデルを作成していきます。
deviseのviewはusersフォルダとadminsフォルダそれぞれに作成されるようにします。

deviseの導入

Gemfile.

gem 'devise'

$ bundle install
$ rails g devise:install
$ rails g devise User name:string
$ rails g devise Admin name:string
$ rails g devise:views users
$ rails g devise:views admins

アソシエーションの確認

Userモデル

app/models/user.rb

class User < ApplicationRecord
 devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :omniauthable

 has_many :contact, dependent: :destroy
end

Contactモデル

reply以外のtitleとbodyにバリデーションを掛けます。

app/models/contact.rb

class Contact < ApplicationRecord

    belongs_to :user
    #バリデーション
    validates :title, presence: true
    validates :body, presence: true
end

コントローラーの作成

$ rails g controller users
$ rails g controller admins
$ rails g controller contacts new

ルーティングの設定

・管理者側のURLは、path_namesで推測されないように変更します。
・namespaceで、エンドユーザー側か管理者側かが分かりやすいように、urlにusersかadminsかを記載します。

config/routes.rb

Rails.application.routes.draw do
 devise_for :admins, 
     path: 'auth', 
     path_names: { 
     sign_in: 'xxxxxxxxxx', 
     sign_out: 'xxxxxxxxxx', 
     password: 'xxxxxxxxxx', 
     confirmation: 'xxxxxxxxxx', 
     unlock: 'xxxxxxxxxx', 
     registration: 'xxxxxxxxxx', 
     sign_up: 'xxxxxxxxxx' }, 
     controllers: {
         sessions: 'admin/sessions',
         passwords: 'admin/passwords',
         registrations: 'admin/registrations',
  }
  devise_for :users, 
     controllers: {
         sessions: 'users/sessions',
         passwords: 'users/passwords',
         registrations: 'users/registrations',
         omniauth_callbacks: 'users/omniauth_callbacks'
  }

  namespace :admins do

    resources :contacts

  end

  namespace :users do

    resources :users
    resources :contacts

  end
end

メイラーの作成

$ rails g mailer ContactMailer

サーバーの設定

今回はGmailを使用するメール送信機能を記述します。
・raise_delivery_errorsは、メールの送信に失敗した時にエラーを出すかどうかです。
・default_url_optionsで、アプリケーションのホスト情報をメイラー内で使いたい場合は:hostパラメータを明示的に指定します。
・delivery_methodは、デフォルトでsmtpです。
・smtp_settingsで、詳細設定をします。
1.port => SMTPサーバーのポート番号
2.address => SMTPサーバーのホスト名
3.domain => HELOドメインを指定する必要がある場合はここで行なう
4.user_name => メール送信に使用するgmailのアカウント
5.password => メール送信に使用するgmailのパスワード
6.authentication => 認証方法
7.enable_starttls_auto => メールの送信にTLS認証を使用するか

config/environments/development.rb

Rails.application.configure do
    config.action_mailer.raise_delivery_errors = true

    config.action_mailer.default_url_options = { :host => 'localhost:3000' }
    config.action_mailer.delivery_method = :smtp

    config.action_mailer.smtp_settings = {
        port:                 587,
        address:              'smtp.gmail.com',
        domain:               'gmail.com',
        user_name:            '<YOUR EMAIL ADDRESS>',
        password:             '<YOUR EMAIL PASSWORD>',
        authentication:       'login',
        enable_starttls_auto: true
    }
end

メイラーを編集

application_mailerには、全メイラー共通の設定を、
sample_mailerには、メイラー個別の設定をします。

application_mailer.rb

defaultメソッドで、共通の処理・設定を記述します。

app/mailers/application_mailer.rb

class ApplicationMailer < ActionMailer::Base
  default from: 'from@example.com'
  layout 'mailer'
end

contact_mailer.rb

管理者の返信が、ユーザーのemailに届くようにします。
個別の設定にはmailメソッドを使用します。
・send_when_replyedメソッドを呼び出す時に渡されるユーザーの情報から、
emailアドレスだけを取り出してメールの送信先としてします。
・mailメソッドが呼び出されると、メール本文が記載されているビューが読み込まれます。
インスタンス変数でメイラービューに値を渡してあげたいので、インスタンス変数を用意しています。

app/mailers/contact_mailer.rb

class ContactMailer < ApplicationMailer
    default from: 'from@example.com'

    def send_when_admin_reply(user, contact) #メソッドに対して引数を設定
    @user = user #ユーザー情報
    @answer = contact.reply #返信内容
    mail to: user.email, subject: '【サイト名】 お問い合わせありがとうございます'
  end
end

メールの本文を作成する

１つはHTMLフォーマット、もう一つはテキストメールです。
顧客によってはHTMLフォーマットのメールを受け取ることができない / 受け取りたくない人もいるので、テキストメールも作成しておくのが最善です。

contact_mailer/send_when_admin_reply.html.erb

app/views/contact_mailer/send_when_admin_reply.html

<h2><%= @user.name %> 様</h2>
　<p>この度は、お問い合わせありがとうございました。<br>
　以下でご質問の回答となっておりますでしょうか。</p>

  <p><%= @answer %></p>

  <p>今後とも弊社をよろしくお願いいたします。</p>

contact_mailer/send_when_admin_reply.text.erb

app/views/contact_mailer/send_when_admin_replyd.text

  <%= @user.name %> 様

  この度は、お問い合わせありがとうございました。
　以下でご質問の回答となっておりますでしょうか。

  <%= @answer %>

  今後とも弊社をよろしくお願いいたします。

問い合わせフォームの作成(ユーザー側)

users/contacts_controller.rb

app/controllers/users/contacts_controller.rb

class Users::ContactsController < ApplicationController

    def new
        @contact = Contact.new
    end

    def create
        @contact = Contact.new(contact_params)
        @contact.user_id = current_user.id
        if @contact.save
            redirect_to root_path
        else
            @contacts = Contact.all
            @users = User.all
            render :new
        end
        flash[:success] = 'お問い合わせを送信しました。'
    end

    private
    def contact_params
        params.require(:contact).permit(:title, :body, :reply)
    end
end

users/contacts/new.html.erb

app/views/users/contacts/new.html

  <% if @contact.errors.any? %>
        <%= @contact.errors.count %>件のエラー。
        <% @contact.errors.full_messages.each do |message| %>
          <%= message %>。
        <% end %>
  <% end %>
  <h2 class="contact-title">お問い合わせフォーム</h2>
      <%= form_for @contact, url: users_contacts_path do |f| %>
          <%= f.label :タイトル %>
              <%= f.text_field :title, class:"form-control" %>
          <%= f.label :内容 %>
              <%= f.text_field :body, class:"form-control" %>
          <%= f.submit "送信" %>
      <% end %>

返信処理の作成(管理者側)

・コントローラーのアクションによって、application_mailer.rb / contact_mailer.rbを起動します。
・流れは、
①管理者が問い合わせ一覧(index)から
②問い合わせ詳細(edit)へ飛び、
③返信を送信(update)し、
④その内容をメールでユーザーに送信します。
・ユーザーが問い合わせをした時点で、Contactsテーブルの中に、
レコードが作成されます。その中に「返信(reply)」というカラムが用意されています。
updateアクションを使って、すでにあるレコードの中に管理者の返信のデータだけを更新することで、ContactMailerのsend_when_admin_replyアクションが発火します。

deliver_nowについて

いくつかの参考書や解説サイトでは、deliver_nowメソッドではなくdeliverメソッドを使うように記載されています。
じつは、deliver_nowを使ってメール送信すると、メール送信が完了するまでRailsが反応しなくなることがあります。そのため、Rails4.2から「Active Job」という非同期処理が導入されました。「Active Job」を使うと、メール送信を裏で行わせながら処理を行うことができますので、メール送信完了を待つ必要がなくなるのです。
そのため、「すぐに送信する」ということが分かるように、deliverではなく、deliver_nowという名称になっているのです。
参考：https://web-camp.io/magazine/archives/19143

admins/contacts_controller.rb

app/controllers/admins/contacts_controller.rb

class Admins::ContactsController < ApplicationController

    def index
        @contacts = Contact.page(params[:page]).order(created_at: :desc).per(16)
        @users = User.all
    end

    def edit
        @contact = Contact.find(params[:id])
    end

    def update
        contact = Contact.find(params[:id]) #contact_mailer.rbの引数を指定
        contact.update(contact_params)
        user = contact.user
        ContactMailer.send_when_admin_reply(user, contact).deliver_now #確認メールを送信
        redirect_to admins_items_path
    end

    def destroy
        contact = Contact.find(params[:id])
        contact.destroy
        @contacts = Contact.page(params[:page]).order(created_at: :desc).per(16)
        @users = User.all
        render :index
    end

    private
    def contact_params
        params.require(:contact).permit(:title, :body, :reply)
    end
end

問い合わせ一覧(admins/contacts/index.html.erb)

app/views/admins/contacts/index.html

<h2>問い合わせ一覧</h2>
    <table>
        <thead>
        <tr>
            <th>ユーザー名</th>
        <th>問い合わせタイトル</th>
        <th>受信日</th>
        <th></th>
        <th></th>
        </tr>
    </thead>
    <tbody>
        <% @users.each do |user| %>
            <% user.contact.each do |contact| %>
              <tr>
                  <td><%= contact.user.name %><%= user.name %></td>
                  <td><%= contact.title %></td>
                  <td><%= contact.created_at.strftime("%Y年%m月%d日 ") %></td>
                  <td><%= link_to "返信", edit_admins_contact_path(contact) %></td>
                  <td><%= link_to "削除", admins_contact_path(contact), method: :delete %></td>
               </tr>
            <% end %>
       <% end %>
        </tbody>
</table>

問い合わせ内容(admins/contacts/edit.html.erb)

app/views/admins/contacts/edit.html

<h2>お問い合わせ内容</h2>
    <%= form_for @contact, url: admins_contact_path do |f| %>
        <h3>顧客名</h3>
        <%= @contact.user.name %>さん
        <h3>問い合わせ日</h3>
        <%= @contact.created_at.strftime("%Y年%m月%d日 ") %>
        <h3>タイトル</h3>
        <%= @contact.title %>
        <h3>問い合わせ内容</h3>
        <%= @contact.body %>
        <h3>返信</h3>
        <%= f.text_area :reply, class:"form-control", placeholder: "返信内容" %>
        <%= f.submit "送信" %>
    <% end %>

Google側での設定

・2段階認証をオンにする
https://support.google.com/accounts/answer/185839?co=GENIE.Platform%3DDesktop&hl=ja
・アプリケーション用のパスワードを発行する
https://support.google.com/accounts/answer/185833?hl=ja
・2段階認証プロセスで使用するパスワードとコード
https://support.google.com/accounts/answer/1070457?hl=ja

最後に

最後までご覧いただきありがとうございます。
初学者ですので間違っていたり、分かりづらい部分もあるかと思います。
何かお気付きの点がございましたら、お気軽にコメントいただけると幸いです。

twitter:https://twitter.com/yto_oct
note:https://note.com/yto_oty

参考

Railsガイド
https://railsguides.jp/action_mailer_basics.html
Action Mailer でメール送信機能をつくる
https://qiita.com/annaaida/items/81d8a3f1b7ae3b52dc2b
Gmail 経由での SMTP メール送信が出来ない時の解決法 (ユーザー名とパスワードは合っているのに。。)
https://qiita.com/Yinaura/items/6886682a607951a71bac

エラー文

Starting myapp_db_1 ... done
warning Integrity check: System parameters don't match                                                                                                                                                     
error Integrity check failed                                                                                                                                                                               
error Found 1 errors.                                                                                                                                                                                      


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================

#ここの文章を参照した
To disable this check, please change `check_yarn_integrity`  
to `false` in your webpacker config file (config/webpacker.yml).


yarn check v1.21.1
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.

解決策

「config/webpacker.yml」ファイルのcheck_yarn_integrity: trueの箇所をfalseに変更したら解決した。

check_yarn_integrityって何？

JavaScriptのパッケージをチェックしたり、保全したりする役割があるらしい。。。

参考記事

webpacker の check_yarn_integrity オプションについて調べてみた
yarnが原因でdocker-compose runが実行できないときの対処法
上記記事を参考にしたらできたので執筆者には感謝です。

実装すること

自分の投稿にいいねされた時・コメントをもらった時、フォローされた時に通知が来るようにします。

完成イメージ

通知を未確認の状態では、ヘッダーのNOTICEにマークが付きます。
通知を確認すると、マークが消えます。

ユーザーは自分への通知を見ることができます。
通知はまとめて全削除することができます。

ER図

Notificationテーブル
item_id : いいねされた投稿のid
visiter_id : 通知を送ったユーザーのid
visited_id : 通知を送られたユーザーのid
comment_id : 投稿へのコメントのid
action : 通知の種類（フォロー、いいね、コメント）
checked : 通知を送られたユーザーが通知を確認したかどうか default: false

モデルの作成

Userモデル、Itemモデルは作成した前提で進めていきます。
作成手順は下記リンク先で説明しております。
[Rails]Ajaxを用いて非同期で投稿機能といいね機能の実装https://qiita.com/yuto_1014/items/78d8b52d33a12ec33448

$ rails g model Notification visiter_id:integer visited_id:integer item_id:integer comment_id:integer action:string checked:boolean

マイグレーションファイルの追記

checked(通知を送られたユーザーが通知を確認したかどうか)のdefault: false,null: falseを追記します。

app/db/migrate/20200119094201_create_notification.rb

class CreateNotifications < ActiveRecord::Migration[5.2]
  def change
    create_table :notifications do |t|
      t.integer :visiter_id
      t.integer :visited_id
      t.integer :item_id
      t.integer :comment_id
      t.string :action
      t.boolean :checked, default: false, null: false ←追記

      t.timestamps
    end
  end
end

$ rails db:migrate

アソシエーションの確認

Userモデル

・自分が作った通知(active_notifications)と自分宛の通知(passive_notifications)の関連付けメソッドを実装します。
・active_notificationsでは、class_name: "Notification"でNotificationモデルの、foreign_key: "visiter_id" で、visiter_idを参考に、active_notificationsモデルへアクセスするようにしています。
passive_notificationsも同じです。

app/models/user.rb

class User < ApplicationRecord

   has_many :active_notifications, class_name: "Notification", foreign_key: "visiter_id", dependent: :destroy
   has_many :passive_notifications, class_name: "Notification", foreign_key: "visited_id", dependent: :destroy

end

Itemモデル

app/models/item.rb

class Item < ApplicationRecord

   has_many :notifications, dependent: :destroy

end

Notificationモデル

optional: trueはitem_idにnilを許容するものです。railsではbelongs_toのつけられたカラムには自動的にallow_nil: falseが付与されます。フォロー通知ではitem_idは関与しないためnilとなるので、このオプションをつけないとフォロー通知が有効になりません。

app/models/notification.rb

class Notification < ApplicationRecord

    #スコープ(新着順)
    default_scope->{order(created_at: :desc)}

    belongs_to :item, optional: true
    belongs_to :comment, optional: true
    belongs_to :visiter, class_name: 'User', foreign_key: 'visiter_id', optional: true
    belongs_to :visited, class_name: 'User', foreign_key: 'visited_id', optional: true

end

コントローラーの作成

$ rails g controller notifications

ルーティングの設定

config/routes.rb

Rails.application.routes.draw do

    resources :notifications, only: :index

end

通知メソッドの作成

Itemモデル(いいねとコメントのメソッド)

distinctメソッドは、重複レコードを1つにまとめるためのメソッドです。

app/models/item.rb

    def create_notification_by(current_user)
        notification = current_user.active_notifications.new(
          item_id: id,
          visited_id: user_id,
          action: "like"
        )
        notification.save if notification.valid?
    end

    def create_notification_comment!(current_user, comment_id)
        # 自分以外にコメントしている人をすべて取得し、全員に通知を送る
        temp_ids = Comment.select(:user_id).where(item_id: id).where.not(user_id: current_user.id).distinct
        temp_ids.each do |temp_id|
            save_notification_comment!(current_user, comment_id, temp_id['user_id'])
        end
        # まだ誰もコメントしていない場合は、投稿者に通知を送る
        save_notification_comment!(current_user, comment_id, user_id) if temp_ids.blank?
  end

    def save_notification_comment!(current_user, comment_id, visited_id)
        # コメントは複数回することが考えられるため、１つの投稿に複数回通知する
        notification = current_user.active_notifications.new(
          item_id: id,
          comment_id: comment_id,
          visited_id: visited_id,
          action: 'comment'
        )
        # 自分の投稿に対するコメントの場合は、通知済みとする
        if notification.visiter_id == notification.visited_id
          notification.checked = true
        end
        notification.save if notification.valid?
     end

Userモデル(フォローのメソッド)

app/models/user.rb

 #フォロー時の通知
 def create_notification_follow!(current_user)
    temp = Notification.where(["visiter_id = ? and visited_id = ? and action = ? ",current_user.id, id, 'follow'])
    if temp.blank?
      notification = current_user.active_notifications.new(
        visited_id: id,
        action: 'follow'
      )
      notification.save if notification.valid?
    end
  end

いいねの通知(likes_controller)

いいねの作成と同時に通知も作成されます。

app/controllers/likes_controller.rb

  def create
      like = current_user.likes.new(item_id: @item.id)
      like.save
      @item = Item.find(params[:item_id])
      #通知の作成
      @item.create_notification_by(current_user)
      respond_to do |format|
        format.html {redirect_to request.referrer}
        format.js
      end
  end

コメントの通知(comments_controller)

app/controllers/comments_controller.rb

def create
    @item = Item.find(params[:item_id])
    #投稿に紐づいたコメントを作成
    @comment = @item.comments.build(comment_params)
    @comment.user_id = current_user.id
    @comment_item = @comment.item
    if @comment.save
      #通知の作成
      @comment_item.create_notification_comment!(current_user, @comment.id)
      render :index
    end
end

フォローの通知(relationships_contoroller)

app/controllers/comments_controller.rb

def create
      @user = User.find(params[:following_id])
      current_user.follow(@user)
      #通知の作成
      @user.create_notification_follow!(current_user)
end

通知一覧ページの作成

notification_controller

・indexを開いたらchecked:falseが全てchecked:trueになるようにしています。
・ログインユーザーの通知全削除では、destroy_allメソッドを使用しています。
参考:https://pikawaka.com/rails/destroy_all

app/controllers/notification_controller.rb

class Users::NotificationsController < ApplicationController

    def index
      #current_userの投稿に紐づいた通知一覧
        @notifications = current_user.passive_notifications
      #@notificationの中でまだ確認していない(indexに一度も遷移していない)通知のみ
        @notifications.where(checked: false).each do |notification|
            notification.update_attributes(checked: true)
        end
    end

    def destroy_all
      #通知を全削除
        @notifications = current_user.passive_notifications.destroy_all
        redirect_to users_notifications_path
    end

end

通知一覧(notifications/index.html.erb)

通知内容は、パーシャルにします。

app/views/notifications/index.html

<h3 class="text-center">通知</h3>
    <%= link_to destroy_all_users_notifications_path, method: :delete do %>
        <i class="fas fa-trash" style="color: black;"></i>
        <h7 style="color: black;">全削除</h7>
    <% end %>
    <hr>
<% if @notifications.exists? %>
    <div class="users-index">
        <%= render @notifications %>
    </div>
<% else %>
    <p>通知はありません</p>
<% end %>

通知内容

notification_helper

通知内容によって、表示内容を分岐させます。

app/helpers/notifications_helper.rb

module Users::NotificationsHelper

   def notification_form(notification)
      @visiter = notification.visiter
      @comment = nil
      your_item = link_to 'あなたの投稿', users_item_path(notification), style:"font-weight: bold;"
      @visiter_comment = notification.comment_id
      #notification.actionがfollowかlikeかcommentか
      case notification.action
        when "follow" then
          tag.a(notification.visiter.name, href:users_user_path(@visiter), style:"font-weight: bold;")+"があなたをフォローしました"
        when "like" then
          tag.a(notification.visiter.name, href:users_user_path(@visiter), style:"font-weight: bold;")+"が"+tag.a('あなたの投稿', href:users_item_path(notification.item_id), style:"font-weight: bold;")+"にいいねしました"
        when "comment" then
            @comment = Comment.find_by(id: @visiter_comment)&.content
            tag.a(@visiter.name, href:users_user_path(@visiter), style:"font-weight: bold;")+"が"+tag.a('あなたの投稿', href:users_item_path(notification.item_id), style:"font-weight: bold;")+"にコメントしました"
      end
    end

end

notifications/_notification.html.erb

app/views/notifications/_notification.html

<% visiter = notification.visiter %>
<% item = notification.item %>

<div class="user-view clearfix ">
  <%= link_to users_user_path(notification.visiter) do %>
    <%= attachment_image_tag visiter, :profile_image, :fill,100,100, format: "jpeg", fallback: "no_image.jpg", size: "50x50", class:"profile-img-circle" %>
  <% end %>
  <%= notification_form(notification) %><span class="moderate-font"><%= " (#{time_ago_in_words(notification.created_at)} 前)" %></span>
  <br>
  <% if !@comment.nil? %>
    <p class="moderate-font text-center" style="color: #C0C0C0;"><%= @comment %></p>
  <% end %>
</div>

未確認の通知があるときはマークで知らせる

notifications_helper

未確認の通知(checked:falseの通知)を示すunchecked_notificationsメソッドをnotifications_helperに書きます。

app/helpers/notifications_helper.rb

def unchecked_notifications
    @notifications = current_user.passive_notifications.where(checked: false)
end

layouts/application.html.erb

未確認の通知があるときは、黄色いマークで知らせます。

app/views/layouts/application.html

<% if unchecked_notifications.any? %>
    <i class="fa fa-circle" style="color: gold;"></i>
<% end %>
<li>
    <%= link_to "NOTICE", users_notifications_path, class: "btn-default" %>
</li>

最後に

最後までご覧いただきありがとうございます。
初学者ですので間違っていたり、分かりづらい部分もあるかと思います。
何かお気付きの点がございましたら、お気軽にコメントいただけると幸いです。
いいねとコメントとフォローは下記リンク先で実装しています。
↓
[Rails]Ajaxを用いて非同期で投稿機能といいね機能の実装
https://qiita.com/yuto_1014/items/78d8b52d33a12ec33448
[Rails]Ajaxを用いて非同期でコメント機能の実装
https://qiita.com/yuto_1014/items/c7d6213139a48833e21a
[Rails]Ajaxを用いて非同期でフォロー機能の実装
https://qiita.com/yuto_1014/items/8d508b84fd0c2316ba01

twitter:https://twitter.com/yto_oct
note:https://note.com/yto_oty

参考

【学習アウトプット4】通知機能の作り方
https://qiita.com/tktk0430/items/bdb8fbcf4ce3258b2d41

【概要】

Railsチュートリアルで作成する Sample App の開発環境を Docker でコンテナ化しました。

細かい用語の勉強はおいといて、とりあえず動くものを作ってみましょう。

---

• 開発環境
  • macOS Mojave: 10.14.6
  • Docker Engine: 19.03.5
  • Docker Compose: 1.25.4
• コンテナ環境
  • Alpine Linux: 3.11.3
  • Ruby: 2.4.9 ¹
  • Rails: 5.1.2
• 参考: 学習情報 URL
  • Get Docker | Docker Documentation | 公式
  • Docker ドキュメント日本語化プロジェクト — Docker-docs-ja 17.06.Beta ドキュメント
  • Alpine Linux | 公式
  • 超軽量なAlpine Linuxについて調べた - Qiita

---

【本文】

□ 事前準備

※ 準備済みの場合は省略可能

■ Docker 準備

インストール方法については、検索したら大量に出てくることから、本記事では詳細を記述しないため、ご了承ください。以下のURLが参考になるかと思います。
- Mac OS X に Docker Toolbox のインストール — Docker-docs-ja 1.10.0 ドキュメント

■ Sample App 準備

　ご存知の通り、Railsチュートリアルでは、Ruby on Rails を使用してSample App という名称のアプリケーションを作成します。しかし、一から作成するのは手間でしたので、本記事では、YassLab（株）がGitHubに公開しているサンプルコードを使用しました。
　なお、サンプルコードを使用する手順は、以下の通りです。

○ 1： GitHubから自分のPCにダウンロード

bash

 $ git clone https://github.com/yasslab/sample_apps.git

○ 2： 使用するプロジェクトのディレクトリ準備

bash

 $ mkdir sample_app
 $ cp -rp sample_apps/5_1_2/ch14/* sample_app/
 $ cd sample_app

□ １： Dockerfile

• プロジェクトのルートディレクトリからの操作を想定します。

○ 1： Dockerfile生成

bash

 $ mkdir docker
 $ touch docker/Dockerfile

○ 2： Dockerfileの編集

Dockerfile

FROM ruby:2.4.9-alpine3.11

ENV LANG C.UTF-8 \
    TZ Asia/Tokyo

ENV BUILD_PACKAGES="build-base" \
    DB_PACKAGES="sqlite-dev postgresql-dev" \
    RAILS_PACKAGES="tzdata nodejs imagemagick" \
    FAVORITE_PACKAGES="less"

RUN apk update && \
    apk upgrade && \
    apk --update --no-cache add \
        ${BUILD_PACKAGES} \
        ${DB_PACKAGES} \
        ${RAILS_PACKAGES} \
        ${FAVORITE_PACKAGES}

WORKDIR /app

COPY Gemfile \
     Gemfile.lock \
     /app/

RUN bundle install --jobs=4

# 下記のコードは、頻繁に Gemfile を変更する場合、コメントアウトを推奨します。
# RUN apk del ${BUILD_PACKAGES}

# https://github.com/bundler/bundler/issues/6154
ENV BUNDLE_GEMFILE='/app/Gemfile'

□ ２： docker-compose.yml

○ 1： Dockerfile生成

bash

 $ touch docker-compose.yml

○ 2： docker-compose.ymlの編集

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - 3000:3000
    command: bundle exec rails s -p 3000 -b 0.0.0.0
    volumes:
      - ./:/app:cached
    stdin_open: true
    tty: true     

□ ３： コンテナ生成

○ 1： docker-compose.yml を元にコンテナに必要なイメージを構築

bash

 $ docker-compose build

○ 2： 構築したイメージを元にコンテナを構築して起動

bash

 $ docker-compose up -d

□ ４： Sample App の準備

• ここまでの操作により、Docker によるコンテナ化は終了といって差し支えありません。
• ここからは、通常の Rails アプリケーションに必要な操作と同じです（Heroku の操作感に似てるかと）。

○ 1： コンテナ環境に入る

• Alpine Linux のデフォルトのログインシェルは、ashになります。
• bashで操作したい方は、拡張機能に適宜追加してください。

bash

 $ docker-compose exec app ash

○ 2： データベース関係の準備

• ご存知の通りデータベースがない状態では、 http://localhost:3000 にアクセスしてもアプリケーションは動きません。
• コンテナ内で rails コマンドを試してみましょう。

ash(コンテナ内)

 $ rails db:create
 $ rails db:migrate
 $ rails db:seed

○ 3： 作業完了

• これで、開発環境のコンテナ化が完了しました。
• http://localhost:3000 にアクセスして、試しに操作してみてください。
• 終了時は、以下のコマンドとなります。

bash

 # 一時停止
 $ docker-compose stop
 # 再起動
 $ docker-compose start
 # コンテナ削除
 $ docker-compose down

• コマンドをもっと知りたい方
  • docker-compose コマンドまとめ - Qiita
  • 初心者向けdocker-composeコマンド逆引き - Qiita

□ ※ 注意事項等

■ 注意事項

※ 1： 新たにGemを追加する場合

• bundle install が以下のように失敗する可能性があります。
  • Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
• 原因として、コンテナ環境の OS である Alpine Linux において、導入したい Gem に必要となる OS の拡張機能(=package)がインストールされていないことが多くの理由になるかと思われます。
• 解決策として、エラー文中に記載されているログを$ cat 〜色々path〜/mkmf.logで内容を確認して、必要な拡張機能を$ apk add 〜拡張機能〜で逐一インストールしていけば、解決されるはずです。
• 本法で解決した場合は、$ docker-compose build --no-cacheの際に追加でインストールした拡張機能がリセットされるため、 Dockerfile にも必ず追加しておいてください。
• 大元の原因は、本記事で使用した Dockerfile は、限られた拡張機能しかインストールしていないことです。もし、不便に感じる場合は、別のイメージを使用して、自分だけのコンテナ環境の作成に挑戦してみると良いでしょう。Docker 及び Linux の学習に繋がります。
• また、他のエラーとして、 Gem はインストールされるが正常に動作しないこともあります。気が向いたら別記事で簡単に説明します。

※ 思いつき次第追加

■ あとがき

プログラマへの転職前、駆け出しエンジニアで Docker を勉強してる人を散見して、正直焦ってました。入門用の記事や動画を見ても、訳の分からない Dockerfile にコマンドの数々...しかし、実際に転職してからDockerfile の中身を理解してなくても、コンテナ作って作業ができれば十分でした。

この経験から、初期段階ではコマンドが扱えてコンテナを立ち上げられる程度の理解で十分と考えたため、コピペでファイルを作成して、コマンド打つだけの構成にして、簡単に Docker の世界を体験できるようにしてみました。

もちろん、Dockerfile から考えて作成するのも良い勉強になりますが、入社初期にインフラ周りを触らせることも少ないと思うので、コーディングに直接関係する学習を優先した方がよいでしょう(DBとかSQLとかActiveRecordとか...)。

Docker への入門にあたり参考になりましたら幸いです。

---

1. Railsチュートリアル公式では、Rubyのバージョンが2.4.0でしたが、当該バージョンのDockerfileがサポートされていないため、サポート中で同じマイナーバージョンである2.4.9を選択しています。2.4.0を使用したい場合は、Dockerfile中の FROM部分をFROM ruby:2.4.0-alpineに置換してください。 ↩

※こちらの記事は，「人生逆転サロン共同開発参加者限定の勉強会」で使用したコードのメモ書きです。

人生逆転サロンの共同開発について知りたい方はこちらをご覧下さい。
http://yanbaru-spike.com/l/c/yE5eqgMh/NuSs3Jlb

0. 内容

【開催日】 2/16(日) 19:30〜20:30

前回，「１対多」のアソシエーションについての基礎を話しましたので，その実践として「ログイン機能付きのメッセージ投稿アプリ」を作成していきましょう！

1. ログイン機能の実装

1.1 アプリの作成

• アプリの作成

ターミナル

rails new message_app

rails sでサーバーを起動し，http://localhost:3000にアクセスしたときに，Yay! You’re on Rails!が表示されることを確認して下さい。

1.2 ログイン機能の実装・日本語化

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.5'

gem 'rails', '~> 6.0.2', '>= 6.0.2.1'
gem 'sqlite3', '~> 1.4'
gem 'puma', '~> 4.1'
gem 'sass-rails', '>= 6'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.2', require: false

# ***** 以下を追加 *****
# ログイン機能
gem 'devise'

# 日本語化(Rails 6の場合)
gem 'rails-i18n', '~> 6.0'
gem 'devise-i18n'
# ***** 以上を追加 *****

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  # ***** 以下を追加 *****
  # デバッグ用
  gem 'pry-byebug'
  # ***** 以上を追加 *****
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

ターミナル

# 必要があれば， $ cd message_app でアプリのルートディレクトリに移動後
bundle install
rails g devise:install
rails g devise user
rails db:migrate

config/application.rb

module MessageApp
  class Application < Rails::Application
    config.load_defaults 6.0
    # ***** 以下を追加 *****
    # 以下を追加すれば日本語に
    config.i18n.default_locale = :ja
    # ***** 以上を追加 *****
  end
end

• サーバー「再」起動後に，http://localhost:3000/users/sign_upにアクセス

• ログイン関連ページのビューファイル（見た目）を変更したい場合は，次のコマンドを使用してからファイルを修正

ターミナル

rails g devise:i18n:views
# 注意: 日本語のサイトを作るのに次を使用しないこと！
rails g devise:views

• 日本語訳を変更したい場合は，次のコマンドを使用してファイルを修正

ターミナル

# 日本語訳を変更したい場合は，次でファイルを作成して編集
rails g devise:i18n:locale ja

【補足】 ログインページにフラッシュを実装したり，ユーザー編集ページなど修正した方がよい箇所があるが，今回はスルーで。

2. メッセージのCRUD機能

2.1 メッセージの一覧表示

ターミナル

rails g controller messages index new create edit update destroy
rails g model Message content:string user:references

• バリデーションを入れておく

db/migrate/日時.rb

class CreateMessages < ActiveRecord::Migration[6.0]
  def change
    create_table :messages do |t|
      # ***** null: false を追加 *****
      t.string :content, null: false
      t.references :user, null: false, foreign_key: true

      t.timestamps
    end
  end
end

ターミナル

rails db:migrate

app/models/user.rb

class User < ApplicationRecord
  # ***** 以下を追加 *****
  has_many :messages, dependent: :destroy
  # ***** 以上を追加 *****
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
end

app/models/message.rb

class Message < ApplicationRecord
  belongs_to :user
  # ***** 以下を追加 *****
  validates :content, presence: true, length: { maximum: 140 }
  # ***** 以上を追加 *****
end

• 初期データ

• usersテーブル

id	email
1	test@example.com
2	hoge@example.com

• messagesテーブル

id	user_id	content
1	1	おはよう
2	2	こんにちは
3	1	こんばんは
4	1	おやすみ

db/seeds.rb

user1 = User.create!(email: "test@example.com", password: "password")
user2 = User.create!(email: "hoge@example.com", password: "password")

user1.messages.create!(content: "おはよう")
user2.messages.create!(content: "こんにちは")
user1.messages.create!(content: "こんばんは")
user1.messages.create!(content: "おやすみ")

ターミナル

rails db:seed

• ルーティング

config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  resources :messages
  root to: "messages#index"
end

• コントローラ

app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  # ***** 以下を追加 *****
  # ログイン必須とする
  before_action :authenticate_user!
  # ***** 以上を追加 *****

  def index
    # ***** 以下を追加(Message.allはよくない) *****
    @messages = Message.includes(:user)
    # ***** 以上を追加 *****
  end
end

• ビュー

app/views/messages/index.html.erb

<% @messages.each do |message| %>
  <div>
    <p>【メールアドレス】 <%= message.user.email %></p>
    <p>【内容】 <%= message.content %></p>
  </div>
  <hr>
<% end %>

http://localhost:3000にアクセス

2.2 ヘッダー

app/views/layouts/application.html.erb

  <!-- 省略 -->
  <body>
    <!-- ***** 以下を追加 ***** -->
    <%= render 'shared/header' %>
    <!-- ***** 以上を追加 ***** -->
    <%= yield %>
  </body>

• app/viewsにsharedディレクトリを作成

app/views/shared/_header.html.erb

<header>
  <% if user_signed_in? %>
    <%= link_to "投稿一覧", root_path %>
    <%= link_to "新規投稿", new_message_path %>
    <%= link_to 'アカウント編集', edit_user_registration_path %>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
    <%= "【ログイン中のアドレス】#{current_user.email}" %>
  <% else %>
    <%= link_to "新規登録", new_user_registration_path %>
    <%= link_to "ログイン", new_user_session_path %>
  <% end %>
</header>
<hr>

2.3 メッセージの新規投稿機能

• 投稿時のエラー処理は

app/controllers/messages_controller.rb

  # ***** 以下を編集 *****
  def new
    @message = Message.new
  end

  def create
    current_user.messages.create!(message_params)
    redirect_to action: :index
  end
  # ***** 以上を編集 *****

  # 略
  # ***** 一番下に以下を追加 *****
  private

  def message_params
    params.require(:message).permit(:content)
  end
  # ***** 以上を追加 *****
end

app/views/messages/new.html.erb

<%= form_with model: @message, local: true do |form| %>
  <%= form.text_field :content, required: true %>
  <%= form.submit "送信" %>
<% end %>

【補足】 本当はフラッシュを実装したり，投稿エラー時の処理が必要だが，今回はスルー

実装すること

ActionCableを使用して特定のユーザーとリアルタイムチャットをできるようにしていきます。

完成イメージ

ActionCableとは

RailsにおいてWebsocketによる双方向通信を実現してくれているものです。
(Webにおいて双方向通信を低コストで行うための仕組み)
参考：Railsガイドhttps://railsguides.jp/action_cable_overview.html

ER図

「EntryテーブルとDirectMessageテーブル」が「UserテーブルとRoomテーブル」の中間テーブルになっています。

ページ設計

①ユーザーの詳細ページ(users/show)から新規でダイレクトメッセージを送ることができる。
②チャットルーム(rooms/show)に入ると、
(1)メッセージフォームまでスクロールされる(新着メッセージは下に蓄積されていくため)
(2)チャットルームでは、ログインユーザーが右に相手が左に表示される
③チャットルーム一覧(rooms/index)はヘッダーのリンクから飛べる

Gemの追記

jQueryを使えるようにします。

Gemfile.

gem 'jquery-rails'

app/assets/javascripts/application.js

//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery ←追記
//= require jquery_ujs ←追記
//= require_tree .

$ bundle install

モデルの作成

Userモデルはデバイスを元に作成したものとします。
作成手順は下記リンク先で説明しております。
[Rails]Ajaxを用いて非同期で投稿機能といいね機能の実装https://qiita.com/yuto_1014/items/78d8b52d33a12ec33448

それではRoomモデル、Entryモデル、DirectMessageモデルを作成していきます。

$ rails g model Room name:string
$ rails g model Entry user_id:integer room_id:integer
$ rails g model DirectMessage content:string user_id:integer room_id:integer

アソシエーションの確認

多対多の関連がある時はthroughオプションをつけてあげると中間テーブルを経由して関連先のモデルを取得できるようになります。

Userモデル

app/models/user.rb

   has_many :entries
   has_many :direct_messages
   has_many :rooms, through: :entries

Roomモデル

dependent: :destroyで、roomの特定のレコードが消えれば、そのレコードの紐づいたentryレコードとdirect_messageレコードも消えるようにしています。

app/models/room.rb

   has_many :entries, dependent: :destroy
   has_many :direct_messages, dependent: :destroy
   has_many :users, through: :entries

Entryモデル

app/models/room.rb

  belongs_to :user
  belongs_to :room

DirectMessageモデル

データが作成されたら非同期でブロードキャスト処理を実行するようにします。
after_createではなく、after_create_commitを使っている点に注意してください。
トランザクションをコミットしたあとでブロードキャストしないと、他のクライアントからデータが見えない恐れがあります。

app/models/direct_message.rb

  belongs_to :user
  belongs_to :room
  #ブロードキャスト
  after_create_commit { DirectMessageBroadcastJob.perform_later self }

コントローラーの作成

$ rails g controller users
$ rails g controller rooms

ルーティングの作成

config/routes.rb

 devise_for :users
 resources :users
 resources :rooms

ユーザー詳細ページ(コントローラー・ビューの編集)

users_controller

app/controllers/users_controller.rb

    def show
        @user = User.find(params[:id])
        #チャット
        if user_signed_in?
            #Entry内のuser_idがcurrent_userと同じEntry
            @currentUserEntry = Entry.where(user_id: current_user.id)
            #Entry内のuser_idがMYPAGEのparams.idと同じEntry
            @userEntry = Entry.where(user_id: @user.id)
                #@user.idとcurrent_user.idが同じでなければ
                unless @user.id == current_user.id
                  @currentUserEntry.each do |cu|
                    @userEntry.each do |u|
                      #もしcurrent_user側のルームidと＠user側のルームidが同じであれば存在するルームに飛ぶ
                      if cu.room_id == u.room_id then
                        @isRoom = true
                        @roomId = cu.room_id
                      end
                    end
                  end
                  #ルームが存在していなければルームとエントリーを作成する
                  unless @isRoom
                    @room = Room.new
                    @entry = Entry.new
                  end
                end
        end
    end

ユーザー詳細ページ(users/show.html.erb)

・<% if @isRoom == true %>で、roomが存在していれば既存のroomへ飛び、まだroomが存在していなければroomを作成するようにしています。
・<%= fields_for @entry do |e| %>で、roomと同時にentryも作成するようにしています。

app/views/users/show.html

<% if user_signed_in? %>
    <% unless @user.id == current_user.id %>
        <!-- 既にroomが存在していれば既存のroomへ -->
        <% if @isRoom == true %>
            <!-- メールアイコンでroomに飛べるようにする -->
            <%= link_to room_path(@roomId) do %>
                <button id="dm_submit"><i class="fas fa-envelope"></i></button>
            <% end %>
        <% else %>
            <!-- roomが存在していなければroomを作成する  -->
            <%= form_for @room, url: rooms_path do |f| %>
                <%= fields_for @entry do |e| %>
                   <%= e.hidden_field :user_id, :value=> @user.id %>
                <% end %>
                <button type="submit" id="dm_submit"><i class="fas fa-envelope"></i></button>
            <% end %>
        <% end %>
    <% end %>
<% end %>

ルームの作成・閲覧ページ(コントローラー・ビューの編集)

rooms_controller

・『index』では、ログインユーザーのroom一覧の相手の名前を表示しています。
ログインユーザーが所属しているroomの中でログインユーザー以外のユーザー名を取って来ています。
・『show』は、roomの詳細を表示しています。
roomが存在していれば、そのroomに紐づいたdirect_messagesとentriesを取ってきます。
・『create』で、roomを作成します。
roomの作成と同時に、そのroomに紐づいたentryユーザーを2名(ログインユーザーとユーザー詳細ページのユーザー)を作成します。
・『destroy』で、roomを削除します。

app/controllers/rooms_controller.rb

  def index
    @user = current_user
    @currentEntries = current_user.entries
    #@currentEntriesのルームを配列にする
    myRoomIds = []
    @currentEntries.each do |entry|
      myRoomIds << entry.room.id
    end
    #@currentEntriesのルーム且つcurrent_userでないEntryを新着順で取ってくる
    @anotherEntries = Entry.where(room_id: myRoomIds).where.not(user_id: @user.id).order(created_at: :desc)
  end

  def show
    @room = Room.find(params[:id])
    #ルームが作成されているかどうか
    if Entry.where(:user_id => current_user.id, :room_id => @room.id).present?
      @direct_messages = @room.direct_messages
      @entries = @room.entries
    else
      redirect_back(fallback_location: root_path)
    end
  end

  def create
    @room = Room.create(:name => "DM")
    #entryにログインユーザーを作成
    @entry1 = Entry.create(:room_id => @room.id, :user_id => current_user.id)
    #entryにparamsユーザーを作成
    @entry2 = Entry.create(params.require(:entry).permit(:user_id, :room_id).merge(:room_id => @room.id))
    redirect_to room_path(@room.id)
  end

  def destroy
      room = Room.find(params[:id])
      room.destroy
      redirect_to users_rooms_path
  end

ルーム一覧(rooms/index.html.erb)

app/views/rooms/index.html

<h2>メッセージ一覧</h2>
<% @anotherEntries.each do |e| %>
    <table class="table table-striped">
        <tr>
            <td>
　　　　　　　　　<!-- 名前からroomの詳細に飛べるようにリンク化 -->
                <%= link_to room_path(e.room.id) do %>
                    <%= attachment_image_tag e.user, :profile_image, format: 'jpeg', class: "rounded-circle", fallback: "no_image.jpg", size: "30x30" %>
                    <%= e.user.name %>
                <% end %>
            </td>
            <td>
               <!-- 最新メッセージ内容の最初の7文字を表示する -->
                <% dm = DirectMessage.find_by(id: e.room.direct_message_ids.last).content %>
                <%= truncate(dm, length: 10) %>
            </td>
            <td>
                <h6 style="color: #C0C0C0;"><%= e.updated_at.strftime("%Y/%m/%d %H:%M") %></h6>
            </td>
            <td>
               <!-- ゴミ箱アイコンクリックでroomを消せるようにする -->
                <%= link_to room_path(e.room.id), method: :delete do %>
                    <i class="fas fa-trash" style="color: black;"></i>
                <% end %>
            </td>
        </tr>
    </table>
<% end %>

ルーム詳細(rooms/show.html.erb)

app/views/rooms/show.html

<% @entries.each do |e| %>
   <!-- eachで回したentryユーザーがログインユーザーであれば、@classに"current_user"の文字列を代入する。ログインユーザーであれば、空白を代入する -->
    <% current_user == e.user ? @class = "current_user" : @class = ""  %>
       <!-- eachで回したentryユーザーがログインユーザーでなければ、entryユーザー名を表示する -->
        <% if e.user != current_user %>
           <h5 class="text-left <%= @class %>" id="<%= @class %>" style="font-size: 30px;" data-id="<%= e.user.id %>"><%= link_to "@#{e.user.name}", user_path(e.user_id) %></h5>
        <% else %>
           <h5 class="text-left <%= @class %>" id="<%= @class %>" data-id="<%= e.user.id %>"></h5>
        <% end %>
<% end %>
<!-- メッセージ内容は、パーシャルにします -->
<div id="direct_messages" data-room_id="<%= @room.id %>">
    <%= render @direct_messages %>
</div>
<!-- メッセージフォーム -->
<form>
    <label style="color: white;" id="target">新しいメッセージを作成</label><br>
    <input type="text" id="chat-input" data-behavior="room_speaker" class="form-control">
</form>

<script>
    //トークルーム遷移時に入力フォーム記載場所にスクロールする(最新トークは下にあるため)
    var element = document.getElementById('target'); // 移動させたい位置の要素を取得
    var rect = element.getBoundingClientRect();
    var position = rect.top;
    setTimeout( function() {
        scrollTo(0, position);}
        , 1000);
</script>

メッセージ内容(direct_messages/_direct_message.html.erb)

app/views/direct_messages/_direct_message.html

<p class="<%= direct_message.id %>" style= "color: white; margin-top: 0;">
    <%= attachment_image_tag direct_message.user, :profile_image, fallback: "no_image.jpg", class:"profile-img-circle", size: "40x40" %>
    <%= direct_message.user.name %>
</p>
<p class="<%= direct_message.id %>">
    <span class="balloon1-top">
        <h7 class="dm_content"><%= direct_message.content %></h7><br>
        <h7 style="color: #C0C0C0;"><%= direct_message.created_at.strftime("%Y/%m/%d %H:%M") %></h7>
    </span>
</p><br>

<!-- メッセージの表示位置を指定する -->
<script>
    //メッセージのユーザーidを取ってくる
    var direct_message = <%= direct_message.user.id %>;
    //id="current_user"の内容を取得
    var dm_user = document.getElementById('current_user');
    //dm_userのdata-idを取得する
    var current_user = dm_user.getAttribute('data-id')
    //dm_userがログインユーザーであれば右に表示する
    if(direct_message == current_user){
      $('p.' + <%= direct_message.id %>).css('text-align', 'right');
    }else{
      $('p.' + <%= direct_message.id %>).css('text-align', 'left');
    }
</script>

roomチャンネルの作成

各ユーザーは、複数のケーブルチャネルにサブスクライブできます。各チャネルには機能の論理的な単位がカプセル化され、そこで行われることは、コントローラが通常のMVPセットアップで行うことと似ています。
参考:Railsガイドhttps://railsguides.jp/action_cable_overview.html

今回はspeakメソッドを持っているroomチャネルを作成します。

$ rails g channel room speak

これを実行することで下記のファイルが作成されます。
・room_channel.rbに、サーバー側の記述を記載します。
・room.coffeeに、クライアント側の記述を記載します。

app/channels/room_channel.rb

app/assets/javascripts/channels/room.coffee

room_channel

・speakメソッドで、メッセージ内容(content)、user_id、room_idを作成します。

app/channels/room_channel.rb

class RoomChannel < ApplicationCable::Channel
  #接続されたとき
  def subscribed
    # stream_from "some_channel"
    stream_from "room_channel_#{params['room']}"
  end
#切断されたとき
  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    DirectMessage.create! content: data['direct_message'], user_id: current_user.id, room_id: params['room']
  end
end

room.coffee

app/assets/javascripts/channels/room.coffee

document.addEventListener 'turbolinks:load', ->
    if App.room
      App.cable.subscriptions.remove App.room
    App.room = App.cable.subscriptions.create { channel: "RoomChannel", room: $('#direct_messages').data('room_id') },
      #通信が確立された時
      connected: ->
      #通信が切断された時
      disconnected: ->
      #値を受け取った時
      received: (data) ->
        #投稿を追加
        $('#direct_messages').append data['direct_message']
      #サーバーサイドのspeakアクションにdirect_messageパラメータを渡す
      speak: (direct_message) ->
        @perform 'speak', direct_message: direct_message
    $('#chat-input').on 'keypress', (event) ->
      #return キーのキーコードが13
      if event.keyCode is 13
        #speakメソッド,event.target.valueを引数に.
        App.room.speak event.target.value
        event.target.value = ''
        event.preventDefault()

jobの作成・編集

非同期でブロードキャストするためのDirectMessageBroadcastジョブを作成します。

$ rails g job DirectMessageBroadcast 

direct_message_broadcast_job.rb

performメソッドでブロードキャストを実行します。
このとき、direct_messageに単純な文字列ではなく、direct_messages/direct_messagパーシャルのHTMLを返しています。
ApplicationController.renderer.renderメソッドを使うと、コントローラ以外の場所でビューをレンダリングできます。

app/jobs/direct_message_broadcast_job.rb

class DirectMessageBroadcastJob < ApplicationJob
  queue_as :default

    def perform(direct_message)
      ActionCable.server.broadcast "room_channel_#{direct_message.room_id}", direct_message: render_direct_message(direct_message)
    end

    private

    def render_direct_message(direct_message)
      ApplicationController.renderer.render partial: 'direct_messages/direct_message', locals: { direct_message: direct_message }
    end
end

ログインユーザーの情報を取得する(connection.rb)

ApplicationCable::Connectionクラスを使って、認証情報を定義します。
identified_byはコネクションを識別するキーとなるものです。connectメソッドはコネクションの接続時に呼ばれるメソッドです。ここではコネクションの識別キーとして、ログイン時に設定したCookieからuser_idを取り出しています。

app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    protected
    def find_verified_user
        if verified_user = User.find_by(id: cookies.signed['user.id'])
          verified_user
        else
          reject_unauthorized_connection
        end
    end
  end
end

最後に

最後までご覧いただきありがとうございます。
初学者ですので間違っていたり、分かりづらい部分もあるかと思います。
何かお気付きの点がございましたら、お気軽にコメントいただけると幸いです。
twitter:https://twitter.com/yto_oct
note:https://note.com/yto_oty

参考

ActionCableを用いてリアルタイムチャットの実装
https://freecamp.life/rails-realtimechat/
Rails 5 + ActionCableで作る！シンプルなチャットアプリ（DHH氏のデモ動画より）
https://qiita.com/bisque33/items/1360477c2260b361ec03
[Rails5]Action Cableのサンプルを読み解いてみる
https://qiita.com/bisque33/items/1360477c2260b361ec03
リアルタイムチャットは誰でもつくれる~Action CableでDM機能を作ろう~
https://qiita.com/OgawaNorihiro/items/6d9f85d8e89d1def4f15
【Ruby on Rails】DM機能でDM相手の一覧ページを作成！
https://novice-programmer.com/dm_index/
Railsガイド　Action Cable の概要
https://railsguides.jp/action_cable_overview.html

エラーが発生

下記のようなエラーが発生。
NoMethodError in Boards#index undefined method decorate

デコレータはすでに設定済みなのになぜ？となる。

原因

そもそもデコレータの原因ではなく、ユーザがnilだったのが原因だった。ユーザが存在しないので、名前を取りに行こうとしてもできないためこのようなエラーが発生した。

解決法

rails cでBoard.all.destroy_allを行い、ユーザが紐づかない投稿が消えた。その後新規作成を行うと、エラーが発生せずに、表示された。

エラーが発生

下記のようなエラーが発生。
NoMethodError in Boards#index undefined method decorate
デコレータはすでに設定済みなのになぜ？となる。

原因

そもそもデコレータの原因ではなく、ユーザがnilだったのが原因だった。ユーザが存在しないので、名前を取りに行こうとしてもできないためこのようなエラーが発生した。

解決法

rails cでBoard.all.destroy_allを行い、ユーザが紐づかない投稿が消えた。その後新規作成を行うと、エラーが発生せずに、表示された。

簡単な自己紹介

SIerに2年間在籍しております、かなたです。
誰も興味がない趣味とか仕事とか、本記事のきかっけを初めに。

• 好き①：服(Margielaとか)
• 好き②：映画(おすすめは Into the Wild)
• 業務①：DataSpiderを用いたデータ連携基盤を構築
• 業務②：C#デスクトップ系業務アプリ

10月からWEBアプリケーションの勉強を独学で始めまして、よくよくエラー等ひっかかります。
昨日の自分自身に対して、教えるならどのように伝えるかを、ここに表現できればと思っています。
（あとモチベーションアップに繋がれば…という思いです）

作っているもの

SIer(以外もそうだと思うんですが)は基本的に、実績ベースで予定・工数を積み上げ、スケジューリングします。
ですが、実績を記録しているPJ/チームを僕は見たことがありません。
そのため、予実データ化し改善までつながるアプリケーションを開発しよう！と始めてみました。

成果

さてさて、10月からおよそ4ヶ月の成果はざっくり以下の通りです。

プログラミング基本

• HTML/CSS/JavaScript/Ruby/Railsの基本(Progate)
• Railsチュートリアル2周(GitHub~Herokuデプロイ)
• Vueサンプル複写(基礎から学ぶ Vue.js)

本

• リーダブルコード
• 初めてのRuby
• Webを支える技術
• Web API: The Good Parts
• テスト駆動開発
• リファクタリング
• エンジニアファースト
• エンジニアの知的生産術
• コンピュータはなぜ動くのか
• デザイン系の本を数冊

アプリケーションの実装状況

• フロントエンド ・・・ Vue.js + Vuex + VueRouter + Vuetify
• サーバサイド　・・・ RubyonRails
• 実装：メールアドレスを利用したユーザの登録〜ログインおよびユーザ情報の更新
• 詳細：ユーザログイン時には、WebStorageを利用。ログイン永続化を実装。

ざっくりこんな状況です。頑張らないと・・・

さいごに

また、目標・スケジュールをこちらに記載できればと思っています（もしかして、そういった場でない？）
そして、次回からは、冒頭で述べたとおり、自分自身の備忘録として、
学んだことを表現させていただきます。

よろしくお願いいたします。

皆さんこんにちは！　プログラマーを目指して学習している、久保雄貴と申します。

今回は「メソッド内にループがある場合の戻り値（返り値）について」自分が疑問に思ったこと、考えたこと、知ったことについて書いてみようと思います。

あるときrubyの勉強中にエラーが起きました。メソッドの戻り値を使って演算をしようとした時です。
「undefined method '+' for nil:nilclass」　のような表示がされました。
空のオブジェクトと足し算はできません。ということのようです。
頭の中に「？」がたくさん出てきて、自分が戻り値についてよく理解できていないことがわかりました。
そこでいろいろ考え、実験して、調べてみたわけです。

皆さんのお役に立てる内容であれば嬉しいです。

なお、間違っている点や「こういう風に書いたらいいよ」などアドバイスがありましたら、コメントをください。

では始めましょう！

1.　戻り値とは

戻り値とは、オブジェクトやメソッドが処理された後の最終的な値のことです。返り値とも言います。
Rubyのオブジェクト自体、またはメソッドを利用した「式」には、全て戻り値があります。

Rubyにおける「式」とは文字列や数値の他に、変数やメソッド呼び出し、演算子式などが含まれます。
すなわち、"あいうえお", 5296, (4 + 24)などはすべて式になります。
そしてそれらすべてに戻り値があるということです。（上の例でいうと、"あいうえお", 5296, 28）

2.　メソッドの戻り値はどうなる？

では、メソッドの戻り値はどうなるのでしょうか。
Ruby Referenceで調べてみました。

http://ruby-for-beginners.rubymonstas.org/writing_methods/return_values.html

以下のように書かれています。

In Ruby, a method always return exactly one single thing (an object).
Also note that in Ruby we do not have to use the statement return, as in other languages. In fact, most Ruby code does not use the keyword return at all.

This is extremely convenient, but it is also something we need to learn:

If we don’t do anything else, then a method will return the value that was returned from the last evaluated statement. Most often, this is the last line in the method body.

端的に言えば、
「メソッドは一つの値を返が、他の言語と違って、returnと記述する必要はない。
もし記述しなかったら、最後の式の値が返される。」
という感じでしょうか。

例えば、

def test(number)
  number + 1      ←メソッドの中の最後の式
end

puts test(5)

これを実行すると、6と表示されますね。
"number + 1" の答えである "6" がtestメソッドの戻り値となっているわけです。

3.　実験： メソッドの戻り値の判定

冒頭で書きましたが、メソッドの戻り値を使って演算をしようとした時に、「戻り値は「nil」ですよ。」とエラーが出ました。実は、その時はメソッド内にwhile文（ループ）がありました。
条件を満たすまで、命令を実行し、条件を満たしたら、ループから抜け出して、メソッドの呼び出し元にもどる。
その戻り値で演算をしようとしてエラーが出たわけです。

そこでメソッドの戻り値が「nil」かそうでないかを判断してみたらどうかと思いつきました。

メソッドの戻り値が「nil」なのかそうでないのかを判断するコードを考えましたので、みていきたいと思います。
まずはwhile文なしのパターンです。

def test(count)
    puts "0より大きい数字を入力してください。"
    count = gets.to_i
end

count = test(count)

if count.nil?
  puts "test(count)の戻り値はnilです。"
else
  puts "test(count)の戻り値は#{count}です。"
end

「.nil?」はcount(レシーバ)の中身が「nil」の場合trueを返し、「nilでない」場合falseを返すメソッドです
例えば、ターミナルで実行して、24という数字を入れたとすると、

と表示されます。

上のコードでは予想通り、returnの記述がなくても戻り値は「nil」ではありませんでした。

では次はどうでしょう。
testメソッドの中にwhile文を入れて、10より大きい数字が入るまで、入力させ続けます。
そして、その戻り値が「nil」かどうかを判断します。

def test(count)
  while count <=10
    puts "10より大きい数字を入力してください。"
    count = gets.to_i
  end

end

count = 0
count = test(count)

if count.nil?
puts "test(count)の戻り値はnilです。"
else
puts "test(count)の戻り値は#{count}です。"
end

ターミナルで実行してみましょう。
今回は、「4→24」の順で入れてみます。（while文が機能しているか判断するため。）

なんと今回は戻り値が「nil」になりました！




次は、while文の後に「return count」を入れてみます。

def test(count)
  while count <=10
    puts "10より大きい数字を入力してください。"
    count = gets.to_i
  end
  return count   ←追加しました
end

count = 0
count = test(count)

if count.nil?
puts "test(count)の戻り値はnilです。"
else
puts "test(count)の戻り値は#{count}です。"
end

実行してみましょう。

当然のことながら、戻り値は「24」ですね。

4.　結果

さて、もう一度まとめてみましょう。
メソッドの戻り値が「nil」かどうかを判断しました。

順番	条件	結果
１	while文なし	戻り値：　24
2	while文あり　かつ　returnメソッドなし	戻り値：　nil
3	while文あり　かつ　returnメソッドあり	戻り値：　24

5.　考察

さて、上記の結果になりました。
ここからは、あくまで自分で考えた内容です。（信憑性はとても低いです）

Rubyは、メソッド内において式から得られる「値」をどこかに仮置きしているのではないか。
例えば、１の実験では

def test(count)
    puts "0より大きい数字を入力してください。"
    count = gets.to_i　　　　　　←ここで入力された値をどこかに仮置きしている。
end

count = test(count)

if count.nil?
  puts "test(count)の戻り値はnilです。"
else
  puts "test(count)の戻り値は#{count}です。"
end

１）　３行目で「値」をどこかに仮置きする。
２）　もしメソッドの中に次の式があれば、仮置きしている「値」を破棄し、その次の「値」をまた仮置きする。（今回はなし）
３）　メソッドが終わったら、一番最後に仮置きした「値」をメソッドの戻り値として返す。

と行った感じです。

ただ、メソッドの中にループ文がある場合は、ループから抜け出す時になぜかその仮置きしておいた「値」を破棄してしまうのではないか。
なぜかはわかりません。。。（考察になっていない？）

6.　結論

実は、このブログを書く前にいろいろと参考になるものはないかと探していたところ、答えになるものを見つけました。
Rubyのリファレンスマニュアルです。

https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html

この中のwhileに関する説明の一番下にこう書かれています。

while は nil を返します。

はっきり書かれてますね（笑）

なぜそういうふうになっているのかは書いてありませんが、そうなっているもんは仕方ない。
今回はそう割り切りましょう。

ということで、
結論は、「Rubyのルールでそうなっているから」です。

7.　感想

なんか予想外な感じになってしまいました。
でも、まあ、すっきりできたかな？




さて、気を取り直して、
今後学習を進めていくにあたって、事情がない限り、returnメソッドを書いておこうと思いました。
実は、"return count" と書かずに直接 "count" と書いても同じ結果になります。
でもそれだとその記述が何をしているのかわかりません。

ループの有無に関わらず、他のプログラマーのためにも、コードを見やすくしたり、そのメソッドが何をしているのかがわかりやすいように書いた方が良さそうです。

いかがだったでしょうか。
今回二回目の投稿ですが、学んだことは、
1)　疑問に思ったことは、自分で仮説を立てて、実験して、結果から自分なりの答えを出すことがとても大事ということ。
2)　その過程は実は楽しいこと。
3)　その過程の中でいろいろと調べるので、途中で答えが見つかることもあるということ。
4)　ブログという形でアウトプットすることは思った以上に緊張するし怖い部分があるが予想以上に学びがあること
です。

いいねをもらえたり、ストックしていただけるのもとても励みになります。
ありがとうございます。m(_ _)m

今回は以上です。ありがとうございました。

おまけ

リファレンスマニュアルに

また、引数を伴った break により while 式の戻り値をその値にすることもできます。

と書かれていたので調べてみました。

https://hydrocul.github.io/wiki/programming_languages_diff/control_flow/break.html#ruby

breakの後ろに数字あるいは変数を書くといいみたいです。

def test(count)
  while count <=10
    puts "10より大きい数字を入力してください。"
    count = gets.to_i
    break count   　←ここです
  end

end

count = 0
count = test(count)

if count.nil?
puts "test(count)の戻り値はnilです。"
else
puts "test(count)の戻り値は#{count}です。"
end

やってみましょう。

「nil」になりませんでした！

もうお気づきかもしれませんが、これには問題が。。。

そうです。ループされないんです。
ループの意味なし。
なんじゃこりゃ。。。。

ということで　本当におしまいです。ありがとうございました。

spreeで使われているfactorybot。
勉強のために切り抜きました。参考までに。

product_factory.rb

FactoryBot.define do
  factory :base_product, class: Spree::Product do
    sequence(:name)   { |n| "Product ##{n} - #{Kernel.rand(9999)}" }
    description       { generate(:random_description) }
    price             { 19.99 }
    cost_price        { 17.00 }
    sku               { generate(:sku) }
    available_on      { 1.year.ago }
    deleted_at        { nil }
    shipping_category { |r| Spree::ShippingCategory.first || r.association(:shipping_category) }

    # ensure stock item will be created for this products master
    before(:create) { create(:stock_location) unless Spree::StockLocation.any? }

    factory :custom_product do
      name  { 'Custom Product' }
      price { 17.99 }

      tax_category { |r| Spree::TaxCategory.first || r.association(:tax_category) }
    end

    factory :product do
      tax_category { |r| Spree::TaxCategory.first || r.association(:tax_category) }

      factory :product_in_stock do
        after :create do |product|
          product.master.stock_items.first.adjust_count_on_hand(10)
        end
      end

      factory :product_with_option_types do
        after(:create) { |product| create(:product_option_type, product: product) }
      end
    end
  end
end

taxon_factory.rb

FactoryBot.define do
  factory :taxon, class: Spree::Taxon do
    sequence(:name) { |n| "taxon_#{n}" }
    association(:taxonomy, strategy: :create)
    parent_id { taxonomy.root.id }
  end
end

taxonomy_factory.rb

FactoryBot.define do
  factory :taxonomy, class: Spree::Taxonomy do
    sequence(:name) { |n| "taxonomy_#{n}" }
  end
end

詳細は本家githubのファイルで。
https://github.com/spree/spree/tree/master/core/lib/spree/testing_support/factories

CarrierWaveでユーザーアイコンの実装をしていたのですが、デフォルト画像の表示で少し躓いてしまったのでメモしておきます。

前提

• CarrierWaveは導入済み
• 登録した画像表示はできる

image_uploader.rbの設定

CarrierWaveを入れたときに

$ rails g uploader image

をしたらimage_uploader.rbというファイルが生成されます。

このファイルを以下のようにいじってください。

image_uploader.rb

#アップロードした画像の表示
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

#デフォルト画像の設定
  # Provide a default URL as a default if there hasn't been a file uploaded:
  def default_url(*args)
  #   For Rails 3.1+ asset pipeline compatibility:
    ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  end

これで登録時にファイル選択をしなかった場合、デフォルト画像をimageとして渡す準備ができました。

assets/images配下に画像を設置

assets/images配下にデフォルト画像を設置してください。
画像名はこの場合「default.png」にしときましょう。

Viewの設定

Viewに、if文でユーザーのimageがある場合とない場合で表示が変わるように設定してあげましょう。

以下は例です。

_show.html.erb

<% if post.user.image? %>
  <img src='<%= post.user.image %>' class="icon" alt="ユーザーアイコン">
<% else %>
  <image src="/assets/default.png" class="icon" alt="ユーザーアイコン" %>
<% end %>

まとめ

CarrierWaveさんは非常に便利なのですが、デフォルト画像設置に関しては画像パスとして渡っているので、dbを調べてもnullとしか表示されず焦ってしまうというパターンがよくあるようです。

よく使う機能だとは思いますので、誰かの助けになれば幸いです。

ではでは。

Qiitaの新着記事をニュース感覚で聞き流せるwebアプリ【聞い太?】

Qiitaの新着記事をニュース感覚で聞き流せるwebアプリを作りました。

【聞い太?】
https://technews-app.herokuapp.com/

記事選択して▶️ボタンを押すと、選択した記事を読み上げます。(safariは一部制限あり)

また、記事タイトルやタグに関連する技術書を表示しています。

満員電車の中やながら作業も、インプット時間として有効活用出来ます★

新着順なので本家にはあまり出てこない記事も発見できるかも?

日々のスキルUPに是非?

使った技術

Ruby on Rails(6.0.2.1)
Ruby(2.6.4)
JavaScript / jquery
Heroku
S3
QiitaAPI
Web Speech API
Amazon Polly
Selenium Webdriverなど。

最近Sidekiqのダッシュボード（Sidekiq::Web）がエラーで表示されない現象が発生したので、調査結果と対応をまとめておきます。同じ現象に困っている人の参考になれば

バージョン

ライブラリ	バージョン
rails	5.2.2.1
sidekiq	5.2.5
redis	4.1.0
rack	2.0.8

エラー内容

マウントしたパスにアクセスすると、以下のRuntime Errorが出ます。どうやらRackのセッション周りでエラーになっているようです。

エラーが出たRailsアプリケーションではセッション管理にRedisを使っているのですが、試しに別の形式に変えるとエラーが消えました。

RuntimeError (Most recent call first)
Hide 33 non-project frames
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/session/abstract/id.rb line 31 in to_s
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/redis-session-store-0.11.0/lib/redis-session-store.rb line 87 in prefixed
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/redis-session-store-0.11.0/lib/redis-session-store.rb line 123 in set_session
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/session/abstract/id.rb line 381 in commit_session
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/session/abstract/id.rb line 261 in context
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/session/abstract/id.rb line 253 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/cookies.rb line 670 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/callbacks.rb line 28 in block in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/activesupport-5.2.2.1/lib/active_support/callbacks.rb line 98 in run_callbacks
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/callbacks.rb line 26 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rollbar-2.19.2/lib/rollbar/middleware/rails/rollbar.rb line 24 in block in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rollbar-2.19.2/lib/rollbar.rb line 146 in scoped
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rollbar-2.19.2/lib/rollbar/middleware/rails/rollbar.rb line 22 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/debug_exceptions.rb line 61 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rollbar-2.19.2/lib/rollbar/middleware/rails/show_exceptions.rb line 22 in call_with_rollbar
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/show_exceptions.rb line 33 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/railties-5.2.2.1/lib/rails/rack/logger.rb line 38 in call_app
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/railties-5.2.2.1/lib/rails/rack/logger.rb line 28 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/remote_ip.rb line 81 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/request_store-1.4.1/lib/request_store/middleware.rb line 19 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/request_id.rb line 27 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/method_override.rb line 22 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/runtime.rb line 22 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/activesupport-5.2.2.1/lib/active_support/cache/strategy/local_cache_middleware.rb line 29 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/actionpack-5.2.2.1/lib/action_dispatch/middleware/executor.rb line 14 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/rack-2.0.8/lib/rack/sendfile.rb line 111 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/railties-5.2.2.1/lib/rails/engine.rb line 524 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/stackprof-0.2.12/lib/stackprof/middleware.rb line 22 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/puma-3.12.2/lib/puma/configuration.rb line 227 in call
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/puma-3.12.2/lib/puma/server.rb line 674 in handle_request
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/puma-3.12.2/lib/puma/server.rb line 476 in process_client
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/puma-3.12.2/lib/puma/server.rb line 334 in block in run
File /var/www/app/vendor/bundle/ruby/2.6.0/gems/puma-3.12.2/lib/puma/thread_pool.rb line 135 in block in spawn_thread

Sidekiqのセッションを無効にしてみる

セッション周りっぽいので、とりあえずSidekiqのセッションを無効にしてみます。

diff --git a/config/routes/admin.rb b/config/routes/admin.rb
index 218cdc9960..a4a40e4195 100644
--- a/config/routes/admin.rb
+++ b/config/routes/admin.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true

 require 'sidekiq/web'
-Sidekiq::Web.set :session_secret, Rails.application.secrets[:secret_key_base]
+Sidekiq::Web.set :sessions, false # 上の一行をこちらに書き換えてセッションを無効化

 Rails.application.routes.draw do
   ActiveAdmin.routes(self)

無事表示されました。引き続き調べます。

rack/rack#1432

調べていくとRackに関係のありそうなIssueが上がっているのを見つけました。
https://github.com/rack/rack/issues/1432

どうやら2.0.8のセキュリティフィックスで仕様が変わり不具合が起こるようになったとのこと。以下のコミットで解消されており、修正は2.0.9に含まれているようです。
https://github.com/rack/rack/pull/1462

ということで、Rackのバージョンを上げれば良さそうなので上げてみます。

$ bundle update rack

バージョンが2.0.8から2.0.9に上がりエラーが解消されました。やったね

概要

DBのユニーク制約だけを行なっていた状態から、ユニーク制約の validates メソッドを書いたときにエラーハンドリングで少しはまったので共有です。

解説

DBのユニーク制約のみがかかっているとき

user.rb

# == Schema Information
#
# Table name: users
#
#  id         :bigint(8)        not null, primary key
#  name      :string(255)      not null
#  created_at :datetime         not null
#  updated_at :datetime         not null
#
# Indexes
#
#  index_users_on_name    (name) UNIQUE
#

class User < ApplicationRecord
end

ActiveRecord::RecordNotUnique が raise されます

sample.rb

User.create!(name: 'Duplication')
User.create!(name: 'Duplication')

=> ActiveRecord::RecordNotUnique

ユニーク制約の validates メソッドがあるとき

user.rb

# == Schema Information
#
# Table name: users
#
#  id         :bigint(8)        not null, primary key
#  name      :string(255)      not null
#  created_at :datetime         not null
#  updated_at :datetime         not null
#
# Indexes
#
#  index_users_on_name    (name) UNIQUE
#

class User < ApplicationRecord
  validates :name, uniqueness: true # 追加
end

ActiveRecord::RecordInvalid が raise されます

sample.rb

User.create!(name: 'Duplication')
User.create!(name: 'Duplication')

=> ActiveRecord::RecordInvalid

注意点

例えば下記のようにユニーク制約に引っかかったときの例外処理を書いているコードがあるときは validates メソッドでユニーク制約をかけると ActiveRecord::RecordNotUnique ではキャッチできなくなるので注意です。

sample.rb

begin
  User.create!(name: 'Duplication')
rescue ActiveRecord::RecordNotUnique
  head :conflict
end