WordPress とモバイルとbrowser-sync と部屋とYシャツと私

� 優太朗○ 優太郎

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

About Yutaro Miyazaki

WP-E

よろしくね

モバイルサイトの開発

実機ですか

UA ですか

Emulator ですか

デザインカンプ↓html↓

WordPress 化

ダルい

モバイル向けだと特に構築からチェックまで

一貫して

ダルい

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

browser-sync

Web デザイナー

と言うことは

browser-syncが使いたくなる3つの理由1. Server2. Reload & Inject3. ghostMode

1. Server

1. Server

1. Server

え、それだけ?

ghost

gulp-connect

grunt-contrib-connectexpress-server

http-server

Local Server にも繋げる

1. Server

wordpress.dev

1. Server

デモる

1. Server同一ネットワークにいれば外部機器からも接続できるけど…

VLAN 下では外部機器から接続出来ない公衆無線 LAN とかでの使用は余りお勧めしないポケット Wi-Fi / 自宅が最強

2. LiveReload & Inject

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

デモる

3. ghostMode

ガオー

デモる

WordPress の構築モバイルサイト構築

スピードアップすることうけあい

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

http://youtu.be/Blqaio9HaHA

デモの部分はこの動画で補完できます

ありがとうございました