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

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

Transcript

1. 8FC
   $PNQPOFOUTͰ࣮ݱ͢Δ 1)1FSͷͨΊͷ
   ࣍ੈ୅8FCΞϓϦέʔγϣϯ
   ։ൃ΁ͷಓɻ -5൛ 1)14UVEZ
   CZ
   !TJ[VIJLP
2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   R:
   HmM^JRTIeUY
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>
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. +TPO
    8FC
    5PLFOT http://jwt.io
27. ΦεεϝϙΠϯτ w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
28. ͦ͏ͩ
    1PMZNFS
    ࢖͓͏ 1PMZNFS
29. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp R:
    HmM^JRTIeUY @sizuhiko #phpstudy 2016/3/30