■イベント Sansan Builders Box 2018 https://jp.corp-sansan.com/sbb2018/
■登壇概要 タイトル:英訳だけじゃダメ!Eightグローバル展開のための改善 登壇者:Eight事業部 Global team スマートフォンアプリエンジニア 辰濱 健一
▼Sansan Builders Box https://buildersbox.corp-sansan.com/
英訳だけじゃダメ!Eight のグローバル展開のための改善
View Slide
Sansan Builders Box- 0. About me- 1. Eight のインド展開- 2. インドのインターネット事情- 3. 低速インターネット環境での問題と対応Agenda
ୢᖛ ݈Ұ(Kenichi Tatsuhama) ݄ ࡾॏେֶڭҭֶ෦ใॲཧίʔε ଔۀ ݄ δϟετγεςϜ ೖࣾʢಙౡຊࣾʣJava, C++ 等でのパッケージソフトの開発パフォーマンスチューニング等を経験 ݄ .FUB.P+J స৬ʢಙౡࢢʣiOS / Android / Windows タブレット&スマートフォン向けアプリのネイティブ開発を経験 ݄ 4BOTBOגࣜձࣾస৬ʢਆࢁϥϘۈʣ法⼈向け Sansan / 個⼈向け Eight Android アプリ開発を担当現在は Eight の Global 展開のための開発を担当Eight 事業部 Global Team スマートフォンアプリエンジニア
Sansan 株式会社 神⼭ラボ
徳島県神⼭町
1. Eight のインド展開
Sansan Builders Box2017/11 インド市場に展開1. Eight のインド展開https://jp.corp-sansan.com/news/2017/171122_8932.html https://jp.techcrunch.com/2017/11/22/sansan-eight-india/
Sansan Builders Box1. Eight のインド展開⽇本でそれなりに動いているので英訳をあてたら⼤丈夫!と思ってました。。。
Sansan Builders Box1. Eight のインド展開相次ぐ不具合報告…(しかも、⽇本では全く再現しない)
Sansan Builders Box- アプリのダウンロードが完了しない- なかなか画⾯が切り替わらない- 名刺送信が終わらない- 通信エラーの表⽰が多発1. Eight のインド展開
Sansan Builders Box- Connecting… の表⽰がずっと消えない- アプリを最⼩化するとクラッシュなどなど・・・1. Eight のインド展開
Sansan Builders Box1. Eight のインド展開英訳をあてただけなのになぜ・・・?
Sansan Builders Box1. Eight のインド展開これらの問題の調査&解決のために・・・
Sansan Builders Box1. Eight のインド展開
Sansan Builders Box1. Eight のインド展開• 町中のスマホショップ街(1Fだけ異空間)• メーカー• Oppo• Vivo• Samsung• Android のシェアが9割!
2. インドのインターネット事情
Sansan Builders Box- 3GB/DAY で約 500 円 /⽉( 1.6 JPY / Rs)2. インドのインターネット事情https://www.jio.com/
Sansan Builders Box⽉額240円で・ 42GB データ・電話かけ放題2. インドのインターネット事情https://iphone-mania.jp/news-222377/
Sansan Builders BoxGoogle もかなりインドのインターネット普及に⼒を⼊れている(PWA も新興国がターゲット)2. インドのインターネット事情https://www.blog.google/technology/next-billion-users/google-for-india-2018/
Sansan Builders Box2. インドのインターネット事情インターネット⼈⼝急増中!しかし…
Sansan Builders Box2. インドのインターネット事情https://www.sankeibiz.jp/macro/print/180406/mcb1804060500007-c.htm
Sansan Builders Box2. インドのインターネット事情https://opensignal.com/networks/%E0%A4%AD%E0%A4%BE%E0%A4%B0%E0%A4%A4/jio-%E0%A4%B5%E0%A5%8D%E0%A4%AF%E0%A4%BE%E0%A4%AA%E0%A5%8D%E0%A4%A4%E0%A4%BF• カバー範囲数100mの弱いアンテナを数⽴ている• 町中でも電波にムラがある• 細い回線を⼤勢で取り合い• 通信の瞬断も多い• 移動中は通信が安定しない
Sansan Builders Box2. インドのインターネット事情• 100 MB もあれば、20% ユーザが離脱• 通信単価が⾼かった頃は「無料アプリでも100MBもあれば実質有料だ」と⾔われていたhttps://youtu.be/AdfKNgyT438?t=149༰ྔͷେ͖͍ΞϓϦ DL ࣌ͷ͕େ͖͍
Sansan Builders Box2. インドのインターネット事情「サーバにリクエストしたら、レスポンスが返ってくる」とは限らない!!その考慮が必要なのです・・・
Sansan Builders Box2. インドのインターネット事情なお、そんな環境でもちゃんと動いているアプリはたくさんありました。
3. 低速インターネット環境での問題と対応
Sansan Builders Box- 1. アプリのダウンロードが完了しない- 2. なかなか画⾯が切り替わらない- 3. 画像の送受信に時間が掛かっている- 4. 分析ツール3. 低速インターネット環境での問題と対応
Sansan Builders Box3.1. アプリのダウンロードが完了しない- ݪҼ- 通信が遅い(←現地のインターネット環境の問題)- アプリのバイナリサイズが⼤きい- ରԠ- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)> 画像の圧縮> バイナリ配信時の最適化ˏΠϯυ
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)• ւ֎൛ͰΘΕͳ͍ػೳͷίʔυΛؚΊͳ͍Α͏ʹ͢Δ• Apk Analyzer で分析&対応効果を確認する• ⼿っ取り早くは Build Flavor、まじめにやれば module 分割• 海外版に⽇本語リソース(画像・⽂⾔)を含めない
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)Build > Analyze Apk… ϘτϧωοΫՕॴͷಛఆւ֎൛ͰΘͳ͍ػೳͱͦͷը૾Λւ֎൛όΠφϦʹؚΊͳ͍Α͏ʹ͍ͨ͠ʂ
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)Build Flavor ʹΑΔׂ module ʹΑΔׂ海外版で不要な実装やリソースはここに配置ݮͷޮՌଌఆApk Analyzer Ͱ֬ೝՄೳ
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)resConfigs ͰରԠ͢ΔݴޠΛ໌هͯ͠ɺෆཁͳϦιʔεΛؚΊͳ͍build.gradle
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> 画像の圧縮• jpeg / png ը૾Λ࠷దԽ͢Δ• TinyPNG 等を使って最適化• https://tinypng.com/• WebP ը૾ʹม͢Δ• Android Studio が変換ツールを提供• Android5 で⼀部 WebP が適切に表⽰できない問題があるので要注意ը૾1ຕ͋ͨΓɺे%ͷαΠζݮ
Sansan Builders Box3.1. アプリのダウンロードが完了しない- アプリのバイナリサイズの削減> バイナリ配信時の最適化• App Bundle ܗࣜʹରԠ͢Δ• Google I/O 2018 で発表された形式• その端末に必要なリソースのみ配信される仕組み• 例)xxxhdpi の端末なら、hdpi 等の画像が配信されない• iOS だと App Thinning で同様のことが可能
Sansan Builders Box3.1. アプリのダウンロードが完了しない- ରԠޮՌʢAndroid ΞϓϦʣ- アプリのバイナリサイズの削減> 海外⽤にバイナリを分けて機能整理(Android)> 画像の圧縮> バイナリ配信時の最適化60MB → 20MBʢ66%ݮʣ20MB → 12MBʢ40%ݮʣ12MB → 9MBʢ25%ݮʣ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ݪҼ- 通信が遅い(←現地のインターネット環境の問題)- 通信完了を待って画⾯遷移を⾏っている- ରԠ- 通信処理はバックグラウンドジョブに投げる- 通信完了まで画⾯遷移を待たない(可能な限り)
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖ΔαϯϓϧίʔυAPI ݺͼग़͠
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυ௨৴தɾ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυ௨৴தɾɾ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυ௨৴தɾɾɾ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυ௨৴தɾɾɾʢωοτ͕͘ɺֻ͕͔࣌ؒΔʣ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυޭ࣌ͷίʔϧόοΫʢΑ͏͘ը໘ભҠʣ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ͕ى͖Δαϯϓϧίʔυޭ࣌ͷίʔϧόοΫʢΑ͏͘ը໘ભҠʣ※ΦϑϥΠϯͰͳ͘ɺϨεϙϯε͕ͳ͔ͳ͔ฦͬͯ͜ͳ͍߹ʹ࠶ݱʢΦϑϥΠϯͩͱଈࣦഊ࣌ͷϒϩοΫ͕ݺΕΔʣ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Twitter アプリでは・・・?↑Progress දࣔߘத Tweetʢֻ͚දࣔʣී௨ͷ Tweet- Tweet 直後、即画⾯遷移↓- 送信状況の Progress 表⽰↓- 送信中の Tweet も UI に表⽰
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- LINEアプリでは・・・?ૹ৴தͷ UI ࣗಈͰ࠶ૹྃΦϯϥΠϯʹͳͬͨ- オフラインでメッセージを送信してもUI には送信中として反映する- オンラインになったら⾃動で再送- ユーザが再送する必要はない
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ରԠ- όοΫάϥϯυδϣϒʹ͛ͯଈը໘ભҠʢ UI өʣ- Android ͩͱ WorkManager ͕ศར> https://developer.android.com/topic/libraries/architecture/workmanager/- iOS ͩͱ SwiftQueue Ͱಉ༷ͷ͜ͱ͕Ͱ͖ͦ͏> https://github.com/lucas34/SwiftQueue
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- WorkManager での通信処理࣮ߦ݅ɿΦϯϥΠϯͷͱ͖他には、ɾॆిதɾWi-Fi ଓ࣌などが指定可能
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- WorkManager での通信処理ύϥϝʔλΛ͢
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- WorkManager での通信処理ύϥϝʔλΛऔಘͯ͠ॲཧΛ࣮ߦ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- WorkManager での通信処理ޭͨ͠Βऴࣦྃഊͨ͠ΒϦτϥΠ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- WorkManager での通信処理実⾏Worker Λ࡞ͬͯɺWorkManager ʹ enqueue
Sansan Builders Box3.2. なかなか画⾯が切り替わらないϝϦοτ σϝϦοτ௨৴݁ՌΛͭ • 実装が容易• ⽇本国内だとほぼこれでOK• 通信が遅い場合(特に海外)に UX が悪い௨৴݁ՌΛͨͳ͍ʢόοΫάϥϯυδϣϒ࣮ߦʣ• 通信環境に左右されないUX を提供できる• 送信未完了状態の考慮(表⽰・編集)が必要
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Eight (海外版)での適⽤箇所
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Eight (海外版)での適⽤箇所ࡱӨ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Eight (海外版)での適⽤箇所ଈը໘ભҠࡱӨ ૹ৴
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Eight (海外版)での適⽤箇所ଈը໘ભҠࡱӨ ૹ৴ૹ৴தදࣔ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Eight (海外版)での適⽤箇所ଈը໘ભҠࡱӨ ૹ৴ૹ৴ྃૹ৴தදࣔ
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- ௨৴͕͍ڥͷ֬ೝํ๏- ×:オンライン(Wi-Fi, LTE)ではなかなか再現しない…- ×:機内モードでは即失敗するので確認できない…- ˓ɿ> ωοτʹܨ͕͍ͬͯͳ͍ Wi-Fi ʹଓ- SIM ΧʔυΛൈ͘ / LAN έʔϒϧΛൈ͘> Network Link Conditioner> SIM
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- Network Link Conditioner- https://developer.apple.com/download/more/- Mac の通信速度をコントロールできる> インターネット共有をすれば、スマホの通信速度を低速にできる
Sansan Builders Box3.2. なかなか画⾯が切り替わらない- 低速 SIM- https://rokemoba.com/- 常に速度制限のような状態(200kbps)
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- ݪҼ- 通信が遅い(←現地のインターネット環境の問題)- 画像の容量が⼤きい- ରԠ- 必要⼗分な画像矩形サイズにリサイズ- 画像の圧縮率を上げて Quality を下げる- 画像の形式を変更する- ⼤きい画像の場合は⼀旦サムネイルを表⽰する- 現地にエッジサーバを置く
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- ଞΞϓϦʢInstagramʣͷྫڥͰ4ஈ֊͙Β͍ͰಡΈࠐ·Ε͍ͯΔ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.1 ඞཁेͳαΠζʹϦαΠζ- 画像送信時は必ず最⼤サイズを決めて、それより⼤きければリサイズする- 例)> 名刺画像送信:⻑辺 1240px> プロフィールアイコン画像送信:⻑辺 300px- アプリとサーバ間の API の通信だけではなく、S3 等に配置しているコンテンツも要配慮(実は1枚7MBの画像が上がっていたこともある…)- ޮՌʢҰྫʣ> 1500px → 1240px Ͱ 30%ݮ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.2 ը૾ͷѹॖΛ্͛ͯ Quality ΛԼ͛Δ- 機能によって求められる画像の Quality もまちまち…> ⾼:⽂字認識に関わる名刺のアップロード> 中:投稿に添付する画像> 低:表⽰矩形サイズが⼩さい画像(サムネイル)- ޮՌʢҰྫʣ> Quality : 90% → 70% Ͱ50%ݮ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.3 ը૾ͷܗࣜΛมߋ͢Δ- 画像を jpeg → WebP 形式に- 送信⽅法を Base64 → Multipart に- ޮՌʢҰྫʣ> Jpeg → WebPɿ30%ݮ> Base64 → Multipartɿ 25% ݮ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.4 େ͖͍ը૾ͷ߹Ұ୴αϜωΠϧΛදࣔ͢Δ- 先ほどの Instagram のような例- Android だと、Glide を使うと容易にサムネイル表⽰ができるҰ୴αϜωΠϧΛදࣔ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.4 େ͖͍ը૾ͷ߹Ұ୴αϜωΠϧΛදࣔ͢Δ- 先ほどの Instagram のような例- Android だと、Glide を使うと容易にサムネイル表⽰ができるߴը࣭ը૾Λදࣔ
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 3.3.5 ʢը૾͚ͩͰʣݱʹΤοδαʔόΛஔ͘
Sansan Builders Box3.3. 画像の送受信に時間が掛かっている- 補⾜Eight Android 版では、Firebase Remote Config を使って> 画像矩形サイズの最⼤⻑> 画像フォーマット> 画像の Qualityを切り替えられるようにしています。これにより、> リリースを伴わない挙動変更> 地域ごとのチューニング(例:インドとアメリカで値を変える)が可能になっています。
Sansan Builders Box3.4. 分析ツール- Stetho- Charles- Firebase Performance Monitoring- New Relic Mobile
Sansan Builders Box3.4. 分析ツール- Stetho- http://facebook.github.io/stetho/- Android アプリの通信を Chrome Developer Tools で確認できる操作したタイミングでどんな通信が⾏われているかわかる(並列度も!)
Sansan Builders Box3.4. 分析ツール- Charles- https://www.charlesproxy.com/- プロキシをたてて通信内容をキャプチャできる- レスポンスの書き換えも可能- アプリ側の対応が不要- iOS アプリの通信も確認できる- アプリ開発の知識がなくても Charles を使えばアプリの通信内容の確認が容易に可能
Sansan Builders Box3.4. 分析ツール- Firebase Performance Monitoring- https://firebase.google.com/docs/perf-mon/- ແྉͰある程度の通信のプロファイルが取れる- 国や通信キャリアなどのフィルタもある
Sansan Builders Box3.4. 分析ツール- New Relic Mobile- https://newrelic.com/resource/mobile-monitoring-jp- 30⽇間の無料トライアルもある
Sansan Builders Box3.4. 分析ツール- New Relic Mobile- HttpRequest Sort> Response time> Requests per time> Total Time> Total size
Sansan Builders Box3.4. 分析ツール- New Relic Mobile- Geography Sort> Response time> Request per minute> Total transfer size> App launches> Network failure late
Sansan Builders Box3.4. 分析ツール- New Relic Mobile- Interactions> Memory> CPU> Network> Threads
Sansan Builders Box3.4. 分析ツール- Dashboard- カスタム集計ができる- 状況を数値化できる> 異常に気づきやすい> 対応効果が測りやすい
まとめ
Sansan Builders Boxまとめ- アプリのグローバル展開のための改善
Sansan Builders Boxまとめ- アプリのグローバル展開のための改善- バイナリを軽く> アプリ内画像の軽量化・App Bundle / App Thinning 対応を!
Sansan Builders Boxまとめ- アプリのグローバル展開のための改善- バイナリを軽く> アプリ内画像の軽量化・App Bundle / App Thinning 対応を!- 画像を軽く> サイズ、形式、サーバ構成の⾒直し検討を!
Sansan Builders Boxまとめ- アプリのグローバル展開のための改善- バイナリを軽く> アプリ内画像の軽量化・App Bundle / App Thinning 対応を!- 画像を軽く> サイズ、形式、サーバ構成の⾒直し検討を!- 通信結果を待たない UX に> 低速環境で確認できる環境の⽤意を!
Sansan Builders Boxまとめ- アプリのグローバル展開のための改善- バイナリを軽く> アプリ内画像の軽量化・App Bundle / App Thinning 対応を!- 画像を軽く> サイズ、形式、サーバ構成の⾒直し検討を!- 通信結果を待たない UX に> 低速環境で確認できる環境の⽤意を!- ツールを活⽤して分析&改善> NewRelic Mobile, Charles , … 指標を数値化しよう!