One IT Thing

IT業界で飯を食う為の学習系雑記

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

執筆者:

関連記事

Javascript(暗号化JSライブラリ「Forge」)とp12ファイルで署名値を作成、Javaで検証する

前回、送信データの改ざんを検知する為、簡易的なセキュリティトークンであるPKCS#12形式のファイルを作成しました。  One IT Thing開発用のPKCS#12ファイルをOpenSSL …

Termuxで動作が確認できたターミナルゲーム4つ

Android端末をroot化せずにLinux環境を独自構築する神アプリ「Termux」。  play.google.comhttps://play.google.com/store/app …

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

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

Android版ChromiumをVirtualBoxにインストールしたUbuntuでビルドしてみる

「Chromium」はChromeの開発ソースが公開されたプロジェクトです。  www.chromium.org  1 userGet the Code: Checkou …

UserAgent判定JSライブラリ「UAParser.js」と「Platform.js」の比較

(私はUAParser.jsを使っています) ネットを探すとUA文字列を解析してブラウザ判定をするコードが一杯出てきます。 でもUA解析プログラムを自前で作ってシステムに組み込むとなると、新しいブラウ …

 

shingo.nakanishi
 

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

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

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