Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components changes Web Development

Web Components changes Web Development

2014/7/28に開催されたHTML5とか勉強会の「Web Componentsが変えるWeb開発の未来」のセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

July 28, 2014
Tweet

Transcript

  1. 8FC$PNQPOFOUT DIBOHFT 8FC%FWFMPQNFOU 痥㔐)5.-הַ⹈䓼⠓ !DI

  2. (PPHMF*01PMZNFSBOE8FC $PNQPOFOUTDIBOHFFWFSZUIJOHZPVLOPX BCPVU8FCEFWFMPQNFOU
 ZPVUVCF0+JI&&T

  3. *N!DI 1FSGPSNBODF &WBOHFMJTU

  4. "HFOEB 僴➙ך8FCꟚ涪ָ䫴ִ׷铬겗 8FC$PNQPOFOUT֮׵׻׷ 1PMZNFSEF8FC$PNQPOFOUT רַָֻ׿ִָ׷8FC$PNQPOFOUTה1PMZNFS

  5. 僴➙ך8FCꟚ涪ָ䫴ִ׷铬겗

  6. 䧮ղؒٝآص،כ ⡦ה䨌׏גֹ׋ַ

  7. )5.- $44

  8. ㉏겗荈歋䏝ך넝ְ俑岀 㹑鎉㘗ךءٝفٕדⵖ秈ך㼰זְ俑岀 ׉׸佦ח⥂㸚䚍ך笝䭯盖椚ָꨇ׃ְ $44כ鏣鎘ָٌظ׾鎉ֲ

  9. ㉏겗8FCךٔحث⻉ )5.-ך醱꧟⻉ה$44ך肍㣐⻉ +BWB4DSJQUח״׷؎ٝةؙٓءّٝך➰♷ إوٝذ؍ؙأ䚍זוծה׏ֻח㣟׻׸ג׷ Ꟛ涪ָ鹌׬קוծֿ׸׵ָ醱꧟ח窃ת׷

  10. ㉏겗ⱄⵃ欽䚍 $44׾ٗ٦س׃ծ׉׸חさ׻ׇ׋)5.-ך鷄⸇˘ )5.-ה$44כ✼ְח䕦갟׃䕦갟ׁ׸׷ 䭯׍麊ןחֻֻⱄⵃ欽䚍ח妀ֽ׷

  11. ⡲׏׋؝ٝه٦طٝزכ ⱄⵃ欽׃׋ְ׃ 知⽃ח⢪ְ׋ְ

  12. ➙תדך،فٗ٦ث $44חֶֽ׷ㄏせ鋉⵱ך䊨㣗#&.װ4."$44瘝 +4ח״׷؝ٝه٦طٝز盖椚3FBDUװ"OHVMBS瘝 أ؝٦فהְֲ呎劤ך䓲挿׾鍑寸׃גְזְ 倯岀锷ח麓ֺ׆ծꟚ涪罏ך㷕统؝أزחז׷

  13. ؝ٝه٦طٝز׾⡲׷חכ أ؝٦فך㶷㖈 ָ)5.-ה$44ח䗳銲׉ֲ

  14. ׉׃ג׉ך倯岀ָ Ꟛ涪罏꟦דⰟ鸐 דזֽ׸לז׵זְ

  15. 8FC$PNQPOFOUT֮׵׻׷

  16. 8FC$PNQPOFOUTהכ )5.- $44 +4ך鿇ㅷ׾倜׋ז銲稆ה׃גⱄ㹀纏ׅ׷ 6*ד֮׷䗳銲כזֻծ堣腉ך䬄韋⻉׮〳腉 أ؝٦فָ㶷㖈׃ծ㢩鿇ח䎁幧׃זְ 㼛勻ծ8FCך垥彊➬圫חז׷✮㹀

  17. 4IBEPX%0. 5FNQMBUFT )5.-*NQPSUT $VTUPN &MFNFOUT

  18. 4IBEPX%0. 5FNQMBUFT )5.-*NQPSUT $VTUPN &MFNFOUT 8FC$PNQPOFOUT

  19. $VTUPN &MFNFOUT Ꟛ涪⩎דؕأةي銲稆ך㹀纏׾〳腉חׅ׷

  20. var XElementPrototype = Object.create(HTMLElement.prototype); var XElement = document.registerElement('x-element', { prototype:

    XElementPrototype }); new XElement();
  21. var XElementPrototype = Object.create(HTMLElement.prototype); XElementPrototype.createdCallback = function () { console.log('created');

    }; XElementPrototype.attachedCallback = function () { console.log('attached'); }; XElementPrototype.detachedCallback = function () { console.log('detached'); }; XElementPrototype.attributeChangedCallback = function () { console.log('attribute changed'); }; var XElement = document.registerElement('x-element', { prototype: XElementPrototype }); new XElement();
  22. $VTUPN&MFNFOUT ؕأةي銲稆חכع؎ؿٝ׾ろ׭׷䗳銲ָ֮׷ FYUFOEד傀㶷銲稆׾竰䪫〳腉

  23. إوٝذ؍حؙז銲稆 ׾䲿⣘דֹ׷

  24. 5FNQMBUFT 䲽歗ׁ׸זְ♶崞䚍זذٝفٖ٦ز銲稆

  25. <template id='tmpl'> <style> input, button { border: 1px solid #000;

    border-radius: 3px; } </style> <input type='text'> <button>Button</button> </template>
  26. 5FNQMBUFT %0.ה׃ג《䖤׃䪔ֲֿהָ⳿勻׷ ػ٦أׁ׸ג׮䲽歗כׁ׸זְ ؙٗ٦ٝ׃ג鷄⸇ׁ׸׷תד㹋遤ׁ׸זְ

  27. 4IBEPX%0. %0.חֶֽ׷أ؝٦ف׾㹋植ׅ׷

  28. )5.-&MFNFOU %PDVNFOU 4IBEPX3PPU )5.- $44 +4 )5.-&MFNFOU – 4IBEPX3PPUד䕎䧭ׁ׸׋ أ؝٦فכ㢩鿇ח䕦갟׃זְ

  29. var template = document.querySelector('#tmpl'); var div = document.querySelector('div'); var clone

    = document.importNode(template.content, true); var shadowRoot = div.createShadowRoot(); shadowRoot.appendChild(clone);
  30. )5.-*NQPSUT )5.-ٔا٦أ׾ٗ٦سׅ׷➬圫

  31. <html> <head> <title>x-element</title> <link rel='import' href='x-element.html'> </head> <body> <x-element></x-element> </body>

    </html>
  32. )5.-*NQPSUT +BWB4DSJQUװ$44׾ٔا٦أדٗ٦س〳腉 ⣛㶷ꟼ⤘ָ僇然חז׷ ؎ٝه٦ز⯓ךTDSJQUכ䲽歗׾ـٗحؙ׃זְ BTZOD㾩䚍׾➰♷〳腉

  33. XFCDPNQPOFOUTPSH

  34. ⢽ִל(PPHMF.BQT"1*׾ ⢪ֲחכ˘

  35. ➙תדך䩛갫 邌爙⯓ךٍؗٝغأ׾)5.-ח欽䠐ׅ׷ ٓ؎ـٓٔ׾TDSJQUדٗ٦سׅ׷ 醱꧟ז"1*׾꽀⢪ׅ׷

  36. var options = { zoom: 10, center: new google.map.LatLng(-34.397, 150.644)

    }; var mapCanvas = document.getElementById('map-canvas'); var map = new google.maps.Map(mapCanvas, options); var marker = new google.maps.Marker({ position: new google.map.LatLng(-34.397, 150.644), map: map, title: 'Hello World!' }); var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0,
  37. None
  38. 8FC$PNQPOFOUT⻉ׅ׸ל˘

  39. <google-map latitude=“37.77493" longitude=“-122.41942"> </google-map>

  40. None
  41. /PUJDBUJPO"1* ׾8FC$PNQPOFOUT⻉׃׋

  42. DIOFUYOPUJDBUJPO

  43. <x-notification autoshow title='Notification Title' delay='1000' timeout='3000' tag=‘tag’>Body Text</x-notification>

  44. 1PMZNFSEF8FC$PNQPOFOUT

  45. XXXQPMZNFSQSPKFDUPSH

  46. 1PMZNFS ָװ׏גְ׷ֿה

  47. 1PMZMMה"1*ך♧顐䚍 劢㹋鄲ךـٓؐؠפךهٔؿ؍ٕ 8FC$PNQPOFOUTחꟼׅ׷"1*ך㢌⻉׾ェ 

  48. ⤑ⵃז؝،堣腉 ر٦ةغ؎ٝر؍ؚٝ׾ろ׭׋ذٝفٖ٦زؒٝآٝ 䬄韋⻉ׁ׸׋"1*"KBYװMPDBM4UPSBHF瘝 .BUFSJBM%FTJHOח㛇בְ׋ぐ珏6*

  49. ⴱ劍⻉

  50. 兛鸐חװ׷ה˘

  51. <template> <p>lorem ipsum</p> </template> <script> var XElement = document.registerElement('x-element', {

    prototype: { createdCallback: function () { var template = document.querySelector('template'); var clone = document.importNode(template.content, true); var shadowRoot = element.createShadowRoot(); shadowRoot.appendChild(clone); } } }); </script>
  52. 1PMZNFS׌ה˘

  53. <polymer-element name='x-element'> <template> <p>lorem ipsum</p> </template> </polymer-element>

  54. None
  55. هٔؿ؍ٕ

  56. 䎃植㖈˘

  57. None
  58. XJUI1MBUGPSNKT

  59. None
  60. 4IBEPX%0.׌ֽכ هٔؿ؍ָٕ˘@ sཀAպ̼ 

  61. 1PMZNFS%FTJHOFS

  62. XXXQPMZNFSQSPKFDUPSHUPPMTEFTJHOFS

  63. רַָֻ׿ִָ׷ 8FC$PNQPOFOUTה1PMZNFS

  64. ת׆ծؾُ،ז8FC$PNQPOFOUT׾կ ׉ך֮החծ1PMZNFS׾կ

  65. ͒

  66. 1PMZNFSכ8FC$PNQPOFOUT׾
 䱿׃鹌׭׷㶷㖈

  67. None
  68. 8FC$PNQPOFOUTָ׻ַ׸ל 1PMZNFSכꨇזֻדֹ׷ 椚歋

  69. ➬圫瘻㹀⚥ך➙ז׵ծ➬圫׉ך׮ ך׾陽锷ׅ׷ֿהָדֹ׷ 椚歋

  70. ـٓؐؠكٝت٦׾ 䚈ַֿׅהָדֹ׷ 椚歋

  71. 8FC$PNQPOFOUT ך兛⿹ח籬ָ׷ 椚歋

  72. 5IBOLT CZ!DI