cloud9でRuby on Rails開発環境構築"part3"[Bootstrap/Sass/エラーの日本語]


前回:cloud9でRuby on Rails開発環境構築"part2"[view層とSlim]
メニューバーとかボタンとか、リンクとか、見栄えが良くなるらしいよ!Bootstrap!
例によってBootstrapと言うgemを追加しますので、Gemfileに追加します!

#Gemfile(アプリケーションフォルダ直下)

gem 'bootstrap'

そして、恒例のbundleでインストール

$ bundle

Rails new の直後は1つのCSSファイルを読み込むようになっているらしい。
(app/assets/stylesheets/application.css)

他のCSS(Bootstrap)はapplication.cssから読み込む形で記述していく。

CSSに効率よく表現できる形式『Sass』

まず、app/assets/stylesheets/application.cssを削除します。

$ rm app/assets/stylesheets/application.css

代わりに新しく app/assets/stylesheets/application.scss
(拡張子が.cssではなく.scssにするように気をつけて)

#app/assets/stylesheets/application.scssに

@import "bootstrap";

これでapplication.scss(を通じて自動的に生成される application.css)がアプリケーション内の各画面のHTMLから呼ばれるようにすることで、画面をBootstrapのデザインが当たった状態にします。

.container (コンテナ)

今のままでは画面の見栄えが大きく変わりません。見栄えを具体的に変える為にBootstrapのコンテナと言う部品を使うことにします。
app/views/layouts/application.html.slimファイルを変更します。

doctype html
html*********
******************
******************
body

↓#ここから
  .app-title.navbar.navbar-expand-md.navbar-light.bg-light
     .navbar-brand Taskleaf
  .container
↑#ここまでを追加

    = yield

Railsのエラーメッセージを日本語で出せるようにする

作成するアプリケーションが日本語の場合は日本語翻訳を追加して利用すると良い。
Githubrails-l18nリポジトリに既に翻訳されたファイルがあるのでそれを利用する。
rawファイルをconfig/locales/ja.ymlとしてダウンロードする。

$ wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml -p config/locales

さらに!デフォルトで日本語コンテンツを使うようにアプリケーションの設定を変更する。
config/initializers/locale.rbと言うファイルを作成!
中身は。

Rails.application.config.i18n.default_locale = :ja

これでとりあえず準備万端!!

はず.....