iOS 曜日ランキングが出来上がるまで

Transcript

1. 少年ジャンプ ＋ iOS 曜日ランキングが 出来上がるまで id:tokizuoh 2024/09/19 はてなのモバイル開発大紹介！ 1
2. 2 話すこと
3. 3 iOS アプリの 曜日ランキングを 作り上げた過程を紹介
4. 4 UI の話をします
5. アジェンダ • 曜日ランキングとは • 最初の実装方針と出くわした課題 • 課題に対するアプローチ 5
6. 6 曜日ランキングとは
7. 曜日ランキング • ホーム画面の一番上に表示 ◦ 曜日ごとにランキング形式で連載作品を 表示 • 曜日間は横方向の無限スクロールで 移動 • ベースは UIPageViewController ◦ 大枠は SwiftUI ◦ UIViewControllerRepresentable 7
8. 8 最初の実装方針と 出くわした課題
9. 9 背景と要件
10. • 曜日ランキングの表示位置はホーム画面の一番上 ◦ 起動時にユーザーに必ず見てもらえる ◦ 表示要素としての重要度が高い • 作品を大切にしているため、ランキング表示 における省略表示は行わない ◦ 曜日ごとに作品数が異なるため、表示数が異なる ◦ 全ての曜日の連載作品を表示したい 背景 10
11. 要件 11 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
12. 12 やや複雑
13. 13 SwiftUI でいけるのでは
14. 要件 14 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
15. 曜日ごとに高さが異なる 15
16. 曜日ランキングの高さを曜日ごとに変更 • 各曜日ごとの高さに応じて、曜日ランキング 自体の高さを変更する ◦ SwiftUI ✅ ◦ GeometryReader で曜日ごとの高さを取得し、 曜日変更毎に全体の高さとして適用 16
17. 要件 17 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
18. 要件 18 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
19. 横方向に無限スクロールして曜日を変更 19 • 横方向のスクロール ◦ SwiftUI ✅ ◦ ScrollView(.horizontal) ◦ ページングを素朴に実装すると親要素の縦スクロールと競合 ▪ 素朴: .gesture(_:including:) ▪ → .simultaneousGesture(_:including:) と DragGesture(minimumDistance:) を使い、 縦横スクロールの競合をハンドリング
20. 20 ホーム画面 は 縦方向も ScrollView
21. 横方向に無限スクロールして曜日を変更 21 • 無限スクロール ◦ SwiftUI ✅ ◦ .onChange(of:perform:) で選択中の曜日を 監視し、特定の曜日間の移動を特別扱い ▪ 最初の曜日から左の曜日へ: 最後の曜日に移動 ▪ 最後の曜日から右の曜日へ: 最初の曜日に移動
22. 要件 22 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
23. 23 実装できたが...
24. 24 表示が崩れる
25. SwiftUI 版は背景がズレる 25 25
26. SwiftUI 版の課題 26 • 表示が崩れる • 加えて、操作感が良くない ◦ 横スクロールの手触りが悪く、反応が悪い ▪ なめらかさを感じない ◦ 横スクロールをしたつもりが親要素の縦スクロールが 優先される時があった ▪ 公開されている値で調整しても満足感は得られなかった
27. 27 課題に対する アプローチ
28. 課題 28 • SwiftUI ではパフォーマンスや操作感を 満たせない ◦ 原因が分からなかった ◦ → UIKit をベースに方向転換
29. UIKit でどのように作るか (1/2) 29 • UIKit といってもやり方は色々ある ◦ UIScrollView ◦ UICollectionView ◦ UIPageViewController
30. UIKit でどのように作るか (2/2) • 各曜日間のスクロールはページング ◦ 各曜日ごとにピッタリ止まってほしい ◦ → UIPageViewController を使ってみる 30
31. 31 操作感 パフォーマンス OK
32. UIKit 版は背景がズレない 32 32
33. 操作感・パフォーマンス • 動作が遅くない ◦ なめらかに曜日間の移動ができた • 意図した通りに縦横スクロールができる ◦ 標準のAPIを使うことで操作感が自然となった 33
34. 要件は満たせたか？ (1/2) 34 • 曜日ごとの作品数に応じて高さを変更 ◦ → SwiftUI で作った時と同じ処理 ▪ 各曜日は SwiftUI.View から変更無し ▪ > GeometryReader で曜日ごとの高さを取得し、 曜日変更毎に全体の高さとして適用 ◦ 細かな不具合の対応も複数行った ▪ スクロール中に高さを変更するとパフォーマンスが落ちる等
35. 要件は満たせたか？ (2/2) 35 • 横方向に無限スクロールして曜日を変更 ◦ → UIPageViewControllerDelegate
36. 最終的な構成 • ホーム画面 SwiftUI.ScrollView ◦ 曜日ランキング SwiftUI.View ▪ ヘッダー SwiftUI.View ▪ 全曜日 UIViewControllerRepresentable • UIPageViewController ◦ 各曜日 UIHostingController ▪ SwiftUI.View 36
37. まとめ • 曜日ランキングとは ◦ → 曜日ごとにランキング形式で連載作品を表示 • 最初の実装方針と出くわした課題 ◦ → SwiftUI だけで作るとパフォーマンスが悪かった • 課題に対するアプローチ ◦ → UIPageViewController を使うことで課題を解消できた 37