Polymer on Rails

     - プログラム言語 , ,  


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

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

例えば、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 のプラグイン群がある。それぞれ下記のような役割。

上記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]


DACエンジニア採用情報

  関連記事

GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …

SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

Scala入門 基礎編「Scalaの書き方を理解しよう」 – PHP使いからScala使いへ転身!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、今回はScala入門第二弾として、Scalaの書き方を紹介する基礎編をお送りしま …

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

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

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …

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

次のようなHTMLがあったとする。 [code language=”html”] <!doctype html> <html lang="jp" ng-app="App"> <head> <me …

ECMAScript6を使ってみた ~「Promise」編

ECMAScript6とは 一応ちょっとだけ説明しておくと、 ECMAScript(エクマスクリプト)は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。(以下、ES6と呼びます) ES6ではcon …

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

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