1. mizukmb

    Posted

    mizukmb
Changes in title
+Ruby on RailsでPolymerを使う
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,96 @@
+参考にさせていただいたページです。
+[http://qiita.com/daei/items/37fe0d014f10f146812a](http://qiita.com/daei/items/37fe0d014f10f146812a)
+[https://github.com/alchapone/polymer-rails](https://github.com/alchapone/polymer-rails)
+基本的な使い方は上記ページ内で解説されています。
+
+## polymerを使う準備をする
+まず、Gemfileに以下のgemを追記します。
+
+```Gemfile
+gem 'polymer-rails'
+gem 'polymer-core-rails'
+gem 'polymer-paper-rails'
+```
+
+- `polymer-rails`:polymerの基本要素
+- `polymer-core-rails`:polymerが提供する[core-erements](https://www.polymer-project.org/docs/elements/core-elements.html)を使えるようにする。一覧は[ここ](https://github.com/alchapone/polymer-core-rails)の **Available elements**を参考。
+- `polymer-paper-rails`:polymerが提供する[paper-elements](https://www.polymer-project.org/docs/elements/paper-elements.html)を使えるようにする。一覧は[ここ](https://github.com/alchapone/polymer-paper-rails)の **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](https://qiita-image-store.s3.amazonaws.com/0/45047/578f0793-1a98-da1d-76b9-64fec5d9d683.png "スクリーンショット 2014-11-16 2.01.58.png")
+
+>Material Design<
+
+## 最後に
+意外と簡単に使えますね。デザインとかはCSSを書かないといけませんが…。
+あと、私が確認したのだと、
+
+```
+safari ×
+firefox ×
+chrome ○
+opera ○
+sleipnir ×
+```
+でした。対応ブラウザが少ないのはちょっと痛いですね。
+ですが、これからどんどんと対応されていくはずです。なぜならば、polymerは **web Components時代を先導する存在**となるのですから([polymer公式ページ](https://www.polymer-project.org)要約)。