#daiizメモ

Scrapboxに夢中

Web Components を学ぶ #2 「Polymerを知る」

Web Componentsの考え方にしたがって、「既存のコンポーネントを使いたい」または「自分のお手製のコンポーネントを作ってみたい」と思った場合はどうすれば良いでしょうか?どうすると一番簡単に実現できるでしょうか?

僕は今のところ、「Polymerを使うのが一番良い」と思います。

f:id:daiiz:20140826215931p:plain

(画像:http://www.polymer-project.org/

PolymerはGoogleが開発しているプロジェクトで、これを使うとWeb Componentsを手軽に体験できるようになりそうです。 この記事では、Polymerが提供してくれるおもな機能をまとめました。

Polymerで、できること

  • Chrome以外のブラウザでもWeb Componentsをつかうことができるようになる。

    • 現時点では、Shadow DOMなどのWeb Componentsに必要な技術は、Chrome以外のブラウザでは、ネイティブサポートされていないそうです。そこで、Polymerではエミュレーションライブラリ「platform.js」を用意してくれています。これを読み込んでおけば、すべてのモダンブラウザでWeb Componentsの機能が使えるようになります。これをPolyfillというようです。*1

    しかし残念ながら、完全に快適なWeb Components体験ができるのは、今のところ Chrome, Firefox のみと考えておいたほうが良いのかもしれません。僕がPolymerサイトのデモを試した限りでは、そもそも読み込めなかったり、仮に読み込みに成功した場合でも動作がカクカクして遅かったり、といったブラウザもありました。*2

  • マテリアルデザイン(Material Design)を試すことができる。

  • コンポーネントを簡単に作成できる

    • JavaScriptcreateShadowRoot()などをする手間を省くことができます。非常に直感的に<my-element>をつくることが可能になります。

Polymerで、コンポーネントの製作を始めるには

一番簡単な方法は、Chrome Dev Editor上で開発を行うことです。Chrome Dev Editorについては、こちらの記事を参照してください。

次回は、Chrome Dev Editorを用いて実際にシンプルなコンポーネントをつくってみたいと思います!

参考

*1:"「新しい環境を基準にし、古い環境を新しい環境に近づけて差をなくす」という手段を「Polyfill(ポリフィル)」といいます。"(http://www.adobe.com/jp/devnet/dreamweaver/articles/html5pack_css3_part6.html より引用)

*2:この辺りは今後もう少し詳しく調べてみます。