Polymerを使って独自拡張タグを作成した

気になっていたPolymerを使って、独自拡張タグ を作成してみた。

Polymerは最利用可能なhtmlウィジェットを作成するweb component技術にpolyfillなパッケージを追加したもので、利用することでカスタムUIを作成できるコンポーネント。

フレームワークではなく、あくまで既存のHTMLから抜け落ちているものを補完するコンポーネントという感じ。

• htmlのimport機能 - HTML、CSSとJavaScriptを含むパッケージのimport
• カスタム要素の作成 - 独自のHTML5の要素
• shadow DOM - カプセル化された要素とスタイル
• MDV(Model-driven Views) - HTMLとデータをバインド
• アニメーション - webアニメーション
• PointerEvent - プラットフォーム間でマウスイベントやタッチイベントを統合
• Observer - DOMの変更を監視
  などの機能を持つUIコンポーネントを作成できる。

今回作成したはgravatarのapiをjsonpで取得して表示するだけの簡単なものです。

という感じでemail属性を指定することで該当するユーザーのデータを取得できる。

ここではplatform.jsでpolyfillを取得しておく。
実際に仕事をしているのはimportした以下のhtmlになる。

まず、jsonpでデータを取得するhtmlをインポート

apiのcallbackは基本では自動で_polymer_jsonp_callback_が付与されるのでapiのパスは

としておく。

独自拡張タグに指定した任意の属性は

attributesで指定することで、polymer-elementのプロパティとして取得できる。

ライフサイクルメソッドは以下になり

polymer-element(ここではx-gravatar)が作成され、domの処理が可能になった場合にreadyが実行される。
polymer-responseで受け取ったdataをmodelとしてview(polymer-element要素)にbindする。
このあたりはAngularJSとほぼ同じ。

viewではdata filterでtemplate要素内の波括弧{}にdataを出力する。

最終的にtemplate要素の実行結果がx-gravatar要素に出力される。
非同期で取得してるので、取得したデータの表示に若干のタイムラグは致し方ない感じです。

PolymerはAngulerと似ている感があるけど、web compornentを利用することを目的としたフレームワークがpolymerという認識でいいのかな。

stackoverflowでも議論されていた。

repository: kazu69 / x-gravatar