Help us understand the problem. What is going on with this article?

Ruby on RailsでPolymerを使う

More than 3 years have passed since last update.

参考にさせていただいたページです。
http://qiita.com/daei/items/37fe0d014f10f146812a
https://github.com/alchapone/polymer-rails
基本的な使い方は上記ページ内で解説されています。

polymerを使う準備をする

まず、Gemfileに以下のgemを追記します。

gem 'polymer-rails' 
gem 'polymer-core-rails'
gem 'polymer-paper-rails'
  • polymer-rails:polymerの基本要素
  • polymer-core-rails:polymerが提供するcore-erementsを使えるようにする。一覧はここAvailable elementsを参考。
  • polymer-paper-rails:polymerが提供するpaper-elementsを使えるようにする。一覧はここAvailable elementsを参考。

そして、
$ bundle install
をする。

次に、Railsプロジェクトにpolymerファイル等の生成を行います。
$ rails g polymer:install

これによって、apprication.jsファイルに//=require polymer/platformが書き加えられ、
app/assets/componentsディレクトリが作成され、その中にapplication.html.erbファイルが生成されます。

そして、そのファイルに//= require polymer/webcomponentsを書き加えます。

app/assets/components/apprication.html.erb
//= require polymer/polymer

次に、polymerのimport文を書きます。app/views/layout/apprication.html.erbファイルの<head>~</head>タグ内に記述するのが無難でしょう。

app/views/layout/apprication.hrml.erb
<head>
...
<%= html_import_tag 'application' %>
...
</head>

これで準備完了です。

polymerを使う

まず、使う部品をコマンドラインから生成します。

$ rails g polymer:component <部品名>

<部品名>には自分が使いたい部品名を書いて下さい。例えば、<paper-button>を使いたければ

$ rails g polymer:component paper-button

とすれば、componentsディレクトリ以下に部品が自動生成されます。

次に、app/assets/components/apprication.html.erb

app/assets/components/apprication.html.erb
//= require paper-button/paper-button

と追記します。書き方は、//=require <部品名>/<部品名>
これで、Railsでも<paper-button></paper-button>が使えるようになりました。

実演

早速使いましょう

index.html.erb
<h1>Ruby on Railsでpolymerを使う</h1>

<paper-button>button</paper-button>
<paper-button disabled>disabled</paper-button>
<paper-button noink>noink</paper-button>

実行後はこんな感じ
スクリーンショット 2014-11-16 2.01.58.png

>Material Design<

最後に

意外と簡単に使えますね。デザインとかはCSSを書かないといけませんが…。
あと、私が確認したのだと、

safari ×
firefox ×
chrome ○
opera ○
sleipnir ×

でした。対応ブラウザが少ないのはちょっと痛いですね。
ですが、これからどんどんと対応されていくはずです。なぜならば、polymerは web Components時代を先導する存在となるのですから(polymer公式ページ要約)。

Why do not you register as a user and use Qiita more conveniently?
  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
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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