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
UICollectionViewを使って商品一覧を改善する
Search
Taku Okawa
April 28, 2014
Programming
0
6.9k
UICollectionViewを使って商品一覧を改善する
slides from my talk at
http://eventdots.jp/event/47442
Taku Okawa
April 28, 2014
Tweet
Share
More Decks by Taku Okawa
See All by Taku Okawa
Short Intro to Elm concepts
t4ku
0
170
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.5k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
110
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
460
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
110
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
670
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
200
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
What's new in Spring Modulith?
olivergierke
1
140
Devoxx BE - Local Development in the AI Era
kdubois
0
120
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Gamification - CAS2011
davidbonilla
81
5.5k
For a Future-Friendly Web
brad_frost
180
9.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Why Our Code Smells
bkeepers
PRO
339
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Building Adaptive Systems
keathley
43
2.8k
BBQ
matthewcrist
89
9.8k
Transcript
UICollectionViewを使って 商品一覧を改善する (BUYMAアプリ) 株式会社エニグモ シニアエンジニア 大川 琢
BUYMA(バイマ)は、世界105カ国に在住する 約5万人のパーソナルショッパーから 世界中の魅力的な商品をお得に購入できる、 会員数170万人のこれまでにない 新しいソーシャル・ショッピング・サイトです。 BUYMAとは?
None
BUYMAアプリ作った経緯 • 近年のスマートフォンのアクセス率の増加 • 中でも若年層の割合が増加 • アプリを作ってほしいというユーザーからの要望 • オーガニック流入以外の会員獲得
BUYMAアプリのコンセプト • 趣向にあった商品との出会い • 好きな商品群を気軽にチェックできる • 旬な商品を把握できる • 商品をリアルに感じさせるUI
None
よい反響もありつつ
リリース後に頂いた改善要望の内訳
None
None
None
None
要約 画像でかすぎ!!
とりあえず画像が大きいというのもあるが、
BUYMA固有の課題
同一モデルの商品
Webサイト(スマホ用)
Webサイト(スマホ用) 商品自体は同じ!
Webサイト(スマホ用) スクロール疲れ
アプリになると
よりしんどくなる感 じ。。
もうちょっと一覧でみたい。 とはいえ、大きな画像でもみたい。
改善スプリント開始
テーブルビュー グリッドビュー 検索結果一覧で、二種類のビューで見れるようにする。
スクロールポジション(どこまで見たか)の 保持、割と重要!
実装パターン
UITableView UICollectionView
UITableView UICollectionView フェードインで遷移 contentOffset同期
DEMO
問題はないが、、、
問題はないが、、、 アイテムがどこに行ったかという、 キュー(手がかかり)がない
問題はないが、、、 アイテムがどこに行ったかという、 キュー(手がかかり)がない 2つViewを保持することへの(プログラ マ的)抵抗感
UICollectionView
• iOS6で導入されたUIKitのクラス • 簡単に言うと、レイアウトをカスタマイ ズできるUITableView
応用例
objc.io - Custom CollectionView Layouts http://www.objc.io/issue-3/collection-view-layouts.html
iOS6-Playground https://github.com/brianpartridge/iOS6-Playground
Matt Thompson
今回は規則的に(リニアに)セルを並べ るだけなのでもっと地味に使う
UITableView UICollectionView
UICollectionFlowLayout UICollectionFlowLayout UICollectionView CollectionViewLay out
UICollectionFlowLayout UICollectionFlowLayout UICollectionView CollectionViewLay out プロパティを変更するだけで レイアウトが変更できる -(void)setCollectionViewLayout animated:(BOOL)animated
DEMO
None
None
None
ハマりポイント
セル自体のレイアウトは変更してくれる けど、グリッド↔テーブルでセルの変更 はしてくれない。
テーブルビュー グリッドビュー TableLayoutCell GridLayoutCell
セル自体のレイアウトは変更してくれる けど、グリッド↔テーブルでセルの変更 はしてくれない。 無理やりreloadDataすると、アニメーションがゴ ニョっとしてしまう。。。
じゃあ、ひとつのセルで両方のレイアウト に使用するか。。。
None
ヘッダーはなしで ボタンは縦に配置 価格のみ表示
AutoLayoutだけでは厳しい
レイアウト切替時に、セル内部もアニ メーションしたい。が、
セル自体の変更やアニメーションを行う delegateやサブクラスはない...
もう一回よく考えてみる
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES
UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140,
140) frame( 20,520, 320,420)
UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140,
140) frame( 20,520, 320,420) 2つのframe間をア ニメーション
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
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)NO
UICollectionFlowLayout UICollectionFlowLayout UICollectionView - (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)YES frame( 10,10, 140,
140) frame( 20,520, 320,420) 一気に切り替わる
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)
frameの変更をアニメーション?
古くて新しいUIView animation
None
DEMO
おまけ
Revealとてもよい
まとめ
• APIとの戦い → とりあえずWWDCセッションビデオみるの 重要。 • 困ったら基本に戻る/発想変えてみる(なんとなくフレーム ワーク内の動きを想像してみる) • 今回は試してないけどViewController
Transition API(iOS 7)でもいけるかも • 日頃の研鑽大事
エニグモでは一緒にBUYMAを盛り上げてくれるエ ンジニアを募集中です!
ご清聴ありがとうございました!!