【Ruby on Rails】お問い合わせ機能を実装する方法

# テーマ
- RubyonRailsでお問い合わせ機能を実装する方法

#はじめに
- お問い合わせ内容をGmailアドレスで受け取る方法を記載しています

- ローカル環境でお問い合わせ機能を実装するための記載になります（後日、本番環境追記します）

- `環境変数の設定`と`Googleセキュリティ設定`が必要が必要です。こちらに関しては、URLを参照願います。

# 環境
- Ruby 2.6.5
- Rails 6.0.3.6
- Visual Studio Code
- ターミナル
- ローカル環境

# 実装の流れを把握する
- モデル作成
- コントローラー作成
- ルーティング
- viewファイル作成
- ActionMailer作成
- メール本文のレイアウト作成後、previewする
- Gmailアドレスへ送信するための設定
- 実際に送信してみる

# モデル作成
以下を順番に実行します

```
% rails g model inquiry name:string message:string
% rails db:migrate
```
# コントローラー作成
以下を実行します

```
% rails g controller inquiries
```
色々なファイルが生成されたと思いますが「inquiries_controller.rb」に以下を記述します。

```ruby:inquiries_controller.rb
class InquiriesController < ApplicationController
  before_action :authenticate_user!, only: [:new, :create]

  def new
    @inquiry = Inquiry.new
  end

  def create
    @inquiry = Inquiry.new(inquiry_params)
    if @inquiry.save #保存処理
      InquiryMailer.send_mail(@inquiry).deliver_now #メール送信処理
      redirect_to root_path
    else
      render :new
    end
  end

  private

  def inquiry_params
    params.require(:inquiry).permit(:name, :message)
  end
end
```

# ルーティング
以下を記述します

```ruby:routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: "tweets#index"
  resources :inquiries, only: [:new, :create] #この行を追記する
  resources :users,     only:  :show
  resources :tweets,    only: [:new, :create, :edit, :update, :destroy] do
    member do
      get 'search'
    end
  end
end

```

# viewファイルを作成します

`app/views/inquiries/`へ`new.html.erb`を作成します

```ruby:app/views/inquiries/new.html.erb

      <h2 class="page-heading">お問い合わせ内容</h2>
     

      <%= form_with model: @inquiry, local: true do |f| %>
        
        <div class="field">
          <%= f.label :name, "ニックネーム"%><br />
          <%= f.text_field :name%>
        </div>

        <div class="field">
          <%= f.label :message, "お問い合わせ内容"%><br />
          <%= f.text_area :message, class: :form__text %>
        </div>

        <div class ="actions">
          <%= f.submit "送信", class: :form__btn %>
        </div>

      <%end%>
```

※class名とcssはご自身で設定お願いします。


# ActionMailerを作成

以下を実行します

```
% rails g mailer inquiry
```

色々なファイルが生成されたかと思います。

次に、「app/mailers/inquiry_mailer.rb」を編集します。

```ruby:app/mailers/inquiry_mailer.rb
class InquiryMailer < ApplicationMailer
  def send_mail(inquiry)
    @inquiry = inquiry
    mail to: system@example.com, subject: 'お問い合わせ通知'
  end
end

```

# メール本文のレイアウトを作成後、previewする
メール本文のレイアウトを作成するためは、以下の命名規則にしたがってerbファイルを作成します。

`app/views/{メイラー名}_mailer/{メイラークラスのメソッド名}.text.erb`

よって、「app/views/inquiry_mailer/send_mail.text.erb」を作成しましょう。

```send_mail.text.erb
<%= @inquiry.name %> 様 から問い合わせがありました。
・お問い合わせ内容
<%= @inquiry.message %>
```
`受信するとこんな感じで表示される`
<img width="300" alt="自分のメアド.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1345348/26168aaf-26ee-6fc6-d6c0-6c0cb61eb558.png">

`とはいえ、現段階で受信することはできないので、preview機能を使って確認してみる。`

以下のファイルに記述していく。

```spec/mailers/previews/inquiry_mailer_preview.rb
# Preview all emails at http://localhost:3000/rails/mailers/inquiry
class InquiryPreview < ActionMailer::Preview
  def inquiry
    @inquiry = Inquiry.new(name: "何食べる太郎", message: "問い合わせテストメッセージ")

    InquiryMailer.send_mail(@inquiry)
  end
end

```

実際にpreviewしてみます

```
% rails s
```

サーバー起動後、`inquiry_mailer_preview.rb`に元から記載されているURLをコピペしアクセスします。
`http://localhost:3000/rails/mailers/inquiry`

このように表示されるかと思います
![action_mailer_preview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1345348/72676b1f-2289-815a-8790-c20b158c4855.png)

`inquiry`をクリックします。

<img width="300" alt="本文を追加.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1345348/1cdb2f37-2234-d2bc-4f8c-cc984c8bc0f8.png">

以上で、無事メール本文を作成し、previewで確認することができました。

# Gmailアドレスへ送信するための設定

メールサーバーを設定していきます

以下のファイル、こちらを追記しましょう

```config/environments/development.rb
#メールサーバーの設定
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
 address:              'smtp.gmail.com',
 port:                  587,
 domain:               'gmail.com',
 user_name:            'お問い合わせを受信したいgmailメールアドレス',
 password:             'gmailアドレスに対するパスワード',
 authentication:       'plain',
 enable_starttls_auto:  true
}
```

そして、以下を修正します

```app/mailers/inquiry_mailer.rb

class InquiryMailer < ApplicationMailer
  def send_mail(inquiry)
    @inquiry = inquiry
    mail to: 'お問い合わせを受信したいgmailメールアドレス', subject: 'お問い合わせ通知'
  end
end

```

# 実際に送信してみる

`http://localhost:3000/inquiries/new`こちらにアクセスして実際にフォームを送信してみましょう。

<img width="300" alt="fc1f04bbef65553cbc37fd19973d8b73.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1345348/5ece6347-7716-35b2-cc3d-364cc6c3fd98.png">

実際に送信できたかと思います…が、

Googleアカウントにアクセスすると警告文が表示されると思います。

### `要因としてはセキュリティの甘さが考えられます。`

### `対策として`
- 自分のGmailアドレスを環境変数に設定すること

https://qiita.com/yuichir43705457/items/7cfcae6546876086b849

- Googleアカウントのセキュリティを強化すること

https://qiita.com/YuruFuwaFox/items/b6817856ae4fa2e39f7a

こちらの記事を参考にさせていただいた所、問題解決できましたので試してみてください。