テンプレート

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

　１対多の関係を持つモデルの場合，動的に要素の追加と削除を行うことができるような仕組みを用意しなければなりません。そのような場合に役立つのがCocoonです。プロジェクトのページに書かれていますが，ウェブアプリフレームワークのApache Cocoonとは関係ありません。

　Gemfileにcocoonを追加し，Javascriptを読み込むようにしておきます。

gem 'cocoon'

　また，Cocoon用のJavascriptを読み込むように設定しておきます。

//= require cocoon
投稿タグ
,