Polymer on Rails
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]
関連記事
-
-
GoogleスプレッドシートからTreasureDataへデータを取り込む
AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ？ Googleスプレッドシート上でマ …
-
-
TypeScriptについてまとめてみた
はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何？ TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …
-
-
【小ネタ】JSで要素の組み合わせを列挙する
下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …
-
-
PyStanによるはじめてのマルコフ連鎖モンテカルロ法
はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …
-
-
Qiita Team API と Google Spread Sheet でチーム日報を生成する
チーム日報を活用する MarketOne 開発チームでは複数拠点に分かれての開発を行っています。リモート開発が中心となると口頭でのコミュニケーションに限界があるため、テキストベースのコミュニケーションの比重が高い状態にあります。 チケットシステムやソースコード管理ツール上の議論はもちろんおこなってい …
-
-
初心者がRailsで開発 – deviseでユーザー認証設定 –
こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します！！ 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …
-
-
Railsたった14行でアドサーバーAPIができた話
こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …
-
-
【未経験からのRuby on Rails – 第3回】変数と定数
こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …
-
-
gulp.jsで広告タグの開発環境を整える
SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …
-
-
iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。
はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …