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アプリケーション開発への道。(LT版)/phpstudy-2016-09
Search
Kenichiro Kishida
September 28, 2016
Technology
1
360
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
75
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
160
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
75
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
220
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
110
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
260
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.3k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
300
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
630
Other Decks in Technology
See All in Technology
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Azure AI ことはじめ
tsubakimoto_s
0
130
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
220
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
720
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
スレットハンティングについて知っておきたいこと
hacket
0
130
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Fireside Chat
paigeccino
25
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Optimizing for Happiness
mojombo
373
69k
Visualization
eitanlees
139
14k
Statistics for Hackers
jakevdp
792
220k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
The Language of Interfaces
destraynor
151
23k
The Invisible Side of Design
smashingmag
294
50k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
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