locizeでいい感じにi18n対応する

React Nativeにlocizeとi18nextを導入することで文言リソースの管理を開発チームから独立させました。

Transcript

1. locizeでいい感じにi18n対応する 読めない⾔言語をコピペする作業が⾟辛いので
2. ecbo 株式会社 Tech Lead Tsukui Tomohiro @two2q 2018年年4⽉月からecbo cloakというアプリ をReact Nativeで開発しています。 もともと業務系Webサービスを開発して いたのでecbo cloakが初めてのアプリで す。
3. エクボクローク 「荷物を預けたい⼈人」と、 「荷物を預かるスペースを持つお店」 をつなぐシェアリングサービス。
4. ビジネスモデル
5. ビジネスモデル 荷物を預けるユーザー ・アプリDL→検索→予約→クレカ決済 ・バッグサイズ 300円 /スーツケースサイズ 600円
6. ビジネスモデル 荷物を預けるユーザー ・アプリDL→検索→予約→クレカ決済 ・バッグサイズ 300円 /スーツケースサイズ 600円 荷物を預かるオーナー ・登録/導⼊入/維持費 ¥0 ・利利⽤用料料⾦金金の50%が 　店舗の副収⼊入に ・新規顧客獲得も
7. 先週⾦金金曜⽇日に今⽇日のAPPに取り上げていただきました :tada:
8. ecbo cloakは半数以上が外国⼈人ユーザー i18n対応はかなり重要！
9. 翻訳はエンジニアにとって完全に専⾨門外 理理想を⽬目指した エンジニアはラベルの配置のみに責任を持ち、 ラベルの中身については翻訳チームに委ねたい
10. ecbo cloakでは結構理理想系に近づけたので 共有させてください！
11. この組み合わせ
13. locizeが提供しているもの ・ダッシュボード ・翻訳管理理 ・権限管理理 ・バージョン管理理 ・検索 ・Slack通知 ・API
14. ダッシュボード
15. ダッシュボード 翻訳済の進捗がわかる
16. ダッシュボード メモもつけられるよ！
17. これだけだとただの翻訳管理理
18. locizeの翻訳データをアプリと同期する
19. i18nextを使う JSのためのi18nライブラリ locizeの創業者がメンテナンス
20. i18nextのbackendにlocizeを指定する i18nextは翻訳データの取得先をカスタマイズが可能。 ファイルから取得やAsyncStorageから取得ができる。 locizeからも取得できる
21. i18nextのbackendにlocizeを指定する # yarn $ yarn add i18next i18next-locize-backend
22. i18nextのbackendにlocizeを指定する import i18next from 'i18next'; import LocizeBackend from 'i18next-locize-backend'; export default (callback) => i18next .use(LocizeBackend) .init({ lng: 'ja', debug: true, fallbackLng: { // lngに指定した⾔言語が翻訳されていない場合に参照する⾔言語 default: ['en'] }, // locizeに登録されているnamespace。demoの場合はtranslation defaultNS: 'translation', backend: { // locizeのプロジェクトIDです projectId: 'your project id', // saveMissingがtrueの時に必要です。 apiKey: 'your api kei', // locizeで設定されているreferenceLngを指定してください。saveMissingがtrueのときに必要です。 referenceLng: 'en', // locizeのどのバージョンの⾔言語を取得するのかを指定します。デフォルトはlatestです version: 'latest', }, }, callback ); 起動時のオプションで⾔言語をjaでは なくdevにすることで画⾯面にキーが 表示される
23. i18nextのbackendにlocizeを指定する import i18next from 'i18next' {...} <Text>{i18next.t('key')}</Text> keyがlocizeに登録されていなかった 場合にはlocizeに⾃自動で登録するオ プションもある！
24. 起動時にlocizeから翻訳ファイルを取得するので 常に最新の⽂文⾔言のアプリを提供できる
25. 弊社の流れ デザイナー：⽂文⾔言は配置だけfixしてデザインする。 エンジニア：実装とlocizeへのキー登録 翻訳チーム・デザイナー：実機で確認して、違和感があれば随時変更更 翻訳チーム：新しいキーが登録されたことがSlackに通知されるので翻訳
26. ⽂文⾔言修正業務を翻訳チームやデザイナーなどに⽢甘えることができる Engineers Translators 強⼒力力なダッシュボードを獲得できる（検索、進捗管理理、バージョン管理理など） 翻訳チームだけで他国展開可能に！ ⽂文⾔言の確定を遅延できる。リリース後の変更更も⾃自分のタイミングで可能！ Designers
27. 神ツールとの声 実機で確認しながら翻訳できる翻訳チームと 中国語のコピペから解放されたエンジニアチームの 稀に⾒見見るWin-Winな関係！
28. いつの間にかアプリが韓国語対応していた セールスチームが韓国翻訳者に依頼し、 韓国語対応を実現。エンジニアはほぼ何もしていない。
29. 気になるお値段は？
30. Tips 起動時にlocizeに翻訳ファイルを取得しに⾏行行くので、 電波が悪い時には⾔言語のキーのみが出てしまう可能性がある i18nextのbackendをlocizeとfileの⼆二つにすることで、locizeからの 取得に失敗した時にはfileから読めるようにする。 fileはpostInstallでlocizeからAPI経由で取得するようにして⾃自動化。
31. 少ない⼈人数で プロダクトをスケール出来る仕組みを構築したいので いいサービスご存知でしたら教えてください！
32. Qiitaにもコードがあります https://qiita.com/tsukushi0104/items/74a380ea9642cae91990
33. FIN.