はじめに
Web開発において、ブラウザのデベロッパーツールでのレスポンシブ確認は欠かせませんが、実際のタッチ操作感やスクロールの挙動、実機特有の解像度での見え方は、やはり実機で確認することが利用者目線で確認ができると思います。
今回は、Macで開発中のUIを、ngrokを使って手元のスマートフォン（Google Pixel 9a）で即座に確認する手順をまとめました。
ngrokとは
ngrokは、ローカル環境（自分のPC内）で動いているWebサーバーを、簡単なコマンド操作だけで一時的に外部（インターネット）からアクセスできるようにするツールです。
通常、自分のPCで作っている開発中のサイトを誰かに見せたり、外部サービスと連携させたりするには、サーバーにデプロイ（公開）する手間がかかります。ngrokを使えば、その工程をスキップして即座にURLを発行して、共有できます。
環境・ツール
- PC: Mac (M2チップ)
- 検証端末: Google Pixel 9a
- ツール: ngrok
- 技術スタック: Next.js / FastAPI / Docker
ngrokを使用した経緯
通常、iPhoneであればMacと接続してSafariのデバッグ機能が使えますが、Android端末（Pixelなど）をメインで使用している場合や、ネットワーク設定の制約がある環境では、ngrokのようなトンネリングツールが非常に手軽で強力です。
ngrok使用手順
1.ngrokアカウント作成
https://ngrok.com/
2.ngrokインストール
アカウント登録後に表示される手順に従って、ngrokをインストールします。
3.ngrokを起動する(ngrokの後に指定する値は接続したい環境 https://localhost:3000など)
ngrok http 3001
4.\URLにスマホからアクセスする
Forwardingの ~devまでの値をブラウザのURLに入力する。
5.\警告画面の表示確認とアクセス
URLにアクセスすると、警告画面が表示されますが、Visit Site ボタンをクリックするとサイトにアクセス可能です。
※スマホのURLに長いURLを入力すると入力ミスなどの懸念などあるため、下記方法を取るのがおすすめ
- Google Chromeの「デバイス間で共有」機能を使う
1.\PCのChromeで、発行されたngrokのURL（https://xxx.jp.ngrok-free.app）を開きます。
2.\アドレスバーの右側にある点アイコンをクリックします。
3.\キャスト、保存、共有を選択
4.\QRコードを作成をクリック。
5.\スマホ側でQRコードを読み取って、リンクにアクセスする。
セキュリティを高める（Basic認証の設定）
ngrokで発行されるURLは、推測されにくい文字列ではありますが、インターネットに公開されている状態(誰でもアクセスできる状態)です。場面に応じて、チーム外の人や部外者に開発画面を見られないよう、Basic認証を設定することが必要です。
※下記コマンドで起動した場合は、設定したユーザー名とパスワードをURLにアクセス時入力を求められます。
# 構文: ngrok http [ポート番号] --basic-auth="ユーザー名:パスワード"
ngrok http 3001 --basic-auth="user:password123"
終わりに
ngrokを使うことで、手元のスマホでサクサクUI確認ができるようになり、開発効率が格段に上がりました。
一方で、URLを知っている人なら誰でもローカル環境を覗けてしまうため、機密性の高い案件ではBasic認証を設定する（--basic-auth）などの対策を取るなどの対応が必要かと思います。