Posted at

material uiをRailsで使ってみた

More than 3 years have passed since last update.

material uireact.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と書かれたボタンができていると思います。


参考文献