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
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
7.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
iOSでSVG画像を扱う
kishikawakatsumi
0
160
Catch Up: Go Style Guide Update
andpad
0
240
理論と実務のギャップを超える
eycjur
0
170
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
1
140
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
410
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
5.9k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
AI Agent 時代的開發者生存指南
eddie
4
2.1k
contribution to astral-sh/uv
shunsock
0
480
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
Building Applications with DynamoDB
mza
96
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Fireside Chat
paigeccino
40
3.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
4 Signs Your Business is Dying
shpigford
185
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
How GitHub (no longer) Works
holman
315
140k
GitHub's CSS Performance
jonrohan
1032
470k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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を盛り上げてくれるエ ンジニアを募集中です!
ご清聴ありがとうございました!!