[Flutter] ローカライズについて知ろう(1)

2023年4月26日2023年6月12日

Flutterは、アプリの多言語化を簡単に実装できるローカリゼーション（多言語化）のサポートを提供しています。この機能を使用することで、アプリの文字列を翻訳する必要がある場合でも、簡単かつ効率的に実装することができます。以下では、Flutterでのローカライズの使い方について説明します。

1. プロジェクトの設定

まず、pubspec.yaml ファイルに以下の設定を追加します。

dependencies:
  flutter_localizations:
    sdk: flutter

# アプリがサポートする言語を指定します。
supportedLocales:
  - ja
  - en

# アプリが使用するデフォルトの言語を指定します。
# ここで指定した言語は、翻訳が利用できない場合に表示されます。
locale: ja
localizationsDelegates:
  # 翻訳データを取り扱うデリゲートを指定します。
  # 以下の例では、Flutterに標準で用意されているデリゲートを指定しています。
  - GlobalMaterialLocalizations.delegate
  - GlobalWidgetsLocalizations.delegate
  - GlobalCupertinoLocalizations.delegate

2. 翻訳データの追加

次に、lib/l10n ディレクトリを作成し、その中に app_localizations.dart ファイルを作成します。このファイルには、翻訳するテキストを含むアプリのすべての言語のデータが含まれます。

例えば、app_localizations.dart ファイルに以下のようなコードを記述することができます。

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class AppLocalizations {
  AppLocalizations(this.locale);

  final Locale locale;

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello World',
      'message': 'Welcome to my app!',
    },
    'ja': {
      'title': 'こんにちは、世界',
      'message': '私のアプリへようこそ！',
    },
  };

  String get title {
    return _localizedValues[locale.languageCode]!['title']!;
  }

  String get message {
    return _localizedValues[locale.languageCode]!['message']!;
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();
}

class _AppLocalizationsDelegate
    extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ja'].contains(locale.languageCode);
  }

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

  @override
  bool shouldReload(_AppLocalizationsDelegate old) => false;
}

ここで、 `_localizedValues` にはアプリの言語ごとに翻訳されたテキストが含まれます。 `_localizedValues` のキーには言語コードが指定され、値には翻訳されたテキストが含まれます。 `AppLocalizations` クラスには、 `get` メソッドが含まれており、 `title` や `message` のように、それぞれの翻訳されたテキストを返します。

`LocalizationsDelegate` クラスは、翻訳データの読み込みと解析を担当します。 `_AppLocalizationsDelegate` クラスでは、アプリがサポートする言語を指定しています。

3. テキストのローカライズ

最後に、アプリ内でテキストをローカライズする方法を説明します。ローカライズするテキストは、`AppLocalizations` クラスの `get` メソッドを使用して取得することができます。

例えば、以下のようなコードを記述することで、アプリ内のテキストをローカライズすることができます。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import './l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('ja', ''),
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).title),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).message),
      ),
    );
  }
}

ここでは、`Text` ウィジェットに `AppLocalizations.of(context).title` や `AppLocalizations.of(context).message` を渡すことで、ローカライズされたテキストを表示することができます。

以上が、Flutterでのローカライズの基本的な使い方についての説明です。アプリの多言語化には、多少手間がかかる部分もありますが、Flutterのローカライズ機能をうまく使えば、スムーズに多言語化することができます。

今回紹介したローカライズ方法だと、ローカライズする言語の情報は1ファイルで管理することになります。1ファイルで管理するので分かりやすさもありますが、規模が大きくなると、管理が煩雑になります。

そのため、言語ごとに別ファイルで管理する方法を別記事でまとめました。よかったらそちらも見てみてください。