Windowsで始めるRuby on Rails入門【７．Bootstrapでレイアウトを整える】

どうも、tatsuです！

この記事はWindows環境でのRuby on Railsの入門記事シリーズの1つとなります。

前回記事はコチラ↓↓

Windowsで始めるRuby on Rails入門【６．Validation】

2018年11月10日

今回は第七回目として、Bootstrapでレイアウトを整えていきたいと思います。

Node.jsのインストール

Bootstrapインストールの前に、Node.jsをインストールして設定を変更する必要があります。

理由は、Windows + Ruby2.5.1 + Rails5.2.1 + Bootstrap4.3.1 という現時点の最新環境で行うと、rubygemのバグで画面を表示する際にエラーが発生してしまうためです。

インストール方法ですが、以下のサイトを参考に進めてください。
公式サイトからダウンロードしてインストーラーでインストールするだけなので簡単です。
Node.js / npmをインストールする（for Windows）

Bootstrapのインストール&設定

Node.jsがインストールできたら、Bootstrapのインストールと設定を行っていきます。

変更するファイルごとに説明していきますね。

Gemfile

Gemfileの一番下に、以下の記述を加えてください。

gem 'bootstrap', '~> 4.1.3'
gem 'jquery-rails'

Gemfileの変更は以上です。

application.css

まず、app/assets/stylesheets配下にあるapplication.cssの名前をapplication.scssに変更します。

次に、application.scssに以下の記述を加えてください。

@import "bootstrap";

application.cssの変更は以上です。

boot.rb

config配下にあるboot.rbに以下の記述を加えてください。

ENV['EXECJS_RUNTIME'] = 'Node'

これでEXECJS_RUNTIMEに先程インストールしたNode.jsを指定しています。
デフォルトで指定されていたEXECJS_RUNTIMEがバグを起こしていました。

boot.rbの変更は以上です。

インストール

ここまでできたらコマンドプロンプトで以下のコマンドを実行してください。

これで完了です。
サーバーを起動して画面が表示されることを確認しておいてください。（この時点ではレイアウトに変化はありません。）

レイアウトを整える

ここからはRubyやRailsというより、Bootstrapの使い方を学んでいく形になります。

ここで紹介すること以外にもたくさんありますので、Bootstrap公式サイトに目を通しておくのもいいかと思います。

リンクをボタンにする

例としてindex.html.erbファイルを変更していきます。

index.html.erbの以下の部分に

<%= link_to "新しくメモを作成する", new_memo_path %>

 
このようにclassを付けてあげましょう。

<%= link_to "新しくメモを作成する", new_memo_path, class:"btn btn-success" %>

 
btn btn-successというclassにはBootstrapが緑色ボタンのレイアウトを施してくれます。

表示・編集・削除リンクをバッジにする

ここも本当はボタンでよかったのですが、ボタンだと文字サイズよりはるかに大きいものになってしまったため、バッジにしました。

classの付け方はもうわかっていると思いますので、以下のようにそれぞれclassを付けてください。

<%= link_to "表示する", memo_path(memo), class:"badge badge-primary" %>
<%= link_to "編集する", edit_memo_path(memo), class:"badge badge-secondary" %>
<%= link_to "削除する", memo_path(memo), method: :delete, class:"badge badge-danger" %>

 
badge badge-XXXというclassを付けてあげると、他の文字の大きさに合わせたバッジレイアウトを施してくれます。

まとめ

今回はindex.html.erbに関してBootstrapを使ってレイアウトを変更しました。

同じように他のビューのレイアウトも変更して、見栄えをよくしてみてください♪

それでは！