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