Zenn
📖

Flutter多言語化手順（L10n）

2022/03/28に公開
Flutter
Dart
l10n
intl
多言語
tech

前提

３年前で、多言語化する時が、まだflutter_i18nだけの時代でした。
Android Studioの専用プラグイン使って、.arbファイルを自動的に反映するようになりました。
もちろん、この方法は多言語可能で継続的に使えます。

２年前で、VSCodeでFlutterやるのは流行り始め、dart開発元であるflutter_localizationsのintlに目を付けました。

目指すのは多言語情報をアプリ開発するとき、便利に扱えることです、一行の呼び方で。
公式の手順を参考して、漏れなく、失敗しない手順をまとめできたらいいなぁと思います。

ライブラリー周り

intlを使うので、
最新バージョンを確認してください。

https://pub.dev/packages/intl

pubspec.yaml

dependencies:
    ...
    flutter_localizations: # 追加して
    sdk: flutter           # 追加して
    intl: ^0.17.0          # 追加して（現時点で最新のintlです。
    ...

# リソース設定部分
flutter:
  ...
  generate: true # 追加して
  ...

これでintlはアプリ開発環境に入れました。

翻訳ファイル準備

arb-dirで定義した arb-dir に .arb ファイルを作成。
基本的に『％言語コード％』で管理するのをお勧めします。
例えば、
app_{言語コード}.dart
の例が多いですが、そこで好みにいきましょう。

翻訳なら、もしアプリ作るならば、製品ではあり得る言語コード表です。

コード 日本語名
id インドネシア語
en 英語
ko 韓国語
es スペイン語
zh 中国語
zh-TW 中国語(繁体字)
de ドイツ語
ja 日本語
ne ネパール語
no ノルウェー語
fr フランス語
pl ポーランド語
pt ポルトガル語
la ラテン語

全部の言語コードに興味あれば、Wiki使おう。

l10n.yaml

rootフォルダーで l10n.yaml ファイルを作成、中身は以下になります

arb-dir: lib/l10n　　　　　　　　　　　　　　　　　　# libの中におすすめです、その他の場合、pubspec.yamlにリソース管理しないといけない
template-arb-file: en.arb # テンプレートのファイル（lib/l10nに格納）、デフォルト言語にしましょう
output-class: L10n        # クラスの名前を定義、無い時がAppLocalizationsです、設定するのをおすすめ
output-localization-file: app_localizations.dart　　　# importするファイル名です

このファイルはintlのルールを決める場所と認識しましょう。

多言語ファイル作業

{各言語}.arbファイルを作成し、lib/l10n　に格納します。

例文：

{
  "@@locale": "ja",
  "test": "テスト",
  "@test": {
  　　　"description": "これはテストの翻訳説明文です、基本的に使わないですが、運営管理に活用ところです。注釈と認識しましょう"
  }
}

コード整理

翻訳のライブラリーや翻訳準備終わったので、開発時の呼び方定義に進めて確認しましょう。

自動作成

.arbで定義したものを呼べるようになるクラスを自動作成する必要があり、以下のコードでできます。
自動的に反映していない場合、下記のshを実行してください。

flutter gen-l10n

import

自動生成したものは ${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.になります。
上記のフォルダに格納され、packageとして使う必要があります。
importするには下記の手順必要な場合あります、エラーになったら、下記をやってみましょう

flutter pub get

使う

ここまで来たら、もう少しだけになると思います。

最後に、入り口のdartファイル（MaterialAppの入り口）に、下記のものをインポートします。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

MaterialApp(...)といい、MaterialApp.route(...)といい、下記を追加しましょう。

localizationsDelegates: L10n.localizationsDelegates,
supportedLocales: L10n.supportedLocales,
locale: [アプリで使うLocale、制御して言語自動変更しましょう],

開発時、多言語使う時が、

L10n.of(context)!.{jsonのキー} //L10nはl10n.yamlで定義したクラス名です。

上記で多言語化完成になります。

intlを使って多言語化するのは、公式でおすすめ手段なので、今後flutterバージョンアップとともに色々機能を強化するかもしれない、活用した方がいいでしょう〜。

Discussion