Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

ローカル サーバーへのアクセス

開発マシンのウェブサーバーでサイトをホストし、Android 端末からそのコンテンツにアクセスします。

USB ケーブルと Chrome DevTools があれば、開発マシンからサイトを実行し、Android 端末でそのサイトを表示することができます。

TL;DR

  • ポート転送により、開発マシンのウェブサーバーのコンテンツを Android 端末で表示することができます。
  • ウェブサーバーでカスタム ドメインを使用している場合、カスタム ドメイン マッピングによってそのドメインのコンテンツにアクセスするように Android 端末を設定できます。

ポート転送の設定

ポート転送を使用すると、開発マシンのウェブサーバーでホストされているコンテンツに Android 端末からアクセスできます。 ポート転送を行うには、開発マシンの TCP ポートにマッピングする Android 端末のリスニング TCP ポートを作成します。 ポート間のトラフィックは、Android 端末と開発マシンとの USB 接続を介して送信されるため、接続がネットワーク設定に左右されることはありません。

ポート転送を有効にするには、次の手順に従います。

  1. 開発マシンと Android 端末間のリモート デバッグを設定します。 完了すると、[Inspect Devices] ダイアログの左側のメニューに、Android 端末とともに [Connected] ステータス インジケーターが表示されます。
  2. DevTools の [Inspect Devices] ダイアログで、[Port forwarding] をオンにします。
  3. [Add rule] をクリックします。

ポート転送ルールの追加 1. 左側の [Device port] テキスト項目に、Android 端末でサイトにアクセスするために使用する localhost ポート番号を入力します。たとえば、localhost:5000 からサイトにアクセスする場合、「5000」と入力します。 1. 右側の [Local address] テキスト項目に、サイトを実行している開発マシンのウェブサーバーの IP アドレスまたはホスト名に続けて、ポート番号を入力します。たとえば、localhost:7331 でサイトを実行している場合、「localhost:7331」と入力します。 1. [Add] をクリックします。

これでポート転送が設定されました。[Inspect Devices] ダイアログ内の端末のタブにポート転送のステータス インジケーターが表示されます。

ポート転送のステータス

コンテンツを表示するには、Android 端末で Chrome を開き、[Device port] 項目で指定した localhost ポートに移動します。 たとえば、この項目に「5000」と入力した場合、localhost:5000 に移動します。

カスタム ローカル ドメインへのマッピング

カスタム ドメイン マッピングにより、カスタム ドメインを使用している開発マシンのウェブサーバーのコンテンツを Android 端末で表示できます。

たとえば、ホワイトリストに登録されているドメイン chrome.devtools のみで機能するサードパーティの JavaScript ライブラリをサイトで使用しているとします。 この場合、そのドメインを localhost にマッピングするために、開発マシンで hosts ファイルにエントリ(127.0.0.1 chrome.devtools)を作成します。 カスタム ドメイン マッピングとポート転送を設定したら、URL chrome.devtools のサイトを Android 端末で表示できるようになります。

プロキシ サーバーへのポート転送の設定

カスタム ドメインをマッピングするには、開発マシンでプロキシ サーバーを実行する必要があります。 プロキシ サーバーの例としては、CharlesSquidFiddler があります。

プロキシへのポート転送を設定するには、次の手順に従います。

  1. プロキシ サーバーを実行し、使用されているポートを書き留めます。: プロキシ サーバーとウェブサーバーは、異なるポートで実行する必要があります。
  2. Android 端末へのポート転送を設定します。[Local address] 項目に、localhost: に続けて、プロキシ サーバーが実行されているポートを入力します。 たとえば、ポート 8000 で実行されている場合、「localhost:8000」と入力します。 [Device port] 項目に、Android 端末がリッスンする番号(3333 など)を入力します。

端末でのプロキシの設定

次に、プロキシ サーバーと通信するように Android 端末を設定する必要があります。

  1. Android 端末で、[Settings] > [Wi-Fi] に移動します。
  2. 現在接続されているネットワークの名前を長押しします。 : プロキシ設定はネットワークごとに適用されます。
  3. [Modify network] をタップします。
  4. [Advanced options] をタップします。プロキシ設定が表示されます。
  5. [Proxy] メニューをタップし、[Manual] を選択します。
  6. [Proxy hostname] 項目に「localhost」と入力します。
  7. [Proxy port] 項目に、前のセクションで [Device port] に入力したポート番号を入力します。
  8. [Save] をタップします。

このように設定すると、端末のすべてのリクエストが開発マシンのプロキシに転送されます。 プロキシが端末に代わってリクエストを行うため、カスタマイズしたローカル ドメインへのリクエストが正しく解決されます。

これで、開発マシン上での場合と同様に、Android 端末でカスタム ドメインにアクセスできるようになりました。

ウェブサーバーが標準以外のポートで実行されている場合は、Android 端末からコンテンツをリクエストする際に必ずポートを指定してください。 たとえば、ウェブサーバーがポート 7331 でカスタム ドメイン chrome.devtools を使用している場合、Android 端末からサイトを表示する際には、URL chrome.devtools:7331 を使用する必要があります。

ヒント: 通常のブラウジングを再開する場合は必ず、開発マシンから切断した後、Android 端末でプロキシ設定を元に戻してください。