【第一回 Meet Up】 React Native Tech Blogで登壇した資料です。 SnapmartにおけるCameraRollから写真の複数枚アップロードの実装について、話しました。

1. Snapmartにおける
CameraRollから写真の
複数枚アップロードの実装
スナップマート株式会社 取締役CTO
星 直史
16545027 Photo by Fast&Slow

2. 自己紹介
新卒入社したSIerでC#, Javaを学んだ後にピクスタ株式会社に 2012年に入社。
写真素材・ストックフォト「 PIXTA」の改善改修に従事。その後、開発リーダー、マネージャーを経て、 2018年
1月より開発部長に就任。
2020年1月スナップマート株式会社 取締役CTO就任。
星直史
@NaoshiHoshi

3. 自己紹介
3月1日(日)
技術書典 Day2
で頒布します！！
サンプルコードで作りながら学ぶ
ReactNative 実践入門
既存Webサービスをスマホに対応させ、継続し
て提供するにはどうしたらいいかで悩んでいま
せんか？「React Native」によるスマホアプリ開
発を試しながら、悩み解消のヒントになることを
目指す一冊

4. 自己紹介
3月1日(日)
技術書典 Day2
で頒布します！！
1. スマホアプリ開発の全体像
2. Webエンジニアのための技術選定
3. 環境構築
4. Reactのおさらい
5. ReactNativeによるUI構築
6. ルーティングとナビゲーション
7. State管理
8. API通信
9. Push通知
10. ディープリンキング
11. アプリのリリース

5. 1. 仕様の紹介
2. 試してみたこと & 問題点
3. 実装したこと
4. 聞きたいこと
今日話すこと

6. 1. 仕様の紹介
2. 試してみたこと & 問題点
3. 実装したこと
4. 聞きたいこと
今日話すこと

7. 仕様の紹介

8. 仕様の紹介
1. BottomNavigationの出品アイコンをタッ
プするとスクリーンの表示
2. カメラロール内の以下の項目を取得し表
示(iOSの場合)
a. 最近の項目
b. お気に入り
c. 存在するアルバム全て

9. 仕様の紹介
1. フォルダ選択画面で選択したアルバム内
の全ての写真を表示
2. 表示される写真は撮影日の降順
3. 複数枚選択し、アップロード

10. 1. 仕様の紹介
2. 試してみたこと & 問題点
3. 実装したこと
4. 聞きたいこと
今日話すこと

11. 試してみたこと & 問題点
● アルバム選択画面を削り、
直近の1万件の写真を表示
● 直近の10万件の写真を表示
● ImagePickerを使う

12. 試してみたこと & 問題点
● アルバム選択画面を削り、
直近の1万件の写真を表示
● 直近の10万件の写真を表示
● ImagePickerを使う

13. フォルダ機能削除、表示1万件問題
試したこと & 問題点

14. フォルダ機能削除、表示1万件問題
● 機能縮小(仕様変更)により既存ユー
ザーが混乱😢
○ 問い合わせ激増
○ アップロード率低下
● カメラロールに1万件以上保存されてい
るユーザー多数😢
○ 問い合わせ激増
○ アップロード率低下
試したこと & 問題点

15. 試してみたこと & 問題点
● アルバム選択画面を削り、
直近の1万件の写真を表示
● 直近の10万件の写真を表示
● ImagePickerを使う

16. 表示10万件問題
● 一旦表示件数を10万件にしてみた😇
● 10万件の写真のソート処理時間問題
○ ソートしている間は画面は真っ白
○ 端末がめっちゃ熱くなる🔥
○ 問い合わせ激増
○ アップロード率低下
試したこと & 問題点

17. 試してみたこと & 問題点
● アルバム選択画面を削り、
直近の1万件の写真を表示
● 直近の10万件の写真を表示
● ImagePickerを使う

18. ImagePickerを使う
https://docs.expo.io/v
ersions/latest/sdk/ima
gepicker/
試したこと & 問題点

19. ImagePickerを使う
● おっ、ええやん！！
● 写真を複数選択できない
○ 社内検討の結果お蔵入り😢
試したこと & 問題点

20. 1. 仕様の紹介
2. 試してみたこと & 問題点
3. 実装したこと
4. 聞きたいこと
今日話すこと

21. 実装したこと
● アルバム選択機能を実装
● CameraRollで頑張る
http://blog.naoshihoshi.com/entry/2020/02/18/123000#%E6
%82%A9%E3%82%93%E3%81%A0%E6%9C%AB%E3%8
1%AE%E5%AE%9F%E8%A3%85

22. 実装したこと
● CameraRollで写真をブン回す💪
● アルバム選択機能を実装
○ アルバムだけ抽出するAPIは今のとこ
ろ存在しない
■ 10万件の写真をループして
group_name(アルバム名)を取得し
てキャッシュに乗せる

23. 実装したこと
● CameraRollはソートはできないけど、
group_nameの指定はできる
● 登録枚数が少ないアルバムを選択する
と、写真の表示速度が高速化される(よう
に感じる)
● 依然として「最近の項目」を選択される
と、処理速度遅い😇

24. 1. 仕様の紹介
2. 試してみたこと & 問題点
3. 実装したこと
4. お聞きしたいこと
今日話すこと

25. お聞きしたいこと
視聴している皆様の中に、
写真複数アップロード問題を
解決した方はいらっしゃいますか？
いらっしゃいましたらDMなどで聞かせてください 👂

26. 可能性に光をあてる。
毎日にきっかけを作っていく
We're hiring!
7336449 Photo by Sunny studio