Flipperとは何か、機能と応用

Flipperとは？

Flipperは2018年にFacebook（Meta）が作成したオープンソースのモバイルアプリデバッグプラットフォームです。このプロジェクトは元々Sonarと呼ばれ、社内使用を目的としていましたが、2019年にMetaはMITライセンスの下でソースコードを公開しました。プラットフォームは、Electronベースのデスクトップアプリケーションと、AndroidおよびiOSプロジェクトに統合されるSDKの2つのコンポーネントで構成されています。

Flipperと他のデバッグツールの主な違いは、そのモジュラーアーキテクチャです。モノリシックなデバッガの代わりに、開発者はプロジェクトに実際に必要なプラグインのみを接続します。これによりアプリケーションの負荷が軽減され、インターフェースが簡素化されます。デバッガは開発者が選択したものだけを表示します。Android Studioには組み込みのプロファイラがありますが、これらはADB経由でしか動作せず、Flipperのようなカスタマイズレベルを提供しません。

Metaによると、Flipperは社内の2000以上のプロジェクトで使用されており、Fresco、Litho、RxJava、Retrofit、OkHttp、Picasso、Realm、SQLiteなどの人気ライブラリとの統合をサポートしています。このプラットフォームはAndroid API 16+およびiOS 11+と互換性があります。

Flipperのアーキテクチャ：デスクトップとデバイスの通信の仕組み

Flipperのアーキテクチャはクライアントサーバーモデルに基づいています。デスクトップアプリケーションがサーバーとして機能し、モバイルデバイスがクライアントとして機能します。USBまたはTCP/IPを介して接続が確立され、その後WebSocketベースのFlipperプロトコルを使用した双方向メッセージ交換が開始されます。

Android側では、通信はandroid-clientライブラリによって提供され、トラフィックトンネリングにADBを使用します。iOSクライアントはidb（iOS Device Bridge）を介して接続します。これはXcodeなしでiOSデバイスと対話するためのMeta独自の開発です。アプリケーション内では、各プラグインがFlipperClientに登録され、デスクトップ側と独自の通信チャネルを取得します。

データ転送プロセスは次のように機能します。デバイス上のプラグインがFlipperClientを介してイベントを送信し、クライアントがそれをJSONにシリアル化してWebSocket経由でデスクトップに送信します。デスクトップアプリケーションがメッセージをデシリアル化し、インターフェース内の対応するプラグインに送信します。Metaのテクニカルブログ（2024年）によると、USB接続でのメッセージ送信遅延は15ミリ秒未満です。

Flipperのインストールと設定方法

Flipperのインストールは、デスクトップアプリケーションのインストール、プロジェクトへのSDKの追加、デバッガの起動の3つのステップで構成されます。デスクトップアプリケーションは公式サイトfbflipper.comからダウンロードします。Windows、macOS、Linux向けにdmg、exe、AppImage形式のビルドが用意されています。インストール後、アプリケーションはADB経由で接続されたデバイスを自動的に検出します。

Androidプロジェクトの場合、Flipperはbuild.gradleの依存関係を通じて接続します。デスクトップクライアントのバージョンに一致するFlipperバージョンを指定し、使用するライブラリのプラグインを追加する必要があります。以下はKotlinプロジェクトの設定例です：

// build.gradle（アプリ）
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

Gradleの同期後、ApplicationクラスでFlipperClientを初期化する必要があります。初期化はデバッグビルドで行われます。リリースバージョンでは、デバッグ情報がユーザーに公開されないようにライブラリを接続しないでください。

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

iOSの場合、FlipperはCocoaPodsを通じて追加されます。Podfileには、FlipperとFlipperKitフレームワーク、および通信チャネルを構成するためのFlipper-FollyとFlipper-PeerTalkを指定します。pod install後、シミュレータまたはデバイスでアプリケーションを実行すると、デスクトップクライアントが自動的に新しいセッションを検出します。

接続の確認

アプリケーションを起動したら、デスクトップFlipperを開きます。左パネルに接続されたデバイスのリストが表示されます。デバイスが表示されない場合は、ADBがインストールされているか、AndroidでUSBデバッグが有効になっているか、iOS用のidbブリッジが実行されているかを確認してください。各デバイスはモデル名とOSバージョンとともに表示されます。

AndroidとiOS向けFlipperプラグイン

Flipperプラグインは、特定のタスク用にデスクトップインターフェースにパネルを追加するモジュラー拡張機能です。Metaは最も人気のあるライブラリ向けの公式プラグインを維持しています：OkHttpとURLSession用のNetwork Plugin、SQLiteとRealm用のDatabase Plugin、View階層用のLayout Inspector、SharedPreferences Plugin、Crash Reporterです。

公式プラグインに加えて、コミュニティによって開発されたサードパーティプラグインのエコシステムもあります。例えば、Tencent MMKVストレージをデバッグするためのMMKV Plugin、React Native用のRedux Debugger、メモリリークを検出するためのLeakCanary Pluginなどです。プラグインはMaven CentralとCocoaPodsを通じて配布され、通常の依存関係として接続されます。

Flipperの重要な利点は、カスタムプラグインを作成できることです。プラグインは2つの部分で構成されます。モバイルアプリに登録されるクライアント側（KotlinまたはSwift）と、インターフェースにUIパネルを追加するデスクトップ側（TypeScriptまたはJavaScript）です。MetaはWebSocketとJSONメッセージをサポートするカスタムプラグインを作成するためのAPIを提供しています。

Android向け主要プラグイン

Flipperを使ったネットワークデバッグ

Network Pluginは最も人気のあるFlipperプラグインの1つです。AndroidのOkHttpまたはiOSのURLSessionを通過するすべてのHTTP/HTTPSリクエストをインターセプトし、デスクトップインターフェースにリアルタイムで表示します。各リクエストについて、URL、メソッド、ステータスコード、リクエストヘッダーとレスポンスヘッダー、リクエストボディとレスポンスボディ、実行時間、サイズが利用可能です。

AndroidでNetwork Pluginを接続するには、flipper-network-pluginの依存関係を追加し、OkHttpClientをNetworkFlipperPluginコンストラクタに渡すだけです。Flipperは自動的にOkHttpClientをインターセプタでラップします。iOSでは、URLSession統合プラグインはFlipperNetworkInterceptorを介した設定が必要です。

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Network Pluginの重要な機能は、リクエストの検索とフィルタリングのサポートです。開発者はURL、メソッド、ステータスコード、コンテンツタイプでリクエストをフィルタリングできます。インターフェースから任意のリクエストを強制的に再試行できます。これは個別のcurlリクエストを書かずにエンドポイントをテストするのに便利です。Metaの開発者調査（2024年）によると、Network PluginはFlipperがインストールされているプロジェクトの78%で使用されています。

データベースとSharedPreferencesのデバッグ

Database Pluginはデスクトップクライアントから直接SQLiteおよびRealmデータベースへのアクセスを提供します。開発者はすべてのテーブル、そのスキーマ、内容を表形式で表示できます。コードを書かずに任意のSQLクエリを実行し、レコードの追加、編集、削除ができます。これにより、adb shellを使用する場合と比較して、アプリケーションの状態デバッグが大幅に高速化されます。

SharedPreferences Pluginも同様に機能します。AndroidのSharedPreferencesに保存されているすべてのキーと値を表示します。編集は即座に行われ、変更はすぐにアプリケーションに反映されます。ただし、重要な制限があります。アプリケーションを再起動すると、Flipperは再接続し、プラグインを介して行われたすべての変更は、SharedPreferencesファイルに直接適用されるため保持されます。

iOSの場合、同等のものはNSUserDefaults Pluginです。UserDefaultsで動作し、保存されたすべてのキーと値のペアを表示します。このプラグインは文字列、数値、日付、配列の編集をサポートしています。Flipperはランタイムインターフェースを介してUserDefaultsにアクセスするため、変更は即座に適用されます。

Layout Inspectorとロギング

FlipperのLayout Inspectorは、AndroidのView階層を視覚的に表示します。開発者はコンポーネントツリー、その属性（幅、高さ、パディング、背景、テキスト）を確認し、デバイス画面上の任意の要素を対話的に選択できます。これはAndroid Studioに組み込まれているLayout Inspectorの代替手段ですが、重要な違いがあります。Flipperはアプリケーションを停止せずにリアルタイムで階層を表示します。

ロギングにはLogs Pluginが使用されます。Logcatのすべてのログは、レベル（Debug、Info、Warn、Error）とタグによるフィルタリングとともにデスクトップインターフェースに表示されます。Android Studio Logcatとは異なり、Flipperのインターフェースは画面を乱雑にしません。ログはタグごとにグループ化され、レベルごとにハイライト表示されます。ログの検索とJSONへのエクスポートがサポートされています。

もう1つの便利な機能はConsole Pluginで、React NativeまたはWebViewコンポーネント内のJavaScriptコードからのconsole.logを表示します。これにより、ハイブリッドアプリケーションのデバッグが簡素化されます。開発者は1つのインターフェースでネイティブログとJSログの両方を確認できます。このプラグインはソース（NativeまたはJS）とロギングレベルによるフィルタリングをサポートしています。

Flutterプラグインの設定

Flutterアプリケーションの場合、Flipperはpub.devのflipperパッケージを通じて接続します。flutter_flipperプラグインは、Dioネットワーキングレイヤー、SharedPreferencesストレージ、Flutterナビゲーションとの統合を提供します。インストールにはpubspec.yamlへの依存関係の追加と、アプリケーションのmain関数でのFlipperClientの初期化が必要です。Flutterプラグインは機能面ではネイティブプラグインに劣りますが、主要なデバッグシナリオをカバーしています。

デバッグ中のパフォーマンス

Flipperはアクティブなプラグインの数に比例してデバイスとデスクトップのリソースを消費します。すべてのプラグインを同時にAndroidエミュレータに接続すると、Metaの計測（2024年）によると5–10%のパフォーマンス低下が観察されます。必要なプラグインのみを接続し、デスクトップアプリケーションのインターフェースから未使用のプラグインを無効にすることをお勧めします。