EDIT MODE

モバイルアプリ開発に関することを書いています

モバイルアプリデバッガーFlipperの使用感

Android iOS

Androidのネイティブアプリで使ってみたら、思ったより使い心地良かったので備忘録的に使用感を書いていきます。

Flipperとは

iOSもしくはAndroidアプリをデバッグするためのプラットフォームです。シンプルなデスクトップアプリとして提供されていて、Mac/Linux/Windowsで利用することが出来ます。Flipperの機能はプラグイン形式で提供されているので、自作し拡張することも可能です。

また、ソースコードはOSSとして公開されていて、コントリビュートすることも可能です。

fbflipper.com

Stethoとの違い

facebook発のAndroid用デバッグツールとしては、Stethoが有名だと思います。主にネットワークやデータベースなどの中身を見るために、重宝されているかと思います。

FlipperとStethoの主な違いは、こんな感じです。

　 Flipper Stetho
クライアント デスクトップアプリ Chrome DevTool
対応OS Android/iOS Android
機能拡張 ○ ×

facebook.github.io

Flipperデスクトップアプリの使い方

クライアントアプリを起動した後で、実機もしくはエミュレーター／シミュレーターを接続すると認識し、Flipper SDKが組み込まれたアプリが起動されると、下図のようにアタッチされます。

左側のペインにアプリに組み込まれた機能が並び、クリックすると右側のペインに対応するUIが表示されるというシンプルなクライアントアプリです。（※下図はMac版デスクトップアプリです。）

キャプチャ機能があるのが地味に嬉しいですね。

f:id:androhi:20191127200103p:plain
Flipperクライアントアプリ

公式提供のプラグイン

2019年11月現在、公式が提供しているプラグインは全部で9個あります。（※対応OSは2019年11月時点のものです。）

Plugin 機能 Android iOS
Layout Viewの階層やプロパティをを解析してくれるお馴染みの機能です。
もちろん値を上書きすることも出来ます。
LithoやComponentKitにも対応したり、結構多機能。		 ○ ○
Navigation ディープリンクに関するデバッグを楽にしてくれるます。
ディープリンクのログを自動記録したりアプリに送ったり出来ます。		 ○ ×
Network 通信の内容をダンプしてくれるお馴染みの機能です。
AndroidではOkHttp用のInterceptorクラスも用意されていて実装が簡単です。		 ○ ○
Database データベースの読み書きが出来ます。
クエリも発行出来ます。		 ○ ○
Images ネットワーク上の画像に関するデバッグを楽にしてくれます。
ただしこのプラグインでサポートしている画像ローダーは、Frescoのみです。		 ○ ×
Sandbox クライアントアプリからモバイルアプリに値を送るため仕組みを提供してくれます。
（イメージとしては簡易的なRemoteConfigみたいな感じかなと思います。）		 ○ ×
SharedPreference モバイルアプリのPreferenceファイルの読み書きが出来ます。 ○ ○
LeakCanary メモリーリークを検知してくれるお馴染みのツールが、Flipperにも対応してくれています。 ○ ×
CrashReporter モバイルアプリがクラッシュしたことを検知して、通知してくれます。 ○ ×

実装方法

公式サイトに詳しく載っていますので、その通り進めれば問題なかったです。またiOS/Androidともにサンプルコードもしっかりあるので、不明点があればそちらも見た方がいいと思います。

fbflipper.com

Android向けTips

OkHttpのNetworkInspectorにFlipperを使いたいとき、OkHttpClientをDIで注入する方法がドキュメントに無かったのですが、以下のようにやるとうまくいきました。（以下はDaggerを使った場合の例です。）

    @Singleton
    @Provides
    fun provideHttpClient(context: Context): OkHttpClient {

        // ApplicationクラスでセットしたNetworkPluginのインスタンスを取得
        val plugin = AndroidFlipperClient.getInstance(context).getPlugin(NetworkFlipperPlugin.ID)

        return OkHttpClient.Builder()
            .connectTimeout(60, TimeUnit.SECONDS)
            .readTimeout(60, TimeUnit.SECONDS)
            .writeTimeout(60, TimeUnit.SECONDS)
            .addNetworkInterceptor(FlipperOkhttpInterceptor(plugin))
            .build()
    }

各プラグインはIDを持っているので、そこからプラグインのインスタンスを取得出来るようです。

まとめ

FlipperではStethoでやや不便だなと感じていた、Chrome DevToolを使う点やiOS未対応な点（まだ未対応のプラグインが多いですが...）などが解消されていて、とても使いやすいデバッグツールでした。

開発元が「Stethoは引き続き提供する」と言っていますが、個人的にはすぐにでも乗り換えてしまってもいいなと感じました。（僕はたぶんプロダクトに投入すると思います。）