localization-saas-for-ios

Slide 1

Slide 1 text

Mobility Technologies Co., Ltd. ローカライゼーションマネージメントプラットフォーム導入の話 ByungJun, Park

Slide 2

Slide 2 text

Mobility Technologies Co., Ltd. Park ByungJun (パクビョンジュン) Work ・ Mobility Technologies - 2019 〜 JapanTaxi iOS アプリ開発 - 2020 〜 GO iOSアプリ開発 Hobby ・Cycling 自己紹介 2

Slide 3

Slide 3 text

Mobility Technologies Co., Ltd. 『JapanTaxi』アプリでのローカライゼーション 3 01

Slide 4

Slide 4 text

Mobility Technologies Co., Ltd. 4 - 5ヶ国語対応『JapanTaxi』アプリでのローカライゼーション

Slide 5

Slide 5 text

Mobility Technologies Co., Ltd. - コンポーネント別のStringsにテーブル名指定『JapanTaxi』アプリでのローカライゼーション 5

Slide 6

Slide 6 text

Mobility Technologies Co., Ltd. POEditor 『JapanTaxi』アプリでのローカライゼーション 6

Slide 7

Slide 7 text

Mobility Technologies Co., Ltd. 文言反映までのコミュニケーションの流れローカライゼーションのコミュニケーションコスト 7 プロダクトドキュメントデザイン(figma, adobe xd, sketch) などアプリ (iOS, Android) Product Manager Designer Deveolper QA ローカライズドキュメント Translator

Slide 8

Slide 8 text

Mobility Technologies Co., Ltd. 問題点 - ローカライズ別デザインの作成が非現実的 - リリース直前に文言が１個を変更したい場合デザイン修正・翻訳再依頼・QA、開発者に内容共有 - ヒューマンエラーが多い - 翻訳する側がデザインやアプリにアクセスしてないと品質高い翻訳結果を得られない可能性がある通常のローカライゼージョンプロセスでの問題 8

Slide 9

Slide 9 text

Mobility Technologies Co., Ltd. その結果ローカライゼーションに疲れてしまうと... 通常のローカライゼージョンプロセスでの問題 9 全言語分の適用結果を見れない忙しいと日本語か英語だけ見るか最悪日本語だけ見てしまう “アカウントを削除します” のつもりが...

Slide 10

Slide 10 text

Mobility Technologies Co., Ltd. 『GO』でのローカライゼーション 10 02

Slide 11

Slide 11 text

Mobility Technologies Co., Ltd. ● L10n(=I18n)プラットフォーム選定 ○ Lokalise ○ Lingoport ○ Transfix ○ Memsource ○ Phrase ○ etc... 『GO』でのローカライゼーション 11

Slide 12

Slide 12 text

Mobility Technologies Co., Ltd. ● 求めたこと ○ required ■ iOS/android localization stringサポート ■ api or cliツール or githubによるstringのpull ,push ■ figma, sketch, adobe xdなどデザインツール連動 ■ スクリーンショット ○ optional ■ branching, Review ■ automatic snapshot ■ OTA ■ rest api 『GO』でのローカライゼーション 12

Slide 13

Slide 13 text

Mobility Technologies Co., Ltd. Lokalise VS Phrase 13 VS

Slide 14

Slide 14 text

Mobility Technologies Co., Ltd. Phrase - Figma 同期 Phraseを使ったローカライズ 14

Slide 15

Slide 15 text

Mobility Technologies Co., Ltd. Phraseを使ったローカライズ 15 言語別の Page自動生成

Slide 16

Slide 16 text

Mobility Technologies Co., Ltd. Phraseのコンソールでの確認 Phraseを使ったローカライズ 16

Slide 17

Slide 17 text

Mobility Technologies Co., Ltd. phrase initするだけ phrase.yml Phraseを使ったローカライズ - 導入 17 phrase: access_token: token project_id: project pull: targets: - file: ./Localizable/.lproj/project_1.strings params: file_format: strings tags: project_1 encoding: UTF-8 - file: ./Localizable/.lproj/project_2.strings params: file_format: strings tags: project_2 encoding: UTF-8

Slide 18

Slide 18 text

Mobility Technologies Co., Ltd. Phraseを使った文言のアプリ側反映の流れ 1. $ phrase pull 2. figmaでを確認 3. R.string..で反映 Phraseを使ったローカライズ 18 $ phrase pull You can get the latest version from https://phrase.com/cli. Downloaded ja to APP/Localizable/ja.lproj/tag1.string s APP/Localizable/en.lproj/tag1.strin gs

Slide 19

Slide 19 text

Mobility Technologies Co., Ltd. String placeholder 1.Placeholder styleを決める 2.client側でconvert_placeholder設定 Attributed string ・attribute別にバラバラ・htmlを使うサーバサイド文言のローカライズ・リクエストヘッダーに言語コード・api.phrase.com, api.lokalise.com その他の課題 19

Slide 20

Slide 20 text

Mobility Technologies Co., Ltd. OTAの仕組み OTA(Over-The-Air) localization 20 アプリ機動アップデート可能なローカライズがあるかをチェック CDN経由でローカライズファイルダウンロード Main Bundle swizzling (各 SDK) アプリ内のLocalizable.string を利用 OTA完了

Slide 21

Slide 21 text

Mobility Technologies Co., Ltd. LokaliseのOTA実践 OTA(Over-The-Air) localization 21 // Provide SDK Token and Project ID and enable Swizzling Lokalise.shared.setProjectID("Project ID", token:"SDK Token") Lokalise.shared.swizzleMainBundle() func applicationDidBecomeActive(_ application: UIApplication) { Lokalise.shared.checkForUpdates { (updated, errorOrNil) in print("Updated: ¥(updated)¥nError: ¥(errorOrNil)") } } NSLocalizedString("key", comment: "comment") There is no need to update your code with swizzling enabled!

Slide 22

Slide 22 text

Mobility Technologies Co., Ltd. OTA後にUI更新 OTA(Over-The-Air) localization 22 override func viewDidLoad() { super.viewDidLoad() NotificationCenter.default.addObserver( self, selector: #selector(updateUserInterface), name: NSNotification.Name.LokaliseDidUpdateLocalization, object: nil ) } func fetchOTALocalization { Lokalise.shared.checkForUpdates { (updated, errorOrNil) in print("Updated: ¥(updated)¥nError: ¥(errorOrNil)") } } ＊Live Editも別の方法で可能

Slide 23

Slide 23 text

Mobility Technologies Co., Ltd. おわりに Hope we remove your stress - Developer, Desinger, Product Manager, QA and Translator 23 L10n SaaS

Slide 24

Slide 24 text

Mobility Technologies Co., Ltd. 24 03 お知らせ

Slide 25

Slide 25 text

Mobility Technologies Co., Ltd. 25 タクシーアプリ『GO』の開発を一緒にしませんか https://hrmos.co/pages/m o-t/jobs/2100002