Save 37% off PRO during our Black Friday Sale! »

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

13d936e697fe0f4fa96f926d0a712f6c?s=47 Sansan
PRO
November 05, 2021

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/

13d936e697fe0f4fa96f926d0a712f6c?s=128

Sansan
PRO

November 05, 2021
Tweet

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 ⾠濱 健⼀