Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?
@eielh

material uiをRailsで使ってみた

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

参考文献

40
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
40
Help us understand the problem. What is going on with this article?