More than 3 years have passed since last update.

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

Last updated at 2020-04-10Posted at 2020-04-09

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に変更する

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を導入法

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タグを配置します。

<%= yield %>

演習課題「テーブルへのクラスの適用」
右の環境には、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'を記述します。

...

演習課題「ボタンにクラスを適用する」
右の環境には、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 でリンクする

演習課題「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') %>を記述する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up