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

Polymerを使った次世代Webアプリケーションの開発を体験しよう/phpstudy-2017-02

 Polymerを使った次世代Webアプリケーションの開発を体験しよう/phpstudy-2017-02

PHP勉強会 2017年2月発表資料

Kenichiro Kishida

February 22, 2017
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. 1PMZNFSΛ࢖ͬͨ
    ࣍ੈ୅8FCΞϓϦέʔγϣϯͷ
    ։ൃΛମݧ͠Α͏
    QIQTUVEZCZ!TJ[VIJLP

    View Slide

  2. ,FOJDIJSP,JTIJEB
    5PLZP +"1"/
    TJ[VIJLP!HNBJMDPN !TJ[VIJLP
    IUUQTHJUIVCDPNTJ[VIJLP
    IUUQCMPHPQFOUPLZPKQ
    2QN[OGTEQGFQ

    View Slide

  3. େࣄͳ͜ͱ͸࠷ॳʹ

    View Slide

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

    View Slide

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

    View Slide

  6. 8):1PMZNFS
    w ͱʹ͔͘1PMZNFS͕޷͖
    w ϑϩϯτΤϯυͷ%0.୯ҐճؼͷྲྀΕ
    w &YUFOTJCMF8FC.BOJGFTUPΛ࣮ݱ
    ͍ͤͨ͞
    w 1SPHSFTTJWF8FC"QQTͷ࣌୅

    View Slide

  7. K2VFSZqBTIҎલ
    ϑϩϯτΤϯυ αʔόʔαΠυ
    σβΠϯ
    )5.-$44
    )5.-+4
    αʔόʔαΠυϓϩάϥϛϯά

    View Slide

  8. K2VFSZ'MBTIશ੝ظ
    ϑϩϯτΤϯυ αʔόʔαΠυ
    σβΠϯ
    )5.-$44
    K2VFSZ
    'MBTI
    )5.-K2VFSZ
    αʔόʔαΠυϓϩάϥϛϯά

    View Slide

  9. K2VFSZ'MBTIҎ߱
    ϑϩϯτΤϯυ αʔόʔαΠυ
    σβΠϯ
    )5.-$44
    #BDLCPOF&NCFS3FBDU
    "OHVMBS
    αʔόʔαΠυϓϩάϥϛϯά

    View Slide

  10. 1PMZNFSҎ߱
    ϑϩϯτΤϯυ αʔόʔαΠυ
    σβΠϯ
    )5.-$44
    1PMZNFS
    αʔόʔαΠυ
    ϓϩάϥϛϯά

    View Slide

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

    View Slide

  12. https://developers.google.com/web/fundamentals/
    getting-started/codelabs/your-first-pwapp/?hl=ja

    View Slide

  13. w W
    w WW
    w WW
    w W
    w W
    w W
    w W
    w W
    w W
    w W
    w W
    https://github.com/Polymer/polymer/releases
    93
    Releases!!

    View Slide

  14. WebComponent

    ࢖ͬͯ·͔͢ʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. https://www.webcomponents.org/collection/Polymer/elements

    View Slide

  19. https://customelements.io/

    View Slide

  20. https://codelabs.developers.google.com/?cat=Web

    View Slide

  21. LIVE DEMO

    View Slide

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

    View Slide

  23. 2QN[OGTEQGFQ

    1PMNFSDPFEP
    w(PPHMF$PEFMBCTͷϋϯζΦϯ
    wNFFUVQ
    w-5େձ
    w044׆ಈʢΤϨϝϯτ࡞੒ͳͲʣ

    View Slide

  24. WJTJUNZCMPHHJUIVC
    https://github.com/sizuhiko
    http://blog.open.tokyo.jp

    View Slide