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
AI導入の理想と現実~コストと浸透〜
oprstchn
0
150
GitHub Copilot の概要
tomokusaba
1
150
OPENLOGI Company Profile for engineer
hr01
1
33k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
370
ビギナーであり続ける/beginning
ikuodanaka
1
180
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
3.4k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
860
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
1
440
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
320
AI専用のリンターを作る #yumemi_patch
bengo4com
3
1.8k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
330
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
94
6.1k
Music & Morning Musume
bryan
46
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Facilitating Awesome Meetings
lara
54
6.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Designing for humans not robots
tammielis
253
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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