Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flipperを活用した デバッグ効率化について/flipper
Search
morizooo
November 25, 2021
Technology
0
730
Flipperを活用した デバッグ効率化について/flipper
morizooo
November 25, 2021
Tweet
Share
More Decks by morizooo
See All by morizooo
Androidアプリをリアーキテクチャした話/Android-rearchitecture
morizooo
1
210
Mirrativ-android-efforts
morizooo
1
7.4k
Android上でUnityを動かすためのノウハウ / Android with Unity
morizooo
2
810
消費型課金を導入する / Introduction to consumable In-App Billing
morizooo
0
500
カンファレンスアプリを作ったぞ!! / builderscon tokyo 2017 LT
morizooo
0
3.2k
Other Decks in Technology
See All in Technology
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
390
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
230
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
13
4k
生成AIによるデータサイエンスの変革
taka_aki
0
3.1k
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
150
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
モノレポにおけるエラー管理 ~Runbook自動生成とチームメンションの最適化
biwashi
0
520
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
oracle4engineer
PRO
1
260
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.5k
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
180
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
2
180
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
160
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for humans not robots
tammielis
253
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
A better future with KSS
kneath
239
17k
Optimizing for Happiness
mojombo
379
70k
Bash Introduction
62gerente
614
210k
Music & Morning Musume
bryan
46
6.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Site-Speed That Sticks
csswizardry
10
780
Transcript
Flipperを活用した デバッグ効率化について 2021.10.26 morizooo #TechTalk_merpay_zozo_mirrativ © 2021 Mirrativ, Inc.
•Profile •morizooo(@morizo_999) •ミラティブAndroid担当(2018/2〜) •マイブーム:高級食パン,散財
99
99 • モバイルアプリデバッグのためのデスクトップアプリケーション • アプリからデータを受信して整形して可視化できる ◦ アプリにデータを送信することも可能 FLIPPERについて
目次 99 Flipper 基本編
99 • OkHttpでのAPI通信の内容を確認できる FLIPPERの標準機能
99 • HTTPレスポンスのモックも可能 ◦ isMockResponseSupportedを有効にすると使える ◦ APIモックサーバーの用途に使える ◦ データを一部書き換えて表示確認にも使える FLIPPERの標準機能
99 • SharedPreferencesの表示/更新ができる FLIPPERについて
99 • DeepLinkの表示確認できる ◦ 任意のリンクも実行可能 FLIPPERの標準機能
目次 99 Flipper 応用編
99 • FlipperはElectron+Reactで作られている ◦ 柔軟なカスタマイズが可能 • PubSubパターンに組み合わせると便利 FLIPPERのカスタムプラグインについて
99 MIRRATIV内のPUBSUBの一例 • リアルタイム通信のためにPubSubを利用 • 通信内容はJson ◦ TypeによってClient側でParse処理を切り替えている
配信者 視聴者 ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー APIサーバー 配信画面
99 MIRRATIV内のPUBSUBの問題点 • Publishされるまでの条件が複雑だと検証に時間がかかる ◦ 例:配信者のランキング情報の切り替え → カスタムプラグインで解決 配信者 視聴者
①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー APIサーバー 配信画面
99 カスタムプラグインについて • プラグインの開発の流れ 1. FlipperのDesktopPluginを作成 2. Androidで作成したDesktopPluginと接続するためのClientを作成 3. AndroidはClientからデータを流す
4. FlipperのDesktopPluginでデータが表示されるか確認 • 詳細はTech blogへ!! https://tech.mirrativ.stream/entry/flipperCustomPlugin
99 プラグインの実装 Desktop Plugins Android Plugin アプリからデータ受信
99 プラグインの実装 Desktop Plugins Android Plugin アプリにデータ送信
カスタムプラグインの画面
99 カスタムプラグイン導入の結果 配信者 視聴者 ①HTTPリクエスト ②Publish ③Subscribe ③Subscribe PubSubサーバー APIサーバー
• 革命と呼ばれデバッグが爆速になった ◦ 通信内容の確認が楽 ◦ 任意タイミングでReplayできる ◦ メッセージを決めればMockで開発できる Flipper
99 • Flipperのカスタムプラグインを作成してデバッグの効率化をし ている • PubSubでのメッセージ通信で有効に使える まとめ
99 • 積極採用中です!! • 一緒に開発やりませんか!!11 WE ARE HIRING