実機確認が面倒という人におすすめ!作成中のwebページをスマホで手軽に確認する方法

スマホで確認するたびに、サーバーにファイルをアップするのは面倒…
そんなときに役に立つテクニックをご紹介します。

静的サイトの場合

外部からアクセスできるローカルサーバーを立ち上げます。
ターミナルを使うので、ちょっと専門的にはなりますが、慣れると一瞬でできるので便利です。

1.ターミナル(コマンド)を起動

ターミナルを使用します。
(アプリケーションフォルダ > ユーティリティフォルダ にあります。)

2.ターミナルで該当のディレクトリに移動

cdコマンドで該当のディレクトリへ移動します。

cd /Users/*****/Desktop/dist 

Macであれば、該当ディレクトリのフォルダーをターミナルにドラッグすることで、簡単にディレクトリのパスを入力できます。

3.ローカルサーバーを立ち上げ

python -m SimpleHTTPServer 8888

と入力して、ローカルサーバーを立ち上げます。

ブラウザで、http://localhost:8888 にアクセスして、無事表示できるようであればOKです。

4.IPアドレスを調べてアクセス

自分のMacのIPアドレスを使って、アクセスします。
IPアドレスはネット環境の画面から調べることができます。
(192.168.0.1~みたいなのがそうです)

あとはスマホから、 http://IP アドレス:8888/ にアクセスすればOK 。
PCとSPとでWi-Fiの設定が同じになっていれば、みることができます。

いちいちスマホでURLを入力するのが面倒…という人は

MacとiPhoneであれば、クリップボードの共有(ユニバーサルクリップボード)が便利なので、設定しておくのをおすすめします。

クリップボードがうまく使えなかったり、Androidという場合は、Chromeの拡張機能「The QR Code Extension」入れておくと便利です。

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb
現在のページのQRコードを生成してくれます。

WordPressの場合

Local byFlywheel を使うことで、一時的にローカルの内容を公開することができます。
やり方は簡単で、Live Linkにある DISABLEボタンを押すだけ。

Local byFlywheel はMAMPより手軽に早くWordPressのローカル環境をつくることができ、操作も簡単なのでおすすめ。
起動は重く感じるときはありますが、一時的に公開できるので、ささっと人に確認してもらうときなどにも便利です。