flutter-setup-localization

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

目次

• 基本概念
• セットアップのワークフロー
• 実装のワークフロー
• 高度なフォーマット
• 例

基本概念

Flutter では、flutter_localizations と intl パッケージを使って国際化（i18n）とローカライズ（l10n）を処理します。標準的な方法では、アプリリソースバンドル（.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'; // Adjust path if synthetic-package is false

// ... inside build method
return MaterialApp(
  localizationsDelegates: const [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en'), // English
    Locale('es'), // Spanish
  ],
  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)),
      ],
    );
  }
}