プログラム学習室 http://studyhallweb.com/

Dart言語: Polymer

Polymer について

Polymerとは、HTML内にオリジナルのタグ(custom elemnet)を定義し、そこを別のHTMLで書くことができるらしく Web Components という技術として期待されているようです。
ifreamでも良いのじゃないの?という感じもしますが、いずれ役立つでしょうから試してみました。

しかし、なかなか思うように動きません。

どこが悪いのか、いろいろ試してみましたが先が長くなりそうですので、その過程をまとめておきたいと思います。

Dart Polymer について分かったこと

Dart Ver 1.5.3 (Windows 64bit), polymer 0.11.0+5 (2014/7/29) での確認状況

オリジナルのタグ名はハイフン(-)を必ず入れること
OK <custom-element>
NG <customElement>

Dartスクリプトは custom element を定義した HTML毎に1つ
custom element を使用する HTML に Dartスクリプトを src で定義した場合は、それしか動かず、 custom element を定義した HTMLに紐づけた Dartスクリプトは動きません
Dartスクリプトは custom element を使用するHTMLからは呼び出さず、個々の custom element を定義したHTML毎に作成します
これを利用すれば、1つのHTMLに1つのDartスクリプトという制約から解放されるかもしれません

custom elemnet を定義した HTMLから呼び出す Dartスクリプト は main() が動かない
main() 1つは必要かと思いましたが、設けても動きません
初期設定のような機能は custom element に紐づけたクラスのインスタンスに書く必要があります

pubspec.yaml に Polymer を使うページを指定する必要がある
transformers: に polymer:entry_points: として polymer を使うページを列記します(後述)

JavaScript に変換すると html まで書き換えます(後述)
buildディレクトリ以下に作成される html ファイルはオリジナルのものとは異なっています
そして、動きません(涙)

Dart Ver 1.5.0 dev2.0 (Windows 64bit) (2014/5/31) からの更新情報

Data binding が機能しない → Dirt VM であれば正しく機能する
Dart の devバージョンを使用していたためと思われます

サイトにアップすると Dartium でアクセスしても Polymerが機能しない → Dirt VM であれば正しく機能する
これも、Dart のバージョンが原因だったと思われます

Polymer 使用時の pubspec.yaml

Polymer を 使用する html を transformers に指定します。
transformers:
- polymer:
    entry_points: web/index.html
					

複数ファイルの場合は次のように列記します。
transformers:
- polymer:
    entry_points:
      - web/index.html
      - web/index2.html
					

JavaScript への変換

JavaScript に変換すると pubspec の transformers のおかげで、HTML 自体も書き換えられます。
JavaScript で動かす場合、この書き換えられた HTML と、生成された JavaScript で動くはずだと思うのですが動きません

Dart Editor の New Project で作成できる "Sample web application using the polymer library [mobile friendly] " で試してみました。

Dart VM version

http://www001.upp.so-net.ne.jp/studyhall/test_polymer2/polymer_sample.html
Dartium でアクセスしてください
count が 5 から始まり、ボタンをクリックするたびにカウントアップします

JavaScript version

http://www001.upp.so-net.ne.jp/studyhall/test_polymer/polymer_sample.html
Chrome でアクセスするとボタンが表示されません (Version 36)
IE でアクセスするとボタンは表示されますが、フォーマットが崩れています (Version 11)
IE view