Flutter-国際化

現在、モバイルアプリケーションはさまざまな国のお客様によって使用されており、その結果、アプリケーションはさまざまな言語でコンテンツを表示する必要があります。アプリケーションを複数の言語で動作させることを、アプリケーションの国際化と呼びます。

アプリケーションが異なる言語で動作するためには、まずアプリケーションが実行されているシステムの現在のロケールを見つけてから、その特定のロケールでコンテンツを表示する必要があります。このプロセスはローカリゼーションと呼ばれます。

Flutterフレームワークは、ローカライズ用の3つの基本クラスと、アプリケーションをローカライズするための基本クラスから派生した広範なユーティリティクラスを提供します。

基本クラスは次のとおりです-

Locale-ロケールは、ユーザーの言語を識別するために使用されるクラスです。たとえば、en-usはアメリカ英語を識別し、次のように作成できます。

Locale en_locale = Locale('en', 'US')

ここで、最初の引数は言語コードであり、2番目の引数は国コードです。 _Argentinaスペイン語（es-ar）_ロケールを作成する別の例は次のとおりです-

Locale es_locale = Locale('es', 'AR')

Localizations-Localizationsは、Localeとその子のローカライズされたリソースを設定するために使用される一般的なウィジェットです。

class CustomLocalizations {
   CustomLocalizations(this.locale);
   final Locale locale;
   static CustomLocalizations of(BuildContext context) {
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations);
   }
   static Map<String, Map<String, String>> _resources = {
      'en': {
         'title': 'Demo',
         'message': 'Hello World'
      },
      'es': {
         'title': 'Manifestación',
         'message': 'Hola Mundo',
      },
   };
   String get title {
      return _resources[locale.languageCode]['title'];
   }
   String get message {
      return _resources[locale.languageCode]['message'];
   }
}

ここで、CustomLocalizationsは、ウィジェットの特定のローカライズされたコンテンツ（タイトルとメッセージ）を取得するために特別に作成された新しいカスタムクラスです。 ofメソッドは、Localizationsクラスを使用して新しいCustomLocalizationsクラスを返します。

LocalizationsDelegate <T>-LocalizationsDelegate <T>は、Localizationsウィジェットがロードされるファクトリクラスです。それは3つのオーバーライド可能なメソッドを持っています-

isSupported-ロケールを受け入れ、指定されたロケールがサポートされているかどうかを返します。

@override
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

load-ロケールを受け入れ、指定されたロケールのリソースのロードを開始します。

@override
Future<CustomLocalizations> load(Locale locale) {
   return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}

shouldReload-Localizationsウィジェットの再構築時にCustomLocalizationsの再読み込みが必要かどうかを指定します。

@override
bool shouldReload(CustomLocalizationsDelegate old) => false;

CustomLocalizationDelegateの完全なコードは次のとおりです-

class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();
   @override
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
   @override
   Future<CustomLocalizations> load(Locale locale) {
      return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
   }
   @override bool shouldReload(CustomLocalizationsDelegate old) => false;
}

一般的に、Flutterアプリケーションは2つのルートレベルウィジェット、MaterialAppまたはWidgetsAppに基づいています。 Flutterは、両方のウィジェットに既製のローカライズを提供し、それらはMaterialLocalizationsとWidgetsLocaliationsです。さらに、FlutterはMaterialLocalizationsとWidgetsLocaliationsをロードするデリゲートも提供します。これらはそれぞれGlobalMaterialLocalizations.delegateとGlobalWidgetsLocalizations.delegateです。

概念をテストして理解するために、簡単な国際化対応アプリケーションを作成しましょう。

新しいflutterアプリケーションflutter_localization_appを作成します。
Flutterは、専用flutterパッケージflutter_localizationsを使用した国際化をサポートしています。ローカライズされたコンテンツをメインSDKから分離するという考え方です。 pubspec.yamlを開き、以下のコードを追加して国際化パッケージを有効にします-

dependencies:
   flutter:
      sdk: flutter
   flutter_localizations:
      sdk: flutter

Androidスタジオは、pubspec.yamlが更新されたことを示す次のアラートを表示します。

アラート

[依存関係の取得]オプションをクリックします。 Androidスタジオはインターネットからパッケージを取得し、アプリケーション用に適切に構成します。
次のようにmain.dartにflutter_localizationsパッケージをインポートします-

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;

ここで、SynchronousFutureの目的は、カスタムローカリゼーションを同期的にロードすることです。
以下に指定されているように、カスタムローカリゼーションとそれに対応するデリゲートを作成します-

class CustomLocalizations {
   CustomLocalizations(this.locale);
   final Locale locale;
   static CustomLocalizations of(BuildContext context) {
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations);
   }
   static Map<String, Map<String, String>> _resources = {
      'en': {
         'title': 'Demo',
         'message': 'Hello World'
      },
      'es': {
         'title': 'Manifestación',
         'message': 'Hola Mundo',
      },
   };
   String get title {
      return _resources[locale.languageCode]['title'];
   }
   String get message {
      return _resources[locale.languageCode]['message'];
   }
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();

   @override
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

   @override
   Future<CustomLocalizations> load(Locale locale) {
      return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
   }
   @override bool shouldReload(CustomLocalizationsDelegate old) => false;
}

ここでは、アプリケーションのタイトルとメッセージのローカライズをサポートするためにCustomLocalizationsが作成され、CustomLocalizationsをロードするためにCustomLocalizationsDelegateが使用されます。
MaterialAppプロパティ、localizationsDelegates、supportedLocalesを使用して、下で指定されているように、MaterialApp、WidgetsApp、およびCustomLocalizationのデリゲートを追加します-

localizationsDelegates: [
   const CustomLocalizationsDelegate(),
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
   const Locale('en', ''),
   const Locale('es', ''),
],

CustomLocalizationsメソッドを使用して、ローカライズされたタイトルとメッセージの値を取得し、以下に指定されている適切な場所で使用します-

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(CustomLocalizations .of(context) .title), ),
         body: Center(
            child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                  Text( CustomLocalizations .of(context) .message, ),
               ],
            ),
         ),
      );
   }
}

ここでは、簡単にするためにMyHomePageクラスをStatefulWidgetからStatelessWidgetに変更し、CustomLocalizationsを使用してタイトルとメッセージを取得しました。
アプリケーションをコンパイルして実行します。アプリケーションは、コンテンツを英語で表示します。 アプリケーションを閉じます。 設定→システム→言語と入力→言語**に移動します。
[言語の追加]オプションをクリックして、スペイン語を選択します。これにより、スペイン語がインストールされ、オプションの1つとしてリストされます。
スペイン語を選択し、英語の上に移動します。これは、第一言語としてスペイン語に設定され、すべてがスペイン語のテキストに変更されます。
国際化アプリケーションを再起動すると、タイトルとメッセージがスペイン語で表示されます。
設定で英語オプションをスペイン語オプションの上に移動することにより、言語を英語に戻すことができます。
アプリケーションの結果（スペイン語）は、以下のスクリーンショットに示されています-

マニフェスタシオン

intlパッケージの使用

Flutterは、ローカライズされたモバイルアプリケーションの開発をさらに簡素化するintlパッケージを提供します。 intlパッケージは、言語固有のメッセージを半自動生成するための特別なメソッドとツールを提供します。

intlパッケージを使用して新しいローカライズアプリケーションを作成し、概念を理解しましょう。

新しいflutterアプリケーションflutter_intl_appを作成します。
pubspec.yamlを開き、パッケージの詳細を追加します。

dependencies:
   flutter:
      sdk: flutter
   flutter_localizations:
      sdk: flutter
   intl: ^0.15.7
   intl_translation: ^0.17.3

Androidスタジオは、pubspec.yamlが更新されたことを通知する以下のアラートを表示します。

更新の通知

[依存関係の取得]オプションをクリックします。 Androidスタジオはインターネットからパッケージを取得し、アプリケーション用に適切に構成します。
前のサンプルflutter_internationalization_appからmain.dartをコピーします。
以下に示すように、国際パッケージをインポートします-

import 'package:intl/intl.dart';

以下に示すコードに示すように、CustomLocalizationクラスを更新します-

class CustomLocalizations {
   static Future<CustomLocalizations> load(Locale locale) {
      final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
      final String localeName = Intl.canonicalizedLocale(name);

      return initializeMessages(localeName).then((_) {
         Intl.defaultLocale = localeName;
         return CustomLocalizations();
      });
   }
   static CustomLocalizations of(BuildContext context) {
      return Localizations.of<CustomLocalizations>(context, CustomLocalizations);
   }
   String get title {
      return Intl.message(
         'Demo',
         name: 'title',
         desc: 'Title for the Demo application',
      );
   }
   String get message{
      return Intl.message(
         'Hello World',
         name: 'message',
         desc: 'Message for the Demo application',
      );
   }
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate<CustomLocalizations> {
   const CustomLocalizationsDelegate();

   @override
   bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
   @override
   Future<CustomLocalizations> load(Locale locale) {
      return CustomLocalizations.load(locale);
   }
   @override
   bool shouldReload(CustomLocalizationsDelegate old) => false;
}

ここでは、カスタムメソッドの代わりにintlパッケージの3つのメソッドを使用しました。それ以外は、概念は同じです。

Intl.canonicalizedLocale-正しいロケール名を取得するために使用されます。
Intl.defaultLocale-現在のロケールを設定するために使用

Intl.message-新しいメッセージを定義するために使用されます。

*l10n/messages_all.dart* ファイルをインポートします。 このファイルをすぐに生成します

import 'l10n/messages_all.dart';

次に、フォルダーlib/l10nを作成します
コマンドプロンプトを開き、アプリケーションのルートディレクトリ（pubspec.yamlが利用可能）に移動し、次のコマンドを実行します-

flutter packages pub run intl_translation:extract_to_arb --output-
   dir=lib/l10n lib/main.dart

ここで、コマンドは、異なるロケールでメッセージを作成するためのテンプレートintl_message.arbファイルを生成します。ファイルの内容は次のとおりです-

{
   "@@last_modified": "2019-04-19T02:04:09.627551",
   "title": "Demo",
   "@title": {
      "description": "Title for the Demo application",
      "type": "text",
      "placeholders": {}
   },
   "message": "Hello World",
   "@message": {
      "description": "Message for the Demo
      application",
      "type": "text",
      "placeholders": {}
   }
}

intl_message.arbをコピーして、新しいファイルintl_en.arbを作成します。
intl_message.arbをコピーし、新しいファイルintl_es.arbを作成して、以下に示すようにコンテンツをスペイン語に変更します-

{
   "@@last_modified": "2019-04-19T02:04:09.627551",
   "title": "Manifestación",
   "@title": {
      "description": "Title for the Demo application",
      "type": "text",
      "placeholders": {}
   },
   "message": "Hola Mundo",
   "@message": {
      "description": "Message for the Demo application",
      "type": "text",
      "placeholders": {}
   }
}

次に、次のコマンドを実行して、最終的なメッセージファイルmessages_all.dartを作成します。

flutter packages pub run intl_translation:generate_from_arb
--output-dir=lib\l10n --no-use-deferred-loading
lib\main.dart lib\l10n\intl_en.arb lib\l10n\intl_es.arb

アプリケーションをコンパイルして実行します。上記のアプリケーションflutter_localization_appと同様に機能します。

Flutter-internationalization

Flutter-国際化

intlパッケージの使用