Web Components changes Web Development

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

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

*N!DI 1FSGPSNBODF &WBOHFMJTU

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

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

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

)5.- $44

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

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

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

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

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

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

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

8FC$PNQPOFOUT֮׵׻׷

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

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

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

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

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

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

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

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

<template id='tmpl'> <style> input, button { border: 1px solid #000;
border-radius: 3px; } </style> <input type='text'> <button>Button</button> </template>

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

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

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

var template = document.querySelector('#tmpl'); var div = document.querySelector('div'); var clone
= document.importNode(template.content, true); var shadowRoot = div.createShadowRoot(); shadowRoot.appendChild(clone);

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

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

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

XFCDPNQPOFOUTPSH

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

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

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,

8FC$PNQPOFOUT⻉ׅ׸ל˘

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

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

DIOFUYOPUJDBUJPO

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

1PMZNFSEF8FC$PNQPOFOUT

XXXQPMZNFSQSPKFDUPSH

1PMZNFS ָװ׏גְ׷ֿה

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

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

ⴱ劍⻉

兛鸐חװ׷ה˘

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

1PMZNFS׌ה˘

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

هٔؿ؍ٕ

䎃植㖈˘

XJUI1MBUGPSNKT

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

1PMZNFS%FTJHOFS

XXXQPMZNFSQSPKFDUPSHUPPMTEFTJHOFS

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

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

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

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

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

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

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

5IBOLT CZ!DI

Web Components changes Web Development

Web Components changes Web Development

More Decks by Shogo Sensui

Other Decks in Technology

Featured

Transcript