ちょびのプログラミング学習 Rails-7

どうも、ちょびブログのちょびです

今回はちょびのプログラミング学習のパート7になります。


前回はRailsでの開発環境を整える一環として

”Slim”を導入しました。


この記事では開発環境構築でやりたい

・アプリケーションの見た目をプロっぽくするツールの導入

・Railsアプリケーションの日本語化

これら2つをやっていこうと思います。


それではいきましょう!

Bootstrapで見栄え良く


Railsのテンプレートの中にはデザインは含まれていないので

CSSでデザインしていく必要があります。


でも、自分で一からデザインしていくとなると、かなり骨が折れます

タイトルやメニューバー、ボタンや見出しなど

サイトを構成する基礎的な部品をデザインするだけでも大変です。


そこで”Bootstrap"の出番です。


Bootstrapとは、

Twitterのデザイナーたちが開発したサイトデザインのために作られた

オープンソースのフレームワークで2011年にリリースされてから

今に至るまで時代のブラウザに合わせて何回もアップデートが続けられています。


Bootstrapを使うことで手軽に見栄えの良い画面を作成できるようになります。

Bootstrapの導入


導入はこれまでにやってきた”gem”の導入と同じです

というか、RailsのgemとしてもBootstrapが用意されています。


というわけでさっそく導入していきます。


まず、Gemfileにgemとして使用するBootstrapを追記します

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'slim-rails'
gem 'html2slim'
gem 'bootstrap' #追加  

Gemfileに追記したら

次はgemをインストールしていきます

ちょびブログ ~/taskleaf % bundle

これでBootstrapの導入は完了です

とても簡単ですね

あとは、Bootstrapを使えるように設定していきます。


rails newした状態では

Railsアプリケーションは"application.css"を読み込むようになっていて

他のCSSファイルはその"application.css"を経由して読み込むようになっています

なのでBootstrapでもこれと同じ動きができるように設定する必要があります。


また、以前導入したSlimのように

RailsではCSSよりもさらに効率よくデザインを表現できる

"Sass"という機能が標準で入っています。


Railsではなるべく、

そのSassが提供する記述法の”SCSS”というものでCSSを書いていきます。


これからSCSSファイルを作成していきます。


"application.css"の代わりに

"application.scss"を作成していきます。


まずは

app/assets/stylesheetsにある

”application.css”を削除します。


次に削除した場所のapp/assets/stylesheetsに

”application.scss”を作成します。


そして、”application.scss”の中に下記の内容を記述します

@import "bootstrap";

これでBootstrapを使う準備が整いました。

Railsを日本語化


Railsだけではなく、

アプリケーション開発中に使われる言葉の多くは英語です。


Railsアプリケーションでも何も手を加えずに開発を進めると

エラーメッセージや細かな通知などが英語で表示されます。


なのでここでRailsを日本語化をしていこうと思います。

I18nの導入


Railsを日本語化するにあたって

Internationalization(18文字のアルファベットを取って"I18n")を使って

Railsアプリケーション内で複数の言語を併用できる国際化を行っていきます。


これからI18nのファイルをダウンロードするのですが

そのためには"wget"コマンドを使いたいので

Macでwgetが使えるようにするためにインストールしていきます

ちょびブログ ~ % brew install wget

インストールが完了したら

次はwgetでI18nを開発中のRailsにダウンロードします

ちょびブログ ~/taskleaf % wget https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml --output-file=config/locales/ja.yml

デフォルトで日本語をコンテンツで使用するために、

アプリケーションに設定していきます。


config/initializersにlocale.rbというファイルを作成して

下記を記載します

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

以上でRailsの日本語化が完了しました。

まとめ


この学習での参考にしている本はコチラ

現場で使える Ruby on Rails 5速習実践ガイド

 

最後にまとめていきます

アプリケーションをプロっぽい見栄えに

・gemとしてBootstrapをインストールする

・RailsではCSSをSCSSで記述する

 

Railsの日本語化

・I18nはRailsで複数の言語を併用する機能

 

スポンサーリンク

-プログラミング積み上げ

© 2021 ちょびブログ