blog.waterlow.work

Ruby, Rails, js, etc...

bootstrapとsimple_formのチュートリアル

目的

rails newしてから、bootstrapで管理画面を作るのに一番早い方法が何かを探っていた。
rails_adminやactive_admin等もあるが、今回はある程度自前カスタマイズを想定しているので、全部ビルトインみたいな感じのものは使わない。 bootstrap系のgemとsimple_formを使って、scaffoldでどこまでがんばれるかを見てみる。

対象読者

railsチュートリアル2章までを終えて、generateコマンド等が実行できる人。

バージョン

$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin14]
$ rails -v
Rails 5.0.1

サンプルなのでrubyバージョンは前後していても動くかと思います!

1. rails new〜bundle install

まずアプリケーションを作りましょう。今回は、テスト書かない、bundle installは後ほどまとめてということで-B-Tというオプションを渡します。
(詳しいオプションたちはrails new -hしていろいろ見てみましょう。)

$ rails new test_simple_form -B -T
create
create  README.md
create  Rakefile
create  config.ru
...
create  vendor/assets/stylesheets/.keep
remove  config/initializers/cors.rb
$ cd test_simple_form

次に、Bundlerで使用するGemfileをテキストエディタで編集します。以下の内容に書き換えてください。

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end

gem 'rails', '5.0.1'
gem 'sqlite3', '1.3.13'
gem 'puma', '3.7.0'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.0.4'
gem 'coffee-rails', '4.2.1'
gem 'jquery-rails', '4.2.2'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.6.1'
gem 'record_tag_helper', '1.0.0'
gem 'bootstrap-sass', '3.3.7'
gem 'simple_form', '3.4.0'

group :development, :test do
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'bootstrap-generators', '3.3.4'
  gem 'web-console', '3.4.0'
  gem 'listen', '3.0.8'
  gem 'spring', '2.0.1'
  gem 'spring-watcher-listen', '2.0.1'
end

gemをインストールします。

$ bundle install

今回のチュートリアルではbootstrap-sasssimple_formbootstrap-generatorsの機能がみそになります。bootstrap-generatorsは今日時点でrails5対応が終わっていないようなので、generateだけやってgemfileからけしてもらってもOK

2. generate xx

各種初期化用のgenerateコマンドを実行していきます。

まずはbootstrapのスタイルシートとlayoutファイル、scaffold用のテンプレートを作成するbootstrap:installです。
途中application.html.erbを上書くかどうか聞かれますが、OKなのでYを入力してenterを押しましょう。

$ rails g bootstrap:install
...
Overwrite /path/to/app/test_simple_form/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] Y
...

次にsimple_formの設定ファイルをテンプレート作るコマンドです。
今回はbootstrap用の物を作るので、--bootstrapというオプションを渡します。
途中lib/templates/erb/scaffold/_form.html.erbを上書いていいか聞かれるので、Yを押してenter。bootstrap-generatorsがつくった_form.html.erbもありますが、今回はsimple_formのものを使います。

$ rails g simple_form:install --bootstrap
...
Overwrite /path/to/app/test_simple_form/lib/templates/erb/scaffold/_form.html.erb? (enter "h" for help) [Ynaqdh] Y
...

リソース作成

scaffoldで何かリソースを作ってみましょう

$ rails g scaffold post title body:text published:boolean
$ rails db:create
$ rails db:migrate

そしてサーバを立ち上げていくつかリソースを追加してみましょう! f:id:waterlow2013:20170129234346p:plain

その他

今回のチュートリアルだけで行くと、simple_formは必要ありません。しかし、今後いろいろなformを作るにあたり、アプリケーション全体のformをsimple_formで統一しておくと色々ご利益があるということで、追加しています。

まとめ

railsで開発する場合は、最低限のものを提供するのにものすごく早いスピートで作ることが可能です。
要件が複雑な場合はそのままは使えないのですが、うまく仕事にとりいれていきたいですね。