参考にさせていただいたページです。
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を書き加えます。
//= require polymer/polymer
次に、polymerのimport文を書きます。app/views/layout/apprication.html.erbファイルの<head>~</head>タグ内に記述するのが無難でしょう。
<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に
//= require paper-button/paper-button
と追記します。書き方は、//=require <部品名>/<部品名>
これで、Railsでも<paper-button></paper-button>が使えるようになりました。
実演
早速使いましょう
<h1>Ruby on Railsでpolymerを使う</h1>
<paper-button>button</paper-button>
<paper-button disabled>disabled</paper-button>
<paper-button noink>noink</paper-button>
実行後はこんな感じ
＞Material Design＜
最後に
意外と簡単に使えますね。デザインとかはCSSを書かないといけませんが…。
あと、私が確認したのだと、
safari ×
firefox ×
chrome ○
opera ○
sleipnir ×
でした。対応ブラウザが少ないのはちょっと痛いですね。
ですが、これからどんどんと対応されていくはずです。なぜならば、polymerは web Components時代を先導する存在となるのですから（polymer公式ページ要約）。