Polymer on Rails

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

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

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

<!-- 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が既存のブラウザでも動くように、JavaScript UIのフレームワーク Polymer を発表した。(と言っても 2013年5月なので結構前)

Railsへの実装

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

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

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

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インストール

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に書いている。

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です