Google Polymerで独自タグを使ってみた

近く各ブラウザで実装される予定のWeb Components．これはHTMLで楽にユーザインターフェイスを記述できる仕組み．

HTMLのタグをコンポーネント化することで再利用性，メンテナンス性，開発効率を高める．

例えばヘッダーを作るとき今までだと

<div id="header">
  <ul>
    <li><a href="#"></a></li>
    ....

みたいに書いていたと思うんだけどWeb Componetsを使うと

<my-header></my-header>

みたいな感じで簡単にかける．ただし，このmy-headerは自分で作る必要がある．でも一度作ってしまえば簡単に再利用可能．

さて，このWeb Componentsを構成する要素は主にこんな感じ．

Custom Components

独自タグを定義することができる．独自タグの名前は通常のタグと区別するため-で区切る．例)my-element

Imports

独自タグはそれぞれhtmlファイルで定義する．使用するためにはimportする必要がある．

<link rel=“import” href=”” />

Templates

独自タグで使うcssやjsを読み込む．実質的にこれが独自タグの本体．

Shadow DOM

独自タグの内部の複雑な(独自タグの使用者が見る必要が必ずしもない)DOMを隠蔽する．

実際の使い方．

インストール

$bower install —save Polymer/polymer
$bower install —save Polymer/core-elements
$bower install —save Polymer/paper-elements

独自タグを使う

(1)独自タグを作る

<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element">
  <template>
    <span>ShadowDOM</span>
  </template>
  <script>
    Polymer({});
  </script>
</polymer-element>

polymer.htmlは独自タグ作成に必要な様々な機能を提供する． templateタグ内部でDOMを定義する．基本的にこれが独自タグの本体となる．あとPolymer({});は必須なので注意．

(2)index.html

<!DOCTYPE html>
<html>
<head>
  <title>my-element</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <script src="bower_components/platform/platform.js"></script>
  <link rel="import" href="my-element.html">
</head>
<body>
  <my-element></my-element>
</body>
</html>

platform.jsは独自タグをサポートしていないブラウザでも独自タグを動作させるためのJavaScript

(3)ブラウザでアクセス現在のところブラウザは独自タグをサポートしていない．そのためJavaScriptの助けが必要になってくるんだけどそれにはWebサーバが必要．公式で推奨されているのは

python -m SimpleHTTPServer