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

erb:app/views/layouts/application.html.erb

<head>
#...
<%= html_import_tag 'application' %>
#...
</head>

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

//= require polymer/polymer
//= require core-ajax/core-ajax
//= require core-input/core-input
//= require paper-button/paper-button

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

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


DACエンジニア採用情報

  関連記事

curry
【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

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

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

no image
Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 valueとfactoryの違いを考える valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplus …

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

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

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

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 使い方はconsoleと同じようにlogger.log,logger.grou …

no image
Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。 まずは、index.html my-topicsというCustom Elementに実際の処理を書く。JSONで、とあるサーバからデータを取得する、という想定。本当はJSONPで取りたかったんだけど、それは次回までの課題で… core-aja …

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

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

chain
PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

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

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

rails
初心者がRailsで開発 – deviseでユーザー認証設定 -

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …