Help us understand the problem. What is going on with this article?

Polymer on Rails

More than 5 years have passed since last update.

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に追記。

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に書く。

<body>
<h1>index</h1>
<paper-button label="raised button" raisedButton></paper-button>
</body>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away