先週のGoogle I/Oで Google は、Polymer,ウェブアプリケーション作成用の新ライブラリをお披露目した。これは ウェブ用の最利用可能なコンポーネントを作れるWeb Components, 新しいHTML5 標準を使っている。Polymerは、多くのWeb Components 技術のためのポリフィルを提供し、開発者が自分独自の再利用可能なコンポーネントを全ブラウザがそれらをサポートする前に、作ることができるようになる。更に、Polymerには広範囲のウィジェット例がついている。例えば、天気ウィジェット、時計、株価と折れ線グラフなどがある。
Web Componentsにより、 開発者は、カスタムな、再利用可能なHTMLタグを作成することができる。例として、次のは
<element name="my-own-tag">
<template>
HTML elements here
</template>
<script>
// JavaScript implementing logic
</script>
</element>
ユーザーインターフェースを作るのに、多くのウェブフレームワークがJavaScript APIを公開し、水面下でたくさんのdivやspanを生成してコントロールを実装するが、 Web Components ブラウザネイティブなソリューションなので包括的なフレームワークには依存しない。 従って、願わくば Web Components は、今日利用可能なHTMLコンポーネントと比べて 断片化を減らす ことができる。それらは一般的に特定の JavaScript フレームワークに依存している。
Web Components は、面白い新技術だが、ブラウザがそれらをサポートするまで、 あなたのユーザーのほとんどは、そのようなブラウザを使っているので、これらのフィーチャの多くは使われないままだ。この問題を回避するのが ポリフィルである。ポリフィルは、最終的にブラウザによってネイティブに実装される予定の技術を実装するコードである。もしブラウザが既にその技術を実装していれば、ポリフィル は何もしない。 実装していなければ、その動作をエミュレートする。従ってAPIの見え方を平坦にする。例えば、webshims ライブラリは、様々な HTML5 フィーチャを実装している。例えばまだブラウザがサポートしていないキャンバス、HTML5 フォーム、HTML5 メディア要素、地理位置情報などだ。
Polymer は、Web Componentsを使って上手くアプリケーションを実装する必要のある多くのウェブ技術を持っている。例えば、
- HTML インポート: 他のHTML文書中のHTMLドキュメントが含んで、再利用する方法。
- カスタム要素: 開発者がカスタムDOM要素を定義し、使用できるようになる。
- シャドウ DOM: DOMでカプセル化を提供する。
- モデル駆動ビュー: AngularJSのようなデータ結合を提供する。
- Web アニメーション: 複雑なアニメーションを実装するAPI
- ポインタイベント: マウス、タッチ、ペンのイベントを統一。
これらポリフィルはPolymerの残りの部分を使用することなく、別個に使用することができる。しかし、更にPolymer は以下を提供する。
- polymer.js: コアのPolymer ランタイムで、カスタム属性とイベントを作りやすくする
- 再利用可能なビジュアル と 非ビジュアルな要素。
Polymerは、Webコンポーネント関連標準の一部をポリフィルしようとする最初のプロジェクトではない。以前は、MozillaはX-Tag、カスタム要素標準のポリフィルを打ち上げた。そしてDart用の Web UI パッケージは、Googleの Dart言語を使用して書かれたアプリケーション用のカスタム要素とモデル駆動ビュー技術を実装している。
Google I/O でのPolymerに関する講演は、YouTubeで見れる。一般にWeb Components についてもっと知りたければ、 Web Components talk on Google I/Oがもっとバックグラウンドを与えてくれる。入門用のチュートリアルと他のドキュメントは、Polymer ウェブサイトにある。