Web Componentsについて簡単に勉強してみました。 – SAITEI no CHINJUU!!!（最低の珍獣）

総選挙の結果より、劇場支配人と言う肩書きにビックリした大熊猫です。

Web Componentsとは？

Web Componentsは、現在W3Cで提案されているウェブブラウザ向けAPI一式の総称です。
以下がそのAPIと概要になります。

HTML Imports

他のHTML文書中のHTMLドキュメントが含んで、再利用する方法。

Custom Elements

開発者がカスタムDOM要素を定義し、使用可能にする。

Shadow DOM

DOMでカプセル化を提供する。
通常のDOMツリーとは別の空間を設ける仕組み。
双方のスタイルの定義などは干渉されなくなる。

Web Animations

CSS Animations と CSS Transitions と SVG Animations を統合するAPI

Pointer Events

マウス、タッチ、ペンのイベントを統一するAPI

詳しくはこちらのスライドを呼んでいただけると
分かると思います。

Web Componentsはどれも画期的な提案で、利用出来るようになれば
Webアプリケーションの開発ももっと活気付くのでは無いかと思います。

ところが・・・と言いますか、やはりと言うべきか、残念な事に現在殆どのブラウザで
実装がなされておりません。

しかし、先日のGoogle I/Oで発表されたPolymer.jsというライブラリを利用すれば
その多くの機能を利用できるそうです。

Polymer.jsとは

Polymer.jsとはブラウザの実装がまだまだ進んでいないWeb Componentsの
多くの機能を動かすためのポリフィルを提供し先行し利用する事を
可能にしています。

Polymer.jsを利用する環境をつくる

公式サイトのGetting the Codeを見ながらpolymer.jsをクローンする

git clone git://github.com/Polymer/polymer.git --recursive

試してみる

~~HTML Imports~~Shadow DOMの簡単なサンプルを作成してみました。
以下はファイルの構成です。

├── polymer
│     └── polymer.js(その他複数のファイル)
│  
├── test-element.html
│
└── index.html

index.htmlは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<script src="polymer/polymer.js"></script>
<link rel="import" href="test-element.html">
</head>
<body>
<test-element></test-element>
</body>
</html>

test-element.html

<element name="test-element">
<template>
<span><b>test-element.html</b>を読み込みました。この部分は Shadow DOMです。</span>
</template>
<script>
Polymer.register(this);
</script>
</element>

test-element.htmlで記述されている要素はShadow DOMとなり
通常のDOMとは干渉しない状態になります。
通常のDOM上では[test-element]と独自で作られた要素が認識しています。

またShadow DOMはChromeでは開発ツールの設定で確認出来るように
する事ができます。

開発ツールで確認すると以下のようにソース上に表示されます。

まとめ

Web Componentsはとても壮大な計画ではないかと思います。
そのため、その概念を把握するのはなかなか難しいものがあります。

しかし、今後Web技術ベースのアプリ開発の需要が高まる事を考えると、Web Componentsは無視できない存在になります。
まだブラウザの実装が進んでいない、今のうちからPolymerを利用し理解を深めておく事は
後々に役立つと考えます。

補足

Polymer と Web Componentsについては以下のこちらの記事がとても参考になります。