Macのローカル環境をスマホ等の別デバイスで表示確認する方法3選

2024年1月17日

この記事でわかること

ローカル環境を手元の別デバイスで確認する方法
ローカル環境を外部ネットワークを介して確認する方法
WordPressローカル環境を、LocalのLive Link機能で確認する方法

制作したWebサイトを自身のPCだけでなく、スマホなど別デバイスでも表示確認していますか？
この確認を怠っていると、気付かぬところで表示崩れやバグが発生しているかもしれません。

Webサイト制作においては、最低でも以下４つのデバイスでの表示確認は必須です。

Windows
Mac
iPhone
Android

ちなみにMacユーザーであれば、「ConoHa for Windows Server 」を利用することで、Mac上でWindows環境の確認を行うことが可能です。
詳しくは以下の記事で解説しています。

Web制作者必見！MacでWindowsの表示確認をする方法

検証用サーバー等にアップした内容を別デバイスで確認する方法もありますが、ローカルで編集した内容を一々サーバーアップして確認するのは手間がかかります。ローカル環境をそのまま別デバイスに表示することができれば、ローカルで編集した内容をリアルタイムに確認できるので非常に効率が良いです。

この記事では「Macのローカル環境（localhost）を別のデバイスで表示する方法」を３通り解説しているので、是非ご覧ください。

同じWi-Fiに接続したデバイスでlocalhostを表示する方法

同じWi-Fiに接続したデバイスであれば、ローカル環境（localhost）に簡単にアクセスすることが可能です。
手元のスマホなどで確認したり、社内など同じネットワークを利用しているメンバーに共有する場合などに使用することが出来ます。

1. ローカルサーバーの起動

まずは、Macでローカルサーバーを立ち上げる必要があります。

HTML/CSSの静的サイト制作の経験しかない場合、ローカルサーバーを立ち上げる機会がなかった方もいらっしゃるかもしれません。
その場合は、VSCodeの「Live Server」という拡張機能を是非使用してみてください。非常に簡単にローカルサーバーを立ち上げることが出来る上、コードを変更して保存する度に自動でページを再読み込み（ホットリロード）してくれるため、とても便利です。

VSCode「Live Server」の使い方（クリックで詳細を開く）

拡張機能のタブを開き、検索欄に「live server」と入力。
「Live Server」という名前の拡張機能をインストールしてください。

VSCode下部のツールバーに、「Go Live」というボタンが追加されています。
確認したいページのhtmlファイルを開いた状態で、「Go Live」ボタンをクリックします。

すると、ローカルサーバーが立ち上がり、自動的にブラウザでページが表示されます。
その後は、ファイルを更新する度にページが自動で再読み込みされます。

「Go Live」のボタンは「Port: ○○○○」に切り替わっています（このポート番号は後の手順で使用します）。
サーバーを終了する場合は、「Port: ○○○○」というボタンをクリックします。

2. デバイスを同じWi-Fiに接続

コーディング作業などをしているMacと、確認用にページを表示させるスマホなどのデバイスを、同じWi-Fiに接続しましょう。

3. MacのIPアドレスを確認する

MacのIPアドレスの確認方法は、macOSがVentura（バージョン13）以降か、それ以前かどうかで微妙な違いがあるので、自身のOSのバージョンに合わせて確認してください。

Ventura（バージョン13）以降の場合

左上のアップルアイコンから、「システム設定」を選択します。

サイドバーの「Wi-Fi」をクリックし、接続済みのWi-Fiの「詳細」をクリックします。

表示されたIPアドレスを確認します。

Ventura（バージョン13）以前の場合

左上のアップルアイコンから、「システム環境設定」を選択します。

「ネットワーク」を選択します。

接続済みのWi-Fiが表示されています。
下の画像の赤枠部分でIPアドレスを確認することが出来ます。

4. IPアドレスにアクセス

スマホなどの別デバイスでブラウザを開き、アドレスバーに「IPアドレス:ポート番号」の形式で入力します。

これにより、Macのローカルサーバーの内容を、別のデバイス上で確認することが出来ます。

外部ネットワークにlocalhostを公開して表示確認する方法（ngrok）

自身のMacのローカル環境を、外部のネットワークに公開してテストする方法を解説します。

これまで解説した方法では、デバイスが同じネットワークに接続されている必要がありましたが、この方法では違うネットワーク環境にあるデバイスでも、ローカル環境の内容を共有することが可能です。

例えば、以下のような条件下で使用することが出来ます。

自宅やオフィス内などの同じネットワーク環境にいない、外部の人にlocalhostの画面を見せたい場合
リモートで起動しているPCをリモートデスクトップ等で遠隔操作し、手元のPCのlocalhostを表示させたい場合

以下の記事で解説しているConoHa for Windows Server を使用する場合も、この方法によってMacのlocalhostを表示させることが可能です。

Web制作者必見！MacでWindowsの表示確認をする方法

ローカル環境をネットワーク上に公開するためには、ngrokというツールを利用します。
以下で使用方法を解説します。

1. ngrokへの無料登録

ngrokの公式サイトにアクセスし、「Sign up for free」をクリックします。

アカウント登録フォームが表示されるので、GitHubやGoogleアカウントで登録するか、手動で必要事項を入力して登録を完了させます。

2. ngrokのインストール

ログイン後に表示されるページの、Download ngrokの部分から、必要なファイルをダウンロードします。
（デフォルトで自身のPCのOSに対応したダウンロードボタンが表示されています）

ダウンロードされた.zipファイルを解凍すると、「ngrok」というファイルが表示されます。

後の手順でngrokコマンドを実行しやすくするため、この「ngrok」ファイルを「/usr/local/bin」というフォルダに移動させておきます（通称「パスを通す」と言われる作業）。

新規Finderウインドウを開き、command+shift+Gで、「フォルダへ移動」ウインドウを開きます。
入力欄に「/usr/local/bin」と入力してEnterを押すと、binフォルダに移動できます。

ダウンロードフォルダ内にある「ngrok」ファイルを、このbinフォルダに移動させましょう。

ターミナルでngrok helpコマンドを実行し、ヘルプが表示されれば正しく設定できています。

3. ngrokの認証

ngrokの「Setup & Installation」ページ内の「2. Connect your account」に記載されているコマンドをコピーします。

ターミナルを開き、コピーしたコマンドを実行します。

ngrok config add-authtoken <authtoken>

4. ngrokでアクセス用URLを発行

まずはローカルサーバーを起動させておきます。
ローカルサーバーを起動させたことがない場合、こちらの手順を参考にしてください。

ターミナルで、以下のコマンドを実行します。（”5500″の部分は、自身のlocalhostのポート番号に合わせてください）

ngrok http 5500

すると、下の画像の赤枠の部分に、ローカルサーバーに外部からアクセスするためのURLが表示されます。
（※無料プランではURLの指定は出来ず、コマンドを実行する度にURLが変わります）

表示確認したいデバイスで、このURLをブラウザのアドレスバーに入力しましょう。
以下のような注意文が表示されるため、「Visit Site」をクリックします。

以上により、同じネットワーク環境にないデバイスであっても、ngrokで発行した公開URLを通じて、ローカルサーバーにアクセスすることが出来ます。

ngrokの接続を解除する場合は、ターミナルでcontrol+Cを入力します。

この方法では、URLが合っていれば誰でもローカルサーバーにアクセス出来てしまいます。
第三者にアクセスされるとまずい場合、ngrokコマンド実行時に以下のようにオプションを追加し、Basic認証を設定しましょう。

ngrok http 5500 --basic-auth='○○○○○:□□□□□'

○○○○○の部分にはユーザー名、□□□□□にはパスワードを入力します。

LocalのLive Link機能でWordPressローカル環境を共有する方法

WordPressのローカル環境を作成できる「Local」のソフトを使用している場合、「Live Link」という機能を利用する事で、外部ネットワークのデバイスでも簡単に自身のローカル環境を表示することが出来ます。

1. Localでサーバーを起動

まずは、Localで確認したいサイトを選択し、右上の「START SITE」ボタンを押してサーバーを起動します。

2. Live Linkを有効化

Localウィンドウ下部の「Live Link」の横にある「Enable」ボタンをクリックします。

Localにログインしていない場合、以下のようなメッセージが表示されます。
「Log in to your Local account」のリンクをクリックし、ログインしましょう。

ログインした状態だと、「Enable」ボタンは緑色で表示されます。
この状態で「Enable」ボタンをクリックします。

3. 共有リンクにアクセス

「Live Link」をクリックし、詳細を開きます。

共有リンクが記載されているので、確認したいデバイスで、このURLにアクセスしましょう。
Basic認証用がかかっていますが、ユーザー名とパスワードはそれぞれ、「Username」と「Password」の欄で確認できます。

以上で、Localで起動したローカルサーバーに、外部ネットワーク上のデバイスからでもアクセスすることが可能です。
（Live Linkで確認できるのはサイトの表示側であり、WordPressの管理画面にログインすることは出来ません。また、Live Linkでアクセスできるのは、Live Linkが有効化されていて、且つ、Localを起動しているPCが起動している間のみです。）