テンプレート
Haml
HamlはERB(Rubyが埋め込まれたHTML)を分かりやすく記述するための言語です。
後述するSlimと似ている部分が多く,一見しただけでは違いが分からないレベルです。Hamlの方が,構造と内容を視覚的に分けようという意識が強いように感じられます。
Railsプロジェクト直下のGemfile
に以下のコードを追加します。
gem 'haml-rails'
bundle
でgemをインストールしておきます。
$ bundle install
Slim
SlimもHamlと同様にERBを分かりやすく記述するための言語です。Hamlから変換することも可能とのことです。
前述したHamlと似ている部分が多く,一見しただけでは違いが分からないレベルです。Slimの方が,短く記述しようという意識が強いように感じられます。
Railsプロジェクト直下のGemfile
に以下のコードを追加します。
gem 'slim-rails'
bundle
でgemをインストールしておきます。
$ bundle install
使用するテンプレートエンジンを選ぶ
config/application.rb
でテンプレートエンジンを指定します。
require_relative 'boot' require 'rails/all' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(*Rails.groups) module Testprj class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. config.generators.template_engine = :haml end end
config.generators.template_engine
にテンプレートエンジンのシンボルを設定してscaffoldを作成すると,指定したテンプレートエンジンでビューが作成されます。
なお,テンプレートエンジンを指定しなくても,テンプレートファイルを読み込む場合は,拡張子でエンジンが自動的に選択されます。ただし,拡張子erb
のファイルがある場合は,それが最優先で読み込まれるようです。
また,テンプレートエンジンを指定しなかった場合,Gemfile
で指定したgemが使われます(未確認ですが,最後に読み込んだgemのエンジンが使われると思われます)。
スタイルシート
Twitter Bootstrap
BootstrapはTwitter社が作成したスタイル・スクリプト集です。定められたクラスを使うことで,モニターやタブレットなど表示環境に合わせたデザインにすること(いわゆるレスポンシブデザイン),様々な追加機能を使うことができるようになります。
Railsで使うgemにはBootstrapに対応したものも多く,導入しておくことで整ったデザインを使うことができるようになります。
コンパイル済みのBootstrapをダウンロードし,適当なディレクトリに展開しておきます。その後,必要なファイルをRailsプロジェクトにコピーしていきます。
$ pushd ~/tmp(Bootstrapをダウンロードしたディレクトリ) $ unzip bootstrap-3.3.7-dist.zip Archive: bootstrap-3.3.7-dist.zip creating: bootstrap-3.3.7-dist/css/ inflating: bootstrap-3.3.7-dist/css/bootstrap-theme.css inflating: bootstrap-3.3.7-dist/css/bootstrap-theme.css.map ... $ popd $ cd vendor/assets $ cp ~/tmp/bootstrap-3.3.7-dist/js/bootstrap.min.js ./javascripts $ cp ~/tmp/bootstrap-3.3.7-dist/css/bootstrap.min.css ./stylesheets $ cp ~/tmp/bootstrap-3.3.7-dist/fonts/* .
追加したファイルを読み込むように指定します。
// 以下の行をjquery, jquery_ujsの後に追加 //= require bootstrap.min
/* 以下のコードを require_tree の前に追加 *= require bootstrap.min */
フォーム
Simple Form
標準では,モデルに対応したフォームを作成するにはform_for
を使うのが通常です。これよりも少ないコード量で,より機能的なフォームを作成するために広く使われているgemがSimple Formです。
gem 'simple_form'
Simple Formを使い始めるには,各プロジェクトにインストールしておく必要があります。Bootstrapを使っている場合は,--bootstrap
オプションを付けてインストールします。
$ rails g simple_form:install --bootstrap
Cocoon
1対多の関係を持つモデルの場合,動的に要素の追加と削除を行うことができるような仕組みを用意しなければなりません。そのような場合に役立つのがCocoonです。プロジェクトのページに書かれていますが,ウェブアプリフレームワークのApache Cocoonとは関係ありません。
Gemfile
にcocoon
を追加し,Javascriptを読み込むようにしておきます。
gem 'cocoon'
また,Cocoon用のJavascriptを読み込むように設定しておきます。
//= require cocoon