Kaorina’s diary

Ruby on Railsとかとか

Rails4でRiot.js(3.3)が動く環境を構築する

実行環境

前提

あらかじめNode.jsがローカルにインストールされていること。
$ node -v を実行してバージョンが表示されればOK。

1. npmを使ってriotをインストールする

$ cd (Railsプロジェクト直下のディレクトリ)

プロジェクト直下にpackage.jsonがない場合は下記を実行

$ npm init

=> 基本Entで進み、package.jsonが作成される

packeage.jsonを編集

scripts, devDependenciesの箇所にriotを記載。
今回riotのバージョンを指定したが、しなくてもOK。編集が終わったら保存。

{
  "name": "(プロジェクト名)",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "riot": "riot"
  },
  "devDependencies": {
    "riot": "3.3.2"
  },
  "private": true
}

フロントエンド系のソースをまとめたいのでプロジェクト直下にディレクトリを作成

$ mkdir ./frontend

package.json/frontend 以下へ移動する

$ mv ./package.json frontend/

npmを使ってriotをインストール

今回このプロジェクトのみにインストールしたかったのでgオプションはつけませんでした。 また、指定のディレクトリ以下にインストールしたかったのでprefixオプションをつけました。

$ npm install --prefix ./frontend/

frontend以下にetc, node_modulesディレクトリが作成された!
この時点でfrontend以下はこのようなディレクトリ構造になっていると思います。

frontend/
├── etc
├── node_modules
├── package.json
└── riot
    ├── sample.tag

2. RailsでRiot.jsを使うためにソースをDLしてきて配置する

gemもあるようだけど、うまく動かなかったのでRiotの公式サイトからソースファイルをDLしてきて利用することにした。

curlコマンドでcompilerが含まれたmin.jsファイルをDLしてくる。

公式サイトのGitHubから、riot+compiler.min.jsを取得する。RawボタンからリンクするページのURLを指定すること〜。

oオプションをつけるとこの名前で保存するという指定ができる。 (↓改行されているけどワンライナーです)

$ curl https://raw.githubusercontent.com/riot/riot/master/riot%2Bcompiler.min.js -o ./vendor/assets/javascripts/riot.js

application.jsに追記し、上記のソースが読み込まれるようにする。

app/assets/javascripts/application.js

(省略)
//= require riot

これで環境構築は完了!

3. サンプルファイルを配置し、コンパイルを実行

tagファイルを作成

$ mkdir frontend/riot
$ touch frontend/riot/sample.tag

公式サイトで配布されているサンプルコードをコピーし、sample.tagとして保存

<sample>
  <h3>{ message }</h3>
  <ul>
    <li each={ techs }>{ name }</li>
  </ul>

  <script>
    this.message = 'Hello, Riot!'
    this.techs = [
      { name: 'HTML' },
      { name: 'JavaScript' },
      { name: 'CSS' }
    ]
  </script>

  <style>
    :scope { font-size: 2rem }
    h3 { color: #444 }
    ul { color: #999 }
  </style>
</sample>

html.erbファイルを作成

ブラウザで確認出来るviewファイルのbodyタグ内にsampleタグを配置し、mountする処理を書く。
(例)app/views/articles/index.html.erb

<!-- place the custom tag anywhere inside the body -->
    <sample></sample>
<!-- mount the tag -->
    <script>riot.mount('sample')</script>

コンパイルを実行し、tagファイルからjsファイルを作成

$ ./frontend/node_modules/.bin/riot ./frontend/riot/ app/assets/javascripts/riot/

↑については下記のような意味
[npm内のriotファイル] [tagファイルがあるディレクトリを指定] [jsファイルを作成したいディレクトリを指定]

4. 実行

ブラウザで上記のhtml.erbファイルを確認すると、、
Riotのコードが正しく実行されている(このサンプルの場合はsample.tagで設定した内容が表示されている)ことが確認出来る!

5. 諸々コミット対象から外しておく

node_modules以下、tagファイルはコミット対象に入れない方がベターなので、.gitignoreに追記しておく。
.gitignore

(省略)
/frontend/node_modules/*
/app/assets/javascripts/riot/*