Table of Contents
プラグイン easy_localization とそのサポートプラグイン easy_localization_loader による多言語化を行ってみたので、手順と注意点について紹介します。
プラグインをインストール
pubspec.yaml の dependencies に追記し、両プラグインをプロジェクトにインストールします。
1 2 3 4 5 6 7 | 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
1 2 3 4 5 6 | 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 に追加することを忘れないようにします。
1 2 | assets: - assets/translations/langs.csv |
iOSの対応
Info.plist に以下を追記します。
1 2 3 4 5 | < key >CFBundleLocalizations</ key > < array > < string >en</ string > < string >ja</ string > </ array > |
Dartのコードを編集
main でウィジェットを起動するところで、言語設定やファイルの読み込みなどを行います。読み込んだウィジェットで実際にファイルから多言語対応したテキストを出力してみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | ... 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によるアプリの多言語対応についてでした。