Lokalise を使った Bill One の多言語化フローのチューニング / Tuning Bill One's multi-lingualization flow using Lokalise

■イベント

Sansan Builders Stage 2021

https://jp.corp-sansan.com/engineering/buildersstage2021/

■登壇概要

タイトル：Lokalise を使った Bill One の多言語化フローのチューニング

登壇者：技術本部 Bill One Engineeringグループ　エンジニア　辰濱 健一

▼Sansan Engineering
https://jp.corp-sansan.com/engineering/

Transcript

1. ⾠濱健⼀ Lokalise を使った Bill One の 多⾔語化フローのチューニング STAGE 1 Engineer SESSION TAG
2. 技術本部 Bill One Engineeringグループ エンジニア 2014年にSansanにジョインし、徳島県にある「Sansan 神⼭ラボ」にて勤務。 Sansan、Eight のアプリ開発を担当し、インドにも赴いて国際化対応を担当した。 グローバル戦略統括部を経て、現在はBill Oneの国際化対応を担当。 エンジニアコミュニティの運営も⾏っている。 ⾠濱 健⼀
3. Sansan 神⼭ラボ
4. 以下のトピックを紹介します • 前提となる Bill One のフロントエンドの実装や使⽤しているライブラリについて • 翻訳フローを lokalise というサービスを使って楽にした話 • 翻訳抽出漏れをなくすための仕組みについて はじめに Bill One での多⾔語化フローの改善について
5. https://speakerdeck.com/sansanbuildersbox/just-do-not-english-translation-improvement-for- global-expansion-of-eight Eight の国際化対応 FYI : Sansan Builders Box 2018 にて発表
6. Bill One について
7. Bill One について 請求書受領から、⽉次決算を加速する
8. Bill One について
9. Bill One について
10. グローバルなソフトウェア
11. 単に⾔語（⽇本語、英語、フランス語、…）だけでなく、通貨記号、桁区切り、⽇付表記、祝⽇、サマー タイム、⽂化などが利⽤地域に適応しているソフトウェア グローバルなソフトウェア 様々な⾔語や地域で利⽤できるソフトウェアのこと ⽂⾔の英語表記 日付表記 外貨対応
12. グローバルなソフトウェア ソフトウェアのグローバル対応 L10N:Localization • 特定の⾔語、地域、⽂化に合うよう製品を 特殊化すること。 • 主な作業者：翻訳者 I18N:Internationalization • 特定の⾔語、地域、⽂化に依存しない形に 製品を汎⽤化すること • 主な作業者：プログラマ 多⾔語対応の⼟台 ⽇本語 英語 (US) … I18N L10N G11N ソフトウェアのグローバル対応（G11N:Globalization）のためには、 側で⼤きく分けて2つの対応がある。
13. Bill One のグローバル対応
14. ⽂⾔の英語表記 ⽇付表記 外貨対応 • ⽇本語 UI のみ（⼀部機能を除く） • 円のみ Bill One のグローバル対応 • 英語 UI を追加 ← ここの話をします • 主要な外貨にも対応 • タイムゾーン対応 など Bill One を海外でも売れるようにする
15. • TypeScript, React を使⽤ • LinguiJS を多⾔語対応のライブラリとして採⽤ • ⼀部機能を英語化する際に、Bill One のアーキテクトがライブラリを選定 • 選定理由 • JSX の書き味を悪くしたくない • レンダリング時のパフォーマンスの良さ • https://lingui.js.org/ Bill One のグローバル対応 フロントエンドの実装について
16. • https://lingui.js.org/ > 🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript • とあるように、多⾔語対応してもコードの可読性が⾼い。 Bill One のグローバル対応 LinguiJS について <Trans> で文言をくくるだけ Bill One では翻訳⽂⾔のキーは ⽇本語⽂⾔を使っています。 （ソースの可読性を優先）
17. ソースコード中の <Trans>…</Trans> などの翻訳対象を抽出して、ファイルに抽出できる Bill One のグローバル対応 LinguiJS について (extract) Bill One では翻訳⽂⾔のキーは ⽇本語⽂⾔を使っています。 （ソースの可読性を優先） msgid “請求書登録” msgstr “請求書登録” … msgid “請求書登録” msgstr “” … ja/messages.po en/messages.po lingui extract ここに翻訳された英訳を あてていく （後述）
18. po ファイルを コンパイルしてフロントエンドで扱えるファイルを⽣成する Bill One のグローバル対応 LinguiJS について (compile) msgid “請求書登録” msgstr “請求書登録” … msgid “請求書登録” msgstr “Upload” … ja/messages.po en/messages.po Export messages={ “請求書登録”:” 請求書登録”, … } ja/messages.ts Export messages={ “請求書登録”:” Upload”, … } en/messages.ts lingui compile
19. ⽣成した ts ファイルを使って、⾔語による⽂⾔の出し分けを⾏う Bill One のグローバル対応 LinguiJS について （表⽰） Export messages={ “請求書登録”:” 請求書登録”, … } ja/messages.ts Export messages={ “請求書登録”:” Upload”, … } en/messages.ts
20. • ソースコード中の翻訳対象を po ファイルなどに抽出することができるが、 翻訳作業は守備範囲外 • <Trans> タグだけでなく、複数形に対応した <Plural> 要素がある • po ファイルだけでなく、json ファイルなどにも出⼒できる • https://lingui.js.org/ Bill One のグローバル対応 LinguiJS について （補⾜）
21. 従来の英訳フロー
22. 従来の英訳フロー
23. • 実装者が関係者（開発、CS、デザイナ…）に機能デモを⾏って、UI や⽂⾔を fix させる • 実装者が「翻訳依頼 Spread Sheet」に⽇本語⽂⾔とスクリーンショットを掲載 • 実装者が Slack にて翻訳を依頼 • 納品には1週間ぐらいかかる（社内の翻訳担当者が翻訳を⾏う） • 納品されたら翻訳担当者から Slack でメンションされる • 実装者が「翻訳依頼 Spread Sheet」から po ファイルに転記して、プロダクトに反映する • （プレースホールダーの扱いなど、ミスをしがち） 従来の英訳フロー 従来の英訳フロー
24. 従来の英訳フロー 翻訳依頼 Spread Sheet ⽇本語⽂⾔ （開発者が記⼊） 英語⽂⾔ （翻訳者が記⼊） スクリーンショット メモ
25. • 英訳依頼における開発者の⼿間が多い • Spread Sheet 上のセルやコメントでやりとりがあると追うのが⼤変 • 翻訳チームも複数⼈にて、レビューなどのワークフローがあるともっと⼤変… • 翻訳が完了してからも開発者の⼿作業が発⽣する • 取り急ぎ機械翻訳でよくても、翻訳をあてたり、結果を反映するのが⼤変 • 英語を必要とするユーザはまだ多くないので、機械翻訳品質で機能を早く出して、 後追いで英語の品質を上げたい 従来の英訳フロー 従来の英訳フローの課題点 これらの課題感の解決のために、社内で翻訳作業省エネ化プロジェクトが発足しました。
26. 翻訳作業省エネ化プロジェクト
27. • 前述のような翻訳作業の課題感を解決するためのプロジェクト • Bill One だけに限らず、社内の全プロダクトの翻訳作業省エネ化を視野に⼊れる • 各種サービスを⽐較して選定する • ひとまずは Bill One に適⽤して、社内の他プロダクトにも展開する 翻訳作業省エネ化プロジェクト 翻訳作業省エネ化プロジェクト
28. • Phrase https://phrase.com/ • WOVN https://lp.wovn.io/ • Lokalise https://lokalise.com/ 翻訳作業省エネ化プロジェクト 検討したサービス
29. • レンダリング時の体験 • ⼀瞬⽇本語が表⽰されてから英語になったりしない • エンジニアコストの削減量と翻訳品質のバランス 翻訳作業省エネ化プロジェクト Lokalise の採択理由 ※ プロダクト、フェーズ、多⾔語化の優先度、 社内リソース、 などによってマッチするサービスは 異なります。 ※ サービスの優劣を述べる意図はありません
30. Lokalise について
31. ローカリゼーションおよび翻訳管理プラットフォーム。 次の4つの特徴がある。 • 翻訳プロセスの管理 • 市場投⼊速度の短縮 • 品質確保 • 開発者の作業を減らす Lokalise について Lokalise について https://lokalise.com/
32. • ワークスペースでチームでの 共同作業が可能 • タスクの割り当てや進⾏状況を 確認できる • シームレスなワークフローが 提供されている Lokalise について 翻訳プロセスの管理 https://lokalise.com/
33. Lokalise について 市場投⼊速度の短縮 https://lokalise.com/ • 開発サイクルと並⾏して製品を ローカライズ • Adobe XD, Figma, Sketch の プラグインがあり、そこから翻 訳作業を開始できる
34. Lokalise について 品質確保 https://lokalise.com/ • 翻訳メモリ、機械翻訳、QA チェックなどを使⽤して翻訳の 品質を⾼めることができる • ⽂⾔とスクリーンショットを関 連付けることで、⽂⾔利⽤箇所 のプレビューができる
35. Lokalise について 開発者の作業を減らす https://lokalise.com/ • ローカリゼーションの 煩わしさを解消 • API や CLI, GitHub 連携など もある • 開発者がメインタスクに 戻れるようにする
36. ミニマムで $120 / month 〜 Lokalise について 価格 https://lokalise.com/pricing
37. 今の英訳フロー
38. 今の英訳フロー 概要 GitHub lokalise DeepL
39. • フロントエンドのコードから、 po ファイルを⽣成 （⽇本語⽂⾔のみが記載されている） • po ファイルを lokalise の CLI 経由でアップロードするだけ • この時点で機械翻訳があたる 今の英訳フロー 翻訳依頼⽅法 GitHub DeepL lokalise
40. • Spread Sheet 上ではなく、 lokalise 上で翻訳作業を⾏う • ワークフローやコラボレーション 機能により、作業が進めやすく なった 今の英訳フロー 翻訳者の対応 DeepL lokalise GitHub
41. • CLI でアップロード直後から、 機械翻訳があたった⽂⾔は CLI で取得できる • CLI から po ファイルが取得 できるので、そのままコミット すれば OK • Spread Sheet からの煩わしい コピペも不要 • プレースホールダーも正しく 扱ってくれる 今の英訳フロー 翻訳⽂⾔の適⽤ GitHub DeepL lokalise
42. • デザイナーが翻訳依頼を⾏える • 開発者の⼿間が減る • 開発と並⾏して英訳が進めら れ、市場投⼊速度が上がる • Figma などのツール上で 翻訳 結果を確認できる 今後の英訳フロー デザイナーもデザインツールから翻訳依頼を⾏える lokalise DeepL
43. 今後の英訳フロー Figma から Lokalise にアップロード https://www.youtube.com/watch?v=kFruyzISwWY
44. 今後の英訳フロー Figma で多⾔語でのプレビューができる https://www.youtube.com/watch?v=kFruyzISwWY
45. Lokalise を導⼊してみて
46. • Spread Sheet を気にしなくて良くなった • po ファイルで翻訳結果を取得できるのはかなり嬉しい • ⼀時的に機械翻訳をあてる作業もとても簡単になった Lokalise を導⼊してみて 翻訳依頼がかなり楽になった
47. • 抽出忘れ（<Trans> での囲い忘れ）があると、そもそも翻訳依頼に乗らない （英語 UI に⽇本語が出てしまう） • フロントエンドは良い感じになったが、サーバサイドで⽇本語を扱っている箇所 （メールやエラーメッセージ）も lokalise に乗せたい • ヘルプサイトやプロダクト全体のドキュメント類も同じフローで翻訳をしたい Lokalise を導⼊してみて 残課題
48. 抽出忘れの対応
49. TypeScript 中の⽇本語⽂⾔を<Trans> で囲わないと警告が出るようにして、 翻訳抽出漏れがあるとビルドが通らないようにした。 抽出忘れの対応 カスタム ESLint ルールを作成した
50. ESLint のコールバック関数を実装することで、独⾃の Lint ルールを 実装し、レポートすることができる。 抽出忘れの対応 カスタム ESLint の実装
51. ルールの実装時には、AST をトレースして、⽂字列系のノード（JSXText, Literal, TemplateLiteral）が <Trans> で囲まれているかチェックする。 AST Viewer が便利 抽出忘れの対応 TypeScript の構⽂解析⽊(AST)をトレースする
52. TypeScript のコードを貼ると、構⽂解析⽊ (AST) が表⽰されるサイト 抽出忘れの対応 AST Viewer Type Script コード 構⽂⽊ ノードの情報 https://ts-ast-viewer.com/
53. • ⽇本語⽤のコンポーネント（翻訳不要）などは無視したい場合がある • こんなときは、ESLint の標準の disable ⽅法に倣うことができる • https://eslint.org/docs/user-guide/configuring/rules#disabling-rules 抽出忘れの対応 警告を無視したいとき
54. • ESLint fixer （Lint エラーにならないようにコードを⾃動修正する）を 実装できるので、⾃動で <Trans> で囲えるようにする • Bill One フロントエンドのリポジトリに実装されているが、 社外を含めた他プロダクトでも使いやすいように、オープンソース化＆パッケー ジ公開を進める 抽出忘れの対応 今後の対応
55. まとめ
56. • 前提となる Bill One のフロントエンドの実装や使⽤しているライブラリについて • TypeScript, React, LinguiJS • 翻訳フローを lokalise というサービスを使って楽にした話 • Spread Sheet からの解放 • 開発者の⼿間が⼤幅に削減された（依頼＆翻訳結果取得） • デザイナがデザインツールから翻訳依頼を出すことも簡単 • 翻訳抽出漏れをなくすための仕組みについて • ESLint のカスタムプラグインを作って適⽤ まとめ Bill One での多⾔語化フローの改善について
57. Engineer Twitter @tatsuhama50 Virtual Card ⾠濱 健⼀