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
iOS 曜日ランキングが出来上がるまで
Search
tokizo
September 19, 2024
0
2k
iOS 曜日ランキングが出来上がるまで
tokizo
September 19, 2024
Tweet
Share
More Decks by tokizo
See All by tokizo
メインスレッドをブロックさせないためのSwift Concurrencyクイズ
tokizuoh
1
4.3k
運動モチベーション継続のためのiOSアプリ開発
tokizuoh
0
850
Xcode 15 で swift run が遅い
tokizuoh
0
3.5k
モノレポにおける path-filtering利用時でも GitHub ステータスのRequiredを 機能させたい!
tokizuoh
1
1.4k
累積和で配列の処理効率を改善しよう
tokizuoh
0
560
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Six Lessons from altMBA
skipperchong
27
3.6k
Become a Pro
speakerdeck
PRO
26
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
43
3.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Code Review Best Practice
trishagee
65
17k
It's Worth the Effort
3n
184
28k
Scaling GitHub
holman
459
140k
Transcript
少年ジャンプ + iOS 曜日ランキングが 出来上がるまで id:tokizuoh 2024/09/19 はてなのモバイル開発大紹介! 1
2 話すこと
3 iOS アプリの 曜日ランキングを 作り上げた過程を紹介
4 UI の話をします
アジェンダ • 曜日ランキングとは • 最初の実装方針と出くわした課題 • 課題に対するアプローチ 5
6 曜日ランキングとは
曜日ランキング • ホーム画面の一番上に表示 ◦ 曜日ごとにランキング形式で連載作品を 表示 • 曜日間は横方向の無限スクロールで 移動 •
ベースは UIPageViewController ◦ 大枠は SwiftUI ◦ UIViewControllerRepresentable 7
8 最初の実装方針と 出くわした課題
9 背景と要件
• 曜日ランキングの表示位置はホーム画面の一番上 ◦ 起動時にユーザーに必ず見てもらえる ◦ 表示要素としての重要度が高い • 作品を大切にしているため、ランキング表示 における省略表示は行わない ◦
曜日ごとに作品数が異なるため、表示数が異なる ◦ 全ての曜日の連載作品を表示したい 背景 10
要件 11 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
12 やや複雑
13 SwiftUI でいけるのでは
要件 14 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
曜日ごとに高さが異なる 15
曜日ランキングの高さを曜日ごとに変更 • 各曜日ごとの高さに応じて、曜日ランキング 自体の高さを変更する ◦ SwiftUI ✅ ◦ GeometryReader で曜日ごとの高さを取得し、
曜日変更毎に全体の高さとして適用 16
要件 17 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
要件 18 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
横方向に無限スクロールして曜日を変更 19 • 横方向のスクロール ◦ SwiftUI ✅ ◦ ScrollView(.horizontal) ◦
ページングを素朴に実装すると親要素の縦スクロールと競合 ▪ 素朴: .gesture(_:including:) ▪ → .simultaneousGesture(_:including:) と DragGesture(minimumDistance:) を使い、 縦横スクロールの競合をハンドリング
20 ホーム画面 は 縦方向も ScrollView
横方向に無限スクロールして曜日を変更 21 • 無限スクロール ◦ SwiftUI ✅ ◦ .onChange(of:perform:) で選択中の曜日を
監視し、特定の曜日間の移動を特別扱い ▪ 最初の曜日から左の曜日へ: 最後の曜日に移動 ▪ 最後の曜日から右の曜日へ: 最初の曜日に移動
要件 22 • 曜日ごとの作品数に応じて高さを変更 • 横方向に無限スクロールして曜日を変更
23 実装できたが...
24 表示が崩れる
SwiftUI 版は背景がズレる 25 25
SwiftUI 版の課題 26 • 表示が崩れる • 加えて、操作感が良くない ◦ 横スクロールの手触りが悪く、反応が悪い ▪
なめらかさを感じない ◦ 横スクロールをしたつもりが親要素の縦スクロールが 優先される時があった ▪ 公開されている値で調整しても満足感は得られなかった
27 課題に対する アプローチ
課題 28 • SwiftUI ではパフォーマンスや操作感を 満たせない ◦ 原因が分からなかった ◦ →
UIKit をベースに方向転換
UIKit でどのように作るか (1/2) 29 • UIKit といってもやり方は色々ある ◦ UIScrollView ◦
UICollectionView ◦ UIPageViewController
UIKit でどのように作るか (2/2) • 各曜日間のスクロールはページング ◦ 各曜日ごとにピッタリ止まってほしい ◦ → UIPageViewController
を使ってみる 30
31 操作感 パフォーマンス OK
UIKit 版は背景がズレない 32 32
操作感・パフォーマンス • 動作が遅くない ◦ なめらかに曜日間の移動ができた • 意図した通りに縦横スクロールができる ◦ 標準のAPIを使うことで操作感が自然となった 33
要件は満たせたか? (1/2) 34 • 曜日ごとの作品数に応じて高さを変更 ◦ → SwiftUI で作った時と同じ処理 ▪
各曜日は SwiftUI.View から変更無し ▪ > GeometryReader で曜日ごとの高さを取得し、 曜日変更毎に全体の高さとして適用 ◦ 細かな不具合の対応も複数行った ▪ スクロール中に高さを変更するとパフォーマンスが落ちる等
要件は満たせたか? (2/2) 35 • 横方向に無限スクロールして曜日を変更 ◦ → UIPageViewControllerDelegate
最終的な構成 • ホーム画面 SwiftUI.ScrollView ◦ 曜日ランキング SwiftUI.View ▪ ヘッダー SwiftUI.View
▪ 全曜日 UIViewControllerRepresentable • UIPageViewController ◦ 各曜日 UIHostingController ▪ SwiftUI.View 36
まとめ • 曜日ランキングとは ◦ → 曜日ごとにランキング形式で連載作品を表示 • 最初の実装方針と出くわした課題 ◦ →
SwiftUI だけで作るとパフォーマンスが悪かった • 課題に対するアプローチ ◦ → UIPageViewController を使うことで課題を解消できた 37