1. WordPress とモバイルと
browser-sync と部屋とYシャツと私
優太朗
○ 優太郎

2. • 就職できずにニートとして落ちぶれ
• WordPress Community に出会う
• 独学で Web の勉強
• 現在 Web 3年目
• ややひきこもり系ウェブクリエイター
• WP-E(仮)では ハマチ
• WordCamp Tokyo 2014 Web制作班班長
• Schoo WordCommunity Channel #3
• 仕事は常に募集中
About Yutaro Miyazaki

3. WP-E

4. よろしくね

5. モバイルサイトの開発

6. 実機ですか

7. UA ですか

8. Emulator ですか

9. デザインカンプ
↓
html
↓
WordPress 化

10. ダルい

11. モバイル向けだと特に
構築からチェックまで
一貫して

12. ダルい

13. そんな時におすすめしたい

14. browser-sync

15. Web デザイナー

17. と言うことは

18. browser-sync
が使いたくなる3つの理由
1. Server
2. Reload & Inject
3. ghostMode

19. 1. Server

20. 1. Server

21. 1. Server
え、それだけ?
ghost
gulp-connect
grunt-contrib-connect
express-server
http-server

22. Local Server にも繋げる

23. 1. Server
wordpress.dev

24. 1. Server

25. デモる

26. 1. Server
同一ネットワークにいれば外部機器からも接続できるけど…
VLAN 下では外部機器から接続出来ない
公衆無線 LAN とかでの使用は余りお勧めしない
ポケット Wi-Fi / 自宅が最強

27. 2. LiveReload & Inject
• .php が、 LiveReload のトリガーにできる
• 但し LiveReload はちと遅い
• CSS や JS 等、DOM を再構築する必要の無いときは
• 新しいプロパティをブラウザに知らせる → Inject

28. デモる

29. 3. ghostMode
ガオー

30. デモる

31. WordPress の構築
モバイルサイト構築
スピードアップすることうけあい

32. GitHub 見れば、サンプルが沢山

33. http://youtu.be/Blqaio9HaHA
デモの部分はこの動画で補完できます

34. ありがとうございました