UZU Docs

Appearance

多言語化対応について ​

多言語化する対象 ​

Backend ​

全て対象

JavaScript ​

web, studio, studio_editor

Dart ​

mobile とそれに依存しているライブラリ (design_system, play_screen_v2, …)

JavaScript の多言語化 ​

web ​

  1. src/app/i18n配下にそれぞれのlocale別のフォルダがあるので、それを編集する

  2. jsonを変更したら、新規ファイルを作成した場合はWebディレクトリ配下で以下のコマンドを叩く

typescript
$ npm run toc

formatterで落ちることがあるのでその後、resources.ts に移動して formatterをかける また、新規ファイルを作成した場合は他の言語にも同名の空ファイルを作成する(自動翻訳のgithub actionsを走らせるため)

studio・studio-editor ​

  1. src/i18n配下にそれぞれのlocale別のフォルダがあるので、それを編集する。この時、編集するのは日本語のみで良い(他の言語を自動で翻訳してくれるGithub Acitonsが走るため)

  2. 新規ファイルを作成した場合はstudio/studio-editorディレクトリ配下で以下のコマンドを叩く

typescript
$ npm run toc

formatterで落ちることがあるのでその後、resources.ts に移動して formatterをかける また、新規ファイルを作成した場合は他の言語にも同名の空ファイルを作成する(自動翻訳のgithub actionsを走らせるため)

  1. 以下のような形で利用する
typescript
const {t} = useTranslation("1で編集したファイル名")

t("key名")
  1. 二つ以上のコンポーネントを含む多言語対応を行う場合、Transというコンポーネントを使う
typescript
{
 wordsWithLink: "リンクがこの後挿入される<link>リンク</link>テキスト",
}
typescript
<Trans
   ns="app"
   i18nKey="wordsWithLink"
   components={{
	   link: (
       <Link
         href="test.com"
       />
     ),
   }}
/>

Backend の多言語化 ​

  1. l18n 配下に dict_ja.yaml ファイルがあるので、それを編集する

TIP

ai による自動翻訳機能を github actions で行われるので、新しいkeyを日本語で追加した時はそのkeyの内容が Github Actions で自動で追加されます。

  1. yaml を変更したら、以下のいずれかのコマンドで変更を反映させる
bash
$ task watch # 変更監視
$ go generate i18n/generate.go # 都度反映
  1. 以下のような形で利用
go
i18n.GetDict(lang).Achievement.Scenario

言語情報は、http request header からとってくるパターンと、各ユーザーの設定DBからとってくるパターンがあるので注意

Dart の多言語化 ​

利用するライブラリ ​

基本的には flutter デフォルトの flutter_localization を利用する。mobile においてのみ、slang を利用する。

なぜ、mobile で flutter_localization を利用しないか ​

プレイ外は他のパッケージと比べて、文言の修正が多い。また、ダイナミックな設定も必要となることがある。context が不要なのも魅力的。 したがってより高性能な slang を利用する

なぜ、すべてのパッケージで slang を利用しないか ​

調べた限り、 slang をパッケージ間で受け渡す方法にいい方法はない。ウズでは、設定から言語設定を変更できたり、シナリオによって言語設定が上書きされるので、widget tree に応じて、言語設定を流せるようにする必要があるが、slang の provider では言語設定と翻訳ファイルがセットになってしまってるのでこれを分離して管理できなさそう。 また、widgetbook は flutter_localizations の利用を前提としてるので、slang は利用しずらい

使い方 ​

mobile (slang) ​

  1. 言語ファイルは以下のように配置されている。

TIP

ai による自動翻訳機能を github actions で行われるので、新しいkeyを日本語で追加した時はそのkeyの内容が Github Actions で自動で追加されます。

assets/i18n
├── _missing_translations.yaml
├── _unused_translations.yaml
├── common
│   ├── common_en.i18n.yaml
│   └── common_ja.i18n.yaml
├── features
│   ├── features_en.i18n.yaml
│   └── features_ja.i18n.yaml
├── others
│   ├── others_en.i18n.yaml
│   └── others_ja.i18n.yaml
└── pages
    ├── pages_en.i18n.yaml
    └── pages_ja.i18n.yaml

common, features, pages は views 配下の各ディレクトリ、others はその他を反映している。

  1. yaml を変更したら、以下のいずれかのコマンドで変更を反映させる
bash
$ task watch # 変更監視
$ dart run slang # 都度反映
  1. 以下のような形で利用
dart
inAppNotification(
  t.pages.authentication.login.firstScreen
      .osNotSupportPhone,
);

dart その他 (flutter_localization) ​

  1. lib/l10n 配下に arb ファイルがあるので、それを編集する

  2. yaml を変更したら、以下のいずれかのコマンドで変更を反映させる

bash
$ task watch # 変更監視
$ flutter gen-l10n # 都度反映
  1. 以下のような形で利用
dart
Text(
  DesignSystemL10n.of(context).balance,
  style: AppTextStyle.normal.px12.regular(color: textColor(context)),
),

言語追加の仕方 ​

言語は JS / Backend / Dart で全て新言語をサポートするように実装して、最終的に決められた日にサービスインする。

サービスインする言語の追加する ​

どの言語がサービスインしているかどうかは、remoteConfig の supportedLanguage がSSOTとなる。サービス個別に supportedLanguage を定義するのは禁止する。

言語実装を追加する ​

Translator ​

  • dicts.jsonに新しいファイル定義を追加 (UZU Translator が読む正本)

Dart ​

翻訳ファイル

  • dart/apps/mobile/assets/i18n/
  • dart/packages/design_system/lib/l10n/配下に空のyamlファイル arb ファイルを追加

コード変更部分

  1. locale.dart を修正
  2. events/create/introductions.dart を修正
  3. build_form_url/contact_form.dart を修正
  4. build_form_url/report_form.dart を修正
  5. web_urls.dart を修正
  6. localized_image.dart を修正

JavaScript ​

翻訳ファイル dicts.json のjavascript配下のpathを対象に新しい言語コードのフォルダを追加し、jaフォルダ配下の全ファイルと同名のファイルを追加する

Backend ​

翻訳ファイル

  1. i18n/ 配下のyamlファイルを追加する。
  2. meta.yaml を修正する