Ruby on Rails への組み込み（1）
2015/05/29
前回までの3回の記事では、Cape.JS で仮想 DOM を作成するための方法を説明してきました。
今回からは、Cape.JS を Ruby on Rails に組み込む手順を解説します。
「解説はいいからソースコードを見せてほしい」というせっかちな方は、https://github.com/oiax/capejs-demo-on-rails からデモアプリを入手してください。本稿で作成するサンプル Rails アプリケーションは、だいたいこのデモアプリと同じものになる予定です。
前提条件として Ruby （v2.1 以上）、 Rails 4.2、Node.js （v0.12 以上） そして Git （v2.0 以上）があなたの PC にインストールされていることを想定します。
各ソフトウェアのインストール手順の説明は省略します。「node.js インストール windows」や「git インストール mac」などのワードでネット検索して調べてください。
今回から何回かに渡って作っていく Rails アプリケーションは、簡単な「Todo リスト」の管理を行うためのものです。Todo リストのデータは SQLite3 のデータベースに格納します。ユーザーのログイン・ログアウトの機能は作りません。
では、アプリケーションの骨格を作りましょう。
$ rails new todo_list --skip-bundle
$ cd todo_list
テキストエディタで Gemfile を開き、末尾に次の1行を加えます:
gem 'sprockets-es6', '~> 0.6.1'
実を言えば、Cape.JS を利用するのにこの記述の追加は必須ではありません。しかし、ECMAScript 6（通称 ES6。JavaScript の次期標準仕様）の構文を利用すると Cape.JS プログラミングがより楽しくなります。sprockets-es6 は、ES6 で書かれたプログラムを現行の JavaScript 用に変換する Gem パッケージです。
そして、Gem パッケージ群をインストールします:
$ bin/bundle
Windows の方はコマンドの前に ruby を付けてください。一般に、bin/ で始まるコマンドを実行するとき、Windows では ruby を先頭に付ける必要があります。
そして Bower （JavaScript パッケージ管理ツール）をインストールします。
$ sudo npm install -g bower
Windows では sudo を省略してください。
テキストエディタで新規ファイル .bowerrc を次の内容で作成します。
{
"directory": "vendor/assets/components"
}
Bower で管理されるパッケージは、vendor/assets/components ディレクトリにインストールされます。
次に Cape.JS をインストールします:
$ bower install capejs
同様に Bower を使って Bootstrap、Font Awesome そして lodash をインストールします。
$ bower install bootstrap fontawesome lodash
これらのパッケージは Cape.JS にとって必須ではありませんが、次回以降の記事で使われることになるので、あらかじめインストールしておきます。
さらに 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"
}
}
本稿執筆時点（2015年5月29日）では dependencies セクションには上記のようなバージョン番号が並んでいます。しかし、将来的にはこのバージョン番号が変化するはずです。バージョン番号の最後の数字が変化する程度であれば多分問題ありませんが、1個目または2個目の番号が異なる場合は、本連載の内容を実際に試してみる前に bower.json を上記の記述に合わせてから bower install を実行し、バージョン番号を一致させてください。
2015年6月17日に、bootstrap の 3.3.5 がリリースされましたが、このバージョンは Rails（正確には、Sprockets）との相性が悪く、うまく動きません。そこで、bower.json の dependencies セクションにある bootstrap のバージョン番号を =3.3.4 に変更してください（~を=に変更）。こうすることで、バージョン番号が 3.3.4 に固定されます。
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リスト」アプリの開発を続けます。
