Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。)
簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。
- Custom Elements, 説明, 対応ブラウザ
- HTML Import, 説明, 対応ブラウザ
- Shadow Dom, 説明, 対応ブラウザ
- Animation Elements, 説明, 対応ブラウザ
例えば、HTML Importの機能を使えば、こんな風に Google Map が実装できる。
[code lang="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> [/code]
ただし、対応ブラウザを見れば分かるとおり、現時点で思い切って使うのは憚られる。
そこで、Googleは、Web Componentsが既存のブラウザでも動くように、JavaScript UIのフレームワーク Polymer を発表した。（と言っても 2013年5月なので結構前）
Railsへの実装
果たして、Railsにも Polymer のプラグイン群がある。それぞれ下記のような役割。
- Polymer Rails, 基本モジュール
- Polymer Core, Ajaxなどのモジュール
- Polymer Paper, Formなどの表示部分のモジュール
上記3つのモジュールを Rails で動かすための初期設定をメモ。
とりあえず Rails の初期作成。
[code lang="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 [/code]
polymer系のgemインストール
[code lang="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初期設定 [/code]
Polymerを使うページのHelperやLayoutにimportを記述。僕はとりあえずlayouts/application.html.erbに書いている。
erb:app/views/layouts/application.html.erb [code lang="html"] <head>
...
<%= html_import_tag 'application' %>
...
</head> [/code]
後は、使うComponentをassets/components application.html.erbに追記。
[code lang="text"] //= require polymer/polymer //= require core-ajax/core-ajax //= require core-input/core-input //= require paper-button/paper-button [/code]
これで準備は終了。後は、こんな感じでerbに書く。
[code lang="erb"] <body> <h1>index</h1> <paper-button label="raised button" raisedButton></paper-button> </body> [/code]
