flutterでiOSアプリの多言語対応（ローカライズ）を行ってみた
はじめに
海外も含めたリリースをしてみたいということで、flutterにて多言語対応してみました。
現在審査中のため、Appleより多言語対応を理由にリジェクトされた場合は、記事をアップデートします。
多言語対応（ローカライズ）とは
アプリケーションにおいてのローカライズとは、複数の地域/言語で利用できるようにすることをローカライズと呼びます。
詳細に分類すると以下のようにいくつかあると思います。
- 言語のローカライズ
- 日付や時間のローカライズ
- 位置情報のローカライズ
- 数字の単位、通貨のローカライズ
本記事のローカライズとは、英語と日本語それぞれに言語を設定できるようにし、どちらかを選ぶことでUIの表示がすべて変わることを指します。
具体的には、アプリ内の文字列やメッセージを各地域/言語用のJSONファイルに定義してText classで呼び出す処理を実装しました。
プライマリ言語を英語にしたい
以下のzenn記事より、「プライマリ言語は日本語でもいいですが、多言語対応したい場合はデフォルトを英語にしておくと、日本語以外が全部英語になるので便利です。」とのことで、プライマリ言語を英語とし、英語４つと日本語の4リージョンをまとめてリリース審査に出しました。
バージョン
Flutter 3.16.8
Dart 3.2.5
パッケージ
1.flutter_localizationsをターミナルで追加（上記公式参照）
$ flutter pub add flutter_localizations --sdk=flutter
$ flutter pub add intl
2.pabspec.yamlを編集、追加
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
uses-material-design: true
generate: true
3.main.dartに組み込む
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
Widget build(BuildContext context) {
return MaterialApp.router(
debugShowCheckedModeBanner: false,
title: 'KnocQnow',
localizationsDelegates: AppLocalizations.localizationsDelegates, // flutter_gen ローカライズをサポート
supportedLocales: AppLocalizations.supportedLocales, // flutter_gen カスタム言語設定を含むリスト
locale: locale,//アプリ起動時のデバイス設定やユーザー設定に基づいて動的に変更
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
fontFamily: "GlacialIndifference",
useMaterial3: true,
),
routerConfig: _router,
);
}
4.flutter_genで読み込むファイルを編集して細かい部分を指定する
dartファイル以外にも設定ファイルの編集が必要なります。
l10n/ フォルダ内に app_en.arb, app_ja.arb ファイルを追加
app_en.arb は英語ローカライズ, app_ja.arb は日本語ローカライズ用
以下はチュートリアル画面に表示される文言を英語版と日本語版で変更しています。
英語ローカライズ
"@_TUTORIAL": {},
"tutorial_1_title": "Sign up",
"tutorial_2_title": "Add friends",
"tutorial_3_title": "Search by User ID",
"tutorial_4_title": "Turn the button on",
"tutorial_5_title": "Push notification",
"tutorial_1_body": "Register your account first",
"tutorial_2_body": "Press the \"Add friends\" button",
"tutorial_3_body": "Search by User ID and add your friends",
"tutorial_4_body": "Select people to notify and press the \"Send\" button",
"tutorial_5_body": "Press the button in the center to send a notification"
tutorial_5_titleとtutorial_5_bodyが表示されたイメージ
日本語ローカライズ
"@_TUTORIAL": {},
"tutorial_1_title": "新規登録",
"tutorial_2_title": "友だちを追加",
"tutorial_3_title": "User IDで検索",
"tutorial_4_title": "送るボタンを押す",
"tutorial_5_title": "通知を送ろう",
"tutorial_1_body": "まずは、アカウントを登録しよう",
"tutorial_2_body": "友達を追加ボタンを押そう",
"tutorial_3_body": "友だちのUser IDを検索して追加しよう",
"tutorial_4_body": "通知を送りたい人を選んで右上のボタンを押そう",
"tutorial_5_body": "画面中央のボタンを押して通知を送ろう"
tutorial_5_titleとtutorial_5_bodyが表示されたイメージ
5.Textを変数にする
そして下記コマンドで呼び出し
Text(AppLocalizations.of(context)!.xxx)
(xxx に.arbファイルに記載した key を指定する)
6.Textがあるファイルに全てimport
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
7.flutter_genでJSONファイルから翻訳
JSONファイルをコードとして生成し、AppLocalizationsクラス(localizationsDelegatesに含まれるクラス)でロードできるようにします。
flutter gen-l10n
.arbファイルの編集方法
ファイルは基本的にjson形式で書かれています。
設定言語を定義
日本語ファイル
"@@locale ": "ja",
英語ファイル
"@@locale ": "en",
keyにどのローカルでも共通の文言を割り当て、valueにそれぞれの言語ファイルごとに割り当てる
日本語ファイル
"notification": "通知",
"add": "追加",
英語ファイル
"notification": "Notification",
"add": "Add",
のようにローカライズしたい言葉を”key”: “value“, 形式で書いていきます。
このkey (ここでは notification 及び add) は app_en.arb ファイルと app_ja.arb ファイルで同様のものを用いる必要があるため、注意しましょう。
更新したらターミナルでflutter gen-l10n
“key“: “value“, 形式で.arbファイルに記載したら、随時ターミナルで下記コマンドを実行します。
flutter gen-l10n
そうすると.arbファイル内の記載に基づいてフォルダ内に設定ファイルが作成されます。
応用
多言語対応のパッケージは複数ある
多言語対応用のファイルは自動生成できる
次回は上記のような対応もしてみたいですね。
お読みいただきありがとうございました。
参考
Discussion