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で単発Web決済を一通り流してみる

会社仕事でも個人ビジネスでも、商品やサービスの対価として利用者に課金方法を提供したい時があるかと思います。 最もメジャーな決済方法であるクレジットカードで課金してもらう仕組みを導入したいところですが、 …

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

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

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

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

Angular、React、VueのDL数をnpmtrends.comで調べる

目次1 対象読者2 3つの内どれを選ぶべきか3 npmtrends.comについて4 比較結果5 それぞれの長所6 で、どれを採用するべきか 対象読者 これからフロントエンドの勉強をしようと考えている …

Chrome75に実装された「Web Share API Level 2」を使ってみた

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした) Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremote …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。