Ruby on Rails への組み込み（1）

前回までの3回の記事では、Cape.JS で仮想 DOM を作成するための方法を説明してきました。

今回からは、Cape.JS を Ruby on Rails に組み込む手順を解説します。

前提条件として Ruby （v2.1 以上）、 Rails 4.2、Node.js （v0.12 以上） そして Git （v2.0 以上）があなたの PC にインストールされていることを想定します。

---

今回から何回かに渡って作っていく Rails アプリケーションは、簡単な「Todo リスト」の管理を行うためのものです。Todo リストのデータは SQLite3 のデータベースに格納します。ユーザーのログイン・ログアウトの機能は作りません。

では、アプリケーションの骨格を作りましょう。

$ rails new todo_list --skip-bundle
$ cd todo_list

テキストエディタで Gemfile を開き、末尾に次の1行を加えます:

gem 'sprockets-es6', '~> 0.6.1'

そして、Gem パッケージ群をインストールします:

$ bin/bundle

---

そして Bower （JavaScript パッケージ管理ツール）をインストールします。

$ sudo npm install -g bower

テキストエディタで新規ファイル .bowerrc を次の内容で作成します。

{
  "directory": "vendor/assets/components"
}

Bower で管理されるパッケージは、vendor/assets/components ディレクトリにインストールされます。

次に Cape.JS をインストールします:

$ bower install capejs

同様に Bower を使って Bootstrap、Font Awesome そして lodash をインストールします。

$ bower install bootstrap fontawesome lodash

さらに Bower の初期設定を行います。ターミナルで bower init コマンドを実行してください。最初に ? name: (todo_list) というプロンプトが現れるのでそのまま Enter キーを押してください。以降、10個ほどの質問が表示されますが、すべて空のまま Enter キーを押してください。

結果として次のような内容の bower.json というファイルが作られます。

{
  "name": "todo_list",
  "version": "0.0.0",
  "authors": [
    "John Doe <john@example.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "vendor/assets/components",
    "test",
    "tests"
  ],
  "dependencies": {
    "capejs": "~1.0.0",
    "bootstrap": "~3.3.4",
    "fontawesome": "~4.3.0",
    "lodash": "~3.9.3"
  }
}

---

Cape.JS を Rails アプリケーションに組み込みます。テキストエディタで app/assets/javascripts/application.js を開き、その内容を次のように編集します:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require capejs
//= require bootstrap
//= require lodash
//= require_tree .

さらに、app/assets/stylesheets/application.css を開き、その内容を次のように編集します:

/*
 *= require_tree .
 *= require fontawesome
 *= require_self
 */

以上で、Cape.JS を用いた Rails アプリケーション開発を始める準備が整いました。

---

次回も、引き続き「Todoリスト」アプリの開発を続けます。