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
マッチングアプリにおけるフリックUIで苦労したこと
Search
yuhei
July 10, 2025
Programming
0
280
マッチングアプリにおけるフリックUIで苦労したこと
CA.Flutter #4 で登壇した資料です。
https://cyberagent.connpass.com/event/358111
yuhei
July 10, 2025
Tweet
Share
More Decks by yuhei
See All by yuhei
StoreKit2を使った課金システムのフルリニューアル
yuheiito
2
4.2k
Other Decks in Programming
See All in Programming
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
490
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
160
Vibe coding コードレビュー
kinopeee
0
450
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
200
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
200
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
150
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
180
AIエージェント開発、DevOps and LLMOps
ymd65536
1
120
tool ディレクティブを導入してみた感想
sgash708
1
140
ゲームの物理
fadis
5
1.2k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Unsuck your backbone
ammeep
671
58k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Scaling GitHub
holman
462
140k
It's Worth the Effort
3n
186
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
マッチングアプリにおける フリックUIで苦労したこと 2025/7/9 CA.Flutter #4
自己紹介 伊藤 悠平 • 株式会社CAMに中途入社 • iOSエンジニア5年、Flutterエンジニア3年目 • 2022年から株式会社タップルにジョインし、 課金リニューアルを担当
• 2023年からタップル発の 新規サービス「Koigram」に従事 • 米国株にはまってます ChatGPTに相談しながら
Koigramについて 「無料でも本気の恋はできる」をコ ンセプトにしたマッチングアプリで、 マッチもチャットも全員無料で利用 できます
• マッチングアプリにおけるフリック UIとは? • フリックとスクロール判定 • 画像ロードの工夫 主な内容
マッチングアプリにおける フリックUIとは?
マッチングアプリにおけるフリック UIとは? 左スワイプで「スキップ」
マッチングアプリにおけるフリック UIとは? 右スワイプで「いいね」
マッチングアプリにおけるフリック UIとは? 左右スワイプで「いいね/スキップ」 ChatGPTに - この図を添付 - テキストによるアルゴリズムの説明
マッチングアプリにおけるフリック UIとは? 苦労したこと 1 - 縦スクロールとの競合 縦スクロール? or 左右のスワイプ?
マッチングアプリにおけるフリック UIとは? 苦労したこと 2 - 素早い連続フリックにも耐える UI • 常にカードが表示される(何百件でも捌ける) •
常にメイン画像( 1枚目)が表示される • ネットワークが悪くてもメイン画像が表示される • 目標は1秒間に5件フリック
フリックとスクロール判定
フリックとスクロール判定 主なWidget 親Widget FlickCardsView 子Widget UserDetailView └─ SingleChildScrollView
フリックとスクロール判定 それぞれの Gesture 親Widget GestureDetector 子Widget RawGestureDetector
フリックとスクロール判定 それぞれの Gesture 子Widgetのスクロール操作より先に タッチイベントを受け取るために RawGestureDetectorを利用する
フリックとスクロール判定 親Widget - GestureDetector 親Widget GestureDetector - スキップ or いいね
のフリック判定 - 回転角度、フリック速度の計測 ※ここでは子Widgetを気にせずに実装
フリックとスクロール判定 子Widget - RawGestureDetector 子Widget RawGestureDetector - スクロールを有効にするかどうかを判定 - スワイプの角度、x/yの移動量を計測
スクロール制御の仕組み SingleChildScrollViewのphysicsを NeverScrollableScrollPhysics(スクロール無効) に切 り替えることで、親Widget側のGestureを優先させるよう にした
フリックとスクロール判定 子Widget - RawGestureDetector つまり、Gestureの状態は まず、子 WidgetのRawGestureDetectorでスワイプ方向を判定 └─ 縦方向と判定 →
physics = null(スクロール優先) └─ 横方向(フリック)と判定 → physics = NeverScrollableScrollPhysics(スクロール無効) └─ スクロールが無効状態なので、フリック操作が親 Widgetに伝わる 親Widget(GestureDetector)で 「いいね/スキップ」の処理を実行
画像ロードの工夫
画像ロードの工夫 ユーザーによる アップロード画像 様々な状況で検証した結果 ... - 最大解像度 1024 x 1024
- 最大ファイルサイズ 1MB(jpg) - Firebase Remote Configで、それぞれの値を変更できるようにした
画像ロードの工夫 連続フリックの要件 連続でフリックしても 常にメイン画像( 1枚目)が表示される
画像ロードの工夫 要件に答えられなかった ... • アップロードした画像そのままでは、連続フリックに耐えられなかった • ネットワークが悪いと、さらに処理が詰まりやすかった
画像ロードの工夫 解決策1 CachedNetworkImage • WebP + quality:60 で軽量な画像をロード (データURIスキーム) sharp:
https://sharp.pixelplumbing.com/api-resize/#resize • qualityはFirebase Remote Configで変更可能 • デバッグの計測結果を ChatGPTに渡して比較・検討し、設定を決定
画像ロードの工夫 解決策2 ロードすべき画像の優先順位 • ユーザー30件を取得後、まずメイン画像のみを優先ロード • メイン画像完了後に、先頭 2ユーザー分のサブ画像(最大 10枚)を段階ロード •
15件フリック時点で、次の 15件のユーザー情報を追加取得 • デバッグの計測結果を ChatGPTに渡して比較・検討し、設定を決定
画像ロードの工夫 解決策3 BaseCacheManagerによるStreamの監視 • ネットワークが悪いと画像のロードが詰まっていた • フリック済みユーザーの画像は不要なため、 ロード待ちの画像を即キャンセル可能に • iOSのデベロッパ機能にあるネットワークリンク調節器を
使って気がつき導入した
• ここにたどり着くまで、かなり試行錯誤を重ねた • 画像のロードなど、 Claude Codeを使えばさらに最適化できそう • 少しでも私たちの取り組みがヒントになれば嬉しいです • より良い知見があれば、ぜひ教えていただけると助かります
最後に
ご清聴ありがとうございました