Rails入門3: Railsサービスを機能アップしてみよう

#Rails入門3: Railsサービスを機能アップしてみよう

##01:RailsにBootstrapを導入しよう 
#このBootstrapを導入法はRails -v 5の対象です！なのでRails -v 6 へのBootstrapを導入法は別途記述します。
このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、
スマートフォン対応と日本語表示を実現します。
まず初めに、HTMLテンプレートのBootstrapを導入します。

### RailsにBootstrapを導入する
####Gemfileを修正

```Gemfile
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 5.0'
```

#### コマンドを実行
bundle install

### scssを修正
app/assets/stylesheets/にある「application.css」のファイル名を
app/assets/stylesheets/application.css.scssに変更する

```app/assets/stylesheets/application.css.scss
@import 'bootstrap-sprockets';
@import 'bootstrap';

/* universal */

body {
  padding: 60px 15px 0;
}
```

### jsファイルの修正

```app/assets/javascripts/application.js

//= require bootstrap-sprockets
```

### コンテナを割り当て

```app/views/layouts/application.html.erbを修正

<body>
    <div class='container'>
        <%= yield %>
    </div>
</body>
```

--------------------------------------------------------------
#Rails -v 6 へのBootstrapを導入法
https://qiita.com/vogel_env/items/14fab52a1c8ef8baa956

https://qiita.com/junun/items/932a4218afc84d41a34a

https://qiita.com/whitia/items/34de15b72946f7f3b773



--------------------------------------------------------------
##02:Bootstrapでレスポンシブデザインにしよう 
ここでは、BootstrapでRailsアプリをレスポンシブデザインにします。
そして、テーブルやボタン・フォームにBootstrapのスタイルを適用します。


### お店リストのテーブルを修正

```app/views/shops/index.html.erb

<table class='table table-striped table-hover'>
・・・
</table>
```

### リンクにボタンを追加

```app/views/shops/index.html.erb

<%= link_to 'New Shop', new_shop_path, class: 'btn btn-primary' %> | <%= link_to 'Show category list', categories_path %>
```

### フォームを修正1

```app/views/shops/_form.html.erb

<%= form_for(shop, html: {class: 'form-horizontal', role: 'form'}) do |f| %>
```

### フォームを修正2
#### フォームの部品

```app/views/shops/_form.html.erb
<div class='form-group'>
  <%= f.label :category_id, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.select :category_id, Category.all.map{|o| [o.name, o.id]} %>
  </div>
</div>

<div class='form-group'>
  <%= f.label :name, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.text_field :name %>
  </div>
</div>

<div class='form-group'>
  <%= f.label :address, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.text_field :address %>
  </div>
</div>
```


### フォームを修正3
#### 登録ボタン

```app/views/shops/_form.html.erb

<div class='actions'>
  <div class='form-group'>
    <div class='col-sm-offset-2 col-sm-10'>
      <%= f.submit 'Submit', class: 'btn btn-success' %>
    </div>
  </div>
</div>
```

### グリッドの横幅の比率

Bootstrapでは、HTML要素の"class"属性に"col-sm-X"を適用すると、ページの横幅を12としたときに、
その要素が占める横幅をXとすることができます。
例えば、"col-sm-3"が適用された要素と"col-sm-9"が適用された要素を並べたならば、
これらの横幅の比率は、3:9になります。
このようなレイアウト方法をグリッドレイアウトと呼びます。

--------------------------------------------------------------
##03:スマートフォン向けの画面にしよう vol.1 
ここでは、Railsアプリをスマートフォン向けの画面に設定します。
そのために、ナビゲーションバーを設置し、お店リストの操作を整理します。


### ナビゲーションバーを追加する

```app/views/layouts/application.html.erb

<!-- Fixed navbar -->
<nav class='navbar navbar-inverse navbar-fixed-top'>
  <div class='container'>
    <div class='navbar-header'>
      <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </button>
      <a class='navbar-brand' href='#'>Lunch Map</a>
    </div>
    <div id='navbar' class='collapse navbar-collapse'>
      <ul class='nav navbar-nav'>
        <li><a href='#'>Shop</a></li>
        <li><a href='#'>Category</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
```

### ナビゲーションバーにリンクを追加する

```app/views/layouts/application.html.erb

<%= link_to 'Lunch Map', root_path, class: 'navbar-brand' %>
```


```app/views/layouts/application.html.erb
<ul class='nav navbar-nav'>
  <li><%= link_to 'Shop', shops_path %></li>
  <li><%= link_to 'Category', categories_path %></li>
</ul>
```


### リストの行クリックで、詳細ページを表示

```app/views/shops/index.html.erb

<td><%= link_to shop.category.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.address, shop, class: 'widelink' %></td>
```

```app/assets/stylesheets/application.css.scss
/* table row for link */
a.widelink {
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
}
```


### 一覧から各リストのボタンを削除


```app/views/shops/index.html.erb

<table class='table table-striped table-hover'>
  <thead>
    <tr>
      <th>Category</th>
      <th>Name</th>
      <th>Address</th>
    </tr>
  </thead>
```

--------------------------------------------------------------
##04:スマートフォン向けの画面にしよう vol.2 
このチャプターでは、引き続き、Railsアプリをスマートフォン向けの画面に変えたいと思います。
今度は、詳細ページと登録ページのレイアウトを整理しましょう。

### 地図を画面に収める

```app/views/shops/show.html.erb

<%= content_tag(:iframe,
    'map',
    src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&amp;q=' + @shop.address,
    width: '100%',
    height: 320,
    frameborder: 0) %>
```

### 詳細ページにボタンを設置

```app/views/shops/show.html.erb

<%= link_to 'Delete', @shop,
                    method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %>
<%= link_to 'Edit', edit_shop_path(@shop), class: 'btn btn-primary' %>
<%= link_to 'Back', shops_path, class: 'btn btn-default' %>
```


### 登録ページに戻るボタンを追加

```app/views/shops/＿form.html.erb

<div class='actions'>
  <div class='form-group'>
    <div class='col-sm-offset-2 col-sm-10'>
      <%= f.submit 'Submit', class: 'btn btn-success' %>
      <%= link_to 'Back', :back, class: 'btn btn-default' %>
    </div>
  </div>
</div>
```


### 新規と更新ページのボタンを削除

```app/views/shops/edit.html.erb

<h1>Editing Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Show', @shop %> | -->
<!-- <%= link_to 'Back', shops_path %> -->
```


```app/views/shops/new.html.erb
<h1>New Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Back', shops_path %> -->
```


--------------------------------------------------------------
##05:Railsの日本語化を試そう
 
ここでは、Railsアプリのボタンやメッセージを日本語で表示させます。
Ruby on Railsは、このような多言語対応のため国際化機能を装備しています。

### URLのオプションに合わせて切り換えるようコントローラーを修正
 
```app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :set_locale
  protect_from_forgery with: :exception

  def set_locale
    I18n.locale = params[:locale] || I18n.default_locale
  end

  def default_url_options(options = {})
    { locale: I18n.locale }.merge options
  end
end
```


### en.ymlを確認

```/config/locale/en.yml

en:
  hello: "Hello world"
```
  
### ja.yml をコピーして修正

```
$ cd ~/lunchmap
$ cp -a config/locales/en.yml config/locales/ja.yml
```

```/config/locale/ja.yml
ja:
  hello: "世界の皆さん、こんにちは"
```

### ウェルカムページに翻訳用キーワードを埋め込む

```app/views/welcome/index.html.erb

<h1>Lunch Map</h1>
<p>Tasty meal on your place!!</p>
<p><%= t('hello') %></p>
<p><%= link_to 'Show shop list', shops_path %></p>

```

--------------------------------------------------------------
##06:Railsアプリを日本語表記に切り替えよう 
ここでは、引き続き、Railsアプリのボタンやメッセージを日本語で表示させます。
今回は、テーブルとフォームの表記を日本語にします。
特に、Railsが自動的に割り当てた表記の変更方法を取り上げます。

### en.ymlに英単語を登録する
 

```/config/locale/en.yml

en:
  hello: 'Hello world'
  shops: 'Shops'
  category: 'Category'
  name: 'Name'
  address: 'Address'
```


### ja.ymlに日本語を登録する

```/config/locale/ja.yaml

ja:
  hello: '世界の皆さん、こんにちは'
  shops: 'お店リスト'
  category: 'カテゴリ'
  name: '店名'
  address: '住所'
```
  

### お店リストに翻訳用キーワードを埋め込む

```app/views/shops/index.html.erb

<h1><%= t('shops') %></h1>


<th><%= t('category') %></th>
<th><%= t('name') %></th>
<th><%= t('address') %></th>
```

### フォーム用のため、ja.ymlにデータ名を追記する

```/config/locale/ja.yaml

ja:
  hello: '世界の皆さん、こんにちは'
  shops: 'お店リスト'
  category: 'カテゴリ'
  name: '店名'
  address: '住所'

  activerecord:
    models:
      shop: お店

    attributes:
      shop:
        category_id: カテゴリ
        name: 店名
        address: 住所
```

### 参考になるWebページ
- Railsで日本語化対応にする方法 - Qiita
http://qiita.com/kusu_tweet/items/b534c808ac1ee0382f05

- Railsの多言語化対応 i18nのやり方を整理してみた！【国際化/英語化】 - 酒と泪とRubyとRailsと
http://morizyun.github.io/blog/i18n-english-rails-ruby-many-languages/

- rails-i18n/rails/locale/ja.yml
https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

- Rails標準のi18n機能による日本語化まとめ | ユニコーンリサーチ
https://unicorn.limited/jp/item/373

- Rails国際化(I18n) API | Rails ガイド
https://railsguides.jp/i18n.html

--------------------------------------------------------------
--------------------------------------------------------------
演習課題「コンテナを追加する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られており、Bootstrapが導入してあります。
エディタを使って、app/views/layouts/application.html.erbを修正して、Bodyタグにcontainerクラスを追加してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

--------------------------------------------------------------
 模範解答1
class='container'を要素にしたdivタグを配置します。
  <body>
    <div class='container'>
      <%= yield %>
    </div>
  </body>
---------------------------------------------------------------------------
演習課題「テーブルへのクラスの適用」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作ってあり、Bootstrapが導入してあります。

エディタを使って、app/views/cats/index.html.erbを修正して、猫リストのテーブルにBootstrapのデザインを割り当てて、1行おきに色を付け、マウスポインタを重ねたら色が変わるようにしてください。
割り当てるのは、次のクラスです。

- table
- table-striped
- table-hover

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

--------------------------------------------------------------
模範解答1
divタグに、class='table table-striped table-hover'を記述します。
<table class='table table-striped table-hover'>
...
</table>

--------------------------------------------------------------
演習課題「ボタンにクラスを適用する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「breed」という掲示板が作られており、Bootstrapが導入されています。

エディタを使って、app/views/cats/index.html.erbを修正して、
「New Cat」ボタンに、'btn btn-primary'スタイルを割り当ててください。

--------------------------------------------------------------
 模範解答1
class='btn btn-primary'を要素にしたdivタグを配置します。
<%= link_to 'New Cat', new_cat_path, class: 'btn btn-primary'  %>

--------------------------------------------------------------
演習課題「グリッドの幅を設定する」
右の環境には、Railsで、おすすめのネコ情報を投稿する「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られてあり、Bootstrapが導入してあります。

エディタを使って、app/views/cats/_form.html.erbを修正して、グリッドの割合を1:11にしてください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！


--------------------------------------------------------------
模範解答1
最初は、2:10になっています。

<%= form_for(cat, html: {class: 'form-horizontal', role: 'form'}) do |f| %>
  <% if cat.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(cat.errors.count, "error") %> prohibited this cat from being saved:</h2>

      <ul>
      <% cat.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
--------------------------------------------------------------
演習課題「ナビゲーションバーのリンクの追加」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作られており、Bootstrapのナビゲーションバーが導入されています。

エディタを使って、app/views/layouts/application.html.erbを修正して、ナビゲーションバーの「Cat」と「Feed」という項目に、各掲示板へのリンクを貼ってください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

--------------------------------------------------------------
 模範解答1
link_to でリンクする

<ul class='nav navbar-nav'>
  <li><%= link_to 'Cat', cats_path %></li>
  <li><%= link_to 'Feed', feeds_path %></li>
</ul>

--------------------------------------------------------------
演習課題「Googleマップの横幅の調整」
右の環境には、Railsで「catmap」というプロジェクトに、「cat」という掲示板と「feed」という掲示板が作ってあり、Googleマップが導入されています。

エディタを使って、app/views/cats/show.html.erbを修正して、ウィンドウの幅に合わせて、Googleマップの横幅が変わるようにください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！


--------------------------------------------------------------
模範解答1
width: '100%'を指定する

<%= content_tag(:iframe,
        'map',
        src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q=' + @cat.address,
        width: '100%',
        height: 320,
        frameborder: 0) %>

--------------------------------------------------------------
演習課題「「ハロー パイザ」と表示」
右の環境には、Railsで「catmap」というプロジェクトに、start/index.html.erbというページが設置されています。また、国際化機能として、URLに日本語ロケール(?locale=ja)を指定すると、日本語表記に切り替わるようになっています。ja.ymlには「paiza: "ハロー パイザ"」と登録してあります。

エディタを使って、app/views/start/index.html.erbを修正して、pタグの位置に「ハロー パイザ」と表示してください。

採点して、すべてのジャッジに正解すれば、演習課題クリアです！

--------------------------------------------------------------
 模範解答1
pタグに、<%= t('paiza') %>を記述する

<p><%= t('paiza') %></p>