Reqable を使ってモバイルアプリに手を加えず実機で通信デバッグする方法
はじめに
この記事は Commune Advent Calendar 2024 シリーズ1 の 12 日目の記事です。
みなさんはモバイルアプリのデバッグ作業で API 通信まわりの不具合があった際、どのような方法で原因を突き止めますか？
実機でしか発生しないような不具合の場合、実機でどんな通信が行われているかがわかれば、近道になることもありますよね。
パケットキャプチャのツールとしては Wireshark が代表的ですが、最近では Proxyman、Charles などの MITM プロキシを提供するツールがデファクトスタンダードになってきています。
これらのツールでは、OS のネットワーク設定のプロキシ設定を母艦デバイスに指定することで、実機でのモバイルアプリの通信デバッグを実現しています。
しかし、一部の通信ライブラリや Flutter アプリの通信はシステムのプロキシ設定を参照しないため、残念ながらこの方法ではデバッグすることができません。[1]
また、単純にプロキシを通しただけでは SSL 通信の中身を傍受することができませんので、自己署名証明書の発行に対応しているツールである必要もあります。
これらの課題に対し、複数のツールを組み合わせて解決する方法もありますが、設定が非常に複雑なことと、何より準備がとても面倒というデメリットがあります。
この記事では Reqable というツールを利用して、Flutter アプリを含むモバイルアプリの通信デバッグを実機で実現する方法をご紹介します。
Reqable を利用した API デバッグ
Reqable は、Flutter フレームワークで開発されているクロスプラットフォームの API デバッグツールです。
一部の機能は有料ですが、Free プランでも主要な機能を利用することができます。
主な特長
- Proxyman、Charles と同様の MITM プロキシ機能
- VPN 経由でのトラフィック キャプチャに対応
- Flutter アプリを含むプロキシ非対応アプリの通信も監視できる
スマートフォンとコンピュータとの強力なコラボレーションモードを搭載しており、ウィザードに従って設定を進めることで、利用するための環境を簡単に整えることができます。
利用可能なデバイス
スマートフォン
- iOS 12 以降を搭載した iPhone
- Android 5.0 以降を搭載した Android スマートフォン[2]
コンピュータ
- macOS 10.15 以降を搭載した Mac
- Windows 7 以降を搭載した PC
実際にやってみる
ここからは iPhone と Mac を利用して、実際にモバイルアプリの通信を監視してみます。
インストール
まずは、iPhone で App Store から Reqable アプリをインストールします。
次に、Mac にも Reqable をインストールします。
サイトから dmg 形式でバイナリをダウンロードすることも可能ですが、
Homebrew でのインストールに対応しているため、導入済みの方はターミナルから以下のコマンドでインストールできます。
$ brew install reqable
初期設定
Mac で Reqable を起動します。
初回起動時、Work Modes の選択がありますので、「Traffic Capture」を選択してください。
初期画面が変わるだけで、選択肢によって利用できる機能が制限されることはありませんのでご安心ください。
次に Mode Options の設定を行います。System Proxy の項目はデフォルトでオンになっています。
今回通信を監視する対象は Mac ではなく iPhone のモバイルアプリとなりますので、System Proxy の項目はオフにします。
これにより対象が iPhone の通信のみとなり、不要なログが出力されなくなります。
初期設定が終わると、メイン画面が表示されます。
Certificate Setup のダイアログが表示されますので、iOS を選択して、画面の指示に従って iPhone へ自己署名証明書のインストールを行ってください。
なお、中央にデカデカと「Install Now」と書いてありますが、こちらは Mac の通信をデバッグする際に必要なもので、今回はインストールしなくても大丈夫です。
ちなみにスマートフォンのブラウザに URL を入力するステップで QR コードを表示できます。
この QR コードを読み取ればいちいち URL を打つ必要がなくなります。
こういう細かい配慮があるツールっていいですよね。使っていてテンションがあがります。個人的お気に入りポイントでした。
Flutter アプリの通信を監視するための追加設定
上記の設定完了後、Mobile Safari や通常のモバイルアプリの通信であればこの状態でも通信内容を確認することができますが、今回は Flutter アプリを含めたすべての通信を監視するため、iPhone の Reqable アプリで追加設定を行います。
通常はプロキシを利用しますが、VPN を利用するモードに切り替えることで、プロキシ非対応のアプリケーションも通信監視の対象にすることができます。
1. プロキシをオフにする
追加設定を進める前に、自己署名証明書のインストールで設定したプロキシをオフにします。
オフを選択後、右上の「保存」を選択しないと反映されません。ここで保存を押さずに左上で戻るミスをすることが多いので、お気をつけください。
2. iPhone の Reqable アプリと Mac の Reqable を接続する
Work Modes の選択が求められますので、「Collaborative Mode (recommended)」を選択します。
その後は画面の指示に従って設定を進めます。権限の許可を求められた場合は「許可」を選択してください。
途中、QR コードを読む画面で権限の許可が求められ、その後次の画面に進まないことがあるので、その場合はもう一度 QR コードの読み取りを行ってください。
3. VPN 接続への切り替え
Device Online の表示まで進んだところで、右下の黄色いボタンを選択します。
VPN 構成の追加を求められるので、「許可」を選択します。
パスコードを求められますので入力します。自動的に Reqable アプリへ戻りますので、右下のボタンが緑色になっていることを確認します。
4. Enhanced Mode への切り替え
最後に、Enhanced Mode を選択し、IPアドレスの右側に🔑マークが表示されたら準備完了です。
ちなみに右下のボタンをもう一度タップすると、VPN 接続が切断され、通常の通信に戻ります。
通信を監視してみる
Mac の Reqable を開いた状態で iPhone で Flutter アプリを起動して操作すると、このように通信ログが表示されます。SSL 通信を含めたすべての内容が確認できます。
リクエストの内容もレスポンスも、様々なフォーマットで確認することができます。
そのほかにも表示方法の切り替えやフィルタリングもできますので、いろいろ試してみてください。
おわりに
今回は便利な通信デバッグツール、Reqable をご紹介しました。
あまり必要になる機会は頻繁には訪れないのですが、いざ必要なときにセットアップに四苦八苦して肝心のデバッグ作業になかなか入れない、ということを何度か経験しているので、もっと早くこのツールを知っておきたかったというのと、もっと多くの方に知っていただけると良いなと改めて感じました。
筆者はまだ Reqable の全機能を使いこなせていないのですが、特定のリクエストを検知して内容を書き換えて送信できる機能など、デバッグが捗りそうな機能が満載なので、さらに活用していければと思っています！
Discussion