paizaラーニング『Rails入門3: Railsサービスを機能アップしてみよう (全6回)』を受講してみた

『Rails入門3: Railsサービスを機能アップしてみよう (全6回)』

このレッスンでは、お勧めのお店を投稿できる「ランチマップ」アプリのデザインを整えて、スマートフォン対応と日本語表示を実現する。

メモ

＃01:RailsにBootstrapを導入しよう 

• RailsにBootstrapを導入する
  • Gemfileを修正
    • gem 'bootstrap-sass', '~> 3.3.6'
  • コマンドを実行
    • $ bundle install

※ 自分の環境だと、上記のbootstrap-sassではダメみたいだったので、次のように記述。

gem 'bootstrap', '~> 4.5.0'

以下参考URL

• https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf
• https://qiita.com/keisukesaito/items/0309f7b76d8aa4d78879

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

※ bootstrap4では、「@import “bootstrap-sprockets”;」は要らない。

• jsファイルの修正
  • app/assets/javascripts/application.js

※ この辺は、最早Rails5系と6系（というよりbootstrap3と4）で異なるのかもしれない。

• コンテナを割り当て
  app/views/layouts/application.html.erbを修正

＃02:Bootstrapでレスポンシブデザインにしよう

• テーブルを修正
  • app/views/shops/index.html.erb
  • app/views/categories/index.html.erb
• リンクにボタンを追加
  • app/views/shops/index.html.erb
  • app/views/categories/index.html.erb
• フォームを修正1
  • app/views/shops/_form.html.erb

＃03:スマートフォン向けの画面にしよう vol.1

• ナビゲーションバーを追加する
  app/views/layouts/application.html.erb
• リストの行クリックで、詳細ページを表示
  • app/views/shops/index.html.erb
  • app/assets/stylesheets/application.css.scss
• 一覧から各リストのボタンを削除
  app/views/shops/index.html.erb

＃04:スマートフォン向けの画面にしよう vol.2

• 地図を画面に収める
  app/views/shops/show.html.erb
• 詳細ページにボタンを設置
  app/views/shops/show.html.erb
• 登録ページに戻るボタンを追加
  app/views/shops/＿form.html.erb
• 新規と更新ページのボタンを削除
  • app/views/shops/edit.html.erb
  • app/views/shops/new.html.erb

＃05:Railsの日本語化を試そう

• Railsの国際化機能
  • 日本語に切り替える：
    http://localhost:3000/?locale=ja
• URLのオプションに合わせて切り換えるようコントローラーを修正
  app/controllers/application_controller.rb
• en.ymlを確認
  /config/locale/en.yml
• ja.yml をコピーして修正
  /config/locale/ja.yml
• ウェルカムページに翻訳用キーワードを埋め込む
  app/views/welcome/index.html.erb
  • t('hello')のようにt()とする。
    tはtranslationの略。

＃06:Railsアプリを日本語表記に切り替えよう

• en.ymlに英単語を登録する
  /config/locale/en.yml
• ja.ymlに日本語を登録する
  /config/locale/ja.yml
• お店リストに翻訳用キーワードを埋め込む
  app/views/shops/index.html.erb
• フォーム用のため、ja.ymlにデータ名を追記する
  /config/locale/ja.yml
  • フォームの場合は、データ名が直接記述されているので、辞書で対応する。データ名からラベルの表記をRailsが自動的に割り当てているため。

認定証

チャプター5の演習課題修了時点で取得。

https://paiza.jp/works/lesson_certifications/dlYxBxAo8MhE5w

学習ステータス

ずっと一流忍者のままだな。