秋のJavaScriptt祭り 2016年10月 LT
8FC$PNQPOFOUTΛͬͯळͷ+BWB4DSJQUࡇΓCZ!TJ[VIJLP
View Slide
,FOJDIJSP,JTIJEB5PLZP +"1"/TJ[VIJLP!HNBJMDPN !TJ[VIJLPIUUQTHJUIVCDPNTJ[VIJLPIUUQCMPHPQFOUPLZPKQ
େࣄͳ͜ͱ࠷ॳʹ
ͦ͏ͩ1PMZNFS͓͏1PMZNFS
1PMZNFShttps://www.polymer-project.org
˞썪쎅-5쎆ൃදऀ쎅 ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰 ɹ썫ҙ썦썷썬썛
͍ͨ͘ͳΔཧ༝w ֶशίετ͕͍ +4͕গͳΊʣw 41"͡Όͳͯ͘ྑ͍w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣw ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δw υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δw Ϋϩεϒϥβʢ1PMZpMMʣ
Α͘ݴΘΕΔ͜ͱw ͱΜ͕ͬͯΔͶʂw ͍ͬͯΔਓ͡Ίͯݟͨw ͑Δͷʁw ੲ ͬͨ͜ͱ͋Δw ͭΒ͘ͳ͍ʁ
w Ww WWw WWw Ww Ww Ww Ww Ww Whttps://github.com/Polymer/polymer/releases89Releases!!
ۤ썮썴썝썢ɺࠔ썺썶쎁ۤ썮썛쎅쎆썶쎡લ쎁쎪썷써쎀쎁쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟썾쎙ɺॆ࣮썮썽쎢ʮ࢛݄܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ
Α͔ͬͨ͜ͱw )5.-λά࠶ར༻ੑ͕ߴ͍w ಈ͖ͷ͋Δϖʔδ͕؆୯ʹ࡞ΕΔw ϒϩοΫΛΈཱͯΔΑ͏ͩw άϩʔόϧԚછͳʹͦΕw ͡ΊͯͷਓೃછΈ͍͢w ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
WebComponent ͬͯ·͔͢ʁ
8FC$PNQPOFOUTw4IBEPX%0.w$VTUPN&MFNFOUTw)5.-*NQPSUTw)5.-5FNQMBUFThttps://github.com/w3c/webcomponents
ݱࡏʹϐϯΛཱͯͨਤΛද͍ࣔͨ͠
<br/><br/>function createMap() {<br/>navigator.geolocation.getCurrentPosition(position => {<br/>const map = new google.maps.Map(document.getElementById('map'), {<br/>center: {<br/>lat: position.coords.latitude,<br/>lng: position.coords.longitude},<br/>zoom: 17<br/>});<br/>new google.maps.Marker({position: center, map: map});<br/>});<br/>}<br/>
latitude=“{{lat}}"longitude=“{{lng}}”/>latitude=“[[lat]]"longitude="[[lng]]" zoom="17">latitude="[[lat]]"longitude=“[[lng]]" />
ಠࣗ$PNQPOFOUT<br/><!— 独自のCSS —><br/><br/>Polymer({<br/>is: 'タグ名',<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
+BWB4DSJQU쎆؆୯썾썤썷써쎀썴쎣쎆8FC썾Ձ쎩ग़썰썶쎘쎅खஈ썾썙썺썽+4গ쎁쎘썾쎙࠷େݶ쎂Ձ썣ग़썲쎢ํ๏썷썺썶쎡ɺखஈ썣తԽ썮쎁썛썪썿썣ॏཁ썷썿ࢥ썝쎪썾썰쎟ͱ͋Δ࠙ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ
w1PMZNFSw95BHw#040/*$w4LBUF+4w3FBDU+4w"OHVMBS8FC$PNQPOFOUT>8FC$PNQPOFOUTPSH
http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
http://hayato.io/2016/shadowdomv1/
https://elements.polymer-project.org/
w8FC$PNQPOFOUTw%BUB#JOEJOHw#FIBWJPSTw)FMQFSTw.BUFSJBM%FTJHOw$-*5PPMT
֦ுλά<br/>Polymer({<br/>is: 'my-input',<br/>extends: 'input',<br/>behaviors: [Polymer.IronValidatableBehavior],<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
#FIBWJPSTwڞ௨ॲཧΛఆٛͰ͖ΔwNJYJO
)FMQFSTresponse="{{users}}">{{user.name}}管理者だったら何か
WJTJUNZCMPHHJUIVChttps://github.com/sizuhikohttp://blog.open.tokyo.jp