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

ビューのソースコードコンフリクトから解放されるPHPerのための次世代Webアプリケーション開発への道 / PHP Conference Kansai 2016

ビューのソースコードコンフリクトから解放されるPHPerのための次世代Webアプリケーション開発への道 / PHP Conference Kansai 2016

フロントエンドの技術が日々変わる中、様々なトレンドがあります。AngularJS、ReactJSなどなど。
何を使うか迷ったとき、将来のW3C仕様を見越して、より標準に近いとされる技術を採用するのも有効な選択肢ではないでしょうか?
PolymerはWeb Componentsを標準仕様に一番近い形で利用できるフロントエンドフレームワークとして注目されています。
このセッションではPolymerを使うと、これまでのフロントエンド開発とどのように違うのかについて、実務で投入してみた経験からフロントエンドとサーバサイド(PHP)の棲み分けなど、現時点のベストプラクティスについて解説します。

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

July 16, 2016
Tweet

Transcript

  1. Ϗϡʔͷιʔείʔυ ίϯϑϦΫτ͔Βղ์͞ΕΔ 1)1FSͷͨΊͷ࣍ੈ୅8FC ΞϓϦέʔγϣϯ։ൃ΁ͷಓ 1)1ΧϯϑΝϨϯεؔ੢CZ!TJ[VIJLP

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

  3. None
  4. 1)1JTʜ

  5. w$(* w.7$ w.71.77. w41".JDSP4FSWJDF

  6. w)5.-JO1)1 w4NBSUZ5XJHʜ w"KBYK2VFSZʜ w'MVY8FC$PNQPOFOUTʜ

  7. ΑΓૄ݁߹ʹ ͳ͖ͬͯͨ

  8. https://www.infoq.com/jp/articles/no-more-mvc-frameworks

  9. https://www.infoq.com/jp/articles/no-more-mvc-frameworks

  10. https://www.infoq.com/jp/articles/no-more-mvc-frameworks HTTP Request HTTP Response

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

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

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

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

  15. より詳 しく 知 りたい人 は

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

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

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

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

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

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

  22. ։ൃ؀ڥ wCPXFSKT w1PMZNFS$-* w+BWB4DSJQU)5.- wOPEFKTHVMQCSPXTFSTZOD wNPDLBQJTFSWFS

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

  24. 4UBSUVQ$-* $ npm install -g bower $ npm install -g

    polymer-cli $ polymer init $ polymer serve $ polymer test $ polymer build
  25. 8FC$PNQPOFOUT%BUB#JOEJOH $ bower install --save geo-location $ bower install --save

    GoogleWebComponents/google-map <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/geo-location/geo-location.html"> <link rel="import" href="../bower_components/google-map/google-map.html"> <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location> <google-map map="{{map}}" latitude="[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude="[[lng]]"></google-map-marker> </google-map>
  26. None
  27. https://elements.polymer-project.org/

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

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

  32. )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>
  33. .BUFSJBM%FTJHO <app-drawer-layout fullbleed> <app-drawer> <app-toolbar> <div class="title">メニュー</div> </app-toolbar> <!— ここにメニューを記述

    —> </app-drawer> <app-header-layout has-scrolling-region> <app-header fixed condenses> <app-toolbar> <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> ページタイトル </app-toolbar> </app-header> <div class="contents"> <!— 実際のコンテンツ —> </div> </app-header-layout> </app-drawer-layout>
  34. https://shop.polymer-project.org/

  35. http://d.hatena.ne.jp/hasegawayosuke/20130302/p1 $43'ରࡦ

  36. +TPO8FC5PLFOT http://jwt.io

  37. ϥΠϒϥϦ͔Β'8΁ w:FPNBO͔Β$-*΁ wQBHFKT͔ΒBQQΤϨϝϯτ΁ w͋ΒΏΔґଘੑΛഉআ͠ɺ౷Ұతϓϥο τϑΥʔϜͱͯ͠ఏڙ͞ΕΔํ޲΁ wϏϧυ͸HVMQYY͔Β$-*΁ wCPXFS͔Β$-*΁

  38. %PDVNFOUBUJPO <!-- Loads Polymer element and behavior documentation usin [Hydrolysis](https://github.com/PolymerLabs/hydrolysi

    documentation page including demos (if available). --> /** * The relative root for determining paths to demos and default source * detection. */
  39. ಘͨ஌ݟ w˛BQQSPVUF˔FYDFTTSPVUFS w˛DMBTT˔EPNJGͳͲ wTDSJQU͸EPNNPEVMFͷ֎Ͱ΋0, w"SSBZ΍0CKFDUϓϩύςΟͷઃఆ͸ Ͱͳ͘TFU ͰόΠϯσΟϯά wςʔϚͷઃఆʹ͸!BQQMZ WBS wWͱ͸ҧ͏ͷͩΑ

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

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

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