概要
みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。
scaffoldとはご存知のようにいわゆるwebアプリケーションのIO（インプットアウトプット）の基礎を取り扱った機能で、ひとまず、これさえできれば後は応用と言う感じのものです。
scaffoldには主に「新規作成、編集、更新、一覧、詳細、削除」という機能が搭載されています。この項目を見ても分かるように、確かに、webアプリケーションの基本的な機能が盛り込まれていますね。
scaffoldは別段twitterbootstrapを使わなくても作れますが、やはり見栄えが違うので、業務アプリや適当な管理ツールなどでありましたら、積極的に使っていきましょう。
twitterbootstrap3を取り扱いますが、twitterbootstrap2が未だに主流っぽいです。twitterbootstrap自体はデザイン系のライブラリ群なので、2だから古いとかはありません。多少、3の方が機能が豊富？くらいに思っておけばよいかと。
前提
railsの環境が整っている。
railsプロジェクトを作成する
ではrailsプロジェクトを作成しましょう。
適当なフォルダに移動します。私はホームディレクトリにあるrailsディレクトリの中で新しくbootstrap3プロジェクトを作ります。
cd ~/rails
下のコマンドでbootstrap3というプロジェクトを作ります。
rails new bootstrap3
プロジェクトが作成されたら、移動します。中身を確認しましょう。
cd bootstrap3 ls ./
プロジェクト出来ました。
Gemfileを編集してbootstrap３をインストールする
Gemfileを開きます。
下の内容を書き加えます。
gem 'twitter-bootstrap-rails', github: 'seyhunak/twitter-bootstrap-rails', branch: 'bootstrap3'
bootstrap3ではtherubyracerも使うので、Gemfileにもともと書かれて、コメントアウトされているtherubyracerの項目をコメントインします。
無かったら、たし加えましょう。
gem 'therubyracer', platforms: :ruby
Gemfileを保存します。
バンドルインストールしますが、rails4らしくパスをvendorに指定して、そこにgem関連を置きます。
bundle install --path vendor/bundle
therubyracerを使うとbundleインストールに時間がかかります。辛抱強く待ちましょう。
インストールが無事終わったら下のコマンドを実行して、bootstrapをインストールします。
bundle exec rails generate bootstrap:install static
無事にクリエイトされたら、bootstrapのインストール完了です。
scaffoldを作成する
次にscaffoldを作成します。概要でも説明した通り、標準的なwebアプリケーションのIOみたいなものです。
試しに、メモ書く為のscaffoldを作ります。下のコマンドを実行しましょう。ちなみにこれはtwitterbootstrap gemのexampleにあるものを使用しています。
rails g scaffold Memo title:string description:text
scaffoldで必要なファイルが作成されます。
作成されたマイグレーションファイルをデータベースに反映させます。
rake db:migrate
これでscaffoldが完成しました。まだ、bootstrapのテーマが反映されていないので、このままサーバを起動させて、サービスを見るとデフォルトのシンプルな感じになっています。
bootstrapのテーマを反映させてサーバを起動する
bootstrapのレイアウトを適応させます。
あまり良い選択肢ではないかもしれませんが、面倒なのでapp/views/layouts/application.html.erbにbootstrapのレイアウトを上書きします。
rails g bootstrap:layout application
もちろん、application.html.erbを上書きしてよいのか聞いてきますので「y」と入力して許可しましょう。
bootstrapのテーマをscaffoldのviewに反映させるには下のコマンドを打ちます。今回はMemoモデルを作ったので、Memosを指定します。
rails g bootstrap:themed Memos
これを実行すると、テーマが自動的に書き込まれます。
実行すると分かる様に、すでにファイルが存在するので、コンフリクト（衝突）が起きてしまいます。上書きを許可しましょう。質問されたら「y」と答えれば良いです。
bootstrap3のテーマが反映されました。
サーバを起動する
サーバを起動させます。
bundle exec rails s
ブラウザでURLに移動します。
http://localhost:3000/memos/
下の様に表示されれば成功です。
newを押して新しいmemoを作りましょう。
「Create Memo」を押せば新しいメモが作られます。
こんな感じです。
後は適宜カスタマイズして使い易くしていきましょう。
まとめ
scaffoldする時はbootstrapを使うと、ソースコードすらいじらずにいっちょまえのサービスを書けます。
