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 がスゴい

ご静聴ありがとうございました。

20150729 polymer超入門

Technology