UICollectionViewを使って商品一覧を改善する

slides from my talk at http://eventdots.jp/event/47442

Transcript

1. UICollectionViewを使って 商品一覧を改善する (BUYMAアプリ) 株式会社エニグモ シニアエンジニア 大川　琢
2. BUYMA(バイマ)は、世界105カ国に在住する 約5万人のパーソナルショッパーから 世界中の魅力的な商品をお得に購入できる、 会員数170万人のこれまでにない 新しいソーシャル・ショッピング・サイトです。 BUYMAとは?
4. BUYMAアプリ作った経緯 • 近年のスマートフォンのアクセス率の増加 • 中でも若年層の割合が増加 • アプリを作ってほしいというユーザーからの要望 • オーガニック流入以外の会員獲得
5. BUYMAアプリのコンセプト • 趣向にあった商品との出会い • 好きな商品群を気軽にチェックできる • 旬な商品を把握できる • 商品をリアルに感じさせるUI
7. よい反響もありつつ
8. リリース後に頂いた改善要望の内訳
13. 要約 画像でかすぎ!!
14. とりあえず画像が大きいというのもあるが、
15. BUYMA固有の課題
16. 同一モデルの商品
17. Webサイト(スマホ用）
18. Webサイト(スマホ用） 商品自体は同じ!
19. Webサイト(スマホ用） スクロール疲れ
20. アプリになると
21. よりしんどくなる感 じ。。
22. もうちょっと一覧でみたい。 とはいえ、大きな画像でもみたい。
23. 改善スプリント開始
24. テーブルビュー グリッドビュー 検索結果一覧で、二種類のビューで見れるようにする。
25. スクロールポジション(どこまで見たか)の 保持、割と重要!
26. 実装パターン
27. UITableView UICollectionView
28. UITableView UICollectionView フェードインで遷移 contentOffset同期
29. DEMO
30. 問題はないが、、、
31. 問題はないが、、、 アイテムがどこに行ったかという、 キュー(手がかかり)がない
32. 問題はないが、、、 アイテムがどこに行ったかという、 キュー(手がかかり)がない 2つViewを保持することへの(プログラ マ的)抵抗感
33. UICollectionView
34. • iOS6で導入されたUIKitのクラス • 簡単に言うと、レイアウトをカスタマイ ズできるUITableView
35. 応用例
36. objc.io - Custom CollectionView Layouts http://www.objc.io/issue-3/collection-view-layouts.html
37. iOS6-Playground https://github.com/brianpartridge/iOS6-Playground
38. Matt Thompson
39. 今回は規則的に(リニアに）セルを並べ るだけなのでもっと地味に使う
40. UITableView UICollectionView
41. UICollectionFlowLayout UICollectionFlowLayout UICollectionView CollectionViewLay out
42. UICollectionFlowLayout UICollectionFlowLayout UICollectionView CollectionViewLay out プロパティを変更するだけで レイアウトが変更できる -(void)setCollectionViewLayout animated:(BOOL)animated
43. DEMO
47. ハマりポイント
48. セル自体のレイアウトは変更してくれる けど、グリッド↔テーブルでセルの変更 はしてくれない。
49. テーブルビュー グリッドビュー TableLayoutCell GridLayoutCell
50. セル自体のレイアウトは変更してくれる けど、グリッド↔テーブルでセルの変更 はしてくれない。 無理やりreloadDataすると、アニメーションがゴ ニョっとしてしまう。。。
51. じゃあ、ひとつのセルで両方のレイアウト に使用するか。。。
53. ヘッダーはなしで ボタンは縦に配置 価格のみ表示
54. AutoLayoutだけでは厳しい
55. レイアウト切替時に、セル内部もアニ メーションしたい。が、
56. セル自体の変更やアニメーションを行う delegateやサブクラスはない...
57. もう一回よく考えてみる
58. - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated
59. - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES
60. UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140, 140) frame( 20,520, 320,420)
61. UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140, 140) frame( 20,520, 320,420) ２つのframe間をア ニメーション
62. UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140, 140) center alpha hidden translate3D frame( 20,520, 320,420) カスタムのレイアウトを組む 時のdelegateメソッドで返す オブジェクト UICollectionViewLayoutAttributes
63. - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)NO
64. UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140, 140) frame( 20,520, 320,420) 一気に切り替わる
65. UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140, 140) frame( 20,520, 320,420) frameをセットしてる だけっぽい。 cell.frame = CGRectMake(10,10,140,140)
66. frameの変更をアニメーション？
67. 古くて新しいUIView animation
69. DEMO
70. おまけ
71. Revealとてもよい
72. まとめ
73. • APIとの戦い → とりあえずWWDCセッションビデオみるの 重要。 • 困ったら基本に戻る/発想変えてみる(なんとなくフレーム ワーク内の動きを想像してみる) • 今回は試してないけどViewController Transition API(iOS 7)でもいけるかも • 日頃の研鑽大事
74. エニグモでは一緒にBUYMAを盛り上げてくれるエ ンジニアを募集中です！
75. ご清聴ありがとうございました！！