はじめに
Chrome Developerツールを使って各デバイスのレスポンシブデザインを確認し、本番環境へデプロイ。しかし、いざ実機で試してみるとバグが発生……。
- でも、ブランチ単位でテスト環境のURLを発行するのは面倒。
- スマホとPCを繋ぐケーブルも持っていない。
そんなあなたに向けた、簡単に実機で動作確認を行うための対策を紹介します！
対策: ngrokを使ってlocalhostを外部からアクセス可能にする
1. ngrokのインストール
まずはngrokをインストールしましょう。以下のコマンドで簡単に導入できます。
# Mac (Homebrewを使用)
brew install ngrok
# Windows
choco install ngrok
# Linux (Ubuntu/Debian)
sudo apt update && sudo apt install ngrok
もしくは、公式サイトからダウンロードしてインストールしてください。
2. ngrokでローカルサーバーを外部公開
以下のコマンドを実行し、ngrokを起動します。
ngrok http 3000 # 例: Next.jsやRailsが3000番ポートで動作している場合
実行すると、ngrokが発行するURLが表示されます。
Forwarding https://abcd1234.ngrok.io -> http://localhost:3000
このURLを実機のブラウザで開けば、ローカル環境のサイトをスマホやタブレットで確認できます。
実機での動作確認
- ngrokを起動し、発行されたURLをコピーする。
- 確認したいデバイスでブラウザを開き、URLを入力。
- 実機での動作を確認し、Chrome Developerツールでは見つけられなかったバグをチェック！
まとめ
Chrome Developerツールでは確認しきれないデバイス特有のバグも、ngrokを使えば簡単に実機でテストできます。
✅ ngrokを使えば、実機で手軽に確認可能！
✅ ケーブル不要！簡単にローカル環境を公開！
✅ レスポンシブデザインの最終チェックに最適！
ぜひ活用して、レスポンシブ対応の品質を向上させましょう！