📝

Flutterアプリの多言語対応 i18n Allyで運用を効率化

に公開
Flutter
VS Code
Dart
i18n
多言語対応
tech

はじめに

最近、仕事でFlutterアプリの英語版への対応を担当することになりました。
そこで今後の運用を考えて i18n Ally を使用しました。
Flutterアプリの多言語対応で運用に不安がある方は読んでみてください！

記事を読むメリット

i18n Allyのインラインアノテーションという機能によって、以下の２つが可能になる

  • キーで参照している文言を↓のように呼び出し側で確認できるようになる
  • command + クリック で辞書ファイルの定義場所にジャンプできるようになる

使用したパッケージ

  • easy_localization 3.0.8
  • i18n Ally （運用改善）

今回の多言語対応はFlutterの easy_localizationというパッケージを使用しました。
他のパッケージを使用していても少し変えれば適用可能だと思います。

導入理由

普通にパッケージを使用して多言語対応のみを行うと以下のような不便が生じると思います。

  • 辞書ファイル(ja.jsonやen.jsonなど)の定義場所に辿り着くのに苦労する
  • Viewファイルなどの呼び出し側で定義されている言語を視認できない

規模が拡大して辞書ファイルが肥大化するとさらに不便になる可能性もあります。

i18n Ally について

i18n Ally はVS codeの拡張機能の一つで、多言語対応に便利な機能を備えたものです。
もともとFlutter向けではないのですが設定すればFlutterでも使用可能になります。
今回はその設定方法を解説します。

実装

1.setting.jsonとi18n-ally-custom-framework.ymlを作成

次のように.vscodeフォルダ内の setting.json と i18n-ally-custom-framework.yml を作成してください。

.vscodeフォルダはプロジェクトルートに配置してください。
既に setting.json がある場合はそのままこの後の2を追加すれば大丈夫です。

2.setting.jsonに設定を追加

setting.jsonに以下を追加してください。

{
  "i18n-ally.localesPaths": [
    "assets/translations"
  ],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.keystyle": "nested",
  "i18n-ally.annotations": true,
  "i18n-ally.namespace": false,
  "i18n-ally.pathMatcher": "{locale}.json"
}

i18n-ally.localesPaths -> 辞書ファイルの存在するフォルダへのパスです
i18n-ally.keystyle　-> 辞書ファイルの構造を表します。nestedの場合は以下のようにjsonが階層構造になっている必要があります。

{
  "screen": {
    "home": {
      "title": "Home"
    }
  }
}

3.i18n-ally-custom-framework.ymlを作成

さらに.vscodeフォルダに i18n-ally-custom-framework.yml を作成し、以下のように編集してください。

languageIds:
  - dart
usageMatchRegex:
  - "['\"]([\\w\\.]+)['\"]\\.tr\\([^)]*\\)"
  - "\\.tr\\(\\s*['\"]([\\w\\.]+)['\"].*\\)"
refactorTemplates:
  - "\"$1\".tr()"
monopoly: true

easy_lozalizationの呼び出し方である↓に対応するために正規表現を使用しています。

'home.title'.tr()
"screen.setting.label".tr()

4.i18n Ally を有効化し、VS code再起動

↓の i18n ally を有効化したのち、VS codeを再起動してください。

補足

ここまでで、i18n Allyが使えるようになったと思います。
参照する辞書ファイルは画面右下の ↓ で変更可能です。

まとめ

最後まで読んでいただきありがとうございました。
この記事がこれから導入する人の参考になれば幸いです。

Discussion