Flutter アプリケーションの国際化

目次

• 主な概念
• セットアップワークフロー
• 実装ワークフロー
• 高度なフォーマッティング
• 例

主な概念

Flutter は flutter_localizations および intl パッケージを介して、国際化（i18n）とローカライゼーション（l10n）を処理します。標準的なアプローチでは、App Resource Bundle（.arb）ファイルを使用してローカライズされた文字列を定義し、その後、ウィジェットツリー内でタイプセーフなアクセスのために生成された AppLocalizations クラスにコンパイルされます。

セットアップワークフロー

Flutter プロジェクトで国際化を初期化する際に、このチェックリストをコピーして追跡してください：

• タスク進捗
  • 1. pubspec.yaml に依存関係を追加する。
  • 2. generate フラグを有効にする。
  • 3. l10n.yaml 設定ファイルを作成する。
  • 4. MaterialApp または CupertinoApp を設定する。

1. 依存関係の追加

必要なローカライゼーションパッケージをプロジェクトに追加します。ターミナルで以下のコマンドを実行します：

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:any

pubspec.yaml の dependencies に以下が含まれていることを確認してください：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

2. コード生成を有効にする

pubspec.yaml を開き、flutter セクション内の generate フラグを有効にしてローカライゼーションタスクを自動化します：

flutter:
  generate: true

3. 設定ファイルの作成

Flutter プロジェクトのルートディレクトリに l10n.yaml という新しいファイルを作成します。入力ディレクトリ、テンプレートファイル、および出力ファイルを定義します：

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

4. アプリケーションエントリーポイントの設定

main.dart で生成されたローカライゼーションと flutter_localizations ライブラリをインポートします。デリゲートとサポートされているロケールを MaterialApp または CupertinoApp に注入します。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // synthetic-package が false の場合はパスを調整してください

// ... build メソッド内
return MaterialApp(
  localizationsDelegates: const [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en'), // 英語
    Locale('es'), // スペイン語
  ],
  home: const MyHomePage(),
);

実装ワークフロー

ローカライズされたコンテンツを追加または変更する際は、このワークフローに従ってください。

1. ARB ファイルの定義

• 新しいコンテンツを作成する場合： テンプレートファイル（lib/l10n/app_en.arb）にベース文字列を追加します。コンテキストのための説明を含めます。
• 既存のコンテンツを編集する場合： サポートされているすべての .arb ファイル内のキーを見つけ、値を更新します。

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

他のロケール用に対応するファイルを作成します（例：app_es.arb）：

{
  "helloWorld": "¡Hola Mundo!"
}

2. ローカライゼーションクラスの生成

以下のコマンドを実行してコード生成をトリガーします：

flutter pub get

フィードバックループ： バリデーターを実行 → ターミナル出力で ARB 構文エラーを確認 → 不足しているコンマまたは不一致なプレースホルダーを修正 → flutter pub get を再実行します。

3. ローカライズされた文字列の使用

ウィジェットツリー内で AppLocalizations.of(context) を使用して、ローカライズされた文字列にアクセスします。これを呼び出すウィジェットが MaterialApp の子孫であることを確認してください。

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

高度なフォーマッティング

動的データ、複数形、および条件付き選択のプレースホルダーを使用します。

プレースホルダー

波括弧内にパラメーターを定義し、メタデータオブジェクト内でその型を指定します。

"hello": "Hello {userName}",
"@hello": {
  "description": "A message with a single parameter",
  "placeholders": {
    "userName": {
      "type": "String",
      "example": "Bob"
    }
  }
}

複数形

plural 構文を使用して、数量ベースの文字列バリエーションを処理します。other ケースは必須です。

"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
"@nWombats": {
  "description": "A plural message",
  "placeholders": {
    "count": {
      "type": "num",
      "format": "compact"
    }
  }
}

選択

性別別テキストなど、条件付き文字列には select 構文を使用します。

"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
  "description": "A gendered message",
  "placeholders": {
    "gender": {
      "type": "String"
    }
  }
}

例

完全な l10n.yaml

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: true
use-escaping: true

完全なウィジェット実装

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

class GreetingWidget extends StatelessWidget {
  final String userName;
  final int notificationCount;

  const GreetingWidget({
    super.key, 
    required this.userName, 
    required this.notificationCount,
  });

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;

    return Column(
      children: [
        Text(l10n.hello(userName)),
        Text(l10n.nWombats(notificationCount)),
      ],
    );
  }
}