Upgrade to Pro — share decks privately, control downloads, hide ads and more …

辰濱健一_グローバル展開のための改善/Just do not English transl...

Sansan
November 12, 2018

辰濱健一_グローバル展開のための改善/Just do not English translation! Improvement for global expansion of Eight

■イベント
Sansan Builders Box 2018
https://jp.corp-sansan.com/sbb2018/

■登壇概要
タイトル:英訳だけじゃダメ!Eightグローバル展開のための改善
登壇者:Eight事業部 Global team スマートフォンアプリエンジニア 辰濱 健一

▼Sansan Builders Box
https://buildersbox.corp-sansan.com/

Sansan

November 12, 2018
Tweet

More Decks by Sansan

Other Decks in Technology

Transcript

  1. Sansan Builders Box - 0. About me - 1. Eight

    のインド展開 - 2. インドのインターネット事情 - 3. 低速インターネット環境での問題と対応 Agenda
  2. ୢᖛ ݈Ұ(Kenichi Tatsuhama) ೥ ݄ ࡾॏେֶڭҭֶ෦৘ใॲཧίʔε ଔۀ ೥ ݄ δϟετγεςϜ

    ೖࣾʢಙౡຊࣾʣ Java, C++ 等でのパッケージソフトの開発 パフォーマンスチューニング等を経験 ೥ ݄ .FUB.P+J ΁స৬ʢಙౡࢢʣ iOS / Android / Windows タブレット&スマートフォン向け アプリのネイティブ開発を経験 ೥ ݄ 4BOTBOגࣜձࣾ΁స৬ʢਆࢁϥϘۈ຿ʣ 法⼈向け Sansan / 個⼈向け Eight Android アプリ開発を担当 現在は Eight の Global 展開のための開発を担当 Eight 事業部 Global Team スマートフォンアプリエンジニア
  3. Sansan Builders Box 1. Eight のインド展開 • 町中のスマホショップ街 (1Fだけ異空間) •

    メーカー • Oppo • Vivo • Samsung • Android のシェアが9割!
  4. Sansan Builders Box - 3GB/DAY で約 500 円 /⽉( 1.6

    JPY / Rs) 2. インドのインターネット事情 https://www.jio.com/
  5. Sansan Builders Box Google もかなりインドの インターネット普及に ⼒を⼊れている (PWA も新興国がターゲット) 2.

    インドのインターネット事情 https://www.blog.google/technology/next- billion-users/google-for-india-2018/
  6. Sansan Builders Box 2. インドのインターネット事情 • 100 MB もあれば、 20%

    ユーザが離脱 • 通信単価が⾼かった頃は 「無料アプリでも100MB もあれば実質有料だ」 と⾔われていた https://youtu.be/AdfKNgyT438?t=149 ༰ྔͷେ͖͍ΞϓϦ͸ DL ࣌ͷ཭୤͕େ͖͍
  7. Sansan Builders Box 2. インドのインターネット事情 • 100 MB もあれば、 20%

    ユーザが離脱 • 通信単価が⾼かった頃は 「無料アプリでも100MB もあれば実質有料だ」 と⾔われていた https://youtu.be/AdfKNgyT438?t=149 ༰ྔͷେ͖͍ΞϓϦ͸ DL ࣌ͷ཭୤͕େ͖͍
  8. Sansan Builders Box - 1. アプリのダウンロードが完了しない - 2. なかなか画⾯が切り替わらない -

    3. 画像の送受信に時間が掛かっている - 4. 分析ツール 3. 低速インターネット環境での問題と対応
  9. Sansan Builders Box - 1. アプリのダウンロードが完了しない - 2. なかなか画⾯が切り替わらない -

    3. 画像の送受信に時間が掛かっている - 4. 分析ツール 3. 低速インターネット環境での問題と対応
  10. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - ݪҼ - 通信が遅い(←現地のインターネット環境の問題) -

    アプリのバイナリサイズが⼤きい - ରԠ - アプリのバイナリサイズの削減 > 海外⽤にバイナリを分けて機能整理(Android) > 画像の圧縮 > バイナリ配信時の最適化 ˏΠϯυ
  11. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - アプリのバイナリサイズの削減 > 海外⽤にバイナリを分けて機能整理(Android) •

    ւ֎൛Ͱ࢖ΘΕͳ͍ػೳͷίʔυ౳ΛؚΊͳ͍Α͏ʹ͢Δ • Apk Analyzer で分析&対応効果を確認する • ⼿っ取り早くは Build Flavor、まじめにやれば module 分割 • 海外版に⽇本語リソース(画像・⽂⾔)を含めない
  12. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - アプリのバイナリサイズの削減 > 海外⽤にバイナリを分けて機能整理(Android) Build

    Flavor ʹΑΔ෼ׂ module ʹΑΔ෼ׂ 海外版で不要な実装やリ ソースはここに配置 ࡟ݮͷޮՌଌఆ΋Apk Analyzer Ͱ֬ೝՄೳ
  13. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - アプリのバイナリサイズの削減 > 画像の圧縮 •

    jpeg / png ը૾Λ࠷దԽ͢Δ • TinyPNG 等を使って最適化 • https://tinypng.com/ • WebP ը૾ʹม׵͢Δ • Android Studio が変換ツールを提供 • Android5 で⼀部 WebP が適切に表⽰できない問 題があるので要注意 ը૾1ຕ͋ͨΓɺ਺े%ͷαΠζ࡟ݮ
  14. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - アプリのバイナリサイズの削減 > バイナリ配信時の最適化 •

    App Bundle ܗࣜʹରԠ͢Δ • Google I/O 2018 で発表された形式 • その端末に必要なリソースのみ配信される仕組み • 例)xxxhdpi の端末なら、hdpi 等の画像が配信されない • iOS だと App Thinning で同様のことが可能
  15. Sansan Builders Box 3.1. アプリのダウンロードが完了しない - ରԠޮՌʢAndroid ΞϓϦʣ - アプリのバイナリサイズの削減

    > 海外⽤にバイナリを分けて機能整理(Android) > 画像の圧縮 > バイナリ配信時の最適化 60MB → 20MBʢ66%ݮʣ 20MB → 12MBʢ40%ݮʣ 12MB → 9MBʢ25%ݮʣ
  16. Sansan Builders Box - 1. アプリのダウンロードが完了しない - 2. なかなか画⾯が切り替わらない -

    3. 画像の送受信に時間が掛かっている - 4. 分析ツール 3. 低速インターネット環境での問題と対応
  17. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - ݪҼ - 通信が遅い(←現地のインターネット環境の問題) -

    通信完了を待って画⾯遷移を⾏っている - ରԠ - 通信処理はバックグラウンドジョブに投げる - 通信完了まで画⾯遷移を待たない(可能な限り)
  18. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - Twitter アプリでは・・・? ↑Progress දࣔ

    ౤ߘத Tweet ʢ໢ֻ͚දࣔʣ ී௨ͷ Tweet - Tweet 直後、即画⾯遷移 ↓ - 送信状況の Progress 表⽰ ↓ - 送信中の Tweet も UI に表⽰
  19. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - LINEアプリでは・・・? ૹ৴தͷ UI ࣗಈͰ࠶ૹ׬ྃ

    ΦϯϥΠϯ ʹͳͬͨ - オフラインでメッセージを送信しても UI には送信中として反映する - オンラインになったら⾃動で再送 - ユーザが再送する必要はない
  20. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - ରԠ - όοΫάϥ΢ϯυδϣϒʹ౤͛ͯଈը໘ભҠʢ΍ UI

    ΁൓өʣ - Android ͩͱ WorkManager ͕ศར > https://developer.android.com/topic/libraries/architecture/workmanager/ - iOS ͩͱ SwiftQueue Ͱಉ༷ͷ͜ͱ͕Ͱ͖ͦ͏ > https://github.com/lucas34/SwiftQueue
  21. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない ϝϦοτ σϝϦοτ ௨৴݁ՌΛ଴ͭ • 実装が容易

    • ⽇本国内だとほぼこれで OK • 通信が遅い場合(特に海外) に UX が悪い ௨৴݁ՌΛ଴ͨͳ͍ ʢόοΫάϥ΢ϯυδϣϒ࣮ߦʣ • 通信環境に左右されない UX を提供できる • 送信未完了状態の考慮 (表⽰・編集)が必要
  22. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - ௨৴͕஗͍؀ڥͷ֬ೝํ๏ - ×:オンライン(Wi-Fi, LTE)ではなかなか再現しない…

    - ×:機内モードでは即失敗するので確認できない… - ˓ɿ > ωοτʹܨ͕͍ͬͯͳ͍ Wi-Fi ʹ઀ଓ - SIM ΧʔυΛൈ͘ / LAN έʔϒϧΛൈ͘ > Network Link Conditioner > ௿଎ SIM
  23. Sansan Builders Box 3.2. なかなか画⾯が切り替わらない - Network Link Conditioner -

    https://developer.apple.com/download/more/ - Mac の通信速度をコントロールできる > インターネット共有をすれば、スマホの通信速度を低速にできる
  24. Sansan Builders Box - 1. アプリのダウンロードが完了しない - 2. なかなか画⾯が切り替わらない -

    3. 画像の送受信に時間が掛かっている - 4. 分析ツール 3. 低速インターネット環境での問題と対応
  25. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - ݪҼ - 通信が遅い(←現地のインターネット環境の問題) -

    画像の容量が⼤きい - ରԠ - 必要⼗分な画像矩形サイズにリサイズ - 画像の圧縮率を上げて Quality を下げる - 画像の形式を変更する - ⼤きい画像の場合は⼀旦サムネイルを表⽰する - 現地にエッジサーバを置く
  26. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 3.3.1 ඞཁे෼ͳαΠζʹϦαΠζ - 画像送信時は必ず最⼤サイズを決めて、それよ

    り⼤きければリサイズする - 例) > 名刺画像送信:⻑辺 1240px > プロフィールアイコン画像送信:⻑辺 300px - アプリとサーバ間の API の通信だけではなく、 S3 等に配置しているコンテンツも要配慮 (実は1枚7MBの画像が上がっていたこともある…) - ޮՌʢҰྫʣ > 1500px → 1240px Ͱ໿ 30%ݮ
  27. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 3.3.2 ը૾ͷѹॖ཰Λ্͛ͯ Quality ΛԼ͛Δ

    - 機能によって求められる画像の Quality もまちまち… > ⾼:⽂字認識に関わる名刺のアップロード > 中:投稿に添付する画像 > 低:表⽰矩形サイズが⼩さい画像(サムネイル) - ޮՌʢҰྫʣ > Quality : 90% → 70% Ͱ໿50%ݮ
  28. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 3.3.3 ը૾ͷܗࣜΛมߋ͢Δ - 画像を

    jpeg → WebP 形式に - 送信⽅法を Base64 → Multipart に - ޮՌʢҰྫʣ > Jpeg → WebPɿ໿30%ݮ > Base64 → Multipartɿ໿ 25% ݮ
  29. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 3.3.4 େ͖͍ը૾ͷ৔߹͸Ұ୴αϜωΠϧΛදࣔ͢Δ - 先ほどの

    Instagram のような例 - Android だと、Glide を使うと容易にサムネイル表⽰ができる Ұ୴αϜωΠϧΛදࣔ
  30. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 3.3.4 େ͖͍ը૾ͷ৔߹͸Ұ୴αϜωΠϧΛදࣔ͢Δ - 先ほどの

    Instagram のような例 - Android だと、Glide を使うと容易にサムネイル表⽰ができる ߴը࣭ը૾Λදࣔ
  31. Sansan Builders Box 3.3. 画像の送受信に時間が掛かっている - 補⾜ Eight Android 版では、Firebase

    Remote Config を使って > 画像矩形サイズの最⼤⻑ > 画像フォーマット > 画像の Quality を切り替えられるようにしています。 これにより、 > リリースを伴わない挙動変更 > 地域ごとのチューニング(例:インドとアメリカで値を変える) が可能になっています。
  32. Sansan Builders Box - 1. アプリのダウンロードが完了しない - 2. なかなか画⾯が切り替わらない -

    3. 画像の送受信に時間が掛かっている - 4. 分析ツール 3. 低速インターネット環境での問題と対応
  33. Sansan Builders Box 3.4. 分析ツール - Stetho - Charles -

    Firebase Performance Monitoring - New Relic Mobile
  34. Sansan Builders Box 3.4. 分析ツール - Stetho - http://facebook.github.io/stetho/ -

    Android アプリの通信を Chrome Developer Tools で確認できる 操作したタイミングで どんな通信が ⾏われているかわかる (並列度も!)
  35. Sansan Builders Box 3.4. 分析ツール - Charles - https://www.charlesproxy.com/ -

    プロキシをたてて通信内容をキャプチャできる - レスポンスの書き換えも可能 - アプリ側の対応が不要 - iOS アプリの通信も確認できる - アプリ開発の知識がなくても Charles を使えば アプリの通信内容の確認が容易に可能
  36. Sansan Builders Box 3.4. 分析ツール - Firebase Performance Monitoring -

    https://firebase.google.com/docs/perf-mon/ - ແྉͰある程度の通信のプロファイルが取れる - 国や通信キャリアなどのフィルタもある
  37. Sansan Builders Box 3.4. 分析ツール - New Relic Mobile -

    https://newrelic.com/resource/mobile-monitoring-jp - 30⽇間の無料トライアルもある
  38. Sansan Builders Box 3.4. 分析ツール - New Relic Mobile -

    HttpRequest Sort > Response time > Requests per time > Total Time > Total size
  39. Sansan Builders Box 3.4. 分析ツール - New Relic Mobile -

    Geography Sort > Response time > Request per minute > Total transfer size > App launches > Network failure late
  40. Sansan Builders Box 3.4. 分析ツール - New Relic Mobile -

    Interactions > Memory > CPU > Network > Threads
  41. Sansan Builders Box 3.4. 分析ツール - Dashboard - カスタム集計ができる -

    状況を数値化できる > 異常に気づきやすい > 対応効果が測りやすい
  42. Sansan Builders Box まとめ - アプリのグローバル展開のための改善 - バイナリを軽く > アプリ内画像の軽量化・App

    Bundle / App Thinning 対応を! - 画像を軽く > サイズ、形式、サーバ構成の⾒直し検討を!
  43. Sansan Builders Box まとめ - アプリのグローバル展開のための改善 - バイナリを軽く > アプリ内画像の軽量化・App

    Bundle / App Thinning 対応を! - 画像を軽く > サイズ、形式、サーバ構成の⾒直し検討を! - 通信結果を待たない UX に > 低速環境で確認できる環境の⽤意を!
  44. Sansan Builders Box まとめ - アプリのグローバル展開のための改善 - バイナリを軽く > アプリ内画像の軽量化・App

    Bundle / App Thinning 対応を! - 画像を軽く > サイズ、形式、サーバ構成の⾒直し検討を! - 通信結果を待たない UX に > 低速環境で確認できる環境の⽤意を! - ツールを活⽤して分析&改善 > NewRelic Mobile, Charles , … 指標を数値化しよう!