FlipperというFacebookが作ってるデバッグツールがあります。これはFlipperアプリをMacにインストールして、そこからアプリの情報を確認したり、変更したりすることが可能です。
（stethoに似ています）
これはプラグイン形式で必要なものだけを組み込んで使うことが出来ます。
すでに用意されてるプラグイン ( Layout Inspector, Network, Shared Preference ) だけでも十分便利なのですが、自分でプラグインを作ることも可能です。
FlipperアプリはElectron製なので、Desktop側のプラグインはJavaScriptで記述する必要があり、もちろんAndroid側の実装も必要になります。
単純なプラグインを例に、作り方の簡単な解説をしたいと思います。
最初に単純にHello Worldを表示して、その後にAndroidとFlipperアプリの連携について書きます。
Androidプラグイン
Android側の実装はそこまで難しくはと思います。
FlipperPlugin を継承したものを作って、 FlipperConnection を使ってFlipperアプリとやりとりする感じです。このあたりは後述します。
まず、sampleという名前でプラグインをFlipperアプリに単純に表示できるようにします。
getId のところはプラグイン名になります。次のDesktopプラグインの名前と揃える必要があります。
これをFlipperクライアントに登録します。
これだけだと何も機能はないですが、まずはFlipperアプリで表示させたいので、一旦ここまでできればOKです。
Desktopプラグイン
次にDesktop側のプラグインの実装です。ここはちょっとややこしいです。
インストールしておくもの
- yarn (brew install yarn)
- watchman ( brew install watchman)
セットアップ
Desktop側のプラグインはいくつか準備が必要になります。
まずは、コードをプロジェクトフォルダを作ります。適当なディレクトリで、Flipperのプラグイン名になるディレクトリを作ります。
この例では sample というプラグイン名になる予定です
$ cd <path_to>/flipper-plugins
$ mkdir flipper-sample
$ cd sample次にpackage.jsonを作ります。yarnコマンド色々聞かれますが、すべてデフォルトで大丈夫です。
$ yarn init作成されたpackage.jsonに依存を追加して、最終的に次のようになります。
{
"name": "sample",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"flipper": "latest"
}
}特にやらなくても動くのですが、 yarn install しておくと開発するときにVS Codeだと補完が効くので便利です。
最後に、Flipperの設定にこのディレクトリを追加します。
~/.flipper/config.json を適当なエディタで開いて、pluginPathsに作成したディレクトリを追加します。注意としては実際のプラグインのプロジェクトの一つ上の階層のディレクトリになりますので。
{"pluginPaths":["<path_to>/flipper-plugins"], ... }プラグインのコード
とりあえず、Hello Worldを表示してみます。
index.js を先程のpackage.jsonと同じところに作成して、以下のようなコードを書きます。
コンパイル、実行
ここが分かりにくいのですが、FlipperアプリをGUIから起動したらカスタムプラグインをコンパイルしてくれず有効になりません。なので、コマンドでFlipperアプリを起動する必要があります。
$ /Applications/Flipper.app/Contents/MacOS/Flipper以下のような出力がされて、Flipperアプリが起動すればOKです。
この状態で、index.jsを編集した場合は自動で再コンパイルされてリロードされます。
最後にAndroidアプリのほうを起動すれば、以下のように表示されると思います。
AndroidとFlipperの連携
FlipperからAndroidへ
FlipperアプリからAndroidへイベント送信とデータを渡す方法です。
Androidのほうではイベント受信できるようにします。先程の FlipperPlugin を継承したクラスで次のように書きます。
引数にはFlipperアプリから送られてくるイベント名を指定して、ラムダ式ほうに渡されたデータが入ってきます。渡されたデータはJSONになります。
次に送信する側のコードです。 this.client.call でイベント名とデータを渡します。
これFlipperアプリで見るとボタンが表示されて、ボタンを押すと、Android側でログが出力されると思います。
AndroidからFlipper
逆にAndroidからFlipperも同じような感じになります。
JS側は this.client.subscribe を使います。
ログはFlipperアプリのメニューにある View > Toggle Developer Tools で表示できます。
Android側も同じような感じです。渡すデータは FlipperObject を使います。
こんな感じで実装できます。
FlipperのUI
ぼくはあまり詳しくないのですが、FlipperはReactを使っています。あらかじめいくつかコンポーネントが用意されてるので、それを使うと良いと思います。
使用例
今ぼくがやってるプロジェクトでは、ダミーデータをOkHttpのInterceptorを使って差し込めるようにしています。
Flipperアプリで適当な値を入力して、アプリ側はそれを元にOkHttpのレスポンスを変更する感じです。
管理画面でデータを作ったりせずに、その場で値を変えながら確認できるので便利です。
サンプル
簡単なサンプルを公開してます。
