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
710
Flipperを活用した デバッグ効率化について/flipper
morizooo
November 25, 2021
Tweet
Share
More Decks by morizooo
See All by morizooo
Androidアプリをリアーキテクチャした話/Android-rearchitecture
morizooo
1
200
Mirrativ-android-efforts
morizooo
1
7.4k
Android上でUnityを動かすためのノウハウ / Android with Unity
morizooo
2
790
消費型課金を導入する / Introduction to consumable In-App Billing
morizooo
0
490
カンファレンスアプリを作ったぞ!! / builderscon tokyo 2017 LT
morizooo
0
3.1k
Other Decks in Technology
See All in Technology
Gateway H2 モジュールで スマートホーム入門
minoruinachi
0
140
Datadog のトライアルを成功に導く技術 / Techniques for a successful Datadog trial
nulabinc
PRO
0
160
newmo の創業を支える Software Architecture と Platform Engineering
110y
5
530
続・やっぱり余白が大切だった話
kakehashi
PRO
3
340
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2025年版)
infiniteloop_inc
13
41k
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
pfn
PRO
1
140
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
1
140
Ninno LT
kawaguti
PRO
1
120
LLM アプリケーションのためのクラウドセキュリティ - CSPM の実装ポイント-
osakatechlab
0
430
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
23
5.6k
自動化の第一歩 -インフラ環境構築の自動化について-
smt7174
1
130
AOAI で AI アプリを開発する時にまず考えたいこと
mappie_kochi
1
710
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Pragmatic Product Professional
lauravandoore
33
6.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
610
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
179
53k
A better future with KSS
kneath
239
17k
Designing for humans not robots
tammielis
253
25k
Facilitating Awesome Meetings
lara
54
6.4k
Navigating Team Friction
lara
185
15k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Designing Experiences People Love
moore
142
24k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
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