Download - 20150729 polymer超入門
Polymer超入門品質管理課 後藤 和良
自己紹介
後藤 和良
品質管理課(QC)
KazuyoshiGoto
Fallout4はよってくらいにはゲーマー
Polymerとは？
今年５月のGoogle IO で
1.0がリリースされたばかり。
Googleが作ったJavaScriptのUIフレームワーク
!
Web ComponentsをChrome以外でも扱えるようにしてくれる。
Web Components？ うぇぶこんぽーねんと？
Web Components
Webページのパーツをコンポーネント化し、再利用しやすくできる。
今後のWeb標準になる予定の技術。
Web Components
HTML/CSS/JavaScript
コンポーネントをHTMLタグとして作れる
カプセル化したコンポーネントは外部汚染しない
だから再利用しやすい
簡単な例
index.html<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="name-tag.html"> </head> <body> <name-tag></name-tag> </body> </html>
name-tag.html<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="name-tag"> <template> ここに値を「<b>{{text}}</b>」と表示します。
</template> <script> Polymer({ is: "name-tag", ready: function () { this.text = "オッケー";
} }); </script> </dom-module>
表示結果
少しカスタマイズ
index.html<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="configurable-name-tag.html"> </head> <body> <name-tag text="デフォじゃない"></name-tag> </body> </html>
configurable-name-tag.html<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="name-tag"> <template> ここに値を「<b>{{text}}</b>」と表示します。
</template> <script> Polymer({ is: "name-tag", properties: { text: { type: String, value: "デフォルト値"
} } }); </script> </dom-module>
表示結果
スタイルがカプセル化される
style-sample.html<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="style-sample"> <style> p { color: #f00; font-weight: bold; } </style> <template> <p>色付きのPタグ</p>
</template> <script> Polymer({ is: "style-sample" }); </script> </dom-module>
index.html<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="style-sample.html"> </head> <body> <style-sample></style-sample> <p>Pタグだけど色付かない</p>
</body> </html>
表示結果
デモ紹介
Polymer がスゴいというよりWeb Components がスゴい
ご静聴ありがとうございました。
