フロントエンドアーキテクチャ¶

KanjiIQフロントエンドは、Nginxで配信されるFlutter Webアプリケーションです。オフライン学習、自動ロケール検出、51のUI言語をサポートしています。

ビルドパイプライン¶

graph LR
    S[Flutter Source] --> GL[flutter gen-l10n<br/>Generate 51 ARB files]
    GL --> B[flutter build web<br/>--release]
    B --> N[Nginx Alpine<br/>Static Serve]

フロントエンドはマルチステージDockerイメージとしてビルドされます：

ビルドステージ（Ubuntu 22.04）：Flutter SDKをインストールし、ローカライゼーションを生成し、リリースWebアセットをビルド
プロダクションステージ（Nginx Alpine）：gzip、キャッシング、SPAルーティングで静的ファイルを配信

主要技術¶

技術	バージョン	用途
Flutter	Latest stable	UIフレームワーク
Provider	^6.1.1	状態管理
GoRouter	^13.0.0	宣言的ルーティング
sqflite	^2.3.2	オフラインキャッシュ用ローカルSQLite
connectivity_plus	^5.0.2	ネットワーク状態検出
SharedPreferences	^2.2.2	永続的キー・バリューストレージ
flutter_animate	^4.5.0	UIアニメーション

アプリケーション構造¶

frontend/lib/
├── main.dart                    # App entry point, Provider setup
├── models/                      # Data models (Kanji, Vocabulary)
├── providers/                   # State management
│   └── study_provider.dart      # Flashcard session state
├── repositories/                # Data access layer
│   ├── kanji_repository.dart    # Cache-first kanji fetching
│   └── vocabulary_repository.dart
├── screens/                     # UI screens
│   ├── home_screen.dart         # Language & level selection
│   ├── study_screen.dart        # Flashcard presentation
│   └── results_screen.dart      # Session summary
├── services/                    # Business logic
│   ├── api_service.dart         # REST API client
│   ├── database_helper.dart     # Local SQLite operations
│   ├── locale_detector.dart     # Device locale detection
│   ├── locale_preferences.dart  # Language preference management
│   ├── connectivity_service.dart # Online/offline detection
│   └── sync_service.dart        # Background data synchronization
└── l10n/                        # Localization
    ├── app_en.arb               # English (template)
    ├── app_ja.arb               # Japanese
    └── ... (51 ARB files)

オフラインファーストアーキテクチャ¶

KanjiIQはキャッシュファーストのデータ戦略により、インターネット接続なしでも動作します：

graph TD
    A[User requests data] --> B{Local cache<br/>available?}
    B -->|Yes| C[Return cached data]
    B -->|No| D{Online?}
    D -->|Yes| E[Fetch from API]
    D -->|No| F[Show offline message]
    E --> G[Store in SQLite]
    G --> C
    C --> H[Background sync<br/>when online]

SQLiteが漢字と語彙をローカルに保存し、オフラインアクセスを実現
ConnectivityServiceがネットワーク状態の変化を監視
SyncServiceが接続復帰時にバックグラウンド同期を実行
SharedPreferencesがロケール設定を7日間キャッシュ

Nginx設定¶

Nginxサーバー（nginx.frontend.conf）は以下を処理します：

SPAルーティング：すべてのルートがFlutterのクライアントサイドルーティングのためにindex.htmlにフォールスルー
APIプロキシ：/api/リクエストをlocalhost:8080（同じPod内のバックエンドコンテナ）にプロキシ
Gzip圧縮：テキスト、CSS、JS、JSON、SVGに対して有効
キャッシュ制御：バージョン付き静的アセットに1年のキャッシュ、index.htmlにはキャッシュなし
セキュリティヘッダー：X-Frame-Options、X-Content-Type-Options、Referrer-Policy
ヘルスチェック：KubernetesプローブのためのKubernetesプローブ用/healthエンドポイント