なにを入門するにせよ、とりあえず最小構成を確認したい、と思う人はいるでしょう。何を隠そう、僕もその一人です。

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 をたくさんリクエストするが、本当にちょっとしたアプリなら気にするほどでもなくとりあえずこれで開発して、あとから考えればよさそう。

1. トップ
2. tech
3. Polymer 最小構成のペライチファイル