Welcome to Polymer

PolymerライブラリとWeb Componentsについて書きました。Polyerの実装例として電卓を作ってみました。

Transcript

1. Welcome to Polymer !ZPIFJ.VOFʢ.VOFTBEB
   :PIFJʣ
2. "CPVU
   .F फఆ
   ༸ฏ
   5XJUUFS
   
   !ZPIFJ.VOF
   #MPH
   
   IUUQXXXZPIFJNOFU
3. ࠓ೔͸ Λѻ͍·͕͢ɾɾɾ
4. ਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓਓ :?:?:?:?:?:?:?:?:?:?:?:?:?: ʔ
   ʻ
   ʔ ʔ
   ʼ
   ʔ ͱ͖ͬͭʹ͍͘ʂʂ
5. 8FC
   $PNQPOFOUT ͜Μʹͪ͸ɺ
6. $VTUPN
   &MFNFOUT )5.-
   *NQPSUT 4IBEPX
   %0.T 5FNQMBUFT
7. $VTUPN
   &MFNFOUT )5.-
   *NQPSUT 4IBEPX
   %0.T 5FNQMBUFT
8. 5FNQMBUFT 㾎 )5.-ʹ͓͚ΔςϯϓϨʔτػೳ 㾎 ࠓ·Ͱ͸TDSJQU
   UZQFlUFYUIUNMzͳͲͷ)BDLΛ
 ༻͍ͨςϯϓϨʔτ࣮૷Λ͍͕ͯͨ͠ɺUFNQMBUFλάΛ
 ࢖͑͹ਖ਼نͷखஈͰ)5.-ΛςϯϓϨʔτԽͰ͖Δ 
   ֓ཁ
9. 5FNQMBUFT <!— ैདྷͷ৔߹ —> <script type=“text/html”> <img src=“"> <p>comment</p> </script> <!— Web Componentsͷ৔߹ —> <template> <img src=“"> <p>comment</p> </template> 
   ैདྷͱͷൺֱ
10. 5FNQMBUFT <template> <img src=“"> <p>comment</p> </template> 
    ར༻ํ๏
11. 5FNQMBUFT <template> <img src=“"> <p>comment</p> </template> <script> var t = document.querySelector(‘template’); t.content.querySelector(‘img’).src = ‘logo.png’; var clone = document.importNode(t.content, true); document.body.appendChild(clone); </script> 
    ར༻ํ๏
12. $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0.T 5FNQMBUFT
13. 㾎 )5.-ΛΠϯϙʔτ͢Δػೳ 㾎 +BWB4DSJQU΋$44΋*NBHF΋"VEJP΋)5.-ʹ
 ϩʔυ͢Δ࢓૊Έ͕͋Δͷʹɺ)5.-ࣗମΛϩʔυ͢Δ
 ࢓૊Έ͕ͳ͔ͬͨɾɾɾ 
    ֓ཁ )5.-
    *NQPSUT 㾎 ैདྷͰ͋Ε͹ɺBKBY΍JGSBNFͳͲͰؤு͍ͬͯͨ
14. 
    ར༻ํ๏ )5.-
    *NQPSUT <!— import.html —> <h3>Hello!</h3> <p>HTML ImportsͰಡΈࠐ·ΕͨཁૉͩΑʂ</p>
15. 
    ར༻ํ๏ )5.-
    *NQPSUT <!— index.html —> <link rel="import" href=“import.html"> <!— import.html —> <h3>Hello!</h3> <p>HTML ImportsͰಡΈࠐ·ΕͨཁૉͩΑʂ</p>
16. 
    ར༻ํ๏ )5.-
    *NQPSUT <!— index.html —> <link rel="import" href=“import.html"> <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; document.body.appendChild(content.body.cloneNode(true)); </script> <!— import.html —> <h3>Hello!</h3> <p>HTML ImportsͰಡΈࠐ·ΕͨཁૉͩΑʂ</p>
17. $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0.T 5FNQMBUFT
18. 㾎 %0.πϦʔʹΧϓηϧԽͷ֓೦Λಋೖ͢Δ 㾎 ࠓ·ͰͰ͋Ε͹ɺ$44ͷ໋໊͕ଞͷϞδϡʔϧΛඃΒͳ͍
 Α͏ʹɺ4."$44΍#&.ͳͲͷϧʔϧΛ༻͍͍͕ͯͨɾɾ 
    ֓ཁ 4IBEPX
    %0.T
19. 
    ੜ੒ 4IBEPX
    %0.T <button>Hello, world!</button> )FMMP
    XPSME ▶<button> “Hello, world!” </button>
20. 
    ੜ੒ 4IBEPX
    %0.T <button>Hello, world!</button> <script> var btn = document.querySelector('button'); var root = btn.createShadowRoot(); root.textContent = '͜Μʹͪ͸ɺӨͷੈք!'; </script> )FMMP
    XPSME ▶<button> “Hello, world!” </button>
21. 
    ੜ੒ 4IBEPX
    %0.T <button>Hello, world!</button> <script> var btn = document.querySelector('button'); var root = btn.createShadowRoot(); root.textContent = '͜Μʹͪ͸ɺӨͷੈք!'; </script> ͜Μʹͪ͸ɺӨͷੈք ▶<button> ▼#shadow-root | “͜Μʹͪ͸ɺӨͷੈք” “Hello, world!” </button>
22. 
    είʔϓ 4IBEPX
    %0.T <div>௨ৗͷDIVλάͰ͢</div>
23. 
    είʔϓ 4IBEPX
    %0.T <div>௨ৗͷDIVλάͰ͢</div> <div id="shadow"></div>
24. 
    είʔϓ 4IBEPX
    %0.T <div>௨ৗͷDIVλάͰ͢</div> <div id="shadow"></div> <template id="t1"> <style>div{background-color:red;}</style> <div>ShadowDOM಺ͷDIVͰ͢</div> </template>
25. 
    είʔϓ 4IBEPX
    %0.T <div>௨ৗͷDIVλάͰ͢</div> <div id="shadow"></div> <template id="t1"> <style>div{background-color:red;}</style> <div>ShadowDOM಺ͷDIVͰ͢</div> </template> <script> var div = document.querySelector('#shadow'); var root = div.createShadowRoot(); var template = document.querySelector('#t1'); var node = document.importNode(template.content, true); root.appendChild(node); </script>
26. 
    είʔϓ 4IBEPX
    %0.T <div>௨ৗͷDIVλάͰ͢</div> <div id="shadow"></div> <template id="t1"> <style>div{background-color:red;}</style> <div>ShadowDOM಺ͷDIVͰ͢</div> </template> <script> var div = document.querySelector(‘#shadow'); var root = div.createShadowRoot(); var template = document.querySelector('#t1'); var node = document.importNode(template.content, true); root.appendChild(node); </script> 4IBEPX%0.಺ͰͷΈ༗ޮ
27. <div>௨ৗͷDIVλάͰ͢</div> <div id="shadow"></div> <template id="t1"> <style>div{background-color:red;}</style> <div>ShadowDOM಺ͷDIVͰ͢</div> </template> <script> var div = document.querySelector(‘#shadow'); var root = div.createShadowRoot(); var template = document.querySelector('#t1'); var node = document.importNode(template.content, true); root.appendChild(node); </script> 4IBEPX%0.಺ͰͷΈ༗ޮ 
    είʔϓ 4IBEPX
    %0.T
28. $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0.T 5FNQMBUFT
29. 㾎 )5.-ʹಠࣗͷ)5.-λάΛఆٛ͢Δ͜ͱ͕Ͱ͖Δ 
    ֓ཁ $VTUPN
    &MFNFOUT 㾎 ໋໊ϧʔϧ͸ɺYYZZZͱඞͣϋΠϑϯ۠੾Γ 㾎 5FNQMBUFTɺ*NQPSUTɺ4IBEPX
    %0.Tͱ૊Έ߹ΘͤΔ
 ͜ͱͰ࠶ར༻ՄೳͳίϯϙʔωϯτΛఆٛՄೳ
30. 
    ར༻ྫᶃ $VTUPN
    &MFNFOUT <!— Custom Elementͷఆٛ —> <script> var p = Object.create(HTMLElement.prototype) document.registerElement(‘my-element’, {prototype:p}); </script>
31. 
    ར༻ྫᶃ $VTUPN
    &MFNFOUT <!— Custom Elementͷఆٛ —> <script> var p = Object.create(HTMLElement.prototype) document.registerElement(‘my-element’, {prototype:p}); </script> <!— Custom Elementͷར༻ —> <my-element></my-element>
32. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT JNQPSUIUNM
33. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT <template> <style>p {color: red;}</style> <p>I am Yohei Munesada</p> </template> 5FNQMBUF JNQPSUIUNM
34. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT <template> <style>p {color: red;}</style> <p>I am Yohei Munesada</p> </template> <script> var proto = Object.create(HTMLElement.prototype); document.registerElement('my-element2', {prototype: proto}); </script> 5FNQMBUF $VTUPN
    &MFNFOU JNQPSUIUNM
35. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT <template> <style>p {color: red;}</style> <p>I am Yohei Munesada</p> </template> <script> var proto = Object.create(HTMLElement.prototype); var importDoc = document.currentScript.ownerDocument; proto.createdCallback = function () { var root = this.createShadowRoot(); var t = importDoc.querySelector('template'); var clone = document.importNode(t.content, true); root.appendChild(clone); } document.registerElement('my-element2', {prototype: proto}); </script> 5FNQMBUF $VTUPN
    &MFNFOU 4IBEPX%0. JNQPSUIUNM
36. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT <link rel="import" href=“import.html"> <p>Hello World!</p> <my-element2></my-element2> )5.-
    *NQPSU $VTUPN
    &MFNFOU JOEFYIUNM
37. 
    ར༻ྫᶄ
     $VTUPN
    &MFNFOUT <link rel="import" href=“import.html"> <p>Hello World!</p> <my-element2></my-element2> )5.-
    *NQPSU $VTUPN
    &MFNFOU JOEFYIUNM
38. $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0.T 5FNQMBUFT ͞Βʹৄ͘͠ɾɾɾ IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTXFCDPNQPOFOUTTIBEPXEPN IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTXFCDPNQPOFOUTUFNQMBUF IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTXFCDPNQPOFOUTJNQPSUT IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTXFCDPNQPOFOUTDVTUPNFMFNFOUT
39. ͜Μʹͪ͸ɺ
40. 㾎 (PPHMF੡ͷϥΠϒϥϦ 㾎 8FC
    $PNQPOFOUTΛ֦ு͢ΔϥΠϒϥϦ 㾎 .BUFSJBM
    %FTJHOʹ΋ରԠ ֓ཁ 㾎 &WFS
    (SFFO
    #SPXTFS
    Λαϙʔτ
41. Web components primitives Polymer library Custom elements EFDMBSBUJWF
    TZOUBY UFNQMBUJOH XBZ
    CJOEJOH PCTFSWJOH FUDʜ *SPO
    &MFNFOUT 1BQFS
    &MFNFOUT (PPHMF
    8FC
    $PNQPOFOUT ߏ੒಺༰
42. IUUQTFMFNFOUTQPMZNFSQSPKFDUPSH 1PMZNFSͷ࣋ͭΧελϜΤϨϝϯτ
43. IUUQTFMFNFOUTQPMZNFSQSPKFDUPSH 1PMZNFSͷ࣋ͭΧελϜΤϨϝϯτ .BUFSJBM
    %FTJHO
44. 
    CPXFS
    JOTUBMM
    TBWF
    1PMZNFSQPMZNFS? IUUQTXXXQPMZNFSQSPKFDUPSHEPDTTUBSUHFUUJOHUIFDPEFIUNM ͦͷଞͷखॱˣ Πϯετʔϧ
45. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!— PolymerͷΠϯϙʔτ —> <link rel=“import" href=“polymer/polymer.html”>
46. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!— PolymerͷΠϯϙʔτ —> <link rel=“import" href=“polymer/polymer.html”> <!— ΧελϜΤϨϝϯτͷఆٛ —> <dom-module id="my-element"> </dom-module>
47. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!— PolymerͷΠϯϙʔτ —> <link rel=“import" href=“polymer/polymer.html”> <!— ΧελϜΤϨϝϯτͷఆٛ —> <dom-module id="my-element"> <template> <p>I'm a My element. This is my local DOM!</p> </template> </dom-module>
48. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!— PolymerͷΠϯϙʔτ —> <link rel=“import" href=“polymer/polymer.html”> <!— ΧελϜΤϨϝϯτͷఆٛ —> <dom-module id="my-element"> <template> <p>I'm a My element. This is my local DOM!</p> </template> <script> Polymer({ is: "my-element" }); </script> </dom-module>
49. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!DOCTYPE html> <html> <head> <script src="pathTo/webcomponents-lite.min.js"></script> <link rel="import" href="my-element.html"> </head> <body> <my-element></my-element> </body> </html>
50. ಛ௃ᶃ
    એݴతͳ࣮૷
    
     <!DOCTYPE html> <html> <head> <script src="pathTo/webcomponents-lite.min.js"></script> <link rel="import" href="my-element.html"> </head> <body> <my-element></my-element> </body> </html> I'm a .Z element. This is my local DOM! I'm a .Z element. This is my local DOM!
51. ಛ௃ᶄ
    σʔλόΠϯσΟϯά <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="name-tag"> </dom-module>
52. ಛ௃ᶄ
    σʔλόΠϯσΟϯά <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="name-tag"> <template> <p>Hello <span>{{name}}</span></p> <input type="text" is="iron-input" bind-value="{{name}}"> </template> </dom-module>
53. ಛ௃ᶄ
    σʔλόΠϯσΟϯά <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="name-tag"> <template> <p>Hello <span>{{name}}</span></p> <input type="text" is="iron-input" bind-value="{{name}}"> </template> <script> Polymer({ is: "name-tag", properties: { name: {type: String, value: "DefaultName"} } }); </script> </dom-module>
54. ಛ௃ᶄ
    σʔλόΠϯσΟϯά <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="name-tag"> <template> <p>Hello <span>{{name}}</span></p> <input type="text" is="iron-input" bind-value="{{name}}"> </template> <script> Polymer({ is: "name-tag", properties: { name: {type: String, value: "DefaultName"} } }); </script> </dom-module> \\OBNF^^ͰσʔλόΠϯυ \\OBNF^^ͰσʔλόΠϯυ \\OBNF^^ͰσʔλόΠϯυ
55. ಛ௃ᶄ
    σʔλόΠϯσΟϯά <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-input/iron-input.html"> <dom-module id="name-tag"> <template> <p>Hello <span>{{name}}</span></p> <input type="text" is="iron-input" bind-value="{{name}}"> </template> <script> Polymer({ is: "name-tag", properties: { name: {type: String, value: "DefaultName"} } }); </script> </dom-module> \\OBNF^^ͰσʔλόΠϯυ \\OBNF^^ͰσʔλόΠϯυ \\OBNF^^ͰσʔλόΠϯυ
56. IUUQTXXXQPMZNFSQSPKFDUPSH ͞Βʹৄ͘͠ɾɾɾ
57. 5SZʂ
    1PMZNFSʂʂ
58. 1PMZNFS
    
    1BQFS
    &MFNFOUͰి୎Λ࡞Δ IUUQZPIFJNVOFHJUIVCJPQPMZNFSJOEFYIUNM
59. $BMDVMBUPS
    
    ४උ 
    CPXFS
    JOTUBMM
    ŠTBWF
    
    
    
    
    
    
    
    
    1PMZNFS&MFNFOUTQBQFSFMFNFOUT
60. <!DOCTYPE html> <html lang="en"> <head> <link rel="import" href=“my-calculator.html"> </head> <body> <my-calculator></my-calculator> </body> </html> $BMDVMBUPS
    
    JOEFYIUNM )5.-
    *NQPSUTͰಡΈࠐΈ $VTUPN
    &MFNFOUͷར༻
61. <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-button/paper-button.html"> $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿΠϯϙʔτ 1PMZNFSΛಡΈࠐΉ QBQFSCVUUPOΛಡΈࠐΉ
62. <dom-module id=“my-calculator"> <style>/*ͷͪ΄Ͳ*/</style> <template> <!— ͜͜ʹϚʔΫΞοϓΛॻ͘ —> </template> <script>/*ͷͪ΄Ͳ*/</script> </dom-module> $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿϚʔΫΞοϓ
63. <template> <div class="root"> <div class="display"> <span>{{display}}</span> </div> <div class="controls"> <paper-button class="col3">AC</paper-button> <paper-button>+</paper-button> <paper-button>7</paper-button> <paper-button>8</paper-button> <paper-button>9</paper-button> <paper-button>÷</paper-button> /* … */ <paper-button>=</paper-button> </div> </div> </div> </template> $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿϚʔΫΞοϓ σʔλόΠϯυΛར༻ .BUFSJBM
    %FTJHOΛ࢖͏
64. <style> :host {display: block; width: 100%; height: 100%;} paper-button { float: left; width: 25%; height: calc(100% / 5); /* … */ } paper-button::shadow paper-ripple { color: rgba(255,255,0,1); } </style> $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿελΠϦϯά IPTUͰɺNZDBMDVMBUPSλάͷ૷০ ΧελϜΤϨϝϯτ΁ͷ૷০ ΧελϜΤϨϝϯτͷ4IBEPX%0.಺΁ ͷ૷০΋Ͱ͖Δ
65. <dom-module id=“my-calculator"> <style>/* … */</style> <template>/* … */</template> <script> Polymer({ is: ‘my-calculator’, properties: { display: {type: String, value: 0} }, }); </script> </dom-module> $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿ+4Ͱొ࿥ ΧελϜΤϨϝϯτͱͯ͠ొ࿥
66. <!— HTML —> <paper-button on-click="numberClick">1</paper-button> <!— JavaScript —> Polymer({ is: ‘my-calculator’, numberClick: function (e) { var num = e.target.textContent; this.display += num; } }); $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿৼΔ෣͍ᶃ Πϕϯτొ࿥ ॲཧΛఆٛ͢Δ <div class="display"> <span>{{display}}</span> </div>
67. <!— HTML —> <paper-button on-click="calcClick">=</paper-button> <!— JavaScript —> Polymer({ is: ‘my-calculator’, numberClick: function (e) {/**/}, calcClick: function (e) { var formula = this.display; var result = calc(formula); this.display = result; } }); $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿৼΔ෣͍ᶄ Πϕϯτొ࿥ ॲཧΛఆٛ͢Δ
68. $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿࢀߟ ࢛ଇԋࢉΛϓϩάϥϛϯά͢Δ
    cc
    ٯϙʔϥϯυه๏ 8JLJQFEJBɿٯϙʔϥϯυه๏ 
    
    
    º
     
    
    
    º
    
69. $BMDVMBUPS
    
    NZDBMVDMBUPSIUNMɿ׬੒ʂ IUUQTHJUIVCDPNZPIFJ.VOFQPMZNFSQMBZHSPVOECMPCNBTUFSNZ@FMFNFOUTNZDBMDVMBUPSIUNM
70. ·ͱΊ
71. ·ͱΊ $VTUPN
    &MFNFOUT )5.-
    *NQPSUT 4IBEPX
    %0.T 5FNQMBUFT 8FC
    $PNQPOFOUT 㾎 એݴతͳ࣮૷
    㾎 σʔλόΠϯσΟϯά
    㾎 ͳͲ
72. 5IBOL
    ZPV फఆ
    ༸ฏ
    5XJUUFS
    
    !ZPIFJ.VOF
    #MPH
    
    IUUQXXXZPIFJNOFU