polymerの話（GoogleのWeb component使ったjavascriptのlibrary）
polymer.js
Google IO 2013で発表されたweb componentを使ったjavascriptのライブラリ
- Video
概要
Web componentに対応/非対応に関わらず利用できるようにしたjsのライブラリ。
- この考え方をPolyfill（ポリフィル）と呼ぶそうです。（参考ページ）
＋α 簡易フレームワーク的な幾つかの機能を追加 ※後述
なお、よくあるMV* framework程の機能は無い。
※angular.jsとはくっつく可能性有り
構成
構成
Foundation(platform.js)
- browserのネイティブか、対応してなければpolyfillしてweb componentを実行
Core(polymer.js)
土台を補完するhelper。
例えばcomponentとattributeのbindingやEvent mapping等が出来るようになる。
Elements
- coreの上のUI/非UI要素
公式ページの真ん中「What is Polymer?」下の図を見ると分かり易い。
参考
公式
個人の書かれたブログ記事
install
$ git clone git://github.com/Polymer/polymer.git --recursive $ git clone git://github.com/Polymer/toolkit-ui.git --recursive
注意
※polymerと周辺submoduleを入れるので、結構時間かかる。
※2番目のtoolkit-uiはsample
server
動作にlocal web serverが必要なので、
node.jsインストールしてる前提で、
今回は、simple http server使う
$ npm -g install simple-http-server
sample
サンプルソースのmenuを見てみる
server起動
polymerとtool-kitの入っているディレクトリと同じ階層でサーバー起動
$ nserver
- 以下にアクセス
- http://localhost:8000/toolkit-ui/workbench/menu.html
- sampleとなるmenuがある。
source
ソースを見るととても綺麗。
<script src="../../polymer/polymer.js"></script> <link rel="import" href="../elements/g-menu.html"> <link rel="import" href="../elements/g-menu-item.html"> ・・・略・・・ <g-menu selected="0"> <g-menu-item src="images/comment.png">Post a Comment</g-menu-item> <g-menu-item src="images/hangout.png">Share Link</g-menu-item> <g-menu-item src="images/mail.png">Email Link</g-menu-item> <g-menu-item src="images/favorite.png">Add to Favorites</g-menu-item> </g-menu>
ぱっと見て何がやりたいのかすぐに分かる内容
shadow DOM
google chrome (canary) devtoolsの設定の「show shadow DOM」を有効にすると
icon等の描写htmlが入ってる。
※普通のchromeだと、少し表示が違ってたのでcanaryがいいかも。
コンポーネントを作ってみる
①：カスタム要素を作ってみる
公式ページの基本的なscriptやってみる
まずは、カスタム要素だけを作る
html
カスタム要素使うだけならplatform.jsだけ読めば良いらしい。
- my_poly/index.html
<!DOCTYPE HTML> <html > <head> <script src="/polymer/platform/platform.js"></script> <link rel="import" href="/my_poly/my-element.html" /> </head> <body> <my-element></my-element> </body> </html>
- my_poly/my-element.html
<element name="my-element"> <section>i am my element</section> <script > if (this !== window) { var section = this.querySelector('section'); this.register({ prototype: { readyCallback: function(){ this.innerHTML = section.innerHTML; } } }); } </script> </element>
- ちなみに、chrome devtool見ると、XHRでmy-element呼んだとか出てる。だから、server必要。
- (HTML importsがサーバー必要。NOTEにも書いてあった)
②：Polymer要素を作ってみる
sampleを参考にtemplateもやってみる。
カスタム要素をPolymer要素として作る。
このためには、polymer.jsを呼び出す
html
- my_poly/index.html
<!DOCTYPE html> <html> <head> <script src="polymer/polymer.js"></script> <link rel="import" href="my-element.html"> </head> <body> <my-element></my-element> </body> </html>
さっきは、platform.jsだったが、polymer.jsに変わってる。
※devtoolsを見ると、platform.jsも呼んでる。polymer.jsから呼ばれてるっぽい。
- my_poly/my-element
<element name="my-element"> <template> <span>This is Shadow DOM.</span> </template> <script> Polymer.register(this); </script> </element>
③：componentとnative要素をbindingしてみる
これもsample
- index.html
<!DOCTYPE HTML> <html > <head> <script src="/polymer/polymer.js"></script> <link rel="import" href="/my_poly/my-element.html" /> </head> <body> <my-element></my-element> </body> </html>
- my-element.html
<element name="my-element"> <template> <p>Name : {{name}}</p> <p>Age : {{age}}</p> <input id="ageInput" type="range" value="{{age}}" /> <input id="nameInput" type="text" value="{{name}}" /> </template> <script > Polymer.register(this, { age : "29", name : "taro", nameChanged: function (){ if(this.name) { this.name = this.name[0].toUpperCase() + this.name.slice(1); } } }); </script> </element>
おお。formと表示値が連動してる。
公式ページにそれ以外色々紹介されている。
使ってみて
あくまで私見。個人的な感想です。
platform.js/polymer.js
- platform.jsとpolymer.jsの違いが初め分かり辛かった。
- polymer.jsの記述が独自。これで共通化しようという取り組みなのだろうけど。
これから
- web component自体の考え方は素晴らしい。(流行ってほしい。今のhtmlどれも汚いので)
- platform.jsでpolyfill用途で使うなら、他のframeworkとの組み合わせもいけそう。
- polymer.jsは、MV*ではないものの、結局また新しいframeworkに近い物になっていて、既存のフレームワーク等と一緒には使えない。また新たに独自なものを覚えないといけない。
- angular.jsとくっつく可能性あるようなので、angular.js系のエンジニアがpolymer.jsもセットで使うようになるのかなぁ。
