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

マッチングアプリにおけるフリック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を使えばさらに最適化できそう • 少しでも私たちの取り組みがヒントになれば嬉しいです • より良い知見があれば、ぜひ教えていただけると助かります
最後に

ご清聴ありがとうございました

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

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

yuhei

More Decks by yuhei

Other Decks in Programming

Featured

Transcript