Save 37% off PRO during our Black Friday Sale! »

Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への道。(LT版)/phpstudy-2016-09

Web Componentsで実現するPHPerのための、次世代Webアプリケーション開発への道。(LT版)/phpstudy-2016-09

PHP勉強会2016年9月のLT発表資料です。

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

September 28, 2016
Tweet

Transcript

  1. 8FC$PNQPOFOUTͰ࣮ݱ͢Δ 1)1FSͷͨΊͷ ࣍ੈ୅8FCΞϓϦέʔγϣϯ ։ൃ΁ͷಓɻ -5൛ 1)14UVEZCZ!TJ[VIJLP

  2. ,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ R: HmM^JRTIeUY

  3. None
  4. None
  5. <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>
  6. None
  7. https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘ 8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏

  8. w ҆શͰޮ཰తͳɺ৽ͨͳ௿ϨϕϧػೳΛ8FCͷϓ ϥοτϑΥʔϜʹ௥Ճ͢Δ w طଘͷػೳ )5.-΍$44 ͕ɺ͜ΕΒ௿Ϩϕϧػ ೳʹΑΓͲͷΑ͏ʹ࣮૷͞ΕΔ͔Λࣔ͢͜ͱͰɺ ։ൃऀͷཧղΛଅਐ͠ɺෳ੡ΛՄೳͱ͢Δ w

    ৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲౰ऀͷ ؒͰૉ੖Β͍͠αΠΫϧ͕࣮ݱ͞ΕΔ https://html5experts.jp/iwase/10825/
  9. 8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents

  10. )5.-λάίϯϙʔωϯτ wλά͝ͱʹ.7$ͷ֓೦͕ଘࡏ͢Δ wλά͸جຊతʹૄ݁߹Ͱ͋Δʢ਌ࢠؔ ܎͸͋Δʣ

  11. w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH

  12. w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH

  13. 1PMZNFS https://www.polymer-project.org

  14. http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344

  15. http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb

  16. http://hayato.io/2016/shadowdomv1/

  17. https://html5experts.jp/komasshu/19704/

  18. w8FC$PNQPOFOUT w%BUB#JOEJOH w#FIBWJPST w)FMQFST w.BUFSJBM%FTJHO w$-*5PPMT

  19. ϑϩϯτΤϯυ όοΫΤϯυ

  20. https://elements.polymer-project.org/

  21. https://open-elements.org/

  22. ಠࣗ$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>
  23. ֦ுλά <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>
  24. #FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ w1)1Ͱݴ͏ͱUSBJUʹ͍ۙΠϝʔδ Ͱ࢖͑Δ

  25. )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>
  26. +TPO8FC5PLFOT http://jwt.io

  27. ΦεεϝϙΠϯτ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ w Ϋϩεϒϥ΢βʢ1PMZpMMʣ w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
  28. ͦ͏ͩ1PMZNFS࢖͓͏ 1PMZNFS

  29. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp R: HmM^JRTIeUY @sizuhiko #phpstudy 2016/3/30