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-sass
、simple_form
、bootstrap-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
そしてサーバを立ち上げていくつかリソースを追加してみましょう!
その他
今回のチュートリアルだけで行くと、simple_formは必要ありません。しかし、今後いろいろなformを作るにあたり、アプリケーション全体のformをsimple_formで統一しておくと色々ご利益があるということで、追加しています。
まとめ
railsで開発する場合は、最低限のものを提供するのにものすごく早いスピートで作ることが可能です。
要件が複雑な場合はそのままは使えないのですが、うまく仕事にとりいれていきたいですね。