android chrome html5 javascript

Android+ChromeでlocalhostアクセスしてPCサーバへPort Forward(Fwdアプリ使用)

投稿日:2020年8月29日

昨今はプライバシーの侵害防止、セキュリティ観点から、HTTPS環境下でないと使えないHTML5 APIが増えました。

反してAndroid7でオレオレ証明書に関する仕様が変わり、Android6だった2017年くらいまでは普通に接続出来ていたOpenSSLで作ったオレオレ開発用HTTPS環境に繋げなくなってしまいました。(証明書の作り方が悪かっただけかも知れませんが)

今となってはmkcertで快適なHTTPS開発環境を手に入れていますが、

恥ずかしい話結構長い間、ステージングに移行するまではAndroid + Chromeではlocalhostで無理やり動確を乗り切っていたんですよね。

当時、開発納期が押し迫り、ngrokもLet’s Encryptも使えない中で助けられたAndroid用ポートフォワードアプリ「Fwd」を紹介します。

「Fwd : port forwarder」とは

ChromeはHTTPS環境でしか使えないHTML5 API(Geolocation APIのような)APIでもhttp://localhostなら開発用途として使える仕様になっています。

「AndroidのchromeからlocalhostアクセスするとPCサーバに転送する」ことが実現出来ればHTTPSでなくても開発が継続出来ます。

FwdはElixsr Ltdが開発、Google Playで公開している無料(広告有り)のAndroidアプリ。Androidからlocalhostへのパケットリクエストを外部ホストへ転送することが出来ます。

githubでソースも公開されています。太っ腹。

Fwdのパケット転送の仕組み

githubでソースをざっくり見てみると、アプリを起動してポート転送設定した後、STARTするとAndroid内でサービスが起動。

サーバソケットで受信したパケットを別アドレスのポートへクライアントソケットで転送する実装のようです。

SSHでポートフォワードしたりしないのでPC側設定は不要です。シンプル。

Fwdの動作確認

HTTPSまたはHTTP localhostでなければ使えない、スマホ内センサーへのアクセスAPI、DeviceOrientation APIを実装したindex.htmlをPC上のHTTPサーバで公開。

Android + ChromeからHTTPアクセスしてみます。

HTTPサーバの準備

DeviceOrientation APIの使用可否を表示するだけのindex.htmlです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Fwd検証</title>
        <script type="text/javascript">
            window.addEventListener("DOMContentLoaded", event => {
                let result = document.querySelector("#result");
                if (window.DeviceOrientationEvent) {
                    result.innerHTML = "DeviceOrientation使用可能";
                } else {
                    result.innerHTML = "DeviceOrientation使用不可";
                }
            });
        </script>
    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

HTTPサーバを起動してindex.htmlを公開。
Node.jsのhttp-serverコマンドを使っています。

C:\src\node\deviceorientation> npm install http-server -g

C:\src\node\deviceorientation> dir
2020/08/28  23:25               774 index.html

C:\src\node\deviceorientation> http-server .
Starting up http-server, serving .
Available on:
  http://192.168.0.5:8080
  http://127.0.0.1:8080

8080ポートでHTTPサーバが起動しました。

「http://IPアドレス」だと動かないことを確認

AndroidのChromeからPCサーバのIPを指定してHTTPアクセス。
非HTTPS、かつ非localhostなのでDeviceOrientationは使用不可です。

Fwdを設定、起動

Google PlayでインストールしたFwdアプリを起動。

Androidのlocalhost:8100 → 192.168.0.5:8080

にポートフォワードする設定をしてSAVE、STARTします。

「http://localhost」であれば動くことを確認

Fwdがポートフォワードしてくれるお陰でlocalhostからPCサーバにアクセス出来、DeviceOrientation APIが使えることを確認できました。

mkcertに出会うまでお世話になった

もう今では使うことも無くなったアプリですが、JavaでノンブロッキングなSocketの使い方が学べる良アプリ。遠回りすると、最短でゴールに到達した時よりも知識が増えていたりします。

Androidでlocalhostへのリクエストをフォワードする機会があったら(あるのか?)また使いたいと思います。

-android, chrome, html5, javascript

執筆者:

関連記事

IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

目次1 はじめに2 課題3 より良い方法4 まとめ5 補足 はじめに IndexedDBは「key : value」でレコードを保存するキーバリューストアです。 バリューには「単値」または「Javas …

Android操作動画をGIF画像化する(Windows編)

Web上のスマホ操作説明に動画を入れ、直感的で分かり易くしたいことがあります。 Android + Windows環境かつ無料で行う場合は「AZ スクリーンレコーダー」と「openAVItoGIF」の …

ブラウザから起動したカメラの撮影画像をjavascriptで圧縮【Compressor.js】

「モバイル用Webアプリで撮影したカメラ画像のファイルサイズが大きすぎる・・・」 そんな悩みは無いですか? 昨今カメラ会社の経営が傾くほどスマホのカメラ性能が向上、それに応じて年々ファイルサイズも増大 …

mkcertとhttp-serverでHTTPS環境を作りAndroid(chrome)、iPhone(safari)から接続

簡単にパーフェクトなオレオレ証明書が作れるとgithub上で人気上昇中の「mkcert」。 GitHub  135 UsersFiloSottile/mkcerthttps://github …

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(前編)

目次1 はじめに2 検証環境3 Ionicプロジェクト作成4 PDFダウンロード、IndexedDB保存を実装5 実行してみる はじめに PDFをHTTPダウンロードするとHDDに保存されるか、外部ビ …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯現役技術者を目指しています。健康第一。