日本一手抜きなWeb Compornents入門

2014/6/14 8249hit

Polymerを使ってWeb compornentsのShadowDOMを使い独自タグを作ってみます。

Polymerのサンプルをあさっていたのですが、わりとどれも多機能で大変だったので、機能をごっそり削り、どうやって使うかのわかりやすさを優先しました。
環境構築を含めて極力シンプルな手段によってmy-elementタグを作ってみようとおもいます。

Polymerのダウンロード

公式のチュートリアルではPolymerを取得するのにBowerを使っています。
しかしBowerを使っていない人も多いと思うので今回はgit-hubから直接ダウンロードします。
もちろん、GitやBowerを使ったほうが後々は楽なので、ちゃんとやりたい人はGitなりBowerなりを使って下さい。
Polymerをダウンロードするには
https://github.com/polymer/polymerにアクセスしDownload.zipを選択してダウンロードします。

同様にplatformをダウンロードします。
https://github.com/Polymer/platformにアクセスしDownload.zipを選択してダウンロードします。

作業フォルダを適切な場所に作成します。
便宜上、今後はこの作業フォルダを/とします。
例えば作業フォルダがc:\foo\だったらc:\foo\bar.txtは\bar.txtの様に表現します。 それぞれの環境に合わせて読み替えてください。
\フォルダに\polymerと\platformフォルダを作成します。
ダウンロードしたファイルを開いて解凍します。
polymer-master.zipの中身(外側のフォルダ含まず)を/polymerの中に、platform-master.zipの中身(外側のフォルダ含まず)を/platformの中に
入れてください。


注釈:
もしGitがすでにインストールされていて、ZipではなくGitを使いたい人は/フォルダ内で次のコマンドを使用して下さい
git clone git://github.com/Polymer/polymer.git
git clone git://github.com/Polymer/platform.git
Bowerを使用したい人は次のコマンドです
$ bower install --save Polymer/polymer

Pythonのインストール

もし、Windowsを使用しているならWebサーバーを建てるためにPythonをインストールします。
Macにはすでに入っているはずなので読み飛ばして下さい。
また、IISやApacheなどすでにWebサーバーが立っている場合それを使用しても問題ありません。
PythonのページよりPython2.xの最新版をダウンロードしてインストールして下さい。

Webサーバーの実行

Pythonのテストサーバーを使用してWebサーバーを立てます。
/フォルダに移動して以下のコマンドを実行します。
python -m SimpleHTTPServer
これでWebサーバーが立ち上がります。
Serving HTTP on 0.0.0.0 port 8000 ...
の様に表示されるので
http://0.0.0.0:8000 にアクセスして下さい。

このサーバーはテスト用のサーバーです。外部からアクセスは出来ないのでご注意下さい。
ローカルからアクセスしてもまだindexファイルがないので以下の様なページが表示されます。

index.htmlの作成

それでは実際にページを作ります。
/にindex.htmlを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="./platform/platform.js"></script>
<link rel="import" href="./elements/my-element.html" />
</head>
<body>
<h1>Hello Webcompornents</h1>
<my-element></my-element>
<my-element></my-element>
</body>
</html>


注目は3つ


<script src="./platform/platform.js"></script>

polymerを読み込み、WebCompornentsを便利にChrome以外でも使用できるようになります。

<link rel="import" href="./elements/my-element.html" />

独自elementを読み込みます。
このファイルはまだ使っていないのでエラーとなります。(後で作ります)

<my-element></my-element>
<my-element></my-element>

独自タグです。
このタグの中身はまだ作っていないのでまだ表示されません。
http://0.0.0.0:8000にアクセスするとHello Webcompornentsとだけ表示されるはずです。
次にmy-elementの中身を作ります。

my-element.htmlの作成

/elementsフォルダを作成します。
/elementsフォルダ内にmy-element.htmlを作成し、以下のようにします。

<link rel="import" href="../polymer/polymer.html" />
<polymer-element name="my-element" noscript>
<template>
<link href="my-element.css" rel="stylesheet" type="text/css" />
<h1>Hello Element!!</h1>
</template>
</polymer-element>

重要なのは

<polymer-element name="my-element" noscript>

element nameで指定した名前がタグの名前となります。
名前には必ずダッシュ(-)を含める必要があります。
その他、templateないでスタイルシートを読んでいたりします。

先ほどのページを見ると
Hello Webcompornentsに続けて
Hello Element!!
Hello Element!!
が表示されます。
index.html内のの中身がmy-element.phpのtemplateに置き換わったのがわかります。

スタイルシートを追加する

/elementsフォルダにmy-element.cssを作成する。
my-element.cssの中身は以下のとおりにする。

h1{
color:red;
}


こうすると、Hello Element!!の中身だけが赤字となります。
このように、WebCompornentsのtemplate内のスクリプトやスタイルシートはそのtemplateだけに閉じ込められます。
そのため、Webパーツを作る際に、クラス名のバッティングなどを気にする必要なく、そのCompornents内に特化して考えることが出来るようになります。

ファイル階層は以下のとおりです


おわりに

今回は非常にシンプルな部品を作ってみました。
ただこれだけならわざわざ独自WebCompornentにする必要はありません。
しかし、例えばサイトのメニューをWebCompornentsにしておけば全てのページのメニューを1つのファイルに収めることが出来るようになります。
追加のページが増えた場合も、唯一メニューテンプレートファイルを書き換えるだけです。
これにより今までプログラムを使ってやるしか無かったような機能を簡単にWebページに組み込めるようになります。
キャッシュを有効にして、メニューはキャッシュ保持期間を長く、コンテンツ保持期間はキャッシュを短くすることでファイル転送料を削減したり、日付入力やLightBoxをElementにして気軽にページに組み込む事ができるようにすることも可能でしょう。

特にWebアプリにおいては既存のHTML要素だけでは内容が不足して、日付入力のUIなどはDivタグとスタイルシート、スクリプトの組み合わせで実現してあったりして使いまわすのは一苦労でした。
WebCompornentsなら日付入力タグを作ってしまえば次からはただ単に
<input-date>
タグを使うだけで良くなります。

Web Compornentsにより、Webの開発・保守にかかる時間は大幅に短縮されサーバーの負荷も下がり、
Polymerにより、それを今、この瞬間から使うことが出来ます。

この仕様はまだ正式版に行くに連れて変更が有るかもしれませんが、正式版のリリースも楽しみです。

サンプル

前:「みんなのPython Webアプリ編」のPDFを無料公開中 

関連キーワード

[Python][HTML5][IT]

コメントを投稿する