今回は ruby on rails に bootstrap を適用します。
rails では Gemfile に追記することで、プラグインのように機能を追加することができます。
今回は boostrap を適用するために、bootstrap-sass を使用します。
実際に体験したほうがわかりやすいので、ruby のプロジェクトを作成し、
bootstrap を適用してみましょう。
開発環境としては 簡単に環境の構築ができる cloud 9 がおすすめです。
[Ruby]cloud9 への rails の導入
で導入方法を記載しましたので、もし導入方法がわからない場合にはこちらを参考にしましょう。
まずはアプリを作成します。
なお、rails でのアプリの作成や、モデル、ビュー、コントローラの作成にはターミナルからの操作が多くなりますので、
Linux コマンドなども覚えておくと後々役立つので機会があれば習得するようにしましょう。
まずは rails アプリの作成をします。
ターミナルで
rails new ibc-rails
としてアプリを作成します。
rails でのアプリ作成の構文は
rails new アプリ名
となります。
次に、ビューやモデルなどを作成するのですが、今回はbootstrap 導入テストということで
scaffold を使うことでひな形を作成し、これに bootstrap を適用します。
scaffold の構文は
rails generate scaffold モデル名 カラム名1:データ型1 カラム名2:データ型 2 …
となります。
なお、generate は g と省略可能です。
今回は、
rails g scaffold user name:string age:integer
で作成します。
次に Gemfile の編集を行います。
２５行目あたりに
#add bootstrap gem 'bootstrap-sass', '~> 3.3.6''
を追記し、保存します。
次に、設定した gem ファイルをインストールするためのコマンドを実行します
bundle install
これで Gemfile に設定した gem ファイルがインストールされます。
次に、ひな形アプリでデータベーステーブルを作成するためのコマンドを実行します。
rake db:migrate
これでアプリができたので、起動します。
cloud 9 の場合
rails s -p $PORT -b $IP
で起動します。
起動したときにアプリのURLが表示されるので、このURLの最後に
/users を追記して表示すると、今回作成したアプリが表示されます。
ここまででアプリの表示までできたので、bootstrap をボタンに適用してみます。
今回は New User ボタンに bootstrap を適用します。
app/views/users/index.html.erb
を編集します。
現在のボタンのコードは
<%= link_to 'New User', new_user_path %>
となっているため、このコードを以下のように変更します。
<%= link_to 'New User', new_user_path, class:"btn btn-primary" %>
次に app/assets/stylesheets/application.css を
app/assets/stylesheets/application.scss に名前変更し、最終行に以下のコードを追記します。
@import "bootstrap-sprockets"; @import "bootstrap";
そして java script も読み込むため
app/assets/javascripts/application.js へ以下のコードを追記します。
//= require bootstrap-sprockets
これでbootstrap が適用できるので、みてみましょう。
最初の適用前だと
そして適用後だと
というようにボタンに適用できているのがわかります。
それでは、今回の要点をまとめてみましょう。
・gem ‘bootstrap-sass’, ‘~> 3.3.6”を Gemfile に追記することで boostrap を適用できる。
・追加したい gemファイルは bundle install を実行することでインストールできる。
・application.css ではなく application.scss と拡張子を変更する必要がある。
設定ファイルの編集が面倒ですが、これにより rails でも bootstrap を使用することが可能になります。
