なにを入門するにせよ、とりあえず最小構成を確認したい、と思う人はいるでしょう。何を隠そう、僕もその一人です。
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/paper-input/paper-input.html"/>
<link rel="import" href="bower_components/paper-material/paper-material.html"/>
<link rel="import" href="bower_components/paper-styles/paper-styles.html"/>
</head>
<body class="horizontal center-justified layout">
<dom-module id="my-app">
<template>
<div style="width: 300px">
<paper-input label="Foo" type="number" value="{{foo::input}}"></paper-input>
<paper-input label="Bar" type="number" value="{{bar::input}}"></paper-input>
</div>
<div class="result">
Foo: <span>{{result(foo, bar)}}</span>
</div>
</template>
</dom-module>
<paper-material elevation="1" style="padding: 20px">
<my-app foo="1" bar="1"/>
</paper-material>
<script>
Polymer({
is: 'my-app',
properties: {
foo: Number,
bar: Number
},
result : function (foo, bar) {
return +foo + +bar;
}
});
</script>
</body>
</html> bower.json
{
"name": "my",
"version": "0.0.0",
"authors": [
"cho45 <cho45@lowreal.net>"
],
"license": "Public Domain",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0"
}
}
これら index.html と bower.json を特定のディレクトリにおき、bower update をかけてから、ブラウザで 直接 index.html をひらけば、なんとなく動く。
ただこれだと、せっかく Polymer を使っているのに、Chrome 以外でうごかない。というのも、HTML Import によって Polymer の依存が解決される前に (native で HTML Import が実装されていないブラウザでは) Polymer() がある script 要素が実行されてしまうからのようだ。dom-module を定義する場合 index.html で定義せず、別ファイル (app.html とか) にして rel="import" し、index.html では要素を書くだけでスクリプトは書かないのがセオリーのようだ。
どうしてもペライチのまま動かす場合、以下のように WebComponentsReady のタイミングで Polymer を呼べば、その後該当する要素はコンポーネントとして扱われて正しく動くようになった。
document.addEventListener('WebComponentsReady', function() {
Polymer(...);
}); 当然このまま動かすと、依存する html ファイルや css をたくさんリクエストするが、本当にちょっとしたアプリなら気にするほどでもなくとりあえずこれで開発して、あとから考えればよさそう。
Polymer のざっくりした考えかた
アプリケーションはコンポーネント(と呼ばれるエレメント)の集合体であり、アプリケーションもまた1つのコンポーネント(エレメント)であるというのが Web Components の考えかた、だと思う (コンポーネントの定義が見つからなかったので、正しくないかもしれない)。
Polymer は Web Components そのものではなく、あくまで Web Components の概念をベースにしたフレームワークなので、とりあえず Polymer は Polymer として使いかたを覚えたらよくて、Shadow DOMガー! とかいって Shadow DOM が何かを知る必要はない。というか Shadow DOM のポリフィルは使ってない。Polymer は双方向データバインディングの仕組みが template 要素を使って提供されているが、データバインディングの仕組みは Polymer 独自であり、標準化されているものではない。
