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

執筆者:

関連記事

PC、スマホ間タブ共有他、よく使うChromeタブ関連操作

情報収集に欠かせないChrome。 スマホ版ChromeとPC版Chromeを連携することでよりスムーズに知識を集積していきたいところです。 目次1 二つのChromeウィンドウを合体2 起動時に前回 …

プロパティ値変更を監視できるJavaScript、TypeScriptオブジェクトを作る

let taro= new Person(“yamada taro”, 25, “teacher”);taro.age = 26; こんなコードが有った …

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

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

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

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

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

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

 

shingo.nakanishi
 

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

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

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