Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への...
Search
Kenichiro Kishida
September 28, 2016
Technology
1
370
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
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
180
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
350
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
140
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
320
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
200
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
370
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
710
Other Decks in Technology
See All in Technology
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Prox Industries株式会社 会社紹介資料
proxindustries
0
260
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.3k
GitHub Copilot の概要
tomokusaba
1
130
A2Aのクライアントを自作する
rynsuke
1
170
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
510
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
250
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
210
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Bash Introduction
62gerente
614
210k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Designing for humans not robots
tammielis
253
25k
Gamification - CAS2011
davidbonilla
81
5.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Raft: Consensus for Rubyists
vanstee
140
7k
Faster Mobile Websites
deanohume
307
31k
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