[Flutter]easy_localizationとeasy_localization_loaderによるアプリの多言語対応（ローカライゼーション）

2020年11月18日（更新: 2020年11月18日）

プラグイン easy_localization とそのサポートプラグイン easy_localization_loader による多言語化を行ってみたので、手順と注意点について紹介します。

プラグインをインストール

pubspec.yaml の dependencies に追記し、両プラグインをプロジェクトにインストールします。

dependencies:
  easy_localization: ^2.3.3
  easy_localization_loader:
    git:
      url: git://github.com/aissat/easy_localization_loader.git
      ref: overman-dev
...

easy_localization_loader: ^0.0.2 としないのには理由がありますが、詳細は後述します。

ローカライズ用ファイルを用意

様々な形式のファイルがサポートされていますが、ここではCSV形式のファイルで多言語化を行うことにします。

例えば、英語と日本語の二言語の場合は以下のように書きます。

langs.csv

string,en_US,ja_JP
title,Title for English,日本語のタイトル
ok,OKAY,はい
cancel,CANCEL,キャンセル
fullname,My name is {first} {family}.,私の名前は {family} {first} です。
value,Score: {},点数は {} でした。

他に対応する言語がある場合、一行目をカンマで区切って追加してください。

このファイルを保存したパスを pubspec.yaml の assets に追加することを忘れないようにします。

  assets:
    - assets/translations/langs.csv

iOSの対応

Info.plist に以下を追記します。

<key>CFBundleLocalizations</key>
<array>
	<string>en</string>
	<string>ja</string>
</array>

Dartのコードを編集

main でウィジェットを起動するところで、言語設定やファイルの読み込みなどを行います。読み込んだウィジェットで実際にファイルから多言語対応したテキストを出力してみます。

...
import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_loader/easy_localization_loader.dart';

void main() {
  runApp(EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('ja', 'JP')],
      fallbackLocale: Locale('en', 'US'), // デフォルトの言語
      // startLocale: Locale('en', 'US'), // 端末の言語を強制的に設定する場合
      path: 'assets/translations/langs.csv',
      // path: 'assets/translations/',  // JSONの場合
      assetLoader: CsvAssetLoader(),
      // assetLoader: JsonAssetLoader() // JSONの場合
      child: MyApp()
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

...

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {

    print('title'.tr());
    print('value'.tr(args: [100])); // 変数も使えます
    print('fullname'.tr(namedArgs: {'first': 'Taro', 'family': 'Yamada'})); // 複数の名前付き変数

    super.initState();
  }

...

以上で様々な言語に対応したテキストを出力することができます。さらに詳細な使用方法はプラグインのドキュメントを御覧ください。

easy_localization_loaderの注意点

現時点で公開されている easy_localization_loader には、MacでCSVを読み込む際に不具合があることが確認されています。実際、正常なCSVにも関わらず、ファイルの読み込みの際に以下のエラーが発生します。

Easy Localization: Localization key [title] not found

これは改行コード（EOL）がWindowsで一般的な「CRLF」であることが前提となっていることが原因のようで、後ほど修正されると思います。それまでは修正の含まれるブラントからプラグインを持ってくるしかないようです。

参考: Localization failed for CSV loader v2 · Issue #190 · aissat/easy_localization · GitHub

以上、easy_localizationとeasy_localization_loaderによるアプリの多言語対応についてでした。

関連する記事

コメントを残す

メールアドレスが公開されることはありません。