STORES Tech Conf 2024 “New Engineering” - 複数のScrollViewが連動！STORES レジ でスプレッドシート風UIを実装しました

https://storesinc.tech/conf/2024

Transcript

1. 複数のScrollViewが連動！ STORES レジ で スプレッドシート風UIを実装しました satoryo
2. 自己紹介 2 satoryo X (Twitter) : satoryo056 STORES レジ・予約 iOS / Android エンジニア
3. 3 普段 iOS アプリの開発を やっているひと？✋
4. 4 iOS アプリ開発について 分かりやすく発表します！
5. STORES レジ について 5 • 2021年リリースの iPadOS 専用アプリ • 実店舗とネットショップが一緒になったPOSレジ ◦ 商品・在庫・売上管理が可能 
 • 小売業・サービス業の現地でのお会計に利用
6. STORES 予約 について • 予約や顧客情報の管理を行うプロダクト • サロンやフィットネスなどのオーナーさんが利用 • 例えば以下のことが可能 ◦ 予約ページの作成 
 ◦ スケジュール管理 
 ◦ スタッフのシフト管理 

7. STORES レジ x STORES 予約 7
8. STORES レジ について 8 • STORES 予約 の予約システムと STORES レジ が連携 • アプリで予約内容の確認からお会計まで可能に
9. 9 今回のメインテーマ 予約カレンダーをネイティブで実装したことについて紹介
10. iOS アプリの開発言語 10 • ネイティブアプリ ◦ Swift
 ◦ Objective-C
 • クロスプラットフォームアプリ ◦ JavaScript (React Native)
 ◦ Dart (Flutter)
 ◦ Kotlin (Kotlin Multiplatform)

11. iOS アプリの開発言語 11 • ネイティブアプリ ◦ Swift
 ◦ Objective-C
 • クロスプラットフォームアプリ ◦ JavaScript (React Native)
 ◦ Dart (Flutter)
 ◦ Kotlin (Kotlin Multiplatform)
 STORES レジは全て Swift で記述
12. iOS アプリの UI フレームワークと実装方法 12 • UIKit ◦ コード
 ◦ XIB (XML Interface Builder)
 ◦ Storyboard
 • SwiftUI ◦ コード

13. iOS アプリの UI フレームワークと実装方法 13 • UIKit ◦ コード
 ◦ XIB (XML Interface Builder)
 ◦ Storyboard
 • SwiftUI ◦ コード
 STORES レジでは一部を除いて 全て SwiftUI で UI 実装
14. STORES レジ アプリの採用言語・UIフレームワーク 14 • 言語 ◦ Swift
 • UI フレームワーク ◦ SwiftUI （一部除く） 

15. STORES レジ アプリの採用言語・UIフレームワーク 15 • 言語 ◦ Swift
 • UI フレームワーク ◦ SwiftUI （一部除く） 
 予約カレンダーもSwiftUIで実装したい！ まずは関連ライブラリを調査
16. カレンダー実装における関連ライブラリ 16 SpreadsheetView by bannzai 引用元：https://github.com/bannzai/SpreadsheetView

17. カレンダー実装における関連ライブラリ 17 SpreadsheetView by bannzai 引用元：https://github.com/bannzai/SpreadsheetView
 SwiftUI ではなく UIKit で実装
18. カレンダー実装における関連ライブラリ 18 CalendarLib by jumartin 引用元：https://github.com/jumartin/Calendar

19. カレンダー実装における関連ライブラリ 19 CalendarLib by jumartin 引用元：https://github.com/jumartin/Calendar
 そもそも Swift ではなく Objective-C で書かれている
20. カレンダー実装における関連ライブラリ 20 SwiftUI で実装している ライブラリがなさそう ならば作るしかない！
21. 予約カレンダーのデザイン 21
22. 予約カレンダーの要素 22 • 3つの要素
23. 予約カレンダーの要素 23 • 3つの要素 ◦ スタッフ

24. 予約カレンダーの要素 24 • 3つの要素 ◦ スタッフ
 ◦ タイムライン 

25. 予約カレンダーの要素 25 • 3つの要素 ◦ スタッフ
 ◦ タイムライン 
 ◦ 予約情報

26. 予約カレンダーの要素 26 • 3つの要素 ◦ スタッフ
 ◦ タイムライン 
 ◦ 予約情報
 1日の予約情報を表示 縦・横方向の スクロールができる画面
27. 予約カレンダーの要素 27 何かに似てませんか？
28. 予約カレンダーの要素 28 スプレッドシート に似てませんか？
29. 予約カレンダーの要素 29 似てますよね？
30. 予約カレンダーの要素 30 そう、似てるんですよ
31. 伏線回収したので改めて 31
32. 予約カレンダーの実装：仕様 32 • 先頭列（縦）に「スタッフ」を表示 • 先頭行（横）に「タイムライン 0:00〜24:00」を表示 • 先頭行・先頭列はそれぞれ固定 • スタッフとタイムラインの位置に合わせて予約情報を表示 • カレンダーはスタッフ人数に関係なく画面いっぱいに表示 ◦ 人数が少なくてもカレンダーの高さは不変 
 • 縦にも横にもスクロール可能
33. 予約カレンダーの実装：試行錯誤 33 • ScrollView • GridView
34. 予約カレンダーの実装：試行錯誤 34 予約情報の部分が画面中央に寄ってしまったり
35. 予約カレンダーの実装：試行錯誤 35 予約情報の部分が画面中央に寄ってしまったり 余白がある
36. 予約カレンダーの実装：試行錯誤 36 タイムラインの部分が画面の外に出てしまったり
37. 予約カレンダーの実装：試行錯誤 37 タイムラインの部分が画面の外に出てしまったり 下へ引っ張ると
38. 予約カレンダーの実装：試行錯誤 38 タイムラインの部分が画面の外に出てしまったり 下へ引っ張ると タイムラインの部分が出てくる
39. 予約カレンダーの実装：試行錯誤 39 タイムラインと予約情報のセルがずれてしまったり
40. 予約カレンダーの実装：試行錯誤 40 タイムラインと予約情報のセルがずれてしまったり ずれている ずれている
41. 予約カレンダーの実装：試行錯誤 41 • 改善できないか試行錯誤 ◦ ScrollView の中に Spacer を追加
 ◦ View の frame を定義
 ◦ GeometryReader を使用
 ◦ LazyVStack と GridLayout を駆使
 ◦ etc …

42. 予約カレンダーの実装：試行錯誤 42 • 改善できないか試行錯誤 ◦ ScrollView の中に Spacer を追加
 ◦ View の frame を定義
 ◦ GeometryReader を使用
 ◦ LazyVStack と GridLayout を駆使
 ◦ etc …
 改善の兆しは見えず
43. 予約カレンダーの実装：気づき 43
44. 予約カレンダーの実装：気づき 44 • 3つの要素 ◦ スタッフ
 ◦ タイムライン 
 ◦ 予約情報

45. 予約カレンダーの実装：気づき 45 1. 縦にスクロールする場合 ・スタッフをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　スタッフも一緒にスクロール 　
46. 予約カレンダーの実装：気づき 46 1. 縦にスクロールする場合 ・スタッフをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　スタッフも一緒にスクロール 　
47. 予約カレンダーの実装：気づき 47 1. 縦にスクロールする場合 ・スタッフをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　スタッフも一緒にスクロール 　
48. 予約カレンダーの実装：気づき 48 1. 縦にスクロールする場合 ・スタッフをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　スタッフも一緒にスクロール 　
49. 予約カレンダーの実装：気づき 49 1. 縦にスクロールする場合 ・スタッフをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　スタッフも一緒にスクロール 　
50. 予約カレンダーの実装：気づき 50 2. 横にスクロールする場合 ・タイムラインをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　タイムラインも一緒にスクロール
51. 予約カレンダーの実装：気づき 51 2. 横にスクロールする場合 ・タイムラインをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　タイムラインも一緒にスクロール
52. 予約カレンダーの実装：気づき 52 2. 横にスクロールする場合 ・タイムラインをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　タイムラインも一緒にスクロール
53. 予約カレンダーの実装：気づき 53 2. 横にスクロールする場合 ・タイムラインをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　タイムラインも一緒にスクロール
54. 予約カレンダーの実装：気づき 54 2. 横にスクロールする場合 ・タイムラインをスクロールしたら 　予約情報も一緒にスクロール ・予約情報をスクロールしたら 　タイムラインも一緒にスクロール
55. 予約カレンダーの実装：気づき 55 縦にスクロール ・スタッフ & 予約情報 横にスクロール ・タイムライン & 予約情報 片方がスクロールしたら もう片方も連動させたい！
56. 予約カレンダーの実装：気づき 56 縦にスクロール ・スタッフ & 予約情報 横にスクロール ・タイムライン & 予約情報 片方がスクロールしたら もう片方も連動させたい！
57. 予約カレンダーの実装：気づき 57 縦にスクロール ・スタッフ & 予約情報 横にスクロール ・タイムライン & 予約情報 片方がスクロールしたら もう片方も連動させたい！
58. 予約カレンダーの実装：関連実装を発見 58 複数のScrollViewを同時に動かす実装を発見 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

59. 予約カレンダーの実装：SimultaneouslyScrollView の紹介 59 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

60. 予約カレンダーの実装：SimultaneouslyScrollView の紹介 60 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

61. 予約カレンダーの実装：SimultaneouslyScrollView の紹介 61 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

62. 予約カレンダーの実装：SimultaneouslyScrollView の紹介 62 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 真ん中のScrollViewをスクロールすると 左右のScrollViewも連動してスクロールする
63. 予約カレンダーの実装：SimultaneouslyScrollView の紹介 63 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 真ん中のScrollViewをスクロールすると 左右のScrollViewも連動してスクロールする なんとなくいけそうな予感！
64. 予約カレンダーの実装：SimultaneouslyScrollView のソースコード 64 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

65. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 65 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始

66. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 66 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向 
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始

67. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 67 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意 
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始

68. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 68 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール 
 させる全ての ScrollView を
 配列に格納 
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始

69. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 69 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意 
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始

70. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 70 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全てのScrollView を 同じ位置まで自動スクロール
 5. 任意の ScrollView を
 スクロール開始 

71. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 71 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全ての ScrollView を同じ位置まで自動スクロール 
 5. 任意の ScrollView を
 スクロール開始

72. 予約カレンダーの実装：ScrollView のスクロールを検知する仕組み 72 UIScrollViewDelegate を継承した extension を用意 引用元：https://github.com/stonko1994/SimultaneouslyScrollView

73. 予約カレンダーの実装：ScrollView のスクロールを検知する仕組み 73 UIScrollViewDelegate を継承した extension を用意 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 スクロール開始時 に呼ばれる
74. 予約カレンダーの実装：ScrollView のスクロールを検知する仕組み 74 7. UIScrollViewDelegate を継承した extension を定義 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 スクロール中に 呼ばれる
75. 予約カレンダーの実装：ScrollView のスクロールを検知する仕組み 75 UIScrollViewDelegate を継承した extension を定義 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 操作中の ScrollView を代入 操作中でない配列内の 全ての ScrollView を スクロールさせる
76. 予約カレンダーの実装：SimultaneouslyScrollView を反映 76 • 3つの要素 ◦ スタッフ
 ◦ タイムライン 
 ◦ 予約情報

77. 予約カレンダーの実装：SimultaneouslyScrollView を反映 77
78. 予約カレンダーの実装：SimultaneouslyScrollView を反映 78
79. 予約カレンダーの実装：SimultaneouslyScrollView を反映 79 ス タ ッ フ タイムライン 予約情報 横に並べる
80. 予約カレンダーの実装：SimultaneouslyScrollView を反映 80 ス タ ッ フ タイムライン 予約情報 縦に並べる
81. 予約カレンダーの実装：SimultaneouslyScrollView を反映 81
82. 予約カレンダーの実装：SimultaneouslyScrollView を反映 82
83. 予約カレンダーの実装：SimultaneouslyScrollView を反映 83
84. 予約カレンダーの実装：SimultaneouslyScrollView を反映 84
85. 予約カレンダーの実装：SimultaneouslyScrollView を反映 85
86. 予約カレンダーの実装：SimultaneouslyScrollView の処理フロー 86 引用元：https://github.com/stonko1994/SimultaneouslyScrollView
 2. ScrollViewの配列を用意
 3. 同じ方向にスクロール
 させる全てのScrollView を
 配列に格納
 1. スクロールする方向
 (縦 or 横) を決定
 4. ScrollView のスクロールを 検知する仕組みを用意
 6. 配列内の全ての ScrollView を同じ位置まで自動スクロール 
 5. 任意の ScrollView を
 スクロール開始

87. 完成！ 87
88. 余談：予約の表示 88 予約情報の考慮事項
89. 余談：予約の表示 89 予約情報の考慮事項 • 開始時間 ◦ 00分・30分・45分開始...
 • 予約の長さ ◦ 1時間・30分・2.5時間...
 • 予約の重複 ◦ スタッフと予約は 1 対 多

90. 余談：予約の表示 90 予約情報の考慮事項 • 開始時間 ◦ タイムラインの位置を考慮 
 • 予約の長さ ◦ 予約ごとに描画の幅が可変 
 • 予約の重複 ◦ スタッフの高さも可変 

91. 余談：予約の表示 91 予約情報の考慮事項 　APIで取得した予約情報を 　スタッフごとに抽出し 　予約同士で時間の重複を判定し 　スタッフの高さを変えつつ 　予約のセルの幅を変えながら 　1つずつ描画する
92. 余談：予約の表示 92 2つの ForEach を使用し予約を1つずつ描画
93. 余談：予約の表示 93 2つの ForEach を使用し予約を1つずつ描画
94. 改めて、完成！ 94
95. 改めて、完成！ 95
96. 予約カレンダーの課題・改善点 96 • パフォーマンス面 ◦ 予約数が増えるほど描画する予約情報も増加 
 ◦ 大量の予約を描画するとスクロールがカクつく 
 • UI 操作 ◦ ドラッグ＆ドロップで時間を変更したいという要望 
 ▪ 予約ごとに座標を指定しているのが課題 

97. まとめ 97 • STORES レジ アプリの予約カレンダーを紹介 • 複数のScrollViewを同時に動かすロジックにより　　 スプレッドシート風なUIを実装 • まだまだ課題はあるが今後改善する予定
98. さいごに：STORES 各サービスの連携デモ 98 予約カレンダーも触れるのでぜひ体験してください！