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開発の未来」のセッションの資料です。

Shogo Sensui

July 28, 2014
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

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