0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-01

前回: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

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

###はず.....

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?