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

Slide 1

Slide 1 text

⾠濱健⼀ Lokalise を使った Bill One の多⾔語化フローのチューニング STAGE 1 Engineer SESSION TAG

Slide 2

Slide 2 text

技術本部 Bill One Engineeringグループエンジニア 2014年にSansanにジョインし、徳島県にある「Sansan 神⼭ラボ」にて勤務。 Sansan、Eight のアプリ開発を担当し、インドにも赴いて国際化対応を担当した。グローバル戦略統括部を経て、現在はBill Oneの国際化対応を担当。エンジニアコミュニティの運営も⾏っている。⾠濱健⼀

Slide 3

Slide 3 text

Sansan 神⼭ラボ

Slide 4

Slide 4 text

以下のトピックを紹介します • 前提となる Bill One のフロントエンドの実装や使⽤しているライブラリについて • 翻訳フローを lokalise というサービスを使って楽にした話 • 翻訳抽出漏れをなくすための仕組みについてはじめに Bill One での多⾔語化フローの改善について

Slide 5

Slide 5 text

https://speakerdeck.com/sansanbuildersbox/just-do-not-english-translation-improvement-for- global-expansion-of-eight Eight の国際化対応 FYI : Sansan Builders Box 2018 にて発表

Slide 6

Slide 6 text

Bill One について

Slide 7

Slide 7 text

Bill One について請求書受領から、⽉次決算を加速する

Slide 8

Slide 8 text

Bill One について

Slide 9

Slide 9 text

Bill One について

Slide 10

Slide 10 text

グローバルなソフトウェア

Slide 11

Slide 11 text

単に⾔語（⽇本語、英語、フランス語、…）だけでなく、通貨記号、桁区切り、⽇付表記、祝⽇、サマータイム、⽂化などが利⽤地域に適応しているソフトウェアグローバルなソフトウェア様々な⾔語や地域で利⽤できるソフトウェアのこと⽂⾔の英語表記日付表記外貨対応

Slide 12

Slide 12 text

グローバルなソフトウェアソフトウェアのグローバル対応 L10N:Localization • 特定の⾔語、地域、⽂化に合うよう製品を特殊化すること。 • 主な作業者：翻訳者 I18N:Internationalization • 特定の⾔語、地域、⽂化に依存しない形に製品を汎⽤化すること • 主な作業者：プログラマ多⾔語対応の⼟台⽇本語英語 (US) … I18N L10N G11N ソフトウェアのグローバル対応（G11N:Globalization）のためには、側で⼤きく分けて2つの対応がある。

Slide 13

Slide 13 text

Bill One のグローバル対応

Slide 14

Slide 14 text

⽂⾔の英語表記⽇付表記外貨対応 • ⽇本語 UI のみ（⼀部機能を除く） • 円のみ Bill One のグローバル対応 • 英語 UI を追加 ← ここの話をします • 主要な外貨にも対応 • タイムゾーン対応など Bill One を海外でも売れるようにする

Slide 15

Slide 15 text

• TypeScript, React を使⽤ • LinguiJS を多⾔語対応のライブラリとして採⽤ • ⼀部機能を英語化する際に、Bill One のアーキテクトがライブラリを選定 • 選定理由 • JSX の書き味を悪くしたくない • レンダリング時のパフォーマンスの良さ • https://lingui.js.org/ Bill One のグローバル対応フロントエンドの実装について

Slide 16

Slide 16 text

• https://lingui.js.org/ > 🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript • とあるように、多⾔語対応してもコードの可読性が⾼い。 Bill One のグローバル対応 LinguiJS についてで文言をくくるだけ Bill One では翻訳⽂⾔のキーは⽇本語⽂⾔を使っています。（ソースの可読性を優先）

Slide 17

Slide 17 text

ソースコード中の … などの翻訳対象を抽出して、ファイルに抽出できる Bill One のグローバル対応 LinguiJS について (extract) Bill One では翻訳⽂⾔のキーは⽇本語⽂⾔を使っています。（ソースの可読性を優先） msgid “請求書登録” msgstr “請求書登録” … msgid “請求書登録” msgstr “” … ja/messages.po en/messages.po lingui extract ここに翻訳された英訳をあてていく（後述）

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

⽣成した ts ファイルを使って、⾔語による⽂⾔の出し分けを⾏う Bill One のグローバル対応 LinguiJS について（表⽰） Export messages={ “請求書登録”:” 請求書登録”, … } ja/messages.ts Export messages={ “請求書登録”:” Upload”, … } en/messages.ts

Slide 20

Slide 20 text

• ソースコード中の翻訳対象を po ファイルなどに抽出することができるが、翻訳作業は守備範囲外 • タグだけでなく、複数形に対応した要素がある • po ファイルだけでなく、json ファイルなどにも出⼒できる • https://lingui.js.org/ Bill One のグローバル対応 LinguiJS について（補⾜）

Slide 21

Slide 21 text

従来の英訳フロー

Slide 22

Slide 22 text

従来の英訳フロー

Slide 23

Slide 23 text

• 実装者が関係者（開発、CS、デザイナ…）に機能デモを⾏って、UI や⽂⾔を fix させる • 実装者が「翻訳依頼 Spread Sheet」に⽇本語⽂⾔とスクリーンショットを掲載 • 実装者が Slack にて翻訳を依頼 • 納品には1週間ぐらいかかる（社内の翻訳担当者が翻訳を⾏う） • 納品されたら翻訳担当者から Slack でメンションされる • 実装者が「翻訳依頼 Spread Sheet」から po ファイルに転記して、プロダクトに反映する • （プレースホールダーの扱いなど、ミスをしがち）従来の英訳フロー従来の英訳フロー

Slide 24

Slide 24 text

従来の英訳フロー翻訳依頼 Spread Sheet ⽇本語⽂⾔（開発者が記⼊）英語⽂⾔（翻訳者が記⼊）スクリーンショットメモ

Slide 25

Slide 25 text

• 英訳依頼における開発者の⼿間が多い • Spread Sheet 上のセルやコメントでやりとりがあると追うのが⼤変 • 翻訳チームも複数⼈にて、レビューなどのワークフローがあるともっと⼤変… • 翻訳が完了してからも開発者の⼿作業が発⽣する • 取り急ぎ機械翻訳でよくても、翻訳をあてたり、結果を反映するのが⼤変 • 英語を必要とするユーザはまだ多くないので、機械翻訳品質で機能を早く出して、後追いで英語の品質を上げたい従来の英訳フロー従来の英訳フローの課題点これらの課題感の解決のために、社内で翻訳作業省エネ化プロジェクトが発足しました。

Slide 26

Slide 26 text

翻訳作業省エネ化プロジェクト

Slide 27

Slide 27 text

• 前述のような翻訳作業の課題感を解決するためのプロジェクト • Bill One だけに限らず、社内の全プロダクトの翻訳作業省エネ化を視野に⼊れる • 各種サービスを⽐較して選定する • ひとまずは Bill One に適⽤して、社内の他プロダクトにも展開する翻訳作業省エネ化プロジェクト翻訳作業省エネ化プロジェクト

Slide 28

Slide 28 text

• Phrase https://phrase.com/ • WOVN https://lp.wovn.io/ • Lokalise https://lokalise.com/ 翻訳作業省エネ化プロジェクト検討したサービス

Slide 29

Slide 29 text

• レンダリング時の体験 • ⼀瞬⽇本語が表⽰されてから英語になったりしない • エンジニアコストの削減量と翻訳品質のバランス翻訳作業省エネ化プロジェクト Lokalise の採択理由 ※ プロダクト、フェーズ、多⾔語化の優先度、社内リソース、などによってマッチするサービスは異なります。 ※ サービスの優劣を述べる意図はありません

Slide 30

Slide 30 text

Lokalise について

Slide 31

Slide 31 text

ローカリゼーションおよび翻訳管理プラットフォーム。次の4つの特徴がある。 • 翻訳プロセスの管理 • 市場投⼊速度の短縮 • 品質確保 • 開発者の作業を減らす Lokalise について Lokalise について https://lokalise.com/

Slide 32

Slide 32 text

• ワークスペースでチームでの共同作業が可能 • タスクの割り当てや進⾏状況を確認できる • シームレスなワークフローが提供されている Lokalise について翻訳プロセスの管理 https://lokalise.com/

Slide 33

Slide 33 text

Lokalise について市場投⼊速度の短縮 https://lokalise.com/ • 開発サイクルと並⾏して製品をローカライズ • Adobe XD, Figma, Sketch のプラグインがあり、そこから翻訳作業を開始できる

Slide 34

Slide 34 text

Lokalise について品質確保 https://lokalise.com/ • 翻訳メモリ、機械翻訳、QA チェックなどを使⽤して翻訳の品質を⾼めることができる • ⽂⾔とスクリーンショットを関連付けることで、⽂⾔利⽤箇所のプレビューができる

Slide 35

Slide 35 text

Lokalise について開発者の作業を減らす https://lokalise.com/ • ローカリゼーションの煩わしさを解消 • API や CLI, GitHub 連携などもある • 開発者がメインタスクに戻れるようにする

Slide 36

Slide 36 text

ミニマムで $120 / month 〜 Lokalise について価格 https://lokalise.com/pricing

Slide 37

Slide 37 text

今の英訳フロー

Slide 38

Slide 38 text

今の英訳フロー概要 GitHub lokalise DeepL

Slide 39

Slide 39 text

• フロントエンドのコードから、 po ファイルを⽣成（⽇本語⽂⾔のみが記載されている） • po ファイルを lokalise の CLI 経由でアップロードするだけ • この時点で機械翻訳があたる今の英訳フロー翻訳依頼⽅法 GitHub DeepL lokalise

Slide 40

Slide 40 text

• Spread Sheet 上ではなく、 lokalise 上で翻訳作業を⾏う • ワークフローやコラボレーション機能により、作業が進めやすくなった今の英訳フロー翻訳者の対応 DeepL lokalise GitHub

Slide 41

Slide 41 text

• CLI でアップロード直後から、機械翻訳があたった⽂⾔は CLI で取得できる • CLI から po ファイルが取得できるので、そのままコミットすれば OK • Spread Sheet からの煩わしいコピペも不要 • プレースホールダーも正しく扱ってくれる今の英訳フロー翻訳⽂⾔の適⽤ GitHub DeepL lokalise

Slide 42

Slide 42 text

• デザイナーが翻訳依頼を⾏える • 開発者の⼿間が減る • 開発と並⾏して英訳が進められ、市場投⼊速度が上がる • Figma などのツール上で翻訳結果を確認できる今後の英訳フローデザイナーもデザインツールから翻訳依頼を⾏える lokalise DeepL

Slide 43

Slide 43 text

今後の英訳フロー Figma から Lokalise にアップロード https://www.youtube.com/watch?v=kFruyzISwWY

Slide 44

Slide 44 text

今後の英訳フロー Figma で多⾔語でのプレビューができる https://www.youtube.com/watch?v=kFruyzISwWY

Slide 45

Slide 45 text

Lokalise を導⼊してみて

Slide 46

Slide 46 text

• Spread Sheet を気にしなくて良くなった • po ファイルで翻訳結果を取得できるのはかなり嬉しい • ⼀時的に機械翻訳をあてる作業もとても簡単になった Lokalise を導⼊してみて翻訳依頼がかなり楽になった

Slide 47

Slide 47 text

• 抽出忘れ（での囲い忘れ）があると、そもそも翻訳依頼に乗らない（英語 UI に⽇本語が出てしまう） • フロントエンドは良い感じになったが、サーバサイドで⽇本語を扱っている箇所（メールやエラーメッセージ）も lokalise に乗せたい • ヘルプサイトやプロダクト全体のドキュメント類も同じフローで翻訳をしたい Lokalise を導⼊してみて残課題

Slide 48

Slide 48 text

抽出忘れの対応

Slide 49

Slide 49 text

TypeScript 中の⽇本語⽂⾔をで囲わないと警告が出るようにして、翻訳抽出漏れがあるとビルドが通らないようにした。抽出忘れの対応カスタム ESLint ルールを作成した

Slide 50

Slide 50 text

ESLint のコールバック関数を実装することで、独⾃の Lint ルールを実装し、レポートすることができる。抽出忘れの対応カスタム ESLint の実装

Slide 51

Slide 51 text

ルールの実装時には、AST をトレースして、⽂字列系のノード（JSXText, Literal, TemplateLiteral）がで囲まれているかチェックする。 AST Viewer が便利抽出忘れの対応 TypeScript の構⽂解析⽊(AST)をトレースする

Slide 52

Slide 52 text

TypeScript のコードを貼ると、構⽂解析⽊ (AST) が表⽰されるサイト抽出忘れの対応 AST Viewer Type Script コード構⽂⽊ノードの情報 https://ts-ast-viewer.com/

Slide 53

Slide 53 text

• ⽇本語⽤のコンポーネント（翻訳不要）などは無視したい場合がある • こんなときは、ESLint の標準の disable ⽅法に倣うことができる • https://eslint.org/docs/user-guide/configuring/rules#disabling-rules 抽出忘れの対応警告を無視したいとき

Slide 54

Slide 54 text

• ESLint fixer （Lint エラーにならないようにコードを⾃動修正する）を実装できるので、⾃動でで囲えるようにする • Bill One フロントエンドのリポジトリに実装されているが、社外を含めた他プロダクトでも使いやすいように、オープンソース化＆パッケージ公開を進める抽出忘れの対応今後の対応

Slide 55

Slide 55 text

まとめ

Slide 56

Slide 56 text

• 前提となる Bill One のフロントエンドの実装や使⽤しているライブラリについて • TypeScript, React, LinguiJS • 翻訳フローを lokalise というサービスを使って楽にした話 • Spread Sheet からの解放 • 開発者の⼿間が⼤幅に削減された（依頼＆翻訳結果取得） • デザイナがデザインツールから翻訳依頼を出すことも簡単 • 翻訳抽出漏れをなくすための仕組みについて • ESLint のカスタムプラグインを作って適⽤まとめ Bill One での多⾔語化フローの改善について

Slide 57

Slide 57 text

Engineer Twitter @tatsuhama50 Virtual Card ⾠濱健⼀