Polymer on Rails


[polymer]: https://www.polymer-project.org/ "Polymer Project"
[wc-lig]: http://liginc.co.jp/web/html-css/html/58267 "Web Components LIG"
[wc]: http://liginc.co.jp/web/html-css/html/58267 "Web Components"
[html-imports-browser]: http://caniuse.com/#feat=imports "HTML Imports for Browser"
[shadow-dom-browser]: http://caniuse.com/#feat=shadowdom "Shadow DOM for Browser"
[cutrom-elements-browser]: http://caniuse.com/#feat=custom-elements "Custom Elements for Browser"
[web-animation-browser]: http://caniuse.com/#feat=web-animation "Web Animation for Browser"
[custom-elements]: http://www.w3.org/TR/custom-elements/ "Custom Elements"
[html-imports]: http://www.w3.org/TR/html-imports/ "HTML Imports"
[shadow-dom]: http://www.w3.org/TR/shadow-dom/ "Shadow DOM"
[web-animation]: http://w3c.github.io/web-animations/ "Web Animation"

[Web Components][wc]をご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。
説明すると長くなるので、LIGさんのにその辺はお任せして。([この記事読んでください。][wc-lig])

簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。

* Custom Elements, [説明][custom-elements], [対応ブラウザ][cutrom-elements-browser]
* HTML Import, [説明][html-imports], [対応ブラウザ][html-imports-browser]
* Shadow Dom, [説明][shadow-dom], [対応ブラウザ][shadow-dom-browser]
* Animation Elements, [説明][web-animation], [対応ブラウザ][web-animation-browser]

例えば、HTML Importの機能を使えば、こんな風に Google Map が実装できる。

```html
<!-- Polyfill Web Components support for older browsers -->
<script src="components/platform/platform.js"></script>

<!-- Import element -->
<link rel="import" href="google-map.html">

<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>
```

ただし、対応ブラウザを見れば分かるとおり、現時点で思い切って使うのは憚られる。

そこで、Googleは、[Web Components][wc]が既存のブラウザでも動くように、JavaScript UIのフレームワーク [Polymer][polymer] を発表した。（と言っても [2013年5月](http://steps.dodgson.org/b/2013/05/19/polymer-and-web-components/ "Polymer And Web Components")なので結構前）

## Railsへの実装

果たして、Railsにも [Polymer][polymer] のプラグイン群がある。それぞれ下記のような役割。

[polymer-rails]: https://github.com/alchapone/polymer-rails "Polymer and web components for Ruby on Rails"
[polymer-core]: https://github.com/alchapone/polymer-core-rails "Polymer core elements for Ruby on Rails project"
[polymer-paper]: https://github.com/alchapone/polymer-paper-rails "The Paper elements are a set of UI elements that implement the material design system"

* [Polymer Rails][polymer-rails], 基本モジュール
* [Polymer Core][polymer-core], Ajaxなどのモジュール
* [Polymer Paper][polymer-paper], Formなどの表示部分のモジュール

上記3つのモジュールを Rails で動かすための初期設定をメモ。

とりあえず Rails の初期作成。

```bash
mkdir myapp
cd myapp
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '4.1.6'" >> Gemfile
bundle install --path vendor/bundle
bundle exec rails new . --skip-bundle
#Gemfile上書きするか? と聞かれるので "y" と答える
bundle install
```

polymer系のgemインストール

```bash
echo "gem 'polymer-rails'" >> Gemfile
echo "gem 'polymer-core-rails'" >> Gemfile
echo "gem 'polymer-paper-rails'" >> Gemfile
bundle install
bundle exec rails g polymer:install # Polymer初期設定
```

Polymerを使うページのHelperやLayoutにimportを記述。僕はとりあえ`layouts/application.html.erb`に書いている。

```erb:app/views/layouts/application.html.erb
<head>
  #...
  <%= html_import_tag 'application' %>
  #...
</head>
```

後は、使うComponentを`assets/components application.html.erb`に追記。

```erb/assets/components/application.html.erb
//= require polymer/polymer
//= require core-ajax/core-ajax
//= require core-input/core-intut
//= require paper-button/paper-button
```

これで準備は終了。後は、こんな感じでerbに書く。

```erb
<body>
<h1>index</h1>
<paper-button label="raised button" raisedButton></paper-button>
</body>
```