Polymerを使えば、HTMLのコンポーネント化（部品化）が簡単に行なえます。部品化することで、デバイスの画面サイズに依存しないレスポンシブ・デザインも容易になります。
Polymerの導入はとても簡単です。
まずは下の簡単なサンプルでPolymerのエッセンスをつかんでみましょう。
Polymerのインストール
bowerを使ったインストールが簡単でオススメです。
※bower自体のインストール方法はここでは割愛します。
$ bower init # create bower.json $ bower install --save Polymer/polymer # install the Polymer library and platform into bower_components/
Polymer elementの作成
では、Polymer element （部品）を作ってみましょう。
elements/my-element.html
<link rel="import"
href="/bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
This is <b>{{owner}}</b>'s my-element.
<b>{{name}}</b> lets me borrow it.
He likes the color <span style="color: {{color}}">{{color}}</span>.
I am <b>{{age}}</b> years old.
<p><label for="ageInput">Age:</label>
<input id="ageInput" type="range"
value="{{age}}">
<label for="nameInput">Name:</label>
<input id="nameInput" value="{{name}}"
placeholder="Enter name..."></p>
</template>
<script>
Polymer('my-element', {
age: 25,
name: "Daniel",
color: "red",
owner: "Eric",
nameChanged: function() {
if (this.name) {
// Ensure name is capitalized
this.name = this.name[0].toUpperCase() +
this.name.slice(1);
}
}
});
</script>
</polymer-element>以下がPolymer elementの骨格です。
<link rel="import"
href="/bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>...</template>
<script>
Polymer('my-element', {
...
});
</script>
</polymer-element>Polymer elementの利用
先ほど作った部品 my-element を利用してみます。
index.html
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/platform/platform.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="elements/my-element.html">
</head>
<body>
<!-- 3. Declare the element by its tag. -->
<my-element></my-element>
</body>
</html>最終的にこのようなディレクトリ構造になります。
yourapp/
bower_components/
platform/
polymer/
elements/
my-element.html
index.htmlでは早速実行してみましょう。Webサーバを立ち上げて、
$ python -m SimpleHTTPServer 8080
http://localhost:8080/ にアクセスし成果物を確認してみましょう。以下のような、ちょっとしたWebアプリが表示されます。
たったこれだけのコーディングで、HTMLの部品化はもちろんのこと、プロパティ自動設定やデータバインディングまでもが見事に実現していることがわかります。Polymerって素晴らしい！
どうやらWebアプリがネイティブアプリを完全に駆逐する時代がすぐそこまで来てるようですね。
次回はLayoutやCSSなどのもう少しデザインよりの機能を試してみる予定です。
0 件のコメント:
コメントを投稿