ユーザーを待たせないためにできること

今井 智章 4/15/2015 #potatotips16

株式会社メルカリ Android エンジニア

!

!

!

!

!

!

最近はUS展開でのアプリ開発に従事

自己紹介

2

twitter: tomoaki_imai github: tomoima525 qiita: tomoima525

フリマアプリの機能開発

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

自分のツイートをカレンダー形式でふりかえるアプリ

TwitCal

Googleplay storeで’TwitCal’で検索

Features

• カレンダーで自分のツイートがたどれる

• 検索、表示がさくさく

• (ほぼ)マテリアル • layout, icon, animation etc.

• シンプル

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

実装上の課題

初回起動時のロードタイム

• Twitter Apiの制約

- 一度の上限200件, 全体で3200件

• 16回の通信、都度DBへのロード

SQLiteを利用したinsert time: 25578ms

ユーザーを待たせないための対応

① 高速なDBに乗り換える

② ロード途中でViewを描画

③ Coach Markの活用

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

Realm webサイトより

計測してみた

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コア)

②ロード途中でViewを描画

•ユーザーを待たせたくない → 操作が効かないダイアログなんてもっての外 !

•必要最低限が表示されていればOKなのでは？

→ 400件受信した時点でLoaderManagerから

EventBusをfireし、Viewの描画を開始

lot = 16として再帰的に getMultipleTweet()を実行

Before: TwitterApiManager.java

onProcessのcallbackを追加

After: TwitterApiManager.java

TweetLoaderManager.java

TwitterActivity.java

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

③Coach Markの活用

400件の受信でも2-4秒はユーザーを待たせてしまう →Coach Markでユーザーに操作を慣れてもらう

※Coach Markとは？ 初回登録ユーザーに対して行う操作ガイドで利用されるフォーカスやアニメーション

Coach Markの活用

動作に関するガイド

画面遷移に関するガイド

裏ではツイートデータをロードしている

Wrap Up

~25000ms ~16000ms ~3000ms ~0ms!!!!

①高速なDBへの乗り換え SQLite -> Realm Selectも速い

②ロード途中からView描画 最初に必要なデータで 描画を開始する

③CoachMarkの活用 ガイドによってユーザー に慣れてもらう効果も

ロード時にユーザーを待たせないためにできること