material uiはreact.jsを使ってMaterial Designを実現しています。

material uiはbrowserifyと一緒に使うことになります。
そこでbrowserify-railsを利用してみました。

この方法だとJavaScriptを変更する度にbrowserifyが実行されてとても重いです。

また、railsプロジェクト内に埋め込みする利点も浮かびません。

そのため、この手法はおすすめしませんが、せっかく試したので記録を残しておきます。

作成したソースコードはeiel/material-ui-rails-sampleに置いています。

利用方法

利用するには、rubyとnodejsがインストールされている状態で

$ bundle install
$ npm install
$ bin/rails s

になります。

作業内容

プロジェクトの作成

$ rails new --no-rc material_ui
$ cd material_ui

--no-rcはなくても構いませんが一応。

利用するgem

gem 'browserify-rails', '~> 0.5'
gem 'less-rails'
gem 'therubyracer', platforms: :ruby

browserify-railsを使うとnpmのモジュールを使えるようになります。
また、material-uiのCSSがlessで書かれているので、less-railsとtherubyracerを入れています。

利用するnodeモジュール

package.jsを用意します。

package.json

{
  "name": "something",
  "devDependencies" : {
    "browserify": "~> 6.3"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

用意したらnpm installします。

$ npm install

利用するnode packageをインストールします。

$ npm install --save material-ui react
$ npm install --save-dev reactify

設定

JSXを変換するのにreactifyを使うので、オプションを設定しています。
また、material-uiに付属しているlessファイルの置き場にlessのパスを設定します。

config/application.rb

module MaterialUi
  class Application < Rails::Application
    # ... 中略 ...
    config.browserify_rails.commandline_options = ["-t reactify"]
    config.less.paths << "#{Rails.root}/node_modules/material-ui/src/less/"
  end
end

表示するページの作成

home#indexを用意して、そこで遊ぶことにしました。

$ bin/rails g controller home index

ルートをhome#indexに設定します。

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
end

material_uiに付属のRaisedButtonを使ってみます。

app/assets/javascripts/material_ui.js

var React = require('react'),
  mui = require('material-ui'),
  RaisedButton = mui.RaisedButton;

$(function(){
  React.render(
    <RaisedButton label="hello" />,
    document.body
  );
});

bin/rails sでサーバを起動して、http://localhost:3000/ にアクセスするとhelloと書かれたボタンができていると思います。

material uiをRailsで使ってみた