LoginSignup
0
1

More than 3 years have passed since last update.

@Takayuki_K

Dockerを使ったRuby on Railsで問い合わせフォームの作成

Posted at

問い合わせ機能の実装

自分向け個人的な備忘録。
開発環境はDockerを使用。
view画面ではhamlを使用。
行う順序としては

  1. routesの設定
  2. コントローラーの設定
  3. 問い合わせフォーム作成
    1. モデルの作成
    2. viewの作成
  4. 問い合わせフォームのMailers

1. route設定

  • scaffoldでcontactsのCRUDを作成する。
$docker-compose run web rails g scaffold contacts

$docker-compose run web rake db:migrate

/app/views/contactsフォルダの中に、

・confirm.html.haml
・thanks.html.haml

を作成する。

config/routes.rb
resources :contacts

となっているので

config/routes.rb
resources :contacts do
    collection do
      post 'confirm'
      post 'thanks'
    end
  end

とmethodを追記する。

2. コントローラーの設定

コントローラー画面では3つの項目を追加。

/app/controllers/contacts_controller.rb
def index
    # 入力画面を表示
    @contacts = Contact.new
    render :action => 'index'
  end

  def confirm
    @contacts = Contact.new(contact_params)
    if @contacts.valid?
      # OK。確認画面を表示
      render :action => 'confirm'
    else
      # NG。入力画面を再表示
      render :action => 'index'
    end
  end

  def thanks
    # メール送信
    @contacts = Contact.new(params[:contact])
    ContactMailer.registration_confirmation(@contacts).deliver

    # 完了画面を表示
    render :action => 'thanks'
  end

    # パラメーター取得
  def contact_params
      params.fetch(:contact, {}).permit(:id, :terminal, :email, :phone, :message)
  end

valid?はValidationの事だそうで、検証した結果を出している模様。

バリデーションに関してはモデルで、
Mailerに関してはメーラークラスで後ほど追記する。

3. お問い合わせフォームの作成

1. モデルの作成

フォームで取得するパラメーター、Validationエラーコードを記載する。

/app/models/contact.rb
class Contact < ApplicationRecord
    include ActiveModel::Model

    attr_accessor :id, :terminal, :email, :phone, :message

    validates :id, :presence => {:message => 'IDを入力してください'}
    validates :email, :presence => {:message => 'メールアドレスを入力してください'}
    validates :message, :presence => {:message => '内容を入力してください'}
end

データベースを使わないモデルなのでActiveModelを使って作るらしい。

attr_accesorの中にパラメーターを、必須入力にしたい項目をvalidatesを使って設定する。

2. viewの作成

ページに表示させる部分を作成していく。

/app/views/contacts/index.html.haml
= form_for(@contacts, :url => {:controller => :contacts, :action => :confirm}) do |f|
  .contact-area
    .contact-contents-title
      %h1 お問い合わせ
     - if @contacts.errors.any?
       .alert.alert-danger{:role => "alert"}
         %strong 入力内容にエラーがあります
         %ul
           - @contacts.errors.each do |attr, msg|
             %li
               = msg
    .contact-wrapper
      .contact-contents
        %table.table.table-dark.table-bordered
          %thead
            %tr
              %td.contact-text1
                あなたのID
                %span.contact-text2 ※必須
              %td.input-area
                = f.text_field :id, :size => "40"
            %tr
              %td.contact-text1 利用している端末
              %td.input-area
                = f.text_field :terminal, :size => "40"
            %tr
              %td.contact-text1 
                メールアドレス
                %span.contact-text2 ※必須
              %td.input-area
                = f.text_field :email, :size => "40"
            %tr
              %td.contact-text1 電話番号
              %td.input-area
                = f.text_field :phone, :size => "40"
            %tr
              %td.contact-text1 
                内容
                %span.contact-text2 ※必須
              %td.input-area
                = f.text_area :message, :class => "input-item", :size => "39x9""
        .actions.btn-wrapper
          = f.submit 'CONFIRM', class:'button btn-lg'

= form_for @contacts, :url => contacts_confirm_path do |f|

のようなパス指定でもいけるようだが、どうしてもエラーが出るので

= form_for(@contacts, :url => {:controller => :contacts, :action => :confirm}) do |f|
コントローラーのアクション指定に変更した。

  • f.text-fieldとf.text-areaの引数設定に苦戦したので引数を記載しておく。

f.text-field

メソッド 要素
class cssのクラスの指定
size フォームの幅を指定
maxlength 入力可能な最大文字数の指定

f.text-area

メソッド 要素
class cssのクラスの指定
size フォームの幅を指定(幅x行)
maxlength 入力可能な最大文字数の指定
/app/views/contacts/confirm.html.haml
.contact-area
  .contact-contents-title
    %h1 お問い合わせ
  .contact-wrapper
    .contact-contents

      = form_for(@contacts, :url => {:controller => :contacts, :action => :thanks}) do |f|
        %table.table.table-dark.table-bordered
          %thead
            %tr
              %td.contact-text1
                あなたのID
                %span.contact-text2
              %td.input-area
                = f.hidden_field :id
                = @contacts.id
            %tr
              %td.contact-text1 利用している端末
              %td.input-area
                = f.hidden_field :terminal
                = @contacts.terminal
            %tr
              %td.contact-text1 
                メールアドレス
                %span.contact-text2
              %td.input-area
                = f.hidden_field :email
                = @contacts.email
            %tr
              %td.contact-text1 電話番号
              %td.input-area
                = f.hidden_field :phone
                = @contacts.phone
            %tr
              %td.contact-text1 
                内容
                %span.contact-text2
              %td.input-area
                = f.hidden_field :message
                = simple_format(@contacts.message)
        .actions.btn-wrapper
          = f.submit 'SUBMIT', class:'button btn-lg'
/app/views/contacts/thanks.html.haml
.contact-area
  .contact-contents-title
    %h1 お問い合わせ
  %p
    お問い合わせ頂きありがとうございました

4. 問い合わせフォームのMailers

先程コントローラーで指定したMailer部分を行なっていく。

Action Mailerは、メールを生成し、メールサーバーへ送信を指示する「仲介」を行ってくれる機能だそうだ。
なのでまずは使用するメールサーバーに合わせて、設定をしておく必要がある。

config/environments/にファイルを作ることが多いが、メーラーのパスワード指定があるので、
config/initializers/にファイルを作成する。

/config/initializers
ActionMailer::Base.delivery_method = :smtp
ActionMailer::Base.smtp_settings = {
  address: 'smtp.gmail.com',
  domain: 'gmail.com',
  port: 587,
  user_name: 'メールアドレス',
  password: 'パスワード',
  authentication: 'plain',
  enable_starttls_auto: true
}

メールアドレスとパスワードは、権限を持っているGmailアカウントのものを設定する。

Gmailを利用する場合、Googleのセキュリティ対策のため、Railsアプリケーションからメール送信を行おうとすると、ブロックされる。
なので、Gmail側でアカウント->セキュリティ->安全性の低いアプリのアクセスで
安全性の低いアプリの許可を有効にする。

次にMailerに必要なファイルを生成する。

$docker-compose run web rails g mailer contact_mailer registration_confirmation

上記コマンドをターミナルに打ち込むと

/app/mailers/フォルダに
・contact_mailer.rb
　　メール送信に使うクラス（ContactMailer）のファイル。

/app/views/contact_mailer_mailerに
・registration_confirmation.haml
　　メール本文のテンプレートファイル。html形式

・registration_confirmation.text.haml.text.rb
　　メール本文のテンプレートファイル。text形式

が生成される。

フォルダ名をcontact_mailer_mailerから
contact_mailerに変更する。

Mailerを下記のように書く。

/app/mailers/contact_mailer.rb
class ContactMailer < ActionMailer::Base
  default from:"xxxx@xxxxxx" # 送信元アドレス

  def registration_confirmation(contact)
    @contacts = contact
    mail(
      subject: 'お問い合わせを承りました' , #件名
      to: 'xxxx@xxxxxx' #送信先アドレス
      )
  end
end
/app/views/contact_mailer/registration_confirmation.haml
%p
  Webサイトからお問い合わせがありました。

%p
  あなたのID: 
  = @contacts.id
%p
  利用している端末: 
  = @contacts.terminal
%p
  メールアドレス: 
  = @contacts.email
%p
  電話番号: 
  = @contacts.phone
%p
  内容: 
  = @contacts.message
/app/views/contact_mailer/registration_confirmation.text.haml.text.rb
Webサイトからお問い合わせがありました。

========================
あなたのID: 
= @contacts.id
利用している端末: 
= @contacts.terminal
メールアドレス: 
= @contacts.email
電話番号: 
= @contacts.phone
内容: 
= @contacts.message
========================

メールの送信形式をtext形式にしたければ前者、html形式にしたければ、後者を作成する。
両方あった場合は、メーラーは両方をまとめたメール（マルチパートメール）を送付し、受信する相手の環境に合わせてどちらかが表示される。

問い合わせフォームページから、各項目を入力し、
フォームを送信し、フォーム内容がメールに届いている事を確認する。

以上になる。

参考にしたページ

https://www.imd-net.com/column/1731/
https://web-camp.io/magazine/archives/19143

0
1
0

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
Sign upLogin
0
1