Polymer on Rails

2014/12/09 - プログラム言語 Polymer, Rails, Ruby

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]

: iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。今回 …

: 【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。変数とは・・・オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。言葉だけでは理解が難しいかと思いますので、まず …

: gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

: 【未経験からのRuby on Rails – 第4回】Railsアプリケーション開発をしよう！〜開発の準備編〜

こんにちは。新卒のmatsuariです。 Rubyについてまだまだ知るべきことはたくさんありますが、とにかく早くアプリを作りたい！ということで、今回はアプリ開発の準備に取り掛かっていきます。 Rubyはアプリを作成しながら、同時に学んでいきたいと思います。 Railsアプリケーション開発の準備《 …

: 【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドがなかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。そんなときによく使う便利なコード。 [code language=”javascript” …

: 【未経験からのRuby on Rails – 第１回】楽しく書けるプログラミング言語 “Ruby” とは

こんにちは、はじめまして。新卒１年目のmatsuari（女子）です。この度、Rubyの勉強を始めることになりまして、まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか？しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か？』調べました。超基礎的なこと …

: Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう！」

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップですメディアレップとは、インタ …

: Selenium × PHP でテスト自動化！【環境構築編】

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。テスト自動化の背景わたくしが担当するXmediaOneでは品質担保のために①コードベ …

: Scala実践「Either型を使ってimmutable（不変）なコードを書こう！」

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。 Scalaでイケてるコードを書きたい！背景わたくしはDACに入社してからScala …

: D3.jsとその活用事例について

D3.jsとは？ D3とは「Data Driven Document」の略で、データに基づいてドキュメントを操作するための JavaScript ライブラリです。ご存知の方も多いと思いますが、ちょっとだけD3.jsの基本的な使い方、そして弊社プラットフォームでの利用についてご紹介したいと思います。 …

PREV: 巨大データベースのスケールアップと引越作業
NEXT: Amazon ElastiCache/Redisのパフォーマンス確認

Polymer on Rails

Railsへの実装

関連記事