スマホで確認するたびに、サーバーにファイルをアップするのは面倒…
そんなときに役に立つテクニックをご紹介します。
静的サイトの場合
外部からアクセスできるローカルサーバーを立ち上げます。
ターミナルを使うので、ちょっと専門的にはなりますが、慣れると一瞬でできるので便利です。
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のローカル環境をつくることができ、操作も簡単なのでおすすめ。
起動は重く感じるときはありますが、一時的に公開できるので、ささっと人に確認してもらうときなどにも便利です。