Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Kenichiro Kishida

September 28, 2016
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

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