More Related Content
PDF
PDF
モバイルHTML5サイトでの写真アップロードの最適化と業務アプリへの適用 
PPTX
ダメダメだった過去といい感じな今のチームの話 
PPTX
【WCAN 2015 spring】ワクワクドリブンエンジニアリング_公開版 
PDF
PDF
PDF
Aqua ion press_tech_20121116_publish 
PDF
サービスリニューアルしてわかったRailsのReactとの付き合い方 Similar to 20160520_ios
PDF
DeNA Creative Seminar #2 に行ってきた ![[AC08] 新世代のアーキテクチャに移行せよ。富士フイルムの事例に学ぶ、クラウドネイティブソリューションのビジョンと設計](https://cdn.slidesharecdn.com/ss_thumbnails/ac08-170602093745-thumbnail.jpg?width=640&height=640&fit=bounds)
PDF
[AC08] 新世代のアーキテクチャに移行せよ。富士フイルムの事例に学ぶ、クラウドネイティブソリューションのビジョンと設計 
PDF
ARコンテンツ作成勉強会：C#ではじめようOpenCV(カラートラッキング編) 
PDF
PDF
_WEB の作業が楽になるテクニック総まとめ 第7回 
PDF
スタートアップ向け！1人日でできるサービスの高速化方法と成果 
PDF
Recently uploaded
PDF
3位_ Micromaterials_愛知学院大学.pdf----------- ![【会社紹介資料】株式会社カンゲンエージェント [ 2026/01 公開 ].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/202501ver-260122081900-e7a475ff-thumbnail.jpg?width=640&height=640&fit=bounds)
PDF
【会社紹介資料】株式会社カンゲンエージェント [ 2026/01 公開 ].pdf 
PDF
【第7章】第3層：風（業務改革）｜地方中小企業向け-CX風林火山 実践ガイド-BSC理論×スタートアップサイエンス 
PDF
ISACA CISM and CISA Study memo - Japanese version in 2026 
PDF
3位【株式会社ローソン】三万日坊主_京都芸術大学 (1).pdf-------- 
PDF
EXPERTGARDEN_経営層の皆さま向け資料.pdfEXPERTGARDEN_経営層の皆さま向け資料.pdf 
PDF
4位_低燃費ぺあ_東北学院大学.pdf--------------------- 
PDF
2位【株式会社ローソン】チームわさび（社会６班）＿大和大学 (1).pdf------------- 
PDF
1位_自然組.inc_東京理科大学.pdf------------------- 
PDF
1位_自然組.inc_東京理科大学.pdf------------------- ![1位[ローソン]オオクワ型＿成城大学----------------------](https://cdn.slidesharecdn.com/ss_thumbnails/1-260120025741-59d1b2e9-thumbnail.jpg?width=640&height=640&fit=bounds)
PDF
1位[ローソン]オオクワ型＿成城大学---------------------- 
PDF
5位【株式会社ローソン】げきアツこ_高崎経済大学 (1).pdf-------- 
PDF
5位_ラテン_成城大学.pdf------------------------- 
PDF
chouhouobuse_202601slide_obusetown_nagano.pdf 
PDF
令和８年度（2026年）令和８年度税制改正大綱速報ポイント解説 要点をまとめて 税理士法人ゆびすい 
PDF
4位【株式会社ローソン様_チームA.S_産業能率大学】 (1).pdf----- 
PDF
2位_ファイヤーサンダーバード_東京理科大学.pdf-------------- 
PDF
【採用ピッチ資料】ランド・ジャパンの未来の仲間たちへ_2026年改訂版資料.pdf 20160520_ios
- 1.
- 2.
- 3.
- 4.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
SDWebImageを使う
SDWebImageManager *imageManager =[SDWebImageManager sharedManager];
[imageManager.imageCache queryDiskCacheForKey:url
done:^(UIImage *image, SDImageCacheType cacheType) {
if (image) {
self.image = image;
} else {
[self sd_setImageWithURL:url
placeholderImage:placeholderImage
options:1
completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (!error) {
self.image = image;
} else {
self.image = placeholderImage;
}
}];
}}];
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
awakeFromNibでCellのサイズ指定
- (void)awakeFromNib {
[superawakeFromNib];
self.itemSize = CGSizeMake(“CellのWidth”, “CellのHeight”);
self.minimumLineSpacing = 10;
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
CGFloat horizontalInset = ([UIScreen mainScreen].bounds.size.width - width) / 2;
self.sectionInset = UIEdgeInsetsMake(0, horizontalInset, 0, horizontalInset);
}
※section.topとsection.buttonの値は0
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
Editor's Notes
- #2 こんばんは、
- #4 初めまして、スペースマーケットエンジニアの玉川と申します
キャリアとしては新卒でWeb系SIerの会社に入り、2年半ほど働いて2015年の11月にスペースマーケットにジョインしました。社会人4年目です。
- #5 では、本題に戻りまして。スペースマーケットはWebだけではなくアプリも存在します
- #6 こちらですね。iOSのアプリのみ現在提供しております。iOSアプリなのですが、WatchやiPadにも対応しております。
- #7 少し時間をさかのぼりまして、私がジョインする前2015年11月までのアプリの状況というのは、「アプリは世に出ていた」「グッドデザイン賞を受賞してた」「バグの監視するものがなかった」といった状況でした
- #8 そして、私がジョインしてから2015年11月以降に私がやったこととしては、「Fabricの導入」「検索結果の追加機能実装」「画像読み込みの高速化」「UIの改善(リニューアル)」「ASOの最適化」等々大きめの改修から、雑用まで行いました。
- #10 「画像で魅せる開発現場について」とありますが、
- #11 画像で魅せるとは何だということで、
- #12 本日は先ほど述べた「画像読み込みの高速化」「UIの改善」の2点を中心に
今日から使えて覚えておくと便利なことや、実際にやってみたことをお話しようと思います。
- #13 まず、画像読み込みの高速化についてお話しします
- #14 画像読み込みの高速化とは何なのかといいますと、
- #15 まずこちらのムービーを見て欲しいのですが、
これは少し前のアプリのトップ画面をムービーにしたのですが、見て分かる通り
- #16 なぜ読み込みがこんなにも遅いのかというと、「読み込むスピードとスクロールのスピードに追いついていない」という実装上の問題点と「画像が表示されるまでの時間があるので待たされている気分になる」のユーザーの感じ方の問題の2点があります。それが、画像の読み込みの高速化を行うことによって、、
- #17 まずこちらのムービーを見て欲しいのですが、
これは少し前のアプリのトップ画面をムービーにしたのですが、見て分かる通り
- #19 現在、スペースマーケットのアプリで使用している画像というのはサイズがとても大きいのですが、WebPなどを使っていないためリサイズして表示しています。さらに、スクロールを制御していなかったので読み込みとスクロールがぶつかってしまうという現象が起きていました。
- #20 そこで、アプリならではのやり方といいますか、最適化するために
- #21 ライブラリであるSDWebImageを使い倒すことにしました。SDWebImageといえばWeb画像ローダーや画像キャッシュ等で有名なライブラリです。
- #22 通常ではキャッシュにイメージがあればそれを使い、エラーが起きた時にはダミーデータを使うという一般的なメソッドなのですが、
- #23 このキャッシュがない時に表示する画像が大きくて表示までに遅くなってしまうということがありました。
- #24 私がやりたいこととしては２点のみです。「画像を事前読み込んで表示までの時間を短縮したい」そして、「ユーザーのストレスにならない動作を提供したい」この2点です。では、実際にこの2つを網羅するために何をやったのかといいますと
- #25 ポイントは2つです。「画像を事前読み込みを行う」「UICollectionViewCellのリユースを使う」の2つです。かなり簡単なことでした。明日から使えるかもしれませんが、わかりません。
- #26 まず1つ目
- #27 画像を事前読み込み。とは何だ
- #28 SDWebImagePrefetcherというSDWebImageのライブラリにあるクラスを使います。この中に事前読み込みのメソッドが入ってます。
- #29 ちょっとデモを見てみてください
- #30 ポイントとしては、表示したい画像の配列をSDWebImageのメソッドに渡すことによって画像をダウンロードし、表示のラグを減らすことが出来るということでした。
- #31 実際に使ってみる際には、ものすごく簡単です、
- #32 SDWebImageはObjective-Cのライブラリなので、
objective-cではheader.hに、SwiftではBridge-Header.hに追記します
- #33 記載のように、SDWebImagePrefetcherのメソッドを読んで、一旦キャンセルして、読み込みたい配列を渡してあげるだけです。この書き方だけではなく、blockでダウンロードが終わった情報も受け取るメソッドも用意されています
- #34 簡単な活用例としましては、記載の感じで終わります。
ただAPIから取得したImageのURLを配列にして渡したいという時は通信成功時に配列を作って渡してあげるといいかもしれません。
- #35 Swiftの場合でも同様ですね。これだけではパッとしないのですが、こんな感じいけます。やっぱりSwiftはいいですね。見やすいですね。で、これで事前読み込みが出来たので高速化できたかなと思うのですが、まだです。
- #36 もう一つのポイントを覚えていますでしょうか
- #37 collectionViewCellの内容を構築している時に、同じ画像が表示されてしまうという現象が起きるかもしれません。その時に有効なのがリユースです。UICollectionViewCell,またはUITableViewCellでもいいのですが、リユースメソッドが提供されているので使っていきます。
- #38 ご存知の方も多いと思いますが、
UICollectionViewCellやUITableViewCellにはprepareForReuseというメソッドが用意されています。これを使います
- #39 画像が読み込んでいる状態であれば、そのロードをキャンセルします。もしくはimageViewをnilにしてしまうというのも一つの手段かなとも思います。これでCellの画像が違うという問題は解消されます。
- #40 Swiftも同様ですね。いいですね。やっぱり
- #41 今ご紹介した2つのポイントを使うことによって画像が大きいままでも読み込みを早くすることに成功しました。けどやっぱり通信環境とかを考えるとWebPとかを使って適材適所なやり方を今後やっていこうかなとひっそり考えております。
- #43 UIの改善ということで、4月にアプリのリニューアルを行ったのですが、そのことについて少しお話ししたいなと思います。
- #45 アプリを見ていただいた方ならばご存知かと思いますが、スペースマーケットのアプリは結構複雑です。パワープレイしている部分もあります。
- #46 まずこちらのムービーを見て欲しいのですが、
これは少し前のアプリのトップ画面をムービーにしたのですが、見て分かる通り
- #47 実は、これ全部CollectionViewです。まぁ当たり前といえば当たり前ですよね。
- #48 表示したいことが多いのでSectionやHeader、Footerによって、表示の使い分けを行っております。例えば
- #49 こちらはスペースの情報を表示するCellだったり
- #50 こちらはスペースの管理を行うオーナーの情報
- #51 スペースの場所を表す、マップ画像もImageに変換して表示しています
- #52 こちらはスペースの写真を3枚だけ見せて、「すべての写真を見る」で全て見ることができます
- #53 などなどこれだけではなく、いろいろな用途に分けて使い分けております。
つまり、
- #55 そんなUICollectionViewを使い倒しているアプリなのに、4月に大幅なアップデートを行いました
- #57 まずこちらのムービーを見て欲しいのですが、
これは少し前のアプリのトップ画面をムービーにしたのですが、見て分かる通り
- #59 横にスクロールが出来ますよというのを分からせるUIを実現したいというデザイナーさんの要望もあります
- #60 左右のCellをチラ見せというのは、横にスクロールが出来ますよというのを分からせるUIを実現したいというデザイナーさんの要望があり、画面いっぱいにCellを表示するのではなく、画面サイズから決められた、「前のCell」情報と「次のCell」情報を表示したいという要望もありましたし、さらには
- #61 表示するcellは常に中央に表示したい。ページングしたいと言った要望がありました。軽く頭抱えました。頭抱えたという原因が
- #62 UICollectionViewFlowLayoutを使う出番がやってきたからです。正直いうと、これとても苦手というかよく分からないなぁっていうのが印象です。
- #63 UICollectionViewFlowLayoutについてですが、簡単に言うとCollectionViewのレイアウト処理を行うことができるクラスです。サブクラスを作ってオーバーライドしてしまえば、いろいろなレイアウトに対応できます。苦手ですが
- #64 そこで、横スクロールが可能なUICollectionViewについてのTipsを少しだけお話ししたいと思います。
- #65 まず横スクロールできるCellを作るためにXibファイルにCellを置いて、全面にCollectionViewを配置して、さらにCustomCollectionViewFlowLayoutのクラス定義します。
- #66 UICollectionViewFlowLayoutクラスで何が定義できるのかというと、CollectionViewに表示するCellの位置を決められます。itemSizeでCellの全体のサイズを決めて、画面X座標0からの距離がSection.left、CellとCellの間のスペースをminimumLineSpacingとします。他にもsection.top,section.bottomがあるのですが割愛します
- #67 次に、CustomFlowLayoutのファイルにコードを書いていきます。awakeFromNibクラスにCellの情報を書いていきます。itemSizeやminimumLineSpacing,さらにどちらにスクロールさせるのかを決めた後に、Cellの外枠であるSectionInsetを決めます。
- #70 一番の鬼門だと思っていたCellの中央表示についてです。
- #71 Objective-Cのコードでゴメンなさい。ユーザがスクロールして手を離した瞬間にこのメソッドが呼ばれます。そして、どの位置にCellを表示するのかということを計算してくれます。メソッドの中では、画面のサイズ・Cellのサイズをベースにして、どの位置で停止すればいいかということを計算します。
- #72 メソッド内を簡単に説明すると手を離した瞬間にスクロールの速さから推測される停止位置が引数で入ってきて、さらに１秒あたりの移動距離も入ってくるというスピード狂のようなメソッドです。デバッグが結構大変でした
それを元に、returnでスクロールの停止位置を計算し、表示するということをすれば中央に表示することができます。
- #74 SDWebImageについては、ライブラリの仕様書とかコメントアウトを見るといろいろ構想が浮かび実装方法がいくつか出てくるので読んでみると楽しい気分になれます。
ただ画像などUIにまつわるものを極めようとするとほぼ100%の確率で時間が無くなるので取捨選択は大事です。納期も大事。
アプリ開発者だと、まぁこれでいっかーっていう妥協点を無くすことが僕の目標なのでユーザにストレスを与える機能は改善していきたいと思います
![SDWebImageを使う
SDWebImageManager *imageManager = [SDWebImageManager sharedManager];
[imageManager.imageCache queryDiskCacheForKey:url
done:^(UIImage *image, SDImageCacheType cacheType) {
if (image) {
self.image = image;
} else {
[self sd_setImageWithURL:url
placeholderImage:placeholderImage
options:1
completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (!error) {
self.image = image;
} else {
self.image = placeholderImage;
}
}];
}}];](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-21-320.jpg)
![SDWebImagePrefetcher.h
[Objective-C]
[[SDWebImagePrefetcher sharedImagePrefetcher] cancelPrefetching];
[[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:images];
[Swift]
SDWebImagePrefetcher.sharedImagePrefetcher().cancelPrefetching()
SDWebImagePrefetcher.sharedImagePrefetcher().prefetchURLs(images)](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-32-320.jpg)
![活用例：Objective-C
[Objective-C]
- (void)prefetchImages:(NSArray*)images {
[[SDWebImagePrefetcher sharedImagePrefetcher] cancelPrefetching];
[[SDWebImagePrefetcher sharedImagePrefetcher] prefetchURLs:images];
}](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-33-320.jpg)
![活用例：Swift
[Swift]
func prefetchImages(images:[String]) {
SDWebImagePrefetcher.sharedImagePrefetcher().cancelPrefetching()
SDWebImagePrefetcher.sharedImagePrefetcher().prefetchURLs(images)
}](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-34-320.jpg)
![UICollectionViewのリユース
[Objective-C]
- (void)prepareForReuse
[Swift]
override func prepareForReuse()](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-37-320.jpg)
![UICollectionViewのリユース
[Objective-C]
- (void)prepareForReuse {
[super prepareForReuse];
[self.imageView sd_cancelCurrentImageLoad];
}](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-38-320.jpg)
![UICollectionViewのリユース
[Swift]
override func prepareForReuse() {
[super prepareForReuse];
imageView.sd_cancelCurrentImageLoad()
}](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-39-320.jpg)
![awakeFromNibでCellのサイズ指定
- (void)awakeFromNib {
[super awakeFromNib];
self.itemSize = CGSizeMake(“CellのWidth”, “CellのHeight”);
self.minimumLineSpacing = 10;
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
CGFloat horizontalInset = ([UIScreen mainScreen].bounds.size.width - width) / 2;
self.sectionInset = UIEdgeInsetsMake(0, horizontalInset, 0, horizontalInset);
}
※section.topとsection.buttonの値は0](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-66-320.jpg)
![UICollectionViewFlowLayout
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
withScrollingVelocity:(CGPoint)velocity
{
CGFloat offsetAdjustment = MAXFLOAT;
CGFloat horizontalOffset = proposedContentOffset.x + (self.collectionView.frame.size.width - width) / 2;
CGRect targetRect = CGRectMake(proposedContentOffset.x,
0,
self.collectionView.bounds.size.width,
self.collectionView.bounds.size.height);
NSArray *array = [super layoutAttributesForElementsInRect:targetRect];
for (UICollectionViewLayoutAttributes *layoutAttributes in array) {
CGFloat itemOffset = layoutAttributes.frame.origin.x;
if (ABS(itemOffset - horizontalOffset) < ABS(offsetAdjustment)) {
offsetAdjustment = itemOffset - horizontalOffset;
}
}
return CGPointMake(proposedContentOffset.x + offsetAdjustment, proposedContentOffset.y);
}](https://image.slidesharecdn.com/20160520hikalabios-160524074649/85/20160520_ios-70-320.jpg)
