Web Components changes Web Development

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

Transcript

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

   View Slide

2. (PPHMF*01PMZNFSBOE8FC
   $PNQPOFOUTDIBOHFFWFSZUIJOHZPVLOPX
   BCPVU8FCEFWFMPQNFOU

   ZPVUVCF0+JI&&T
   

   View Slide

3. *N!DI
   1FSGPSNBODF
   &WBOHFMJTU
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. )5.-$44
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 8FC$PNQPOFOUT֮׵׻׷
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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();
    

    View Slide

22. $VTUPN&MFNFOUT
    ؕأةي銲稆חכع؎ؿٝ׾ろ׭׷䗳銲ָ֮׷
    FYUFOEד傀㶷銲稆׾竰䪫〳腉
    

    View Slide

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

    View Slide

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

    View Slide

25. 
    <br/>input, button {<br/>border: 1px solid #000;<br/>border-radius: 3px;<br/>}<br/>
    
    Button
    
    

    View Slide

26. 5FNQMBUFT
    %0.ה׃ג《䖤׃䪔ֲֿהָ⳿勻׷
    ػ٦أׁ׸ג׮䲽歗כׁ׸זְ
    ؙٗ٦ٝ׃ג鷄⸇ׁ׸׷תד㹋遤ׁ׸זְ
    

    View Slide

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

    View Slide

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

    View Slide

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);
    

    View Slide

30. )5.-*NQPSUT
    )5.-ٔا٦أ׾ٗ٦سׅ׷➬圫
    

    View Slide

31. 
    
    x-element
    
    
    
    
    
    
    

    View Slide

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

    View Slide

33. XFCDPNQPOFOUTPSH
    

    View Slide

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

    View Slide

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

    View Slide

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,
    

    View Slide

37. View Slide

38. 8FC$PNQPOFOUT⻉ׅ׸ל˘
    

    View Slide

39. latitude=“37.77493"
    longitude=“-122.41942">
    
    

    View Slide

40. View Slide

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

    View Slide

42. DIOFUYOPUJDBUJPO
    

    View Slide

43. autoshow
    title='Notification Title'
    delay='1000'
    timeout='3000'
    tag=‘tag’>Body Text
    

    View Slide

44. 1PMZNFSEF8FC$PNQPOFOUT
    

    View Slide

45. XXXQPMZNFSQSPKFDUPSH
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. ⴱ劍⻉
    

    View Slide

50. 兛鸐חװ׷ה˘
    

    View Slide

51. 
    lorem ipsum
    
    <br/>var XElement = document.registerElement('x-element', {<br/>prototype: {<br/>createdCallback: function () {<br/>var template = document.querySelector('template');<br/>var clone = document.importNode(template.content, true);<br/>var shadowRoot = element.createShadowRoot();<br/>shadowRoot.appendChild(clone);<br/>}<br/>}<br/>});<br/>
    

    View Slide

52. 1PMZNFS׌ה˘
    

    View Slide

53. 
    
    lorem ipsum
    
    
    

    View Slide

54. View Slide

55. هٔؿ؍ٕ
    

    View Slide

56. 䎃植㖈˘
    

    View Slide

57. View Slide

58. XJUI1MBUGPSNKT
    

    View Slide

59. View Slide

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

    View Slide

61. 1PMZNFS%FTJHOFS
    

    View Slide

62. XXXQPMZNFSQSPKFDUPSHUPPMTEFTJHOFS
    

    View Slide

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

    View Slide

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

    View Slide

65. ͒
    

    View Slide

66. 1PMZNFSכ8FC$PNQPOFOUT׾

    䱿׃鹌׭׷㶷㖈
    

    View Slide

67. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

72. 5IBOLT
    CZ!DI
    

    View Slide