月謝袋アプリの英語対応を始めました（Flutter l10n）

2026年4月1日

はじめに

月謝袋アプリのv1.1.0がiOS・Android両ストアで公開できたので、
次のステップとして英語対応（多言語化）を始めました。

なぜ英語対応をするのか

月謝管理アプリは日本だけでなく、海外の個人教室でも需要があると考えています。
ピアノ・ギター・ヨガ・ダンスなど、個人教室は世界中にあります。

まずは英語対応を進め、その後他言語にも展開していく予定です。

Flutterの多言語対応（l10n）の仕組み

Flutterには flutter_localizations パッケージと intl パッケージを使った
公式の多言語対応の仕組みがあります。

基本的な流れ

1. l10n.yaml を作成（設定ファイル）
2. ARBファイルを作成（言語ごとの翻訳ファイル）
3. flutter gen-l10n を実行（Dartコードを自動生成）
4. 各画面のハードコード文字列を AppLocalizations に置き換え

ARBファイルの例

// app_ja.arb（日本語）
{
  "@@locale": "ja",
  "calendarList": "カレンダー一覧",
  "unpaidTitle": "💰 未納 {count}名",
  "@unpaidTitle": {
    "placeholders": {
      "count": { "type": "int" }
    }
  }
}

// app_en.arb（英語）
{
  "@@locale": "en",
  "calendarList": "Calendar View",
  "unpaidTitle": "💰 Unpaid: {count}",
  "@unpaidTitle": {
    "placeholders": {
      "count": { "type": "int" }
    }
  }
}

画面での使い方

// importを追加
import '/l10n/app_localizations.dart';

// buildメソッド内で取得
final l10n = AppLocalizations.of(context)!;

// 文字列を使用
Text(l10n.calendarList)
Text(l10n.unpaidTitle(3)) // "未納 3名" or "Unpaid: 3"

ハマったポイント

initStateでAppLocalizationsが使えない

initState では context が完全に初期化されていないため、
AppLocalizations.of(context) が使えません。

解決策： didChangeDependencies を使う

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final l10n = AppLocalizations.of(context)!;
  _controller = TextEditingController(text: l10n.mailSubject);
}

iPadOS 26.3.1 で白画面になる問題

flutter run で起動すると白画面になる問題がありました。

解決策：

flutter run --no-dds

これでiPadOS 26.3.1でも正常に起動しました。

今日の対応済み画面

画面	状態
プレミアム案内ボトムシート	✅
未納一覧	✅
未納メール送信	✅
レビューダイアログ	✅
カレンダー一覧	✅

今後の予定

ログイン・登録画面
先生メイン画面（スタンプ作成）
生徒側の画面
ストア説明文の英語版追加

まだまだ画面数が多いので、数日かけて少しずつ進めていきます。

英語対応が完成したら、App Store・Google Playの英語ページも作成して
海外ユーザーへのリーチを広げていく予定です 🌏

開発環境：Flutter / Firebase / RevenueCat
GitHub：sinqwell-app/monthly-fee-stamp-app