Go to Qiita Advent Calendar 2024 Top
LoginSignup
57
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@na0AaooQ(青木 直之)in株式会社LIFULL

Ruby on Rails 5 で問い合わせフォーム作成 (問い合わせ内容をメールで送信 + ChatWorkで通知する)

Last updated at Posted at 2017-03-12

はじめに

Ruby on Rails 5.0.2 で問い合わせフォーム(入力フォーム)を作成する手順を記します。

問い合わせフォームで入力された問い合わせ内容について、メールとChatWorkで通知する設定も合わせて記します。

　・指定したメールアドレスに対して、問い合わせ内容をメールで送信します。
　・Rails 5 から ChatWork API を使用し、問い合わせ内容をChatWorkメッセージで通知します。

実行環境

問い合わせフォームを実行する環境としては、Amazon EC2インスタンス(Amazon Linux)にRuby on Rails 5をインストールして用意しました。

インストールしたRubyとRailsのバージョンは以下になります。

[root@example-ruby-rails-server ~]# ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-linux]
[root@example-ruby-rails-server ~]# 

[root@example-ruby-rails-server ~]# rails -v
Rails 5.0.2
[root@example-ruby-rails-server ~]#

Amazon Linuxのバージョンは以下になります。

[root@example-ruby-rails-server ~]# uname -a
Linux example-ruby-rails-server 4.4.51-40.58.amzn1.x86_64 #1 SMP Tue Feb 28 21:57:17 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux
[root@example-ruby-rails-server ~]#

参考資料

・Ruby on Rails 5の実行環境については、以下の手順を参考にして作成しました。
Amazon LinuxにRuby on Rails環境構築(rbenv + ruby-build + Ruby 2.2.1 + Rails 4.2.1インストール)

・ChatWork APIの使用方法については、以下の資料を参考にさせて頂きました。ありがとうございました。
チャットワーク APIドキュメント

・問い合わせフォーム作成については、以下のサイトを参考にさせて頂きました。ありがとうございました。
Ruby on Rails 4 でお問い合わせフォーム（確認画面つき）を作成する

作成した問い合わせフォーム用プログラムについて

今回の問い合わせフォーム作成にあたり、Ruby on Rails 5サーバに以下のファイルを作成・変更しました。

/home/rails/inquiry-notice-chatwork/app/controllers/inquiry_controller.rb
/home/rails/inquiry-notice-chatwork/app/models/inquiry.rb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/index.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/confirm.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/thanks.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry_mailer/received_email.text.erb
/home/rails/inquiry-notice-chatwork/app/mailers/inquiry_mailer.rb
/home/rails/inquiry-notice-chatwork/config/routes.rb
/home/rails/inquiry-notice-chatwork/config/environments/development.rb
/home/rails/inquiry-notice-chatwork/app/models/inquiry_chatwork.rb
/home/rails/inquiry-notice-chatwork/app/assets/stylesheets/inquiry.scss 
/home/rails/inquiry-notice-chatwork/config/application.rb

作成した問い合わせフォーム用プログラムのGitHubリポジトリ

作成した問い合わせフォーム用プログラムは以下のGitHubリポジトリに保存しました。

[rails@example-ruby-rails-server ~]$ git clone https://github.com/na0AaooQ/inquiry-notice-chatwork.git

Ruby on Rails 5 アプリケーション作成手順

(1) Amazon LinuxのEC2インスタンスを作成し、Ruby on Rails 5サーバを構築します。

以下の手順を参考にしながら、Ruby 2.4.0p0, Rails 5.0.2 をインストールします。

Amazon LinuxにRuby on Rails環境構築(rbenv + ruby-build + Ruby 2.2.1 + Rails 4.2.1インストール)

yumでパッケージを追加インストールします。

[root@example-ruby-rails-server ~]# yum install mail

(2) Railsアプリケーション用ユーザを作成します。

railsユーザを追加します。

[root@example-ruby-rails-server ~]# cp -p /etc/passwd /etc/passwd.ORG
[root@example-ruby-rails-server ~]# cp -p /etc/shadow /etc/shadow.ORG
[root@example-ruby-rails-server ~]# cp -p /etc/group  /etc/group.ORG
[root@example-ruby-rails-server ~]# groupadd rails
[root@example-ruby-rails-server ~]# useradd rails -g rails -d /home/rails -s /bin/bash
[root@example-ruby-rails-server ~]# id rails
uid=501(rails) gid=501(rails) groups=501(rails)
[root@example-ruby-rails-server ~]#

railsユーザにsudo権限もつけておきます。

[root@example-ruby-rails-server ~]# echo "rails ALL=(ALL) NOPASSWD:ALL" > /etc/sudoers.d/rails
[root@example-ruby-rails-server ~]# chown root:root /etc/sudoers.d/rails
[root@example-ruby-rails-server ~]# chmod 644 /etc/sudoers.d/rails

[root@example-ruby-rails-server ~]# ll /etc/sudoers.d/rails
-rw-r--r-- 1 root root 29 Mar  2 22:59 /etc/sudoers.d/rails
[root@example-ruby-rails-server ~]# 

[root@example-ruby-rails-server ~]# cat /etc/sudoers.d/rails
rails ALL=(ALL) NOPASSWD:ALL
[root@example-ruby-rails-server ~]#

(3) 問い合わせフォーム用のRailsアプリケーションを作成します。

今回の例では inquiry-notice-chatwork という名前で作成します。

railsユーザにスイッチして、rails newを実行します。

[root@example-ruby-rails-server ~]# su - rails
Last login: Sat Mar 11 20:20:35 JST 2017 on pts/2
[rails@example-ruby-rails-server ~]$ id
uid=501(rails) gid=501(rails) groups=501(rails)
[rails@example-ruby-rails-server ~]$ pwd
/home/rails
[rails@example-ruby-rails-server ~]$

[rails@example-ruby-rails-server ~]$ rails new inquiry-notice-chatwork --skip-bundle
      create  
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
      create  Gemfile
      create  app
      create  app/assets/config/manifest.js
      create  app/assets/javascripts/application.js
      create  app/assets/javascripts/cable.js
      create  app/assets/stylesheets/application.css
      create  app/channels/application_cable/channel.rb
      create  app/channels/application_cable/connection.rb
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/jobs/application_job.rb
      create  app/mailers/application_mailer.rb
      create  app/models/application_record.rb
      create  app/views/layouts/application.html.erb
      create  app/views/layouts/mailer.html.erb
      create  app/views/layouts/mailer.text.erb
      create  app/assets/images/.keep
      create  app/assets/javascripts/channels
      create  app/assets/javascripts/channels/.keep
      create  app/controllers/concerns/.keep
      create  app/models/concerns/.keep
      create  bin
      create  bin/bundle
      create  bin/rails
      create  bin/rake
      create  bin/setup
      create  bin/update
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/secrets.yml
      create  config/cable.yml
      create  config/puma.rb
      create  config/spring.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/application_controller_renderer.rb
      create  config/initializers/assets.rb
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/cookies_serializer.rb
      create  config/initializers/cors.rb
      create  config/initializers/filter_parameter_logging.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/new_framework_defaults.rb
      create  config/initializers/session_store.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  lib
      create  lib/tasks
      create  lib/tasks/.keep
      create  lib/assets
      create  lib/assets/.keep
      create  log
      create  log/.keep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/apple-touch-icon-precomposed.png
      create  public/apple-touch-icon.png
      create  public/favicon.ico
      create  public/robots.txt
      create  test/fixtures
      create  test/fixtures/.keep
      create  test/fixtures/files
      create  test/fixtures/files/.keep
      create  test/controllers
      create  test/controllers/.keep
      create  test/mailers
      create  test/mailers/.keep
      create  test/models
      create  test/models/.keep
      create  test/helpers
      create  test/helpers/.keep
      create  test/integration
      create  test/integration/.keep
      create  test/test_helper.rb
      create  tmp
      create  tmp/.keep
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor/assets/javascripts
      create  vendor/assets/javascripts/.keep
      create  vendor/assets/stylesheets
      create  vendor/assets/stylesheets/.keep
      remove  config/initializers/cors.rb
[rails@example-ruby-rails-server ~]$

(4) 問い合わせフォーム用アプリケーションにGemを追加します。

[rails@example-ruby-rails-server ~]$ cd /home/rails/inquiry-notice-chatwork/
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ ls -lrta
total 68
-rw-rw-r--  1 rails rails  374 Mar 12 02:17 README.md
-rw-rw-r--  1 rails rails  227 Mar 12 02:17 Rakefile
-rw-rw-r--  1 rails rails  543 Mar 12 02:17 .gitignore
-rw-rw-r--  1 rails rails 1880 Mar 12 02:17 Gemfile
-rw-rw-r--  1 rails rails  130 Mar 12 02:17 config.ru
drwx------ 15 rails rails 4096 Mar 12 02:17 ..
drwxrwxr-x 10 rails rails 4096 Mar 12 02:17 app
drwxr-xr-x  2 rails rails 4096 Mar 12 02:17 bin
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 db
drwxrwxr-x  5 rails rails 4096 Mar 12 02:17 config
drwxrwxr-x  8 rails rails 4096 Mar 12 02:17 test
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 public
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 log
drwxrwxr-x  4 rails rails 4096 Mar 12 02:17 lib
drwxrwxr-x  3 rails rails 4096 Mar 12 02:17 vendor
drwxrwxr-x  3 rails rails 4096 Mar 12 02:17 tmp
drwxrwxr-x 12 rails rails 4096 Mar 12 02:17 .
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server ~]$ cd /home/rails/inquiry-notice-chatwork/
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ ls -lrta
total 68
-rw-rw-r--  1 rails rails  374 Mar 12 02:17 README.md
-rw-rw-r--  1 rails rails  227 Mar 12 02:17 Rakefile
-rw-rw-r--  1 rails rails  543 Mar 12 02:17 .gitignore
-rw-rw-r--  1 rails rails 1880 Mar 12 02:17 Gemfile
-rw-rw-r--  1 rails rails  130 Mar 12 02:17 config.ru
drwx------ 15 rails rails 4096 Mar 12 02:17 ..
drwxrwxr-x 10 rails rails 4096 Mar 12 02:17 app
drwxr-xr-x  2 rails rails 4096 Mar 12 02:17 bin
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 db
drwxrwxr-x  5 rails rails 4096 Mar 12 02:17 config
drwxrwxr-x  8 rails rails 4096 Mar 12 02:17 test
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 public
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 log
drwxrwxr-x  4 rails rails 4096 Mar 12 02:17 lib
drwxrwxr-x  3 rails rails 4096 Mar 12 02:17 vendor
drwxrwxr-x  3 rails rails 4096 Mar 12 02:17 tmp
drwxrwxr-x 12 rails rails 4096 Mar 12 02:17 .
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cp -p /home/rails/inquiry-notice-chatwork/Gemfile /home/rails/inquiry-notice-chatwork/Gemfile.ORG
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ diff /home/rails/inquiry-notice-chatwork/Gemfile /home/rails/inquiry-notice-chatwork/Gemfile.ORG
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ tail /home/rails/inquiry-notice-chatwork/Gemfile
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

rails@example-ruby-rails-server inquiry-notice-chatwork]$ sed -i -e "/\# Windows does not include zoneinfo files, so bundle the tzinfo-data gem/d" /home/rails/inquiry-notice-chatwork/Gemfile
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ sed -i -e "/gem 'tzinfo-data', platforms: \[:mingw, :mswin, :x64_mingw, :jruby\]/d" /home/rails/inquiry-notice-chatwork/Gemfile
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ echo "gem 'therubyracer'" >> /home/rails/inquiry-notice-chatwork/Gemfile
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ tail /home/rails/inquiry-notice-chatwork/Gemfile
group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem 'therubyracer'
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ diff /home/rails/inquiry-notice-chatwork/Gemfile /home/rails/inquiry-notice-chatwork/Gemfile.ORG
52c52,53
< gem 'therubyracer'
---
> # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
> gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/Gemfile
source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem 'therubyracer'
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ bundle config build.nokogiri --use-system-libraries
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ bundle install --path=/home/rails/inquiry-notice-chatwork/vendor/bundle
Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Installing rake 12.0.0
Installing concurrent-ruby 1.0.5
Installing i18n 0.8.1
Installing minitest 5.10.1
Installing thread_safe 0.3.6
Installing builder 3.2.3
Installing erubis 2.7.0
Installing mini_portile2 2.1.0
Installing rack 2.0.1
Installing nio4r 2.0.0 with native extensions
Installing websocket-extensions 0.1.2
Installing mime-types-data 3.2016.0521
Installing arel 7.1.4
Using bundler 1.14.5
Installing byebug 9.0.6 with native extensions
Installing coffee-script-source 1.12.2
Installing execjs 2.7.0
Installing method_source 0.8.2
Installing thor 0.19.4
Installing debug_inspector 0.0.2 with native extensions
Installing ffi 1.9.18 with native extensions
Installing multi_json 1.12.1
Installing libv8 3.16.14.19 (x86_64-linux)
Installing rb-fsevent 0.9.8
Installing puma 3.8.1 with native extensions
Installing ref 2.0.0
Installing sass 3.4.23
Installing tilt 2.0.6
Installing sqlite3 1.3.13 with native extensions
Installing turbolinks-source 5.0.0
Installing tzinfo 1.2.2
Installing nokogiri 1.7.0.1 with native extensions
Installing rack-test 0.6.3
Installing sprockets 3.7.1
Installing websocket-driver 0.6.5 with native extensions
Installing mime-types 3.1
Installing coffee-script 2.4.1
Installing uglifier 3.1.6
Installing rb-inotify 0.9.8
Installing therubyracer 0.12.3 with native extensions
Installing turbolinks 5.0.1
Installing activesupport 5.0.2
Installing loofah 2.0.3
Installing mail 2.6.4
Installing listen 3.0.8
Installing rails-dom-testing 2.0.2
Installing globalid 0.3.7
Installing activemodel 5.0.2
Installing jbuilder 2.6.3
Installing spring 2.0.1
Installing rails-html-sanitizer 1.0.3
Installing activejob 5.0.2
Installing activerecord 5.0.2
Installing spring-watcher-listen 2.0.1
Installing actionview 5.0.2
Installing actionpack 5.0.2
Installing actioncable 5.0.2
Installing actionmailer 5.0.2
Installing railties 5.0.2
Installing sprockets-rails 3.2.0
Installing coffee-rails 4.2.1
Installing jquery-rails 4.2.2
Installing web-console 3.4.0
Installing rails 5.0.2
Installing sass-rails 5.0.6
Bundle complete! 15 Gemfile dependencies, 65 gems now installed.
Bundled gems are installed into ./vendor/bundle.
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(5) 問い合わせフォーム用アプリケーションに追加したGemを確認します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ gem list

*** LOCAL GEMS ***

actioncable (5.0.2)
actionmailer (5.0.2)
actionpack (5.0.2)
actionview (5.0.2)
activejob (5.0.2)
activemodel (5.0.2)
activerecord (5.0.2)
activesupport (5.0.2)
arel (7.1.4)
bigdecimal (default: 1.3.0)
builder (3.2.3)
bundler (1.14.5)
byebug (9.0.6)
coffee-script-source (1.12.2)
concurrent-ruby (1.0.5)
debug_inspector (0.0.2)
did_you_mean (1.1.0)
erubis (2.7.0)
execjs (2.7.0)
globalid (0.3.7)
i18n (0.8.1)
io-console (default: 0.4.6)
json (default: 2.0.2)
loofah (2.0.3)
mail (2.6.4)
method_source (0.8.2)
mime-types (3.1)
mime-types-data (3.2016.0521)
mini_portile2 (2.1.0)
minitest (5.10.1)
net-telnet (0.1.1)
nio4r (2.0.0)
nokogiri (1.7.0.1)
openssl (default: 2.0.2)
power_assert (0.4.1)
psych (default: 2.2.2)
rack (2.0.1)
rack-test (0.6.3)
rails (5.0.2)
rails-dom-testing (2.0.2)
rails-html-sanitizer (1.0.3)
railties (5.0.2)
rake (12.0.0)
rdoc (default: 5.0.0)
rubygems-update (2.6.10)
sprockets (3.7.1)
sprockets-rails (3.2.0)
test-unit (3.2.3)
thor (0.19.4)
thread_safe (0.3.6)
tzinfo (1.2.2)
websocket-driver (0.6.5)
websocket-extensions (0.1.2)
xmlrpc (0.2.1)
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

Ruby on Rails 5 問い合わせフォーム作成

(6) 問い合わせフォーム用コントローラクラスのテンプレートを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ rails generate controller inquiry
      create  app/controllers/inquiry_controller.rb
      invoke  erb
      create    app/views/inquiry
      invoke  test_unit
      create    test/controllers/inquiry_controller_test.rb
      invoke  helper
      create    app/helpers/inquiry_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/inquiry.coffee
      invoke    scss
      create      app/assets/stylesheets/inquiry.scss
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ ls -lrta /home/rails/inquiry-notice-chatwork/app/controllers/
total 20
-rw-rw-r--  1 rails rails   97 Mar 12 02:17 application_controller.rb
drwxrwxr-x 10 rails rails 4096 Mar 12 02:17 ..
drwxrwxr-x  2 rails rails 4096 Mar 12 02:17 concerns
-rw-rw-r--  1 rails rails   52 Mar 12 02:24 inquiry_controller.rb
drwxrwxr-x  3 rails rails 4096 Mar 12 02:24 .
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/app/controllers/inquiry_controller.rb 
class InquiryController < ApplicationController
end
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(7) 問い合わせフォーム用コントローラクラスを作成します。

問い合わせフォーム用コントローラクラスに以下を記述します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/controllers/inquiry_controller.rb
/home/rails/inquiry-notice-chatwork/app/controllers/inquiry_controller.rb
class InquiryController < ApplicationController

  ##### 問い合わせフォーム画面を表示する
  def index
    @inquiry = Inquiry.new
    render :action => 'index'
  end

  ##### 問い合わせフォームから入力された内容をチェックする
  def confirm
    @inquiry = Inquiry.new(inquiry_params)
    if @inquiry.valid?
      # 入力内容に問題ない場合、問い合わせ確認画面を表示
      render :action => 'confirm'
    else
      # 入力内容に問題ある場合、問い合わせ画面を再表示
      render :action => 'index'
    end
  end
 
  ##### 問い合わせ完了画面の処理
  def thanks
    # 問い合わせ内容をメール送信
    @inquiry = Inquiry.new(inquiry_params)
    InquiryMailer.received_email(@inquiry).deliver

    # 問い合わせ内容をChatWorkへ通知
    @chatwork = InquiryChatwork.new
    @chatwork.push_chatwork_message(@inquiry)
    
    # 問い合わせ完了画面を表示する
    render :action => 'thanks'
  end

  ##### Strong Parametersで問い合わせ画面からの入力を許可するリクエストパラメータを指定する
  def inquiry_params
    params.require(:inquiry).permit(
      :name, :email, :phone, :message
    )
  end

end

(8) 問い合わせフォーム用モデルクラスを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/models/inquiry.rb
/home/rails/inquiry-notice-chatwork/app/models/inquiry.rb
class Inquiry
  include ActiveModel::Model

  attr_accessor :name, :email, :phone, :message
 
  validates :name,   length: { minimum: 3, :too_short => '名前を入力して下さい。'}
  validates :email,  length: { minimum: 3, :too_short => 'メールアドレスを入力して下さい。'}
  validates_numericality_of :phone, { :message => '電話番号は数字で入力して下さい。'}
  validates :message, :presence => { :message => '問い合わせ内容を入力して下さい。'}
end

(9) 問い合わせフォーム用ビューを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/views/inquiry/index.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/index.html.erb
<%= form_for @inquiry, :url => inquiry_confirm_path do |f| %>
  <div class="page-header">
    <h1>問い合わせ画面</h1>
  </div>
 
  <% if @inquiry.errors.any? %>
    <div class="alert alert-danger" role="alert">
      <strong>入力内容にエラーがあります</strong>
      <ul>
        <% @inquiry.errors.each do |attr, msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
 
  <table class="table">
    <tr>
      <th>名前<span class="text-danger"> (必須)</span></th>
      <td><%= f.text_field :name %></td>
    </tr>

    <tr>
      <th>メールアドレス<span class="text-danger"> (必須)</span></th>
      <td><%= f.text_field :email %></td>
    </tr>

    <tr>
      <th>電話番号</th>
      <td><%= f.text_field :phone %></td>
    </tr>

    <tr>
      <th>問い合わせ内容 (必須)</th>
      <td><%= f.text_area :message %></td>
    </tr>

  </table>
  <%= f.submit '確認', class: 'btn btn-primary' %>
<% end %>

(10) 問い合わせ確認画面用ビューを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/views/inquiry/confirm.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/confirm.html.erb
<div class="page-header">
  <h1>問い合わせ確認画面</h1>
</div>
 
<%= form_for @inquiry, :url => inquiry_thanks_path do |f| %>
  <table class="table">
    <tr>
      <th>名前</th>
      <td>
        <%= f.hidden_field :name %>
        <%= @inquiry.name %>
      </td>
    </tr>

    <tr>
      <th>メールアドレス</th>
      <td>
        <%= f.hidden_field :email %>
        <%= @inquiry.email %>
      </td>
    </tr>

    <tr>
      <th>電話番号</th>
      <td>
        <%= f.hidden_field :phone %>
        <%= @inquiry.phone %>
      </td>
    </tr>

    <tr>
      <th>問い合わせ内容</th>
      <td>
        <%= f.hidden_field :message %>
        <%= simple_format(@inquiry.message) %>
      </td>
    </tr>
  </table>
  <%= f.submit '送信', :class => 'btn btn-primary' %>
<% end %>

(11) 問い合わせ完了画面用ビューを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/views/inquiry/thanks.html.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry/thanks.html.erb
<div class="page-header">
  <h1>問い合わせ完了画面</h1>
</div>
<p>
　お問い合わせありがとうございました。<br>
　問い合わせ内容は管理者宛にメールで送信 ならびに ChatWorkで通知しました。
</p>

(12) 問い合わせ内容メール本文ビュー作成

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ mkdir /home/rails/inquiry-notice-chatwork/app/views/inquiry_mailer
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/views/inquiry_mailer/received_email.text.erb
/home/rails/inquiry-notice-chatwork/app/views/inquiry_mailer/received_email.text.erb
問い合わせ画面で入力された氏名: <%= @inquiry.name %>
問い合わせ画面で入力されたメールアドレス: <%= @inquiry.email %>
問い合わせ画面で入力された電話番号: <%= @inquiry.phone %>
問い合わせ内容:
<%= @inquiry.message %>

(13) 問い合わせ内容メール送信用クラスを作成します。

to:では、問い合わせ内容のメールを送信するアドレスを指定します。
今回の例では自分のメールアドレスを指定しますが、表記上は ********************@gmail.com とマスクして表示しております。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/mailers/inquiry_mailer.rb
/home/rails/inquiry-notice-chatwork/app/mailers/inquiry_mailer.rb
class InquiryMailer < ActionMailer::Base

  ##### 送信元アドレス
  default from: "example@example.com"
  ##### 送信先アドレス
  default to: "********************@gmail.com"

  def received_email(inquiry)
    ##### メール件名
    mail_subject = "Ruby on Rails 5で作った問い合わせフォームから問い合わせがありました"

    @inquiry = inquiry
    mail(:subject => mail_subject)
  end
 
end

(14) 問い合わせフォームのルーティングを設定します。

デフォルトのルーティングは以下のようになっていると思います。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

これを以下のように変更します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/config/routes.rb
/home/rails/inquiry-notice-chatwork/config/routes.rb
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  ##### 問い合わせフォーム
  get 'inquiry' => 'inquiry#index' 
  get 'inquiry/confirm' => redirect("/inquiry")
  get 'inquiry/thanks' => redirect("/inquiry")
  ##### 問い合わせ確認画面
  post 'inquiry/confirm' => 'inquiry#confirm'
  ##### 問い合わせ完了画面
  post 'inquiry/thanks' => 'inquiry#thanks'
end

(15) ActionMailerのメール送信設定を追加します。

/home/rails/inquiry-notice-chatwork/config/environments/development.rb に以下の設定を追加します。

  config.action_mailer.default_url_options = { host: 'localhost', port: 80 }

  config.web_console.whitelisted_ips = '0.0.0.0/0'

変更前のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ tail /home/rails/inquiry-notice-chatwork/config/environments/development.rb
  # Suppress logger output for asset requests.
  config.assets.quiet = true

  # Raises error for missing translations
  # config.action_view.raise_on_missing_translations = true

  # Use an evented file watcher to asynchronously detect changes in source code,
  # routes, locales, etc. This feature depends on the listen gem.
  config.file_watcher = ActiveSupport::EventedFileUpdateChecker
end
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/config/environments/development.rb

 (中略)

  # Use an evented file watcher to asynchronously detect changes in source code,
  # routes, locales, etc. This feature depends on the listen gem.
  config.file_watcher = ActiveSupport::EventedFileUpdateChecker
end

　↓

変更後のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/config/environments/development.rb

 (中略)

  # Use an evented file watcher to asynchronously detect changes in source code,
  # routes, locales, etc. This feature depends on the listen gem.
  config.file_watcher = ActiveSupport::EventedFileUpdateChecker

  config.action_mailer.default_url_options = { host: 'localhost', port: 80 }

  config.web_console.whitelisted_ips = '0.0.0.0/0'
end

設定を追加した事を確認します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ grep config.action_mailer.default_url_options /home/rails/inquiry-notice-chatwork/config/environments/development.rb
  config.action_mailer.default_url_options = { host: 'localhost', port: 80 }
[rails@example-ruby-rails-server inquiry-notice-chatwork]$  

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ grep config.web_console.whitelisted_ips /home/rails/inquiry-notice-chatwork/config/environments/development.rb
  config.web_console.whitelisted_ips = '0.0.0.0/0'
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(16) railsユーザの.bashrcにChatWorkへメッセージ通知する為の設定(ChatWork APIトークン等)を追加します。

ChatWorkへメッセージを送信する場合、以下の情報を指定する必要があります。
　・ChatWork APIトークン
　・チャットワークメッセージを送信する先のルームID

今回の例では、プログラム内ではChatWork APIトークンやルームIDはハードコーディングせずに、/home/rails/.bashrcの環境変数としてChatWork APIトークンやルームIDを追加する事にします。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cp -p /home/rails/.bashrc /home/rails/.bashrc.ORG
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ diff /home/rails/.bashrc /home/rails/.bashrc.ORG
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/.bashrc

　(ファイル末尾に以下の設定を追加します)

# User specific aliases and functions
##### ChatWork Settings
## ChatWork APIトークンを指定します。
## 詳細については以下をご参照下さい。
##   http://developer.chatwork.com/ja/index.html

## ChatWork APIトークン
export CHATWORK_API_TOKEN="35****************************7f"

## ChatWorkメッセージを通知する先のルームID
export CHATWORK_ROOM_ID="11111111"
#####

.bashrcに追加した環境変数を読み込みます。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ source /home/rails/.bashrc
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(17) 問い合わせ内容のChatWork通知用クラスを作成します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/models/inquiry_chatwork.rb
/home/rails/inquiry-notice-chatwork/app/models/inquiry_chatwork.rb
class InquiryChatwork

  require 'net/https'
  require 'json'

  def push_chatwork_message(inquiry)

    @inquiry = inquiry

    @uri = URI.parse('https://api.chatwork.com')
    @client = Net::HTTP.new(@uri.host, 443)
    @client.use_ssl = true

    ##### ChatWork APIトークン (~/.bashrcに追加した環境変数から取得する)
    @chatwork_api_token = ENV["CHATWORK_API_TOKEN"]

    ##### ChatWorkへメッセージを通知するルームID (~/.bashrcに追加した環境変数から取得する)
    @message_room_id = ENV["CHATWORK_ROOM_ID"]

    ##### ChatWorkへ通知するメッセージタイトル
    @message_title = "Ruby on Rails 5で作った問い合わせフォームから問い合わせがありました。問い合わせ内容をChatWorkへ通知します。"

    ##### Chatworkへ通知するメッセージ内容
    @message_text = "[info][title]" << @message_title << "[/title]"
    @message_text = @message_text << @inquiry.name << "\n" << @inquiry.email << "\n" << @inquiry.phone << "\n" << @inquiry.message << "[/info]"

    ##### ChetWorkへメッセージ送信
    @res = @client.post( "/v2/rooms/#{@message_room_id}/messages", "body=#{@message_text}", {"X-ChatWorkToken" => "#{@chatwork_api_token}"} )

    puts JSON.parse(@res.body)

  end
 
end

問い合わせフォームの動作確認

(18) Pumaを起動して、問い合わせフォームを表示出来る状態にします。

[rails@example-ruby-rails-server ~]$ cd /home/rails/inquiry-notice-chatwork/

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ sudo /usr/local/rbenv/shims/rails server -d -b 0.0.0.0 --port=80
=> Booting Puma
=> Rails 5.0.2 application starting in development on http://0.0.0.0:80
=> Run `rails server -h` for more startup options
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ ps awux | grep -v grep | grep puma
root      7566  1.0  7.1 868044 73272 ?        Sl   18:06   0:00 puma 3.8.1 (tcp://0.0.0.0:80) [/]                                                
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(19) Webブラウザから問い合わせフォームを動かしているRailsサーバへアクセスします。

Webブラウザから前述の手順でPumaを起動したRailsサーバへアクセスします。
今回の例では、一時的に自分が持っているドメイン名を指定して、Pumaを起動したRailsサーバへアクセス出来るよう設定しました。

問い合わせフォームが表示される事を確認します。

スクリーンショット 2017-03-12 18.14.17.png

(20) 問い合わせフォームで問い合わせ内容をを行います。

問い合わせフォームで名前, メールアドレス, 問い合わせ内容等を入力します。
「確認」をクリックします。

スクリーンショット 2017-03-12 18.07.42.png

問い合わせ確認画面が表示されます。
「送信」をクリックします。

スクリーンショット 2017-03-12 18.08.41.png

問い合わせ完了画面が表示されます。

スクリーンショット 2017-03-12 18.10.11.png

(21) 問い合わせ内容がメールで届いている事を確認します。

問い合わせ内容のメールが /home/rails/inquiry-notice-chatwork/app/mailers/inquiry_mailer.rb の to: で指定したメールアドレス宛に届いている事を確認します。

スクリーンショット 2017-03-12 18.24.32.png

(22) 問い合わせ内容がChatWorkに届いている事を確認します。

問い合わせ内容のメッセージが /home/rails/inquiry-notice-chatwork/app/models/inquiry_chatwork.rb で指定したChatWorkルームに届いている事を確認します。

スクリーンショット 2017-03-12 18.28.09.png

[参考] 問い合わせフォームにBootstrapを導入する

参考までに問い合わせフォームにBootstrapを導入し、問い合わせ画面の見た目を整える手順も記します。

(23) 問い合わせフォーム用アプリケーションにBootstrapを追加します。

[rails@example-ruby-rails-server ~]$ cd /home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ echo "gem 'bootstrap-sass'" >> /home/rails/inquiry-notice-chatwork/Gemfile
[rails@example-ruby-rails-server inquiry-notice-chatwork]$ 

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ tail /home/rails/inquiry-notice-chatwork/Gemfile
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

gem 'therubyracer'
gem 'bootstrap-sass'
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(24) app/assets/stylesheets/inquiry.scssにBootstrapをincludeする設定を追加します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ ls -lrta /home/rails/inquiry-notice-chatwork/app/assets/stylesheets/
total 16
-rw-rw-r-- 1 rails rails  736 Mar 12 02:17 application.css
drwxrwxr-x 6 rails rails 4096 Mar 12 02:17 ..
-rw-rw-r-- 1 rails rails  178 Mar 12 02:24 inquiry.scss
drwxrwxr-x 2 rails rails 4096 Mar 12 02:24 .
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

変更前のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/app/assets/stylesheets/inquiry.scss 
// Place all the styles related to the inquiry controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

ファイル末尾に以下の設定を追加します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/app/assets/stylesheets/inquiry.scss 

　(中略)

@import "bootstrap-sprockets";
@import "bootstrap";

変更後のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/app/assets/stylesheets/inquiry.scss 
// Place all the styles related to the inquiry controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "bootstrap-sprockets";
@import "bootstrap";
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(25) config/application.rbにBootstrapをアセットのプリコンパイル対象を指定する設定を追加します。

変更前のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/config/application.rb 
require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module InquiryNoticeChatwork
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
  end
end
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

class Applicationにアセットのプリコンパイル対象を指定する設定を追加します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ vi /home/rails/inquiry-notice-chatwork/config/application.rb 

    ##### bootstrap
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
    #####

変更後のファイルです。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ cat /home/rails/inquiry-notice-chatwork/config/application.rb 
require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module InquiryNoticeChatwork
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded

    ##### bootstrap
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
    #####
  end
end
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(26) Bootstrapを導入する為、bundle updateを実行します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ bundle update
Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Using rake 12.0.0
Using concurrent-ruby 1.0.5
Using i18n 0.8.1
Using minitest 5.10.1
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.1.0
Using rack 2.0.1
Using nio4r 2.0.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using execjs 2.7.0
Using sass 3.4.23
Using bundler 1.14.5
Using byebug 9.0.6
Using coffee-script-source 1.12.2
Using method_source 0.8.2
Using thor 0.19.4
Using debug_inspector 0.0.2
Using ffi 1.9.18
Using multi_json 1.12.1
Using libv8 3.16.14.19 (x86_64-linux)
Using rb-fsevent 0.9.8
Using puma 3.8.1
Using ref 2.0.0
Using tilt 2.0.6
Using sqlite3 1.3.13
Using turbolinks-source 5.0.0
Using tzinfo 1.2.2
Using nokogiri 1.7.0.1
Using rack-test 0.6.3
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Installing autoprefixer-rails 6.7.7
Installing uglifier 3.1.7 (was 3.1.6)
Using coffee-script 2.4.1
Using rb-inotify 0.9.8
Using therubyracer 0.12.3
Using turbolinks 5.0.1
Using activesupport 5.0.2
Using loofah 2.0.3
Using mail 2.6.4
Installing bootstrap-sass 3.3.7
Using listen 3.0.8
Using rails-dom-testing 2.0.2
Using globalid 0.3.7
Using activemodel 5.0.2
Using jbuilder 2.6.3
Using spring 2.0.1
Using rails-html-sanitizer 1.0.3
Using activejob 5.0.2
Using activerecord 5.0.2
Using spring-watcher-listen 2.0.1
Using actionview 5.0.2
Using actionpack 5.0.2
Using actioncable 5.0.2
Using actionmailer 5.0.2
Using railties 5.0.2
Using sprockets-rails 3.2.0
Using coffee-rails 4.2.1
Using jquery-rails 4.2.2
Using web-console 3.4.0
Using rails 5.0.2
Using sass-rails 5.0.6
Bundle updated!
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(27) Bootstrapを導入します。

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ pwd
/home/rails/inquiry-notice-chatwork
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

[rails@example-ruby-rails-server inquiry-notice-chatwork]$ bundle install --path=/home/rails/inquiry-notice-chatwork/vendor/bundle
Using rake 12.0.0
Using concurrent-ruby 1.0.5
Using i18n 0.8.1
Using minitest 5.10.1
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.1.0
Using rack 2.0.1
Using nio4r 2.0.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using execjs 2.7.0
Using sass 3.4.23
Using byebug 9.0.6
Using coffee-script-source 1.12.2
Using method_source 0.8.2
Using thor 0.19.4
Using debug_inspector 0.0.2
Using ffi 1.9.18
Using multi_json 1.12.1
Using libv8 3.16.14.19 (x86_64-linux)
Using rb-fsevent 0.9.8
Using puma 3.8.1
Using bundler 1.14.5
Using ref 2.0.0
Using tilt 2.0.6
Using sqlite3 1.3.13
Using turbolinks-source 5.0.0
Using tzinfo 1.2.2
Using nokogiri 1.7.0.1
Using rack-test 0.6.3
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Using autoprefixer-rails 6.7.7
Using uglifier 3.1.7
Using coffee-script 2.4.1
Using rb-inotify 0.9.8
Using therubyracer 0.12.3
Using turbolinks 5.0.1
Using activesupport 5.0.2
Using loofah 2.0.3
Using mail 2.6.4
Using bootstrap-sass 3.3.7
Using listen 3.0.8
Using rails-dom-testing 2.0.2
Using globalid 0.3.7
Using activemodel 5.0.2
Using jbuilder 2.6.3
Using spring 2.0.1
Using rails-html-sanitizer 1.0.3
Using activejob 5.0.2
Using activerecord 5.0.2
Using spring-watcher-listen 2.0.1
Using actionview 5.0.2
Using actionpack 5.0.2
Using actioncable 5.0.2
Using actionmailer 5.0.2
Using railties 5.0.2
Using sprockets-rails 3.2.0
Using coffee-rails 4.2.1
Using jquery-rails 4.2.2
Using web-console 3.4.0
Using rails 5.0.2
Using sass-rails 5.0.6
Bundle complete! 16 Gemfile dependencies, 67 gems now installed.
Bundled gems are installed into ./vendor/bundle.
[rails@example-ruby-rails-server inquiry-notice-chatwork]$

(28) Webブラウザから問い合わせフォームへアクセスします。画面の見た目が変わっているのを確認します。

スクリーンショット 2017-03-12 20.59.01.png

(29) 問い合わせフォームへ問い合わせをしてみます。

スクリーンショット 2017-03-12 21.01.16.png スクリーンショット 2017-03-12 21.01.44.png スクリーンショット 2017-03-12 21.02.22.png

(30) 問い合わせフォームで問い合わせた内容がメールで届く事を確認します。

スクリーンショット 2017-03-12 21.04.15.png

(31) 問い合わせフォームで問い合わせた内容がChatWorkで通知される事を確認します。

スクリーンショット 2020-01-12 7.32.36.png

以上になります。

57
71
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
57
71

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?