はじめに

Chrome Developerツールを使って各デバイスのレスポンシブデザインを確認し、本番環境へデプロイ。しかし、いざ実機で試してみるとバグが発生……。

そんなあなたに向けた、簡単に実機で動作確認を行うための対策を紹介します！

対策: ngrokを使ってlocalhostを外部からアクセス可能にする

まずはngrokをインストールしましょう。以下のコマンドで簡単に導入できます。

# Mac (Homebrewを使用)
brew install ngrok

# Windows
choco install ngrok

# Linux (Ubuntu/Debian)
sudo apt update && sudo apt install ngrok

もしくは、公式サイトからダウンロードしてインストールしてください。

以下のコマンドを実行し、ngrokを起動します。

ngrok http 3000  # 例: Next.jsやRailsが3000番ポートで動作している場合

実行すると、ngrokが発行するURLが表示されます。

Forwarding    https://abcd1234.ngrok.io -> http://localhost:3000

このURLを実機のブラウザで開けば、ローカル環境のサイトをスマホやタブレットで確認できます。

Chrome Developerツールでは確認しきれないデバイス特有のバグも、ngrokを使えば簡単に実機でテストできます。

✅ ngrokを使えば、実機で手軽に確認可能！
✅ ケーブル不要！簡単にローカル環境を公開！
✅ レスポンシブデザインの最終チェックに最適！

ぜひ活用して、レスポンシブ対応の品質を向上させましょう！