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. Server
2. Reload & Inject
3. ghostMode
1. Server
1. Server
1. Server
え、それだけ?
ghost
gulp-connect
grunt-contrib-connect
express-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
デモの部分はこの動画で補完できます
ありがとうございました

2014.07.09 WordBench Tokyo LT