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

執筆者:

関連記事

Stripe + Javaでオーソリ(与信の確保)を実装する

Stripeでチャリンチャリン、サービスを開発するエンジニアにとっては夢がありますよね。 例え自分で個人的に売るものが無かったとしても、Web決済システムを構築できるノウハウを持っておけば、公的な仕事 …

【タップするだけ】インスタグラム、twitterのプロフィール画像を簡単に拡大表示する方法(iPhone、Android)

インスタのプロフィール画像って小さくてよく見えないですよね・・・。 インスタに限らず「何が写ってるのかスマホ画面を拡大して見たいな」という時は「設定」から「アクセシビリティ」を設定することで拡大表示機 …

Javascriptでコンパスを作ってAndroid、iPhoneが向いている方角を特定

普段は意識しなくても、AndroidもiPhoneも自然データをデジタルに変換するセンサーの塊です。 加速度センサー重力センサージャイロセンサー地磁気センサー気圧センサー照度センサー温度センサー位置セ …

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

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

adb devicesコマンドでAndroid端末を認識しない

目次1 事象2 原因3 解決 事象 USB接続するAndroidによって以下のエラーが出たりします。 C:\src\ionic\awsomeapp>adb devices List of dev …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。