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

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. latitude=“{{lat}}"
   longitude=“{{lng}}”/>
   latitude=“[[lat]]"
   longitude="[[lng]]" zoom="17">
   latitude="[[lat]]"
   longitude=“[[lng]]" />
   
   

   View Slide

6. View Slide

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

   View Slide

8. w ҆શͰޮ཰తͳɺ৽ͨͳ௿ϨϕϧػೳΛ8FCͷϓ
   ϥοτϑΥʔϜʹ௥Ճ͢Δ
   w طଘͷػೳ )5.-΍$44
   ͕ɺ͜ΕΒ௿Ϩϕϧػ
   ೳʹΑΓͲͷΑ͏ʹ࣮૷͞ΕΔ͔Λࣔ͢͜ͱͰɺ
   ։ൃऀͷཧղΛଅਐ͠ɺෳ੡ΛՄೳͱ͢Δ
   w ৽ػೳͷ։ൃɺදݱɺςετΛ+BWBTDSJQUͰ࣮ࢪ
   ͠ɺඪ४Խͷલʹ8FC։ൃऀ͕ࢀըͰ͖ΔΑ͏ʹ
   ͢Δɻ͜ΕʹΑΓɺ8FC։ൃऀͱඪ४Խ୲౰ऀͷ
   ؒͰૉ੖Β͍͠αΠΫϧ͕࣮ݱ͞ΕΔ
   https://html5experts.jp/iwase/10825/
   

   View Slide

9. 8FC$PNQPOFOUT
   w4IBEPX%0.
   w$VTUPN&MFNFOUT
   w)5.-*NQPSUT
   w)5.-5FNQMBUFT
   https://github.com/w3c/webcomponents
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ಠࣗ$PNQPOFOUT
    
    
    
    <br/><!— 独自のCSS —><br/>
    
    
    <br/>Polymer({<br/>is: 'タグ名',<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
    
    

    View Slide

23. ֦ுλά
    
    <br/>Polymer({<br/>is: 'my-input',<br/>extends: 'input',<br/>behaviors: [Polymer.IronValidatableBehavior],<br/>properties: {<br/>hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義<br/>},<br/>ready: function() { // コンポーネントが利用可能になったときの処理<br/>}<br/>});<br/>
    

    View Slide

24. #FIBWJPST
    wڞ௨ॲཧΛఆٛͰ͖Δ
    w1)1Ͱݴ͏ͱUSBJUʹ͍ۙΠϝʔδ
    Ͱ࢖͑Δ
    

    View Slide

25. )FMQFST
    response="{{users}}">
    
    
    {{user.name}}
    
    
    
    管理者だったら何か
    
    

    View Slide

26. +TPO8FC5PLFOT
    http://jwt.io
    

    View Slide

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

    View Slide

28. ͦ͏ͩ1PMZNFS࢖͓͏
    1PMZNFS
    

    View Slide

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

    View Slide