Polymer on Rails
Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。
説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。)
簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。
- Custom Elements, 説明, 対応ブラウザ
- HTML Import, 説明, 対応ブラウザ
- Shadow Dom, 説明, 対応ブラウザ
- Animation Elements, 説明, 対応ブラウザ
例えば、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 のプラグイン群がある。それぞれ下記のような役割。
- Polymer Rails, 基本モジュール
- Polymer Core, Ajaxなどのモジュール
- Polymer Paper, Formなどの表示部分のモジュール
上記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>
関連記事
-
-
ナイーブベイズで羽生さんと羽生くんを分類してみた
はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …
-
-
ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築
概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …
-
-
【未経験からのRuby on Rails – 第3回】変数と定数
こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …
-
-
gulp.jsで広告タグの開発環境を整える
SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …
-
-
Railsたった14行でアドサーバーAPIができた話
こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …
-
-
プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。
こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …
-
-
Angular.jsのvalueとfactoryの違いを考える
次のようなHTMLがあったとする。 valueとfactoryの違いを考える valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplus …
-
-
PyStanによるはじめてのマルコフ連鎖モンテカルロ法
はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …
-
-
【未経験からのRuby on Rails – 第１回】楽しく書けるプログラミング言語 “Ruby” とは
こんにちは、はじめまして。新卒１年目のmatsuari（女子）です。 この度、Rubyの勉強を始めることになりまして、 まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか？ しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か？』調べました。 超基礎的なこと …
-
-
ECMAScript6を使ってみた ～「Promise」編
ECMAScript6とは 一応ちょっとだけ説明しておくと、 ECMAScript（エクマスクリプト）は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。（以下、ES6と呼びます） ES6ではcon …