今回は ruby on rails に bootstrap を適用します。

rails では Gemfile に追記することで、プラグインのように機能を追加することができます。

今回は boostrap を適用するために、bootstrap-sass を使用します。

実際に体験したほうがわかりやすいので、ruby のプロジェクトを作成し、
bootstrap を適用してみましょう。

開発環境としては 簡単に環境の構築ができる cloud 9 がおすすめです。

[Ruby]cloud9 への rails の導入
で導入方法を記載しましたので、もし導入方法がわからない場合にはこちらを参考にしましょう。

まずはアプリを作成します。
なお、rails でのアプリの作成や、モデル、ビュー、コントローラの作成にはターミナルからの操作が多くなりますので、
Linux コマンドなども覚えておくと後々役立つので機会があれば習得するようにしましょう。

まずは rails アプリの作成をします。
ターミナルで

としてアプリを作成します。

rails でのアプリ作成の構文は

となります。

次に、ビューやモデルなどを作成するのですが、今回はbootstrap 導入テストということで
scaffold を使うことでひな形を作成し、これに bootstrap を適用します。
scaffold の構文は

となります。
なお、generate は g と省略可能です。

今回は、

で作成します。

次に Gemfile の編集を行います。
25行目あたりに

を追記し、保存します。

Screenshot from 2016-08-28 01:41:42

次に、設定した gem ファイルをインストールするためのコマンドを実行します

Screenshot from 2016-08-28 00:03:26

これで Gemfile に設定した gem ファイルがインストールされます。

次に、ひな形アプリでデータベーステーブルを作成するためのコマンドを実行します。

これでアプリができたので、起動します。
cloud 9 の場合

で起動します。

起動したときにアプリのURLが表示されるので、このURLの最後に
/users を追記して表示すると、今回作成したアプリが表示されます。

Screenshot from 2016-08-27 22:58:56

Screenshot from 2016-08-27 23:04:41

ここまででアプリの表示までできたので、bootstrap をボタンに適用してみます。

今回は New User ボタンに bootstrap を適用します。

app/views/users/index.html.erb
を編集します。

現在のボタンのコードは

となっているため、このコードを以下のように変更します。

Screenshot from 2016-08-28 00:48:24

次に app/assets/stylesheets/application.css を
app/assets/stylesheets/application.scss に名前変更し、最終行に以下のコードを追記します。

Screenshot from 2016-08-28 00:59:17

そして java script も読み込むため
app/assets/javascripts/application.js へ以下のコードを追記します。

Screenshot from 2016-08-28 01:03:46

これでbootstrap が適用できるので、みてみましょう。

最初の適用前だと
Screenshot from 2016-08-28 00:24:32

そして適用後だと
Screenshot from 2016-08-28 01:44:37
というようにボタンに適用できているのがわかります。

それでは、今回の要点をまとめてみましょう。
・gem ‘bootstrap-sass’, ‘~> 3.3.6”を Gemfile に追記することで boostrap を適用できる。
・追加したい gemファイルは bundle install を実行することでインストールできる。
・application.css ではなく application.scss と拡張子を変更する必要がある。

設定ファイルの編集が面倒ですが、これにより rails でも bootstrap を使用することが可能になります。