Slide 1
Slide 1 text
iOSクックパッドにおける
Compositional Layoutsの
活用事例とtips紹介
角田 睦美
Slide 2
Slide 2 text
自己紹介
● 角田 睦美 (Mutsumi Kakuta)
● レシピ事業開発部 iOSエンジニア
○ 検索や有料会員向け機能を開発
● 登山と個人開発が趣味
○ → 登山イベントアプリを作っています
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 5
Slide 5 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 6
Slide 6 text
Compositional Layouts概要
● WWDC2019で発表
● セクション毎にレイアウトを個別に実装が可能で、複雑な
レイアウトも比較的簡単に実現できる
Slide 7
Slide 7 text
Compositional Layouts概要
Slide 8
Slide 8 text
Compositional Layouts概要
Slide 9
Slide 9 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 10
Slide 10 text
スタンダードなレイアウト
Slide 11
Slide 11 text
リスト
Slide 12
Slide 12 text
リスト
Slide 13
Slide 13 text
リスト
Slide 14
Slide 14 text
リスト
Slide 15
Slide 15 text
グリッド
Slide 16
Slide 16 text
グリッド
Slide 17
Slide 17 text
グリッド
Slide 18
Slide 18 text
グリッド
Slide 19
Slide 19 text
やや複雑なレイアウト
Slide 20
Slide 20 text
ヘッダー＋カルーセル
Slide 21
Slide 21 text
ヘッダー＋カルーセル
Slide 22
Slide 22 text
ヘッダー＋カルーセル
Slide 23
Slide 23 text
ヘッダー＋カルーセル
Slide 24
Slide 24 text
ヘッダー＋カルーセル
Slide 25
Slide 25 text
ヘッダー＋カルーセル
Slide 26
Slide 26 text
page controlとカルーセルの組み合わせ
Slide 27
Slide 27 text
page controlとカルーセルの組み合わせ
Slide 28
Slide 28 text
page controlとカルーセルの組み合わせ
Slide 29
Slide 29 text
page controlとカルーセルの組み合わせ
Slide 30
Slide 30 text
page controlとカルーセルの組み合わせ
Slide 31
Slide 31 text
複数アイテムで構成されるレイアウト
Slide 32
Slide 32 text
複数アイテムで構成されるレイアウト
Slide 33
Slide 33 text
複数アイテムで構成されるレイアウト
Slide 34
Slide 34 text
複数アイテムで構成されるレイアウト
Slide 35
Slide 35 text
複数アイテムで構成されるレイアウト
Slide 36
Slide 36 text
サンプルコード
ここまで紹介した実装は、以下のリポジトリに置いています。
https://github.com/muchan611/compositional-layouts-sample
Slide 37
Slide 37 text
セクションの分け方やデータの持ち方
Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつくれぽ詳細画面を実装する
https://techlife.cookpad.com/entry/2020/12/24/130000
Slide 38
Slide 38 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 39
Slide 39 text
NSCollectionLayoutDimension
.estimated の罠
Slide 40
Slide 40 text
NSCollectionLayoutDimension.estimatedとは
Slide 41
Slide 41 text
NSCollectionLayoutDimension.estimatedとは
● itemやgroupのサイズに指定できる推定値
● 文字数によって高さを可変にしたり、文字サイズ変更の際に
適切な高さ・幅を適用してくれる便利な仕組み
Slide 42
Slide 42 text
カルーセルと組み合わせると動作が不安定に😓
● orthogonalScrollingBehavi
or = .continuous 等と組み
合わせて利用すると、タップ
可能な領域がずれてしま
い、押下できなくなることが
ある
Slide 43
Slide 43 text
カルーセルは
突き抜けて表示される
Slide 44
Slide 44 text
カルーセルは突き抜けて表示される
● sectionにはcontentInsets設定できる
が、カルーセルは突き抜けて表示され
る
● 両サイドに広くマージンをとっている場
合など(例えばiPadでのレイアウト等)に
意図しないレイアウトになることがある
ので、デザイナーと擦り合わせが大事
Slide 45
Slide 45 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 46
Slide 46 text
良かった点
● 実装量が減り、開発効率が向上
○ 複雑なレイアウトを1枚のUICollectionViewで実現でき
るようになったため、実装量が減った
● 見通しが良い
○ セクション毎にレイアウトを実装するので、直感的でわか
りやすい
Slide 47
Slide 47 text
今日お話すること
● Compositional Layouts概要
● クックパッドのiOSアプリにおける活用
● 気をつけたいポイント
● 良かった点
● まとめ
Slide 48
Slide 48 text
まとめ
● Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な
レイアウトも比較的簡単に実装ができる
● クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している
● NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意
● Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現
する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、
コードの見通しも良くなる
Slide 49
Slide 49 text
まとめ
● Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な
レイアウトも比較的簡単に実装ができる
● クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している
● NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意
● Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現
する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、
コードの見通しも良くなる
Slide 50
Slide 50 text
まとめ
● Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な
レイアウトも比較的簡単に実装ができる
● クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している
● NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意
● Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現
する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、
コードの見通しも良くなる
Slide 51
Slide 51 text
まとめ
● Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な
レイアウトも比較的簡単に実装ができる
● クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している
● NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意
● Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現
する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、
コードの見通しも良くなる
Slide 52
Slide 52 text
まとめ
● Compositional Layoutsはセクションごとにレイアウトを組むことができ、複雑な
レイアウトも比較的簡単に実装ができる
● クックパッドのiOSアプリでは様々なUIをCompositional Layoutsで実装している
● NSCollectionLayoutDimension.estimated+カルーセルの組み合わせや、カ
ルーセルが突き抜けて表示される点には要注意
● Compositional Layoutsを用いることで、UIKitを使った複雑なレイアウトを実現
する際、既存の方法に比べて実装量が減るため開発効率が向上するほか、
コードの見通しも良くなる
Slide 53
Slide 53 text
参考資料
● サンプルコード
○ https://github.com/muchan611/compositional-layouts-sample
● Compositional LayoutとDiffable Data Sourceを使ってiOSアプリのつく
れぽ詳細画面を実装する
○ https://techlife.cookpad.com/entry/2020/12/24/130000
Slide 54
Slide 54 text
ご静聴ありがとうございました😌