こんにちは、hacomonoでフロントエンド開発をしているもん(社員インタビューはこちら) です。

ローカルで開発中画面のスマホ版プレビューなどは Google Chrome デベロッパーツール を使用しチェックすることが多いかと思いますが、スマホ閲覧時のみエラーが出てしまう等の改修時には「実機での挙動を即時確認したい！」・・・というケースも多いと思います。

そういった場合に私は

・ ngrok を利用しローカル環境を外部からアクセスできるようにする・上記ページへ iPhone & Safari でアクセスし WEBインスペクタ を用いてデバッグを行う

といった手段をよく用いておりますので、ここでは ngrok の導入から webインスペクタ での検証 までの手順を紹介します。

※開発環境は一部macOSを想定した話となります。

まずはローカル環境を外部に公開

ngrok について

ngrok（エングロック）はトンネル（仮想回線）を作成し、ローカルサーバーを外部へと公開できるサービスです。
すでに多くの方がその便利さについて言及し、紹介されていますが導入手順の記述は世の中にいくらあっても困ることはないと思いますので、ここでも記しておきます。

ngrok 公式サイトへのアカウント登録&ダウンロード

ngrok公式へアクセスし、ユーザー登録を行います。アカウント作成は Github 、 Google アカウントなどお好きな手順でOKです。

※ngrokには無料版と有料版があります。
有料版ですと外部公開用に発行されるURLのサブドメイン部分を固定化することができます。（無料版は立ち上げるごとにランダム生成）

また、同時に作成できるトンネル数は無料版では最大3つ（2022年10月時点）までとなっております。

今回は無料版での手順となりますが、一部有料版についても補足します。

アカウント作成後は以下の手順で準備を進めます。
（ ngrok トップページに手順が記載されてます、英語ですが）

Setup & Installation のページで自身のPCに適したzipファイルをダウンロードします。
ダウンロードしたzipファイルを解凍し、 ngrok ファイルを展開します。
ngrok ファイルを展開した場所で下記コマンドを実行します。

ngrok config add-authtoken XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

（XXX…は、各アカウントに発行されるtoken。 Your Authtoken ページでいつでも確認可能です）
4. 実行後、Authtoken saved to configuration file:　〜と ngrok 設定用の yml ファイルが表示されたパスの場所に作成されます。

ngrok の実行

次にいったん初回起動として、試しに下記コマンドを実行します。（3000は仮です。ご自身がローカルでサーバーを立ち上げているポート番号を指定してください。）

ngrok http 3000

実行後、ターミナルで以下の様な内容が表示されるかと思います。

ngrok                                                                                                                                                                        (Ctrl+C to quit)

Visit http://localhost:4040/ to inspect, replay, and modify your requests

Session Status                online
Account                       XXXXXXX (Plan: Free)
Update                        update available (version 3.1.0-rc1, Ctrl-U to update)
Version                       3.0.4
Region                        Japan (jp)
Latency                       53ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    **https://XXXXXX.jp.ngrok.io** -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

この様に表示されると、立ち上げが成功となります。
Forwarding に記載されているhttps://XXXXXX.jp.ngrok.io　にアクセスすると、自身のPC以外の端末からでもlocalhost:3000で立ち上げているページにアクセスし閲覧できるようになります。
今回は即席で試しに作成した nuxt でのtestページを試しに写してみます。

● localhost:3000で立ち上げているページ

● ngrok で生成された外部公開用URLでアクセスしたページ。

同一のページが表示されるのが確認できます。

※初回起動時の画面について 初回アクセス時に上記画像の様な画面が一度表示されるかと思います。こちらは仕様となり、エラーページ等ではないため「Visit SIte」でアクセス可能です。

ngrok.yml での公開設定ファイルの作成

ngrok を起動し、次の実機検証ステップへ進むのは上記までの手順で可能ですが何度もngrokを利用する場合には諸々の設定値をあらかじめymlファイルへ設定しておくと、指定したコマンドにより毎回同じ設定で立ち上げてくれます。
※このままiPhoneでの実機検証に進みたい方はスキップ

ngrok.yml ファイルの場所 下記コマンドで対象の yml ファイルの場所を出力されます。

ngrok config check

ngrok.yml ファイルの編集

version: "1" #バージョン　未記載の場合追加してください
authtoken: #サイトに記載されているトークンを貼り付けます
region: ap #　リージョンを指定。Asia Pacificでapを指定します
tunnels:
  myngrok: #　任意の設定名を決めます。ここの名称で、以降は下記の設定をもとに起動できます
    proto: http # http or httpsでの起動を選択します
    addr: 3000 # port番号を指定します
    subdomain: xxxx #無料版では不要　有料版でsubdomainを固定している場合、ここで指定します
    auth: "id:password" #外部公開されたページにbasic認証を設定できます
  myngrok2: #別の設定も以下同じ要領で記載できます

有料アカウントでサブドメイン利用や、複数のトンネルを利用しているケースなどではあらかじめ yml ファイルに設定をしておけば簡単なコマンドでいつでも立ち上げが可能です。
また、外部公開される際にアクセス制限などは一切されておりませんので、極力basic認証を設定しておくのが推奨です。
先程立ち上げた設定にbasic認証を追加した設定ファイルですと以下の様になります。

version: "1" 
authtoken: XXXXXXXXXXXX
region: ap 
tunnels:
  myngrok:
    proto: http
    addr: 3000 
    auth: "id:password"

上記の設定で保存し、下記コマンドで実行すればすぐに起動します。

ngrok start myngrok

また、複数のトンネル設定を作成しており、全て起動したい場合は下記コマンドで全て同時に立ち上げてくれますので覚えておくと便利です。

ngrok start --all

外部公開したページを実機でアクセスし検証

WEBインスペクタについて

WEBブラウザでの開発者向ツールの1つで、ソースコードやスタイル、ログなどの詳細を表示できるものです。
iPhone Safari では WEBインスペクタが開発向け機能として標準で備わっており、 iPhone で閲覧中のブラウザページの詳細をPC 側の Safari で確認することが可能です。

WEBインスペクタの準備

iPhone の「設定」より Safari の WEBインスペクタ を有効にします。
iPhone Safari で検証を行いたいページを開きます。ここでは先程 ngrok で外部公開したテストページにアクセスします。
PC と Phone を接続し、 PC で Safari を起動し設定を行います Safari 側でメニューバーに「開発」が表示されていない場合、環境設定を開き有効にします。