Polymerをちょっと試す
https://www.polymer-project.org/1.0/
WebComponentsを結構楽にすることができる
通常の方法の場合はいろいろと手間がかかる
AngularJSのディレクティブとかと同じようなことができるイメージ
いろいろ参考になりそう
Polymer 1.0最新情報!(前編)ーPolymer 1.0とPolymer Catalog、活用事例の徹底解説 | HTML5Experts.jp
PolymerでMaterial Designなチャットアプリを作ろう | HTML5Experts.jp
環境構築
指定のディレクトリより以下のコマンドを実行
bower init bower install --save Polymer/polymer#^1.0.0
※bowerのインストールや初期化はよしなに
ファイル構成
$ tree . ├── bower.json └── bower_components ├── polymer │ ├── LICENSE.txt │ ├── bower.json │ ├── build.log │ ├── polymer-micro.html │ ├── polymer-mini.html │ └── polymer.html └── webcomponentsjs ├── CustomElements.js ├── CustomElements.min.js ├── HTMLImports.js ├── HTMLImports.min.js ├── MutationObserver.js ├── MutationObserver.min.js ├── README.md ├── ShadowDOM.js ├── ShadowDOM.min.js ├── bower.json ├── build.log ├── package.json ├── webcomponents-lite.js ├── webcomponents-lite.min.js ├── webcomponents.js └── webcomponents.min.js 3 directories, 23 files $
Quick tour of Polymerを試した
proto-element.html
sample1.htm
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="proto-element.html"> </head> <body> <proto-element></proto-element> </body> </html>
proto-element.html
<link rel="import" href="bower_components/polymer/polymer.html"> <script> // register a new element called proto-element Polymer({ is: "proto-element", // add a callback to the element's prototype ready: function() { this.textContent = "I'm a proto-element. Check out my prototype!" } }); </script>
※Polymerで出来上がり。意外と簡単。
↓
dom-element.html
sample2.htm
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="dom-element.html"> </head> <body> <dom-element></dom-element> </body> </html>
dom-element.html
<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="dom-element"> <template> <p>I'm a DOM element. This is my local DOM!</p> </template> <script> Polymer({ is: "dom-element" }); </script> </dom-module>
※dom-moduleで挟んでスコープ制限みたいなことができそう
↓
picture-frame.html
sample3.htm
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="picture-frame.html"> </head> <body> <picture-frame> <img src="p-logo.png"> </picture-frame> </body> </html>
picture-frame.html
<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="picture-frame"> <template> <!-- scoped CSS for this element --> <style> div { display: inline-block; background-color: #ccc; border-radius: 8px; padding: 4px; } </style> <div> <!-- any children are rendered here --> <content></content> </div> </template> <script> Polymer({ is: "picture-frame", }); </script> </dom-module>
※cssもスコープで制限できるので全体のスタイルとは個別に考えられる?
↓
name-tag.html
sample4.htm
<!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> <!-- bind to the "owner" property --> This is <b>{{owner}}</b>'s name-tag element. </template> <script> Polymer({ is: "name-tag", ready: function() { // set this element's owner property this.owner = "Daniel"; } }); </script> </dom-module>
※指定の値を設定。データ自体は外部変数や他の方法で取得する。
↓
configurable-name-tag.html
sample5.htm
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="configurable-name-tag.html"> </head> <body> <!-- configure a property from markup by setting the corresponding attribute --> <configurable-name-tag owner="Scott"></configurable-name-tag> </body> </html>
configurable-name-tag.html
<link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="configurable-name-tag"> <template> <!-- bind to the "owner" property --> This is <b>{{owner}}</b>'s configurable-name-tag element. </template> <script> Polymer({ is: "configurable-name-tag", properties: { // declare the owner property owner: { type: String, value: "Daniel" } } }); </script> </dom-module>
※指定値が存在しない場合は初期値を定義
↓
双方向データバインディング
なんか別のやつがいるらしい
https://github.com/PolymerElements/iron-input
追加
bower install --save PolymerElements/iron-input#^1.0.0
sample6.htm
<!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="editable-name-tag.html"> </head> <body> <editable-name-tag></editable-name-tag> </body> </html>
editable-name-tag.html
<link rel="import" href="bower_components/polymer/polymer.html"> <!-- import the iron-input custom element --> <link rel="import" href="bower_components/iron-input/iron-input.html"> <dom-module id="editable-name-tag"> <template> <p> This is a <strong>{{owner}}</strong>'s editable-name-tag. </p> <!-- iron-input exposes a two-way bindable input value --> <input is="iron-input" bind-value="{{owner}}" placeholder="Your name here..."> </template> <script> Polymer({ is: "editable-name-tag", properties: { owner: { type: String, value: "Daniel" } } }); </script> </dom-module>
※他のパーツ?が必要でした
↓