【React】多言語対応(i18n)における辞書をLocalazyで管理する - フロントエンド編 | Offers Tech Blog
概要
こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で前回の記事に掲載していた辞書ファイルを管理するSaaS「Localazy」について紹介させていただきます。
多言語対応で必要になる辞書ファイル(文字列リソース)の管理ですが、JSONにベタ書きして管理する方法やスプレッドシートなどを活用してミニマムに管理する方法などあると思います。ただ、中長期の運用や翻訳作業のコストなど課題をクリアできる手法を検討するのは難しいと思います。
そこで今回は、新規プロダクト開発で導入してみた「Localazy」について実際の利用方法や設定などを紹介していければと思いますので、ぜひ参考にしてもらえればと思います。
[AD] Offers MGR(オファーズマネージャー)
本記事で紹介する方法は、筆者が担当しているプロダクトである「Offers MGR(オファーズマネージャー) 」で活用されています。「Four Keys分析」や「サイクルタイム分析」など開発組織の生産性を最大化するために必要となる指標を可視化させることができます。開発組織の健全性・生産性を中長期的に改善していきたい方はぜひお問い合わせください!
はじめに
前述した通り、本記事では「Localazy」を活用した辞書ファイルの管理方法について弊社の導入方法をベースに紹介します。各社における技術戦略やチームメンバーの構成、スキルアセットなど様々な要因で本記事で紹介する内容とマッチしない場合があります。今回は一例であることをご理解の上、適宜参考にしていただけると幸いです。
なぜLocalazyを採用したのか
まず、弊社における新規プロダクトで「Localazy」を導入することにしたのかですが、理由は以下の通りになります。
- デザイナーやPMなどエンジニア以外でも辞書ファイルの追加/編集がしやすい
- Figmaなどを始めとしたWEB開発ツールとの連携ができ、同一リソースを参照できる
- 自動翻訳機能(後述)で翻訳者がいなくても翻訳作業を進めることができる
- 複数言語対応になった際も迅速に展開ができる
- WebhookやCLIが充実しており、開発フローへの組み込みが柔軟且つ容易にできた
初期構想の段階では、スプレッドシートを活用した辞書ファイルの管理を検討していましたが、中長期的な運用やメンテナンスコストの観点から課題があると考えたため、見送りました。その後、弊社VPoEに壁打ちをしていた際に「Localazy」を紹介してもらい、試験導入を通してCTOなどの意見を交換などを行い、正式採用を決めました。
Localazyとは
前述の採用理由の項目で少し記載していますが、そもそもLocalazyがどのようなツールなのか改めて紹介していきます。Localazyとは一言で表すと、「アプリケーションにおける辞書ファイル(多言語リソース)を管理できるサービス」です。低価格のプランでも機能が充実しており、複雑なUIもないため、日本語非対応ですが導入のハードルはそこまで高くないと思います。
Localazyでできること
Localazyでできることは非常に多いため、今回は中でも筆者が実際に使用していて有用だと感じたものをピックアップしてご紹介します。機能全般を知りたい方は公式サイトに掲載されていますので、ご参照ください。
一括自動翻訳
Localazyでは、以下の翻訳ツールの中から選択して一括で翻訳する機能があります。機械翻訳のため、難しい表現がある場合の精度はやや課題がありますが、最低限読める翻訳はしてくれる印象はあります。また、翻訳による表記揺れなども発生しがちなので、一括翻訳後は一度必ず目を通しておくと良いと思います。(翻訳する言語の勉強にもなります👍)
Open AI(GPT)は最近追加されていました
- Amazon Translate (default)
- Google Translate
- DeepL
- Azure Translator
コマンドラインツール
Localazyには公式でコマンドラインツールが提供されており、こちらを使用することで辞書ファイルのアップロード/ダウンロードを行うことができます。ソースコード側(コマンドライン実行環境)に設定ファイルを設置することで、ダウンロードするディレクトリやファイル名などを指定することも可能です。インストールして、トークンを設定するだけ利用できるため、開発フローへの組み込みも比較的容易で導入コストもかなり低めです。
外部連携
Localazyは、FigmaやGitHub Actionsなど、非常に多くの外部ツールと連携することができます。WEBアプリだけでなく、Android、iOSアプリの開発にも利用することができるため、多言語対応においては幅広く活用できると思います。
他にも「翻訳担当者に翻訳を依頼するサービス」や「バージョン管理機能」など魅力的な且つ実用的な機能が多数ありますが、今回は割愛させていただきます。
Localazyの使い方
ベース言語の辞書にワードを保存する
まず翻訳元になるベースの辞書ファイルを作成する必要があります。日本語をベースとする場合は、日本語の文字列を辞書に登録していきます。登録する際は、登録するワードと固有キーをセットで入力する必要があります。固有キーは特に指定はないですが、ワードを連想できるもの且つできるだけシンプルなワードで構成されていると開発環境側で呼び出す際に直感的に把握しやすくなると思います。
翻訳したいワードを選択する
ベースとなる言語を選択したら、翻訳したいワードを翻訳先のワード一覧でチェックを入れます。フィルターも充実しているため、更新順やワード検索を利用するのがおすすめです。ここでは一括で翻訳する方法を紹介しますが、ワード毎に翻訳することも可能で、単体で翻訳する際にはワード一覧で該当のワードをクリックすることで、単体編集ページに遷移します。
単体編集ページ
翻訳に使用するツールを選択
翻訳したいワードにチェックが完了したら、右上にあるメニューから「Pre-translate with MT」を選択します。その後、翻訳に使用するツールを選択します。一括翻訳の内容をすべて承認する場合は、「Approve the translations」にチェックを入れ、「Confirm」ボタンをクリックします。これで翻訳作業は概ね完了です。
ツール選択画面
弊社における利用方法
弊社の新規プロダクト開発チームのフロントエンドでは、以下のようなフローで導入をしています。
- ベースの辞書ファイルにワードを登録する
- 翻訳先の言語に機械翻訳する(数が少ない場合は、一括ではなく単体で確認しつつ翻訳)
- ワード数が多く、一括翻訳した場合は、CSVでダウンロードしてGPTに翻訳の整合性を確認/校正させる
- 確認/校正してもらったファイルをLocalazyにアップロードして変更差分があるものを上書きする
- コマンドラインで更新した辞書ファイルをダウンロードしてアプリケーションに反映
導入時のポイント
辞書ファイルはLocalazyをマスターにする
前述の通り、Localazyにはコマンドラインツール経由で辞書ファイルをアップロードする機能があります。そのため、開発環境側で辞書ファイルを編集してLocalazyで翻訳、再度ダウンロードみたいなフローも可能なのですが、これだと手間がかかる上に開発フローが複雑化してしまう可能性が高いです。そこで弊社では、ワードの追加/翻訳など辞書ファイルに関する運用は、全てLocalazy側で担保するという方針にしています。これにより、フローの見通しが良くなり、エンジニア以外のデザイナーやPMの導入ハードルを抑えることができます。
機械翻訳後はGPTなどで表記ゆれを調整
機械翻訳だと難しい表現や短縮形の表記の翻訳には精度にやや課題があります。そこで、弊社では一括でワードを追加/翻訳した際には、GPTによるダブルチェックと校正を実施しています。やり方は簡単で、機械翻訳後の辞書ファイルをダウンロードして、GPTにアップロードするだけです。地味且つ古典的なやり方ではありますが、これによりコストを抑えつつ、翻訳精度も最低限担保しています。
まとめ
今回は、弊社の新規プロダクトで導入している辞書ファイルを管理するSaaS「Localazy」について紹介しました。多言語対応における核とも言える辞書ファイルの管理と翻訳作業を1サービスに統合でき、管理/運用コストを抑えられているので、導入して良かったと感じています。これから新規プロダクトで多言語化するという方の参考に少しでも慣れば幸いです。
本記事を最後まで読んで頂き、ありがとうございました。いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします!
関連記事
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion