モチベ
Web開発をメインにおこなっている人です。Androidのブラウザでのみ発生する不具合に当たった場合に限り、実機テストを行っています。
そんな消極的なモバイル開発者が実機テスト時のデバッグ手段をいくつか検討して実際に試した結果、Pinggyを使うのが最も手軽だと感じたため、ここにまとめます。
ちなみに積極的なモバイル開発者の方は、多分USBで繋がっている検証機とかシミューレータとかあるでしょう、という想定でいるのでこういう書き方をしています。違ったらおしえてください。
パターン1:ngrok
今まではngrokを使っていました。ローカルアプリに対してトンネルを掘るようなアプローチですね。このへんは色々試行錯誤して以下のブログ記事に纏めたので気になる人は読んでください。
ただngrokの欠点はURLの共有にあり、QRコードを出してくれるのが一番楽なんだけどなー、と思って調べてみたところ、あまりよい方法は見つからず、CLIでURLをコピペしてQRコードを出す手法(qrencodeかqrcode-terminal)を使うしかなさそう、しかも使い辛いな、となり次善策を探すことに。
Pinggy
というので本題のPinggyです。こちらはSSHトンネリングを使う手法で、ngrokと違ってアプリのインストールも不要。使い方は
$ ssh -p 443 -R0:localhost:$PORT qr@a.pinggy.io
などとやるだけです。ユーザ名のqrによってURLがQRで出力されます。
ちなみにうちの標準サイズのTerminal環境だとQRコードを表示しきれない問題があり、そこも併せて解決する必要があったので、使ってるxfce4-terminalに合わせて以下のshellスクリプトを書きました。
#!/bin/bash
PORT=${1:-3000}
xfce4-terminal --geometry=110x40 -e "ssh -p 443 -R0:localhost:$PORT qr@a.pinggy.io"
これで引数にポート番号入れて実行すればQRコードが飛んでくるので、スマホでかざして、ブラウザで確認するだけです。