マッチングアプリにおけるフリックUIで苦労したこと

CA.Flutter #4 で登壇した資料です。
https://cyberagent.connpass.com/event/358111

Transcript

1. マッチングアプリにおける フリックUIで苦労したこと 2025/7/9 CA.Flutter #4
2. 自己紹介 伊藤 悠平 • 株式会社CAMに中途入社 • iOSエンジニア5年、Flutterエンジニア3年目 • 2022年から株式会社タップルにジョインし、 課金リニューアルを担当 • 2023年からタップル発の 新規サービス「Koigram」に従事 • 米国株にはまってます ChatGPTに相談しながら
3. Koigramについて 「無料でも本気の恋はできる」をコ ンセプトにしたマッチングアプリで、 メッセージのやり取りまで無料でで きます
4. • マッチングアプリにおけるフリック UIとは？ • フリックとスクロール判定 • 画像ロードの工夫 主な内容
5. マッチングアプリにおける フリックUIとは？
6. マッチングアプリにおけるフリック UIとは？ 左スワイプで「スキップ」
7. マッチングアプリにおけるフリック UIとは？ 右スワイプで「いいね」
8. マッチングアプリにおけるフリック UIとは？ 左右スワイプで「いいね／スキップ」 ChatGPTに - この図を添付 - テキストによるアルゴリズムの説明
9. マッチングアプリにおけるフリック UIとは？ 苦労したこと 1 - 縦スクロールとの競合 縦スクロール？ or 左右のスワイプ？
10. マッチングアプリにおけるフリック UIとは？ 苦労したこと 2 - 素早い連続フリックにも耐える UI • 常にカードが表示される（何百件でも捌ける） • 常にメイン画像（ 1枚目）が表示される • ネットワークが悪くてもメイン画像が表示される • 目標は1秒間に5件フリック
11. フリックとスクロール判定
12. フリックとスクロール判定 主なWidget 親Widget FlickCardsView 子Widget UserDetailView └─ SingleChildScrollView
13. フリックとスクロール判定 それぞれの Gesture 親Widget GestureDetector 子Widget RawGestureDetector
14. フリックとスクロール判定 それぞれの Gesture 子Widgetのスクロール操作より先に タッチイベントを受け取るために RawGestureDetectorを利用する
15. フリックとスクロール判定 親Widget - GestureDetector 親Widget GestureDetector - スキップ or いいね のフリック判定 - 回転角度、フリック速度の計測 ※ここでは子Widgetを気にせずに実装
16. フリックとスクロール判定 子Widget - RawGestureDetector 子Widget RawGestureDetector - スクロールを有効にするかどうかを判定 - スワイプの角度、x/yの移動量を計測 スクロール制御の仕組み SingleChildScrollViewのphysicsを NeverScrollableScrollPhysics（スクロール無効） に切 り替えることで、親Widget側のGestureを優先させるよう にした
17. フリックとスクロール判定 子Widget - RawGestureDetector つまり、Gestureの状態は まず、子 WidgetのRawGestureDetectorでスワイプ方向を判定 └─ 縦方向と判定 → physics = null（スクロール優先） └─ 横方向（フリック）と判定 → physics = NeverScrollableScrollPhysics（スクロール無効） └─ スクロールが無効状態なので、フリック操作が親 Widgetに伝わる 親Widget（GestureDetector）で 「いいね／スキップ」の処理を実行
18. 画像ロードの工夫
19. 画像ロードの工夫 ユーザーによる アップロード画像 様々な状況で検証した結果 ... - 最大解像度 1024 x 1024 - 最大ファイルサイズ 1MB（jpg） - Firebase Remote Configで、それぞれの値を変更できるようにした
20. 画像ロードの工夫 連続フリックの要件 連続でフリックしても 常にメイン画像（ 1枚目）が表示される
21. 画像ロードの工夫 要件に答えられなかった ... • アップロードした画像そのままでは、連続フリックに耐えられなかった • ネットワークが悪いと、さらに処理が詰まりやすかった
22. 画像ロードの工夫 解決策1 CachedNetworkImage • WebP + quality:60 で軽量な画像をロード （データURIスキーム） sharp: https://sharp.pixelplumbing.com/api-resize/#resize • qualityはFirebase Remote Configで変更可能 • デバッグの計測結果を ChatGPTに渡して比較・検討し、設定を決定
23. 画像ロードの工夫 解決策2 ロードすべき画像の優先順位 • ユーザー30件を取得後、まずメイン画像のみを優先ロード • メイン画像完了後に、先頭 2ユーザー分のサブ画像（最大 10枚）を段階ロード • 15件フリック時点で、次の 15件のユーザー情報を追加取得 • デバッグの計測結果を ChatGPTに渡して比較・検討し、設定を決定
24. 画像ロードの工夫 解決策3 BaseCacheManagerによるStreamの監視 • ネットワークが悪いと画像のロードが詰まっていた • フリック済みユーザーの画像は不要なため、 ロード待ちの画像を即キャンセル可能に • iOSのデベロッパ機能にあるネットワークリンク調節器を 使って気がつき導入した
25. • ここにたどり着くまで、かなり試行錯誤を重ねた • 画像のロードなど、 Claude Codeを使えばさらに最適化できそう • 少しでも私たちの取り組みがヒントになれば嬉しいです • より良い知見があれば、ぜひ教えていただけると助かります 最後に
26. ご清聴ありがとうございました