localhostのWEBサイトをスマホ実機で確認する方法 QRコードが便利
WEBサイトを制作している時、エミュレーターで確認しながらやると便利ですが、
最終的にはスマホやタブレットの実機端末での確認は必須です。
その時、URLがlocalhostそのままではスマホで表示されません。
localhostはそれ自身のコンピュータを指すからです。
ではどうやって確認するかというと、localhostをIPアドレスに変更し、そのURLをQRコードに変換してスマホで読み込むという方法が簡単です。
ローカルIPを調べる（MAC）
- 「設定」を開き、左側で「Wi-Fi」を選択（Wi-Fiの場合）（前のOSでは「ネットワーク」の中にWi-Fiがあることもあります）
- 現在のWi-Fiの「詳細」を開くと、IPアドレスが表示されています。
これをlocalhostのかわりに入れます。
たとえば「localhost:3000」なら、
http://192.168.11.3:3000のようになります。
QRコードを利用して、PCで開いてるものをスマホで開く
実はこれが書きたくてこの記事を書いたんですが、ChromeにQRコードで表示する機能がついていました！
これまでアドオンを利用してQRコードを出してたのですが、どうやらバージョン88（2021年の始めですね…半年も知らんかった…）でリリースされたようです。
※クロームのバージョンアップのたびに見た目が変わったり位置が変わったりしてますが、できるだけ追って記載しています。
前はURLの右側にあったのですが、クロームのバージョンアップで出し方が変わっていました。
今は右クリックにメニューがあります。
メニューにもしまい込まれてました。
右の三点リーダから「保存して共有」＞「QRコードを作成」でQRコードが出てきます。
これをスマホで読み込めば、一瞬で同じページを開くことができます。
このQRコード、任意のアドレスをQRコードにすることもできます。
テキストボックスに入力するとリアルタイムに生成されます。
さらに「ダウンロード」ボタンを押すと、png形式で保存もできます。
ちなみにWordPressの場合はIPアドレスにしても表示されないので、設定が必要
WordPressのサイトを構築している場合は、localhostをローカルIPに変えてもスマホで表示できません。
WordPressのDBに、「サイトアドレス」「WordPressアドレス」がlocalhostで登録されているからです。
「設定」＞「一般」で変更することができます。
…ただし、「WordPressアドレス」を間違えて保存してしまうとログインできなくなってしまう可能性があるので、
wp-config.phpに下記のように追加して、見てみる方がいいかもしれません。
define('WP_SITEURL', 'http://192.168.11.3');
define('WP_HOME', 'http://192.168.11.3');こうすると強制的にサイトアドレスとWPアドレスを変更することができます。
