ロード時にユーザーを待たせないための施策をまとめました

1. ユーザーを待たせないために
できること
今井 智章
4/15/2015 #potatotips16

2. 株式会社メルカリ Android エンジニア
!
!
!
!
!
!
最近はUS展開でのアプリ開発に従事
自己紹介
2
twitter: tomoaki_imai
github: tomoima525
qiita: tomoima525
フリマアプリの機能開発

3. 今日は個人で作った
アプリを巡る話をします

4. 自分のツイートをカレンダー
形式でふりかえるアプリ
TwitCal
Googleplay storeで TwitCal で検索

5. Features
• カレンダーで自分のツイート
がたどれる
• 検索、表示がさくさく
• (ほぼ)マテリアル
• layout, icon, animation etc.
• シンプル

6. Twitter API
Manager
Architecture
Twitter kit
Twitter Loader
Manager
(AsyncTaskLoader)
Activity
CustomView
Fragment
各Managerからは
Eventbusで通知
DB
Tweet, fav, RT etc.
Twitter Search
Manager
Twitter
insert
select
callback
Libraries
Twitter kit
Events
Joda-Time Android
Crashlytics etc.
queries

7. 実装上の課題
初回起動時のロードタイム
• Twitter Apiの制約
- 一度の上限200件, 全体で3200件
• 16回の通信、都度DBへのロード
SQLiteを利用したinsert time:
25578ms

8. ユーザーを待たせないための対応
① 高速なDBに乗り換える
② ロード途中でViewを描画
③ Coach Markの活用

9. ①高速なDBに乗り換える
Realmを採用
- 今hotなmobile向けDB
- 書きやすくシンプルなApi
- 速い
Realm webサイトより

10. 計測してみた
SQL insert 25587 ms
Realm insert 16906 ms
SQL bulk insert 15855ms
それぞれTwitter Apiのオーバーヘッドを含む
条件
- 3200件をTwitter Api経由で取得、DB insert
- Wifi (100Mbps)
- 端末はOne plus one(Kitkat,Qualcomm Snapdragon2.5GHz 4コア)

11. ②ロード途中でViewを描画
•ユーザーを待たせたくない
→ 操作が効かないダイアログなんてもっての外
!
•必要最低限が表示されていればOKなのでは？
→ 400件受信した時点でLoaderManagerから
EventBusをfireし、Viewの描画を開始

12. lot = 16として再帰的に
getMultipleTweet()を実行
Before: TwitterApiManager.java

13. onProcessのcallbackを追加
After: TwitterApiManager.java

14. TweetLoaderManager.java
TwitterActivity.java
最初の400件だけ表示してViewを更
新。操作も可能に。

15. ③Coach Markの活用
400件の受信でも2-4秒はユーザーを待たせてしまう
→Coach Markでユーザーに操作を慣れてもらう
※Coach Markとは？
初回登録ユーザーに対して行う操作ガイドで利用されるフォー
カスやアニメーション

16. Coach Markの活用
動作に関するガイド
画面遷移に関するガイド
裏ではツイートデータをロードしている

17. Wrap Up
25000ms 16000ms 3000ms 0ms!!!!
①高速なDBへの乗り換え
SQLite -> Realm
Selectも速い
②ロード途中からView描画
最初に必要なデータで
描画を開始する
③CoachMarkの活用
ガイドによってユーザー
に慣れてもらう効果も
ロード時にユーザーを待たせないためにできること