【WordPress】VCCWで製作中のサイトをスマホで確認する方法

【WordPress】VCCWで製作中のサイトをスマホで確認する方法

やり方はいくつかあると思いますが、現状「これかな」と落ち着いたVCCWを使ったローカル環境で製作中のWordPressサイトをiPhoneなどのスマホで確認する方法メモです。

速度的には残念なことになっていますが、実機でCSSの反映具合の確認には十分かと思います。

VCCWを使ったローカル環境をスマホで確認

WordPressのテーマカスタマイズはVCCWで構築したローカル環境を使ってます。よっひー(@yosiakatsuki)です。

以前、BitnamiでWordPressのローカル環境を作っていた時は、Macに割り当てられたIPアドレス+ポート番号をiPhoneのSafariに打ち込めばページを表示できましたが、VCCWだとそうはいきません…

結論としてはgulp+BrowserSyncを使ってiPhoneからアクセスできるようにしましたが、そこまでに少しつまづいた点とBrowserSyncの設定メモを残しておきます。

ブリッジ接続でVagrantにアクセス

まず考えたことは「IPアドレス指定でどうやってVCCWで動かしているWordPressにアクセスするか」でした。

とりあえずそれっぽいワードで検索して、出会ったのがブリッジ接続する方法です。

Vagrantファイルをちょっと編集するだけでいいので設定自体はお手軽なのですが、結果としては没でした。

ip指定でvccwのページにアクセスするとhtmlは表示されるけど、画像やcssがロードできない

上の画像のように、HTML部分は問題なく表示されるのですが、画像やCSSなどが読み込めていません。

表示しているIPと画像をロードしているアドレスが違うため画像をロード出来ない

VCCWで動かしているWordPressが作る画像のアドレスはsite.ymlで設定したホスト名になってしまうため、残念ながらhostsを書き換えられる端末じゃないと厳しそうです…

と、ここで「BrowserSyncでいけるか?」と思いついたのでこれ以上深く調べずにBrowserSyncでアクセスする方法を試してみました。

BrowserSync(gulp)でVCCWで作ったサイトを確認

BrowserSyncのセットアップは以前gulp環境の構築方法について書いた記事の中で説明しているのでそちらを御覧ください

(今回は、上記記事で作ったコードに追記という形で説明します。)

以前のコードに追記したのは7行目のopen:externalです。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: 'tarahako.local/',
        open:'external'    //追加
    });
});

//ブラウザのリロード処理
gulp.task('browser-reload', function() {
    browserSync.reload()
});

//watchtask実行時にbrowser-syncも一緒に実行
gulp.task('watchtask',['browser-sync'], function() {
    gulp.watch('./*.html', ['browser-reload'])
});

gulp.task('default', ['watchtask']);
BrowserSyncで立てた仮想WEBサーバーのアドレスにアクセスする

あとはgulp実行時に表示されたIPアドレス・ポートにスマホのブラウザからアクセスするだけです。

Browsersync経由なら画像も問題なく表示される

これで画像も問題なく表示されました!

まとめ

基本的にはChromeのディベロッパーツールで問題ないのですが、フォーム関連のCSSは実機じゃないと怪しい部分があるんですよね…

BrowserSync経由だとちょっともっさりしますがちょっとした確認であれば問題ないと思います。

よっしーのひとこと

よっひー

VCCW側のホスト名をIPアドレスにしちゃえばそれでよかったのかな?

と、思いつつ、必要が出てきたらやってみよう。

ではまた。