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

はじめに
===

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

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

　**・指定したメールアドレスに対して、問い合わせ内容をメールで送信します。**
　**・Rails 5 から [ChatWork API](http://developer.chatwork.com/ja/ "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インストール)](http://qiita.com/na0AaooQ/items/5bd62e630a2faf051a52 "Amazon LinuxにRuby on Rails環境構築(rbenv + ruby-build + Ruby 2.2.1 + Rails 4.2.1インストール)")

・ChatWork APIの使用方法については、以下の資料を参考にさせて頂きました。ありがとうございました。
[チャットワーク APIドキュメント](http://developer.chatwork.com/ja/ "チャットワーク APIドキュメント")

・問い合わせフォーム作成については、以下のサイトを参考にさせて頂きました。ありがとうございました。
[Ruby on Rails 4 でお問い合わせフォーム（確認画面つき）を作成する](https://www.imd-net.com/column/1731/ "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リポジトリに保存しました。

https://github.com/na0AaooQ/inquiry-notice-chatwork

```
[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インストール)](http://qiita.com/na0AaooQ/items/5bd62e630a2faf051a52 "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
```

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

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

```rb:/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
```

```rb:/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
```

```rb:/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
```

```rb:/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
```

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

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

```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サーバへアクセス出来るよう設定しました。

https://www.dev.na0aaooq.com/inquiry

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

<img width="873" alt="スクリーンショット 2017-03-12 18.14.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/d16d8490-8ba2-c196-95c6-975e5d41fce5.png">

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

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

<img width="1041" alt="スクリーンショット 2017-03-12 18.07.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/745f067d-bc34-4cec-91fc-41b1502195eb.png">

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

<img width="1003" alt="スクリーンショット 2017-03-12 18.08.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/1e3e878b-6e33-9ad0-7fe1-a86cfc4e241a.png">

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

<img width="822" alt="スクリーンショット 2017-03-12 18.10.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/27b9ec88-34a2-5b1d-e53c-19f86a00d332.png">

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

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

<img width="768" alt="スクリーンショット 2017-03-12 18.24.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/2c58354b-dc5b-236e-6724-0c7c8aae5cbd.png">

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

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

<img width="1259" alt="スクリーンショット 2017-03-12 18.28.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/177b436d-f232-3c3b-c8ee-f4cbbd4695d6.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ブラウザから問い合わせフォームへアクセスします。画面の見た目が変わっているのを確認します。

https://www.dev.na0aaooq.com/inquiry

<img width="818" alt="スクリーンショット 2017-03-12 20.59.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/85b7b026-b67e-c700-a1d0-be3448111fc6.png">

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

<img width="827" alt="スクリーンショット 2017-03-12 21.01.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/c406322e-99ed-9fd2-4370-6cc44417526b.png">

<img width="819" alt="スクリーンショット 2017-03-12 21.01.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/b72fc5f5-5e9d-abbb-6043-9dfa094c41c3.png">

<img width="823" alt="スクリーンショット 2017-03-12 21.02.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/f2a0a654-78f6-07fa-f007-827479611f4a.png">

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

<img width="794" alt="スクリーンショット 2017-03-12 21.04.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/63647/a9feac89-5c53-26a2-9764-a170cdf5f007.png">

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

![スクリーンショット 2020-01-12 7.32.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63647/f2c72afb-6441-3d05-8b2b-4787638777c8.png)



***

以上になります。