polymerとWeb Componentsについて
W3CでWeb Componentsという仕様群が作成されている最中です。これには、外部HTMLの読み込み、テンプレートバインディング、カスタムタグなどの機能が含まれており、Web標準の仕様だけで容易にWebコンポーネントの作成を行えるようになります。
現在、Web Componentsはほとんどブラウザに実装されていませんが、JavaScriptによりWeb Componentsの機能を実装したpolymerを使うことで、既存のブラウザでWeb Componentsを動作させることができます。
コンポーネント化のサンプル(BMI計算フォーム)
サンプルはBMIを計算するフォームをコンポーネント化しています。フォームのUIと動作はメインのHTML(index.html)とは切り離された外部HTML(gadgets/bmicalc.hml)に記述されています。メインのHTMLからは新たに定義されたカスタムタグをひとつ記述するだけでコンポーネントを表示できます。
サンプルの実行結果
File: index.html
１．scriptタグでpolymer.min.js をロードします。
<script src="polymer.min.js"></script>polymer.min.js.map も polymer.min.js と同じパスに置かないと動作しません。
２．HTML Importsを使ってコンポーネントを定義したHTMLを読み込みます。
<link rel="import" href="gadgets/bmicalc.html" >３．コンポーネントを表示するカスタムタグを記述します。
<devneko-bmicalc></devneko-bmicalc>
<!DOCTYPE html>
<html>
<head>
<script src="polymer.min.js"></script>
<link rel="import" href="gadgets/bmicalc.html" >
</head>
<body>
<h2>polytest</h2>
<devneko-bmicalc></devneko-bmicalc>
</body>
</html>File: gadgets/bmicalc.html
コンポーネントを定義します。１．カスタムタグの名称をpolymer-elementのname属性に指定します。
<polymer-element name="devneko-bmicalc">カスタムタグ名はハイフンで区切られている必要があります。
２．template要素内にコンポーネントのUIを記述します。
３．scriptでPolymer関数を使いカスタムタグを登録します。
Polymer('devneko-bmicalc',{Polymer関数の第二引数にはカスタムタグのインスタンスに紐づけるパラメータを指定します。
関数を設定することもでき、呼び出す場合は on-* (サンプルでは on-click) という属性を使ってハンドラー関数を指定します。
<polymer-element name="devneko-bmicalc">
<template>
<div class="bmicalc">
<h1 class="bmicalc-title">BMI計算</h1>
<div class="bmicalc-form">
身長: <input type="text" name="height" value="{{height}}"/>cm<br/>
体重: <input type="text" name="weight" value="{{weight}}"/>kg<br/>
<p style="text-align:center;margin:0;padding:0;">
<button on-click="calculate">計算</button>
</p>
BMI: <span style="font-size: large;">{{result}}</span>
</div>
</div>
</template>
<script>
Polymer('devneko-bmicalc',{
weight: '',
height: '',
result: '',
calculate: function() {
var h = this.height / 100.0;
var res = this.weight / (h * h);
this.result = Math.floor(res*100)/100;
}
});
</script>
<link rel="stylesheet" href="bmicalc.css">
</polymer-element>File: gadgets/bmicalc.css
コンポーネントの見た目を定義します。CSSの名前空間が呼び出し元と分離されているわけではないので、呼び出し元や他のコンポーネントと被らないようにクラス名などを指定する必要があります。
.bmicalc{
border: 2px solid lightgreen;
border-radius: 5px;
padding: 0em;
display: inline-block;
}
.bmicalc-title{
padding: 4px;
margin: 0px;
font-size: large;
color: white;
background-color: lightgreen;
}
.bmicalc-form {
padding: 0.5em;
}
.bmicalc-form button {
color: blue;
font-size: large;
}
0 件のコメント:
コメントを投稿