Internationalizing Flutter apps

学ぶこと

• How to track the device’s locale (the user’s preferred language).

• デバイスのロケール（ユーザーの優先言語）を追跡する方法。

• How to manage locale-specific app values.

• ロケール固有のアプリ値を管理する方法。

• How to define the locales an app supports.

• アプリがサポートするロケールを定義する方法。

If your app might be deployed to users who speak another language then you’ll need to internationalize it.

アプリが別の言語を話すユーザーにデプロイされる可能性がある場合は、アプリを国際化する必要があります。

That means you need to write the app in a way that makes it possible to localize values like text and layouts for each language or locale that the app supports.

つまり、アプリがサポートする言語やロケールごとに、テキストやレイアウトなどの値をローカライズできるようにアプリを作成する必要があります。

Flutter provides widgets and classes that help with internationalization and the Flutter libraries themselves are internationalized.

Flutterは、国際化に役立つウィジェットとクラスを提供し、Flutterライブラリ自体は国際化されています。

This page covers concepts and workflows necessary to localize a Flutter application using the MaterialApp and CupertinoApp classes, as most apps are written that way.

このページでは 、MaterialApp、CupertinoAppクラスを使用してFlutterアプリケーションをローカライズするために必要な概念とワークフローについて説明します。ほとんどのアプリがそのように作られているでしょうから。

However, applications written using the lower level WidgetsApp class can also be internationalized using the same classes and logic.

ただし、下位レベルのWidgetsAppクラスを使用して作成されたアプリケーションも、同じクラスとロジックを使用して国際化することができます。

国際化されたアプリのサンプル

国際化されたFlutterアプリのコードを読むことから始めたい場合は、ここに2つの小さな例があります。1つ目は可能な限りシンプルにすることを目的としており、2つ目はintlパッケージで提供されるAPIとツールを使用します。Dartのintlパッケージが初めての場合は、Dartintlツールの使用を参照してください。

• 最小限の国際化
• intlパッケージに基づく国際化

Introduction to localizations in Flutter

This section provides a tutorial on how to internationalize a Flutter application, along with any additional setup that a target platform might require.

このセクションでは、Flutterアプリケーションを国際化する方法に関するチュートリアルと、ターゲットプラットフォームで必要になる可能性のある追加のセットアップについて説明します。

Setting up an internation­alized app: the Flutter_localizations package

By default, Flutter only provides US English localizations.

デフォルトでは、Flutterは米国英語のローカリゼーションのみを提供します。

To add support for other languages, an application must specify additional MaterialApp (or CupertinoApp) properties, and include a package called flutter_localizations.

他の言語のサポートを追加するためには、MaterialApp (あるいは CupertinoApp)の新しいプロパティを新たに追加して、さらにflutter_localizationsというパッケージを含める必要があります。

As of November 2020, this package supports 78 languages.

2020年11月の時点で、このパッケージは78の言語をサポートしています。

To use flutter_localizations, add the package as a dependency to your pubspec.yaml file:

flutter_localizationsを使用するには、パッケージを依存関係としてpubspec.yamlファイルに追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

Next, run pub get packages, then import the flutter_localizations library and specify localizationsDelegates and supportedLocales for MaterialApp:

次にpub get packagesを実行します。

そしてflutter_localizationsパッケージをimport(インポート)し、MaterialAppウィジェットのlocalizationsDelegatesと、supportedLocalesを指定します。

import 'package:flutter_localizations/flutter_localizations.dart';

return MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English, no country code
    const Locale('es', ''), // Spanish, no country code
  ],
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(),
);

After introducing the flutter_localizations package and adding the code above, the Material and Cupertino packages should now be correctly localized in one of the 78 supported locales.

flutter_localizationsパッケージを導入し、上記のコードを追加すると、MaterialおよびCupertino パッケージは、サポートされている78のロケールのいずれかに正しくローカライズされます。

Widgets should be adapted to the localized messages, along with correct left-to-right and right-to-left layout.

ウィジェットは、左から右あるいは右から左の正しいレイアウトとともに、ローカライズされたメッセージに適合するはずです。

Try switching the target platform’s locale to Spanish (es) and notice that the messages should be localized.

ターゲットプラットフォームのロケールをスペイン語（es）に切り替えてみて、メッセージをローカライズする必要があることに注意してください。

Apps based on WidgetsApp are similar except that the GlobalMaterialLocalizations.delegate isn’t needed.

WidgetsAppを使っているアプリは、GlobalMaterialLocalizations.delegateが必要ないこと以外はMaterialAppの場合と同様です。

The full Locale.fromSubtags constructor is preferred as it supports scriptCode, though the Locale default constructor is still fully valid.

デフォルトのコンストラクタであるLocaleコンストラクタを使っても問題ありませんが、Locale.fromSubtagsコンストラクタはscriptCodeをサポートしていますので、そちらを使うのがおすすめです。

The elements of the localizationsDelegates list are factories that produce collections of localized values. GlobalMaterialLocalizations.delegate provides localized strings and other values for the Material Components library.

localizationsDelegatesのリストの要素は、ローカライズされた値のコレクションを生成するファクトリです。GlobalMaterialLocalizations.delegateは、マテリアルコンポーネントライブラリのローカライズされた文字列およびその他の値を提供します。

GlobalWidgetsLocalizations.delegateは、ウィジェットライブラリのデフォルトのテキスト方向（左から右または右から左）を定義します。

More information about these app properties, the types they depend on, and how internationalized Flutter apps are typically structured, can be found below.

これらのアプリのプロパティ、それらが依存するタイプ、および国際化されたFlutterアプリが通常どのように構成されているかについての詳細は、以下を参照してください。

Adding your own localized messages

Once the flutter_localizations package is added, use the following instructions to add localized text to your application.

flutter_localizationsパッケージが追加されたら、次の手順を使用して、ローカライズされたテキストをアプリケーションに追加します。

1.Add the intl package to the pubspec.yaml file:

intlパッケージをpubspec.yamlファイルに追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0 # Add this line

2.Also, in the pubspec.yaml file, enable the generate flag. This is added to the section of the pubspec that is specific to Flutter, and usually comes later in the pubspec file.

また、pubspec.yamlファイルでgenerate フラグを有効にします。これは、Flutterに固有のpubspecのセクションに追加します。

3.Add a new yaml file to the root directory of the Flutter project called l10n.yaml with the following content:

Flutterプロジェクトのルートディレクトリにl10n.yamlyamlファイルを追加し、下記の内容を記述します。

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

This file configures the localization tool; in this example, the input files are located in ${FLUTTER_PROJECT}/lib/l10n,

このファイルはローカリゼーションツールを構成します。この例では、入力ファイルは${FLUTTER_PROJECT}/lib/l10nにあり、

the app_en.arb file provides the template,

app_en.arbファイルはテンプレートを提供し、

and the generated localizations are placed in the app_localizations.dart file.

生成されたローカリゼーションはapp_localizations.dartファイルに配置されます。

4.In ${FLUTTER_PROJECT}/lib/l10n, add the app_en.arb template file. For example:

${FLUTTER_PROJECT}/lib/l10nディレクトリに、app_en.arbテンプレートファイルを追加します。例えば、

{
    "helloWorld": "Hello World!",
    "@helloWorld": {
      "description": "The conventional newborn programmer greeting"
    }
}

5.Next, add an app_es.arb file in the same directory for Spanish translation of the same message:

次に同じメッセージのスペイン語の翻訳のために同じディレクトリ(${FLUTTER_PROJECT}/lib/l10n)にapp_es.arbファイルを追加します。

{
    "helloWorld": "Hola Mundo!"
}

6.Now, run your app so that codegen takes place. You should see generated files in ${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n.

次に、codegenが実行されるようにアプリを実行します。${FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10nにコードが生成されます

7.Add the import statement on app_localizations.dart and AppLocalizations.delegate in your call to the constructor for MaterialApp.

下記のimport文を追加し、MaterialAppのコンストラクタでAppLocalizations.delegateプロパティを指定します。

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

return MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    AppLocalizations.delegate, // Add this line
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English, no country code
    const Locale('es', ''), // Spanish, no country code
  ],
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: MyHomePage(),
);

8.Use AppLocalizations anywhere in your app. Here, the translated message is used in a Text widget.

アプリ内の任意の場所でAppLocalizationsを使用します。ここでは、翻訳されたメッセージがテキストウィジェットで使用されます。

Text(AppLocalizations.of(context)!.helloWorld);

9.You can also use the generated localizationsDelegates and supportedLocales list instead of providing them manually.

手動で提供する代わりに、localizationsDelegates と supportedLocalesのリストを使うこともできます。

MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: AppLocalizations.localizationsDelegates,
  supportedLocales: AppLocalizations.supportedLocales,
);

This code generates a Text widget that displays “Hello World!” if the target device’s locale is set to English, and “Hola Mundo!” if the target device’s locale is set to Spanish.

このコードは、

ターゲットデバイスのロケールがEnglishにセットされている場合は”Hello World!”と表示し、

ターゲットデバイスのロケールがSpanishにセットされている場合“Hola Mundo!” と表示するTextウィジェットを生成します。

In the arb files, the key of each entry is used as the method name of the getter, while the value of that entry contains the localized message.

arbファイルではエントリー(要素)の値がローカライズされたメッセージを持っており、それぞれのエントリーのキーがゲッターとして使用されます。

To see a sample Flutter app using this tool, please see gen_l10n_example.

このツールを使用したFlutter appのサンプルを見るには、gen_l10n_exampleをご覧ください。

To localize your device app description, you can pass in the localized string into MaterialApp.onGenerateTitle:

デバイスアプリ説明をローカライズするには、下記のように、ローカライズされた文字列をMaterialApp.onGenerateTitleに渡します。

return MaterialApp(
  onGenerateTitle: (BuildContext context) => DemoLocalizations.of(context).title,

For more information about the localization tool, such as dealing with DateTime and handling plurals, see the Internationalization User’s Guide.

DateTimeの処理や複数形の処理など、ローカリゼーションツールの詳細については、 『Internationalization User’s Guide』を参照してください。

Localizing for iOS: Updating the iOS app bundle

iOS applications define key application metadata, including supported locales, in an Info.plist file that is built into the application bundle.

iOSアプリケーションは、アプリケーションバンドルに組み込まれているInfo.plistファイルで、サポートされているロケールを含む主要なアプリケーションメタデータを定義します。

To configure the locales supported by your app, use the following instructions:

アプリでサポートされているロケールを構成するには、次の手順を使用します。

1. Open your project’s ios/Runner.xcworkspace Xcode file.

1. プロジェクトのios/Runner.xcworkspaceXcodeファイルを開きます。
2. In the Project Navigator, open the Info.plist file under the Runner project’s Runner folder.

プロジェクトナビゲータで、RunnerプロジェクトのRunnerフォルダーのInfo.plistファイルを開きます。

3.Select the Information Property List item. Then select Add Item from the Editor menu, and select Localizations from the pop-up menu.

Information Property Listを選択し、次にEditorメニューのAdd Itemを選択します。そしてポップアップメニーのLocalizationsを選択します。

4.Select and expand the newly-created Localizations item.

新しく作成したLocalizationsアイテムを選択して展開します。

For each locale your application supports, add a new item and select the locale you wish to add from the pop-up menu in the Value field.

アプリケーションがサポートするロケールごとに、新しい項目を追加し、[Value]フィールドのポップアップメニューから追加するロケールを選択します。

This list should be consistent with the languages listed in the supportedLocales parameter.

このリストは、supportedLocalesパラメーターにリストされている言語と一致している必要があります。

5.Once all supported locales have been added, save the file.

サポートされているすべてのロケールを追加したら、ファイルを保存します。

Advanced topics for further customization

This section covers additional ways to customize a localized Flutter application.

このセクションでは、ローカライズされたFlutterアプリケーションをカスタマイズするための追加の方法について説明します。

Advanced locale definition

Some languages with multiple variants require more than just a language code to properly differentiate.

複数のバリアントを持つ一部の言語では、適切に区別するために言語コード以上のものが必要です。

For example, fully differentiating all variants of Chinese requires specifying the language code, script code, and country code.

たとえば、中国語のすべてのバリエーションを完全に区別するには、言語コード、スクリプトコード、および国コードを指定する必要があります。

This is due to the existence of simplified and traditional script, as well as regional differences in the way characters are written within the same script type.

これは、単純化された従来のスクリプトの存在と、同じスクリプトタイプ内での文字の記述方法の地域的な違いによるものです。

In order to fully express every variant of Chinese for the country codes CN, TW, and HK, the list of supported locales should include:

完全に国コードのための中国のすべての変種を発現させるためにはCN、TW、およびHK、サポートされるロケールのリストが含まれている必要があります。

supportedLocales: [
  const Locale.fromSubtags(languageCode: 'zh'), // generic Chinese 'zh'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // generic simplified Chinese 'zh_Hans'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // generic traditional Chinese 'zh_Hant'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'), // 'zh_Hans_CN'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'), // 'zh_Hant_TW'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'HK'), // 'zh_Hant_HK'
],

This explicit full definition ensures that your app can distinguish between and provide the fully nuanced localized content to all combinations of these country codes.

この明示的な完全な定義により、アプリはこれらの国コードのすべての組み合わせを区別し、完全に微妙なローカライズされたコンテンツを提供できます。

If a user’s preferred locale is not specified, then the closest match is used instead, which likely contains differences to what the user expects.

ユーザーの優先ロケールが指定されていない場合は、代わりに最も近い一致が使用されます。これには、ユーザーが期待するものとの違いが含まれている可能性があります。

Flutter only resolves to locales defined in supportedLocales.

Flutterは、supportedLocalesで定義されたロケールにのみ解決されます。

Flutter provides scriptCode-differentiated localized content for commonly used languages.

Flutterは、一般的に使用される言語向けにscriptCodeで区別されたローカライズされたコンテンツを提供します。

See Localizations for information on how the supported locales and the preferred locales are resolved.

サポートされているロケールと優先ロケールがどのように解決されるかについては、Localizationsを参照してください。

Although Chinese is a primary example, other languages like French (fr_FR, fr_CA) should also be fully differentiated for more nuanced localization.

中国語が主な例ですが、フランス語（fr_FR、fr_CA）などの他の言語も、より微妙なローカリゼーションのために完全に区別する必要があります。

Tracking the locale: The Locale class and the Localizations widget

The Locale class identifies the user’s language.

Localeクラスは、ユーザーの言語を識別します。

Mobile devices support setting the locale for all applications, usually using a system settings menu.

モバイルデバイスは、通常、システム設定メニューを使用して、すべてのアプリケーションのロケールの設定をサポートします。

Internationalized apps respond by displaying values that are locale-specific.

国際化されたアプリは、ロケール固有の値を表示することで応答します。

For example, if the user switches the device’s locale from English to French, then a Text widget that originally displayed “Hello World” would be rebuilt with “Bonjour le monde”.

たとえば、ユーザーがデバイスのロケールを英語からフランス語に切り替えると、元々「HelloWorld」と表示されていたTextウィジェットが「Bonjourlemonde」でリビルドされます。

The Localizations widget defines the locale for its child and the localized resources that the child depends on.

Localizationsウィジェットは自身の子ウィジェットのロケールと子ウィジェットが依存する翻訳用リソースを定義します。

The WidgetsApp widget creates a Localizations widget and rebuilds it if the system’s locale changes.

WidgetsAppウィジェットはLocalizationsウィジェットを作り、そしてシステムロケールが変更された時にリビルドします。

You can always lookup an app’s current locale with Localizations.localeOf():

Localizations.localeOf()を使えば、いつでもアプリの現在のロケールを検索できます。

Locale myLocale = Localizations.localeOf(context);

Specifying the app’s supported­Locales parameter

Although the flutter_localizations library currently supports 78 languages and language variants, only English language translations are available by default.

flutter_localizationsライブラリは現在、78の言語と言語のバリエーションをサポートしていますが、デフォルトでは英語の翻訳のみ利用できます。

It’s up to the developer to decide exactly which languages to support.

サポートする言語を正確に決定するのは開発者次第です。

The MaterialApp supportedLocales parameter limits locale changes.

このMaterialAppの supportedLocales パラメーターは、ロケールの変更を制限します。

When the user changes the locale setting on their device, the app’s Localizations widget only follows suit if the new locale is a member of this list.

ユーザーがデバイスのロケール設定を変更すると、アプリのLocalizationsウィジェットは、新しいロケールがこのリストのメンバーである場合にのみ対応します。

If an exact match for the device locale isn’t found, then the first supported locale with a matching languageCode is used.

デバイスロケールに完全に一致するものが見つからない場合は、言語コード(languageCode)が一致する最初にサポートされているロケールが使用されます。

If that fails, then the first element of the supportedLocales list is used.

それが失敗した場合は、supportedLocalesリストの最初の要素 が使用されます。

An app that wants to use a different “locale resolution” method can provide a localeResolutionCallback. For example, to have your app unconditionally accept whatever locale the user selects:

別の「ロケール解決」方法を使用したいアプリは、localeResolutionCallbackを提供できます。たとえば、ユーザーが選択したロケールをアプリで無条件に受け入れるには、次のようにします。

MaterialApp(
  localeResolutionCallback: (
    Locale? locale,
    Iterable<Locale> supportedLocales,
  ) {
    return locale;
  },
);

次のページ(パート2)へ>>

参考

https://flutter.dev/docs/development/accessibility-and-localization/internationalization#introduction-to-localizations-in-flutter