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
750
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.5k
Android上でUnityを動かすためのノウハウ / Android with Unity
morizooo
2
820
消費型課金を導入する / Introduction to consumable In-App Billing
morizooo
0
510
カンファレンスアプリを作ったぞ!! / builderscon tokyo 2017 LT
morizooo
0
3.2k
Other Decks in Technology
See All in Technology
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
230
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
430
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
140
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.4k
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
0
390
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
250
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.2k
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
20251024_TROCCO/COMETAアップデート紹介といくつかデモもやります!_#p_UG 東京:データ活用が進む組織の作り方
soysoysoyb
0
110
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Designing for Performance
lara
610
69k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Mobile First: as difficult as doing things right
swwweet
225
10k
RailsConf 2023
tenderlove
30
1.3k
Building an army of robots
kneath
305
46k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
A Tale of Four Properties
chriscoyier
161
23k
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