Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への道。(LT版)/phpstudy-2016-09
Kenichiro Kishida
September 28, 2016
Technology
1
340
Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への道。(LT版)/phpstudy-2016-09
PHP勉強会2016年9月のLT発表資料です。
Kenichiro Kishida
September 28, 2016
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
260
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
250
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
480
E2Eテストに向き合う/PHPerKaigi2020
sizuhiko
1
1.8k
PHPを学ぶということ / phpcon-2019
sizuhiko
1
1.4k
PuppeteerをE2Eテストに利用する/jsfes-2019-winter
sizuhiko
0
830
AMP/CakeFest 2019 Tokyo LT
sizuhiko
1
46
標準インターフェースを使った アプリケーション開発/phpcon-okinawa-2019
sizuhiko
0
420
PHPを学ぶということ / phpcondo-2019
sizuhiko
2
3.5k
Other Decks in Technology
See All in Technology
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます!〜
miu_crescent
0
200
OpsJAWS Meetup21 システム運用アンチパターンのすすめ
yoshiiryo1
0
1.6k
ソフトウェアテスト自動化、一歩前へ
yoshikiito
7
1.1k
XRとシビックテック
satoshirobatofujimoto
0
110
Google Cloud Updates 2022/05/16-05/31
no24oka
2
110
FoodTechにおける商流・金流・物流の進化/Evolution of Commercial, Financial, and Logistics in FoodTech
dskst
0
420
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
yfcgpsebp
0
310
Apa itu DevOps & Kenapa perlu belajar DevOps?
dicodingevent
0
120
20220628event_ogura_part
caddi_eng
0
160
What's new in Vision
satotakeshi
0
220
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
980
QiitaConference2022
fuwasegu
0
220
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
How GitHub (no longer) Works
holman
296
140k
The Invisible Side of Design
smashingmag
290
48k
Fireside Chat
paigeccino
12
1.3k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Automating Front-end Workflow
addyosmani
1351
200k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
The Cult of Friendly URLs
andyhume
68
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Thoughts on Productivity
jonyablonski
43
2.3k
Bash Introduction
62gerente
597
210k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
Transcript
8FC$PNQPOFOUTͰ࣮ݱ͢Δ 1)1FSͷͨΊͷ ࣍ੈ8FCΞϓϦέʔγϣϯ ։ൃͷಓɻ -5൛ 1)14UVEZCZ!TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ R: HmM^JRTIeUY
None
None
<geo-location latitude=“{{lat}}" longitude=“{{lng}}”/> <google-map map="{{map}}" latitude=“[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]"
longitude=“[[lng]]" /> </google-map>
None
https://extensiblewebmanifesto.org/ ඪ४Խ৫Ͱ͋Δ8$ͱϒϥβϕϯμ͚ͩͰͳ͘ 8FC։ൃऀר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏
w ҆શͰޮతͳɺ৽ͨͳϨϕϧػೳΛ8FCͷϓ ϥοτϑΥʔϜʹՃ͢Δ w طଘͷػೳ )5.-$44 ͕ɺ͜ΕΒϨϕϧػ ೳʹΑΓͲͷΑ͏ʹ࣮͞ΕΔ͔Λࣔ͢͜ͱͰɺ ։ൃऀͷཧղΛଅਐ͠ɺෳΛՄೳͱ͢Δ w
৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲ऀͷ ؒͰૉΒ͍͠αΠΫϧ͕࣮ݱ͞ΕΔ https://html5experts.jp/iwase/10825/
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
)5.-λάίϯϙʔωϯτ wλά͝ͱʹ.7$ͷ֓೦͕ଘࡏ͢Δ wλάجຊతʹૄ݁߹Ͱ͋Δʢࢠؔ ͋Δʣ
w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH
w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH
1PMZNFS https://www.polymer-project.org
http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
http://hayato.io/2016/shadowdomv1/
https://html5experts.jp/komasshu/19704/
w8FC$PNQPOFOUT w%BUB#JOEJOH w#FIBWJPST w)FMQFST w.BUFSJBM%FTJHO w$-*5PPMT
ϑϩϯτΤϯυ όοΫΤϯυ
https://elements.polymer-project.org/
https://open-elements.org/
ಠࣗ$PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS
—> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
֦ுλά <link rel="import" href="../bower_components/polymer/polymer.html"> <script> Polymer({ is: 'my-input', extends: 'input',
behaviors: [Polymer.IronValidatableBehavior], properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script>
#FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ w1)1Ͱݴ͏ͱUSBJUʹ͍ۙΠϝʔδ Ͱ͑Δ
)FMQFST <iron-ajax url="/users" handle-as="json" method="GET" last- response="{{users}}"></iron-ajax> <ul> <template is="dom-repeat"
items="[[users]]" as="user"> <li>{{user.name}}</li> </template> </ul> <template is="dom-if" if="[[admin]]"> <div>管理者だったら何か</div> </template>
+TPO8FC5PLFOT http://jwt.io
ΦεεϝϙΠϯτ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ֶशίετ͕͍ +4͕গͳΊʣ w Ϋϩεϒϥβʢ1PMZpMMʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
ͦ͏ͩ1PMZNFS͓͏ 1PMZNFS
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp R: HmM^JRTIeUY @sizuhiko #phpstudy 2016/3/30