#Rails入門3: Railsサービスを機能アップしてみよう
##01:RailsにBootstrapを導入しよう
#このBootstrapを導入法はRails -v 5の対象です！なのでRails -v 6 へのBootstrapを導入法は別途記述します。
このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、
スマートフォン対応と日本語表示を実現します。
まず初めに、HTMLテンプレートのBootstrapを導入します。
RailsにBootstrapを導入する
####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に変更する
@import 'bootstrap-sprockets';
@import 'bootstrap';
/* universal */
body {
padding: 60px 15px 0;
}
jsファイルの修正
//= require bootstrap-sprockets
コンテナを割り当て
<body>
<div class='container'>
<%= yield %>
</div>
</body>
#Rails -v 6 へのBootstrapを導入法
https://qiita.com/vogel_env/items/14fab52a1c8ef8baa956
##02:Bootstrapでレスポンシブデザインにしよう
ここでは、BootstrapでRailsアプリをレスポンシブデザインにします。
そして、テーブルやボタン・フォームにBootstrapのスタイルを適用します。
お店リストのテーブルを修正
<table class='table table-striped table-hover'>
・・・
</table>
リンクにボタンを追加
<%= link_to 'New Shop', new_shop_path, class: 'btn btn-primary' %> | <%= link_to 'Show category list', categories_path %>
フォームを修正1
<%= form_for(shop, html: {class: 'form-horizontal', role: 'form'}) do |f| %>
フォームを修正2
フォームの部品
<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
登録ボタン
<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アプリをスマートフォン向けの画面に設定します。
そのために、ナビゲーションバーを設置し、お店リストの操作を整理します。
ナビゲーションバーを追加する
<!-- 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>
ナビゲーションバーにリンクを追加する
<%= link_to 'Lunch Map', root_path, class: 'navbar-brand' %>
<ul class='nav navbar-nav'>
<li><%= link_to 'Shop', shops_path %></li>
<li><%= link_to 'Category', categories_path %></li>
</ul>
リストの行クリックで、詳細ページを表示
<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>
/* table row for link */
a.widelink {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
一覧から各リストのボタンを削除
<table class='table table-striped table-hover'>
<thead>
<tr>
<th>Category</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
##04:スマートフォン向けの画面にしよう vol.2
このチャプターでは、引き続き、Railsアプリをスマートフォン向けの画面に変えたいと思います。
今度は、詳細ページと登録ページのレイアウトを整理しましょう。
地図を画面に収める
<%= content_tag(:iframe,
'map',
src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q=' + @shop.address,
width: '100%',
height: 320,
frameborder: 0) %>
詳細ページにボタンを設置
<%= 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' %>
登録ページに戻るボタンを追加
<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>
新規と更新ページのボタンを削除
<h1>Editing Shop</h1>
<%= render 'form', shop: @shop %>
<!-- <%= link_to 'Show', @shop %> | -->
<!-- <%= link_to 'Back', shops_path %> -->
<h1>New Shop</h1>
<%= render 'form', shop: @shop %>
<!-- <%= link_to 'Back', shops_path %> -->
##05:Railsの日本語化を試そう
ここでは、Railsアプリのボタンやメッセージを日本語で表示させます。
Ruby on Railsは、このような多言語対応のため国際化機能を装備しています。
URLのオプションに合わせて切り換えるようコントローラーを修正
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を確認
en:
hello: "Hello world"
ja.yml をコピーして修正
$ cd ~/lunchmap
$ cp -a config/locales/en.yml config/locales/ja.yml
ja:
hello: "世界の皆さん、こんにちは"
ウェルカムページに翻訳用キーワードを埋め込む
<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に英単語を登録する
en:
hello: 'Hello world'
shops: 'Shops'
category: 'Category'
name: 'Name'
address: 'Address'
ja.ymlに日本語を登録する
ja:
hello: '世界の皆さん、こんにちは'
shops: 'お店リスト'
category: 'カテゴリ'
name: '店名'
address: '住所'
お店リストに翻訳用キーワードを埋め込む
<h1><%= t('shops') %></h1>
<th><%= t('category') %></th>
<th><%= t('name') %></th>
<th><%= t('address') %></th>
フォーム用のため、ja.ymlにデータ名を追記する
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タグを配置します。
エディタを使って、app/views/cats/index.html.erbを修正して、猫リストのテーブルにBootstrapのデザインを割り当てて、1行おきに色を付け、マウスポインタを重ねたら色が変わるようにしてください。
割り当てるのは、次のクラスです。
- table
- table-striped
- table-hover
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
模範解答1
divタグに、class='table table-striped table-hover'を記述します。
演習課題「ボタンにクラスを適用する」
右の環境には、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? %>
<%= pluralize(cat.errors.count, "error") %> prohibited this cat from being saved:
<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 でリンクする
- <%= link_to 'Cat', cats_path %>
- <%= link_to 'Feed', feeds_path %>
演習課題「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') %>を記述する
<%= t('paiza') %>