FlutterとFirebaseで開発した 英語の瞬間翻訳トレーニングアプリ Lala の技術

Lalaは英語の会話力向上を目的とした瞬間翻訳トレーニングアプリです。
次々と出題される文章を瞬間的に翻訳（脳内翻訳）して会話力を鍛えるアプリです。

■ 使い方
無料でご利用頂けます。

チャット形式で出題される日本語を制限時間内に翻訳していきます。
出題された数秒後に英語の回答例が表示されます。

・対応言語（出題 => 回答例）
日本語 => 英語
英語 => 日本語

■ 特徴
・チャット形式で日本語とその回答例が出題されます
・日常会話で使われる英作文を用意しております
・オリジナルの英作文を作成して学習できます
・すぐに学習できるようUIを工夫しております
・アプリのデータは全てクラウド上で安全に管理しています

.
├── app.dart
├── app_bloc.dart
├── common
│   ├── extension
│   │   └── ....dart
│   ├── flavor.dart
│   ├── helper
│   │   └── ....dart
│   └── master
│       └── ....dart
├── di_container.dart
├── domain
│   ├── dto
│   │   └── ....dart
│   ├── model
│   │   └── ....dart
│   ├── repository
│   │   └── ....dart
│   ├── state
│   │   └── ....dart
│   ├── type
│   │   └── ....dart
│   └── use_case
│       └── ....dart
├── infrastructure
│   └── ....dart
├── l10n
│   └── ....dart
├── main.dart
├── main_development.dart
├── main_production.dart
├── main_staging.dart
└── presentation
    ├── common
    │   └── ....dart
    ├── pages
    │   └── ....dart
    ├── route
    │   └── ....dart
    └── widget
        └── ....dart

.
├── package-lock.json
├── package.json
├── src
│   ├── common
│   │   ├── helper
│   │   │   └── ....ts
│   │   └── master
│   │       └── ....ts
│   ├── domain
│   │   ├── dto
│   │   │   └── ....ts
│   │   ├── model
│   │   │   └── ....ts
│   │   ├── repository
│   │   │   └── ....ts
│   │   ├── type
│   │   │   └── ....ts
│   │   └── use_case
│   │       └── ....ts
│   ├── index.ts
│   ├── infrastructure
│   │   └── ....ts
│   ├── inversify.config.ts
│   ├── presentation
│   │   └── v1
│   │       ├── callable
│   │       │   └── ....ts
│   │       ├── firestore
│   │       │   └── ....ts
│   │       ├── index.ts
│   │       └── router
│   │           └── ....ts
│   └── test
│       ├── firebase_functions
│       │   ├── index.ts
│       │   ├── module
│       │   │   └── ...test.ts
│       │   └── use_case
│       │       └── ...test.ts
│       └── firestore_rule
│           ├── ...test.ts
│           └── index.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock

final _googleSignIn = GoogleSignIn(scopes: ['email',],); 
final _auth = FirebaseAuth.instance;

Future<void> loginWithGoogle() async {
  // Googleからトークン取得, これを呼ぶとアカウント情報入力画面が表示される
  final googleUser = await _googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final auth = await googleUser.authentication;

  // ここからFirebase, Credentialを取得
  final authCredential = GoogleAuthProvider.getCredential(
      idToken: auth.idToken,
      accessToken: auth.accessToken
  );

  // ここからFirebaseAuthへ連携する, ログイン状態になる
  await _auth.signInWithCredential(signInResult.authCredential); 
}

Future<void> loginWithAnonymously() async {
   await _auth.signInAnonymously();
}

アプリ起動 -> 匿名認証（自動） -> 英作文のダウンロード -> アカウント認証を求めてログインしてもらう -> アカウント認証後、ダウンロードする

final _auth = FirebaseAuth.instance;

enum LoginType {
  google, facebook, apple,
}

Future<void> loginWithSwitching(LoginType loginType) async {
  // 現在のログイン情報を取得
  final user = await _auth.currentUser();
  if (user == null) {
    // 匿名認証でログインしていることを前提としているのでreturnする
    return;
  }

  // 指定されたLoginTypeのCredentialを取得
  AuthCredential credential;
  switch (loginType) {
    case LoginType.google:
      credential = await _credentialWithGoogle();
      break;
    case LoginType.facebook:
      credential = await _credentialWithFacebook();
      break;
    case LoginType.apple:
      credential = await _credentialWithApple();
      break;
  }

  // 過去に同じアカウントでログインしているか確認, Firestoreから取得
  final isNewAccount = ....

  if (isNewAccount) {
    // 新規アカウントのため linkWithCredential で匿名認証からアカウント認証へ切り替える
    await user.linkWithCredential(credential);

    // 過去にログインしたことを保存するためuserId等をFirestoreへ保存
    ...
  } else {
    // 過去にログインしたことがある場合は普通にログインする
    await _auth.signInWithCredential(credential);
  }
}

// 英作文のタイトルなどの看板データ
/script/:script_id

{
  "uid": "scriptId",
  "title": {
    "japanese": "タイトル",
    "english": "title"
  },
  ...
}

// 英作文データ
/script/:script_id/sentences/:sentence_id

{
  "uid": "sentenceId",
  "scriptId": "scriptId",
  "order": 0,
  "text": {
    "japanese": "こんにちは",
    "english": "Hello"
  }
  ...
}

// 学習するスクリプト
/user/:user_id/study_scripts/:study_script_id

{
  "studyCount": 0,
  "score": 0,
  "memo": "メモ",
  "scriptId": "scriptId",
  "title": {
    "japanese": "タイトル",
    "english": "title"
  },
  ...
}

final StopWatchTimer _countTimer = StopWatchTimer();

_countTimer
  .secondTime
  .listen((d) {
    // secondTimeをlistenすると１秒毎にここのロジックが実行される
    // 出題文（又は回答文）の時間をカウントダウンして0になると画面上にメッセージ表示する処理を実行
    ...
});


// 終わったらdispose忘れないこと
_countTimer.dispose();

final _scrollController = ScrollController();

// メッセージの表示より早くスクロールされる場合があるため、delayedを入れて少し遅延させている
Future.delayed(const Duration(milliseconds: 300), () {
  _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeOut,
  );
});

_scrollController.animateTo(
    _scrollController.position.minScrollExtent,
    duration: const Duration(milliseconds: 10),
    curve: Curves.easeOut,
);

// 作成した英作文
/user/:user_id/user_scripts/:user_script_id

{
  "scriptId": "originalScriptId",
  "title": {
    "japanese": "タイトル",
    "english": "title",
  },
  ...
  "sentences": [
    {
      "order": 0,
      "text": {
        "japanese": "餃子について",
        "english": "About a Gyoza."
      },
    },
    {
      "order": 1,
      "text": {
        "japanese": "おいしいです",
        "english": "It's delicious."
      },
    },
    ...
  ],
}

// 学習するスクリプト
/user/:user_id/study_scripts/:study_script_id

{
  "studyCount": 0,
  "score": 0,
  "memo": "メモ",
  "scriptId": "originalScriptId",
  "title": {
    "japanese": "餃子",
    "english": "Gyoza"
  },
  ...
}

// 学習回数
/user/:user_id/study_records/:study_record_id

{
  "jan": {
    "firstDayCount": 0,
    ...
    "thirtyFirstDayCount": 0,
    "totalCount": 0
  },
  "feb": {
    "firstDayCount": 0,
    ...
    "thirtyFirstDayCount": 0,
    "totalCount": 0
  },
  ...
  "dec": {
    "firstDayCount": 0,
    ...
    "thirtyFirstDayCount": 0,
    "totalCount": 0
  }
}

1. iTunes Connectにアプリのプロダクト登録
   テスト環境も同様に作成する、プロダクトIDは本番とテスト用の二つ必要
2. サブスクリプションアイテムを登録（開発, 本番環境ともに）
3. iTunes Connectでテスト用のSandboxユーザーを作成
4. レシート検証APIを実装する（サーバー側の実装）

1. GooglePlay ConsoleからGCPのOAuthクライアントとサービスアカウントのリンク付けを行う
   [GooglePlay Console] -> [デベロッパーアカウント] -> [APIアクセス] 
2. GooglePlayにアプリのプロダクト登録
   テスト環境も同様に作成する、プロダクトIDは本番とテスト用の二つ必要
3. サブスクリプションアイテムを登録（開発, 本番環境ともに）
4. レシート検証APIで使うリフレッシュトークンを取得
5. レシート検証APIを実装する（サーバー側の実装）

# 接続されているデバイス一覧
flutter devices

# ビルド実行, $1は flutter devices で表示されているデバイスIDを指定
flutter run --debug --flavor development -d $1 --target lib/main_development.dart

# アプリアイコンの作成（flutter_launcher_iconsプラグインが必要）
flutter pub run flutter_launcher_icons:main

# Androidに必要なkeystoreを生成(Debug用）, $1はkeyAlias名として指定する（自分が決める）
keytool -genkey -v -keystore android/debug.keystore -alias $1 -keyalg RSA -validity 10000 -dname "CN=Android Debug,O=Android,C=JA"
keytool -list -v -alias $1 -keystore android/debug.keystore
keytool -exportcert -alias $1 -keystore android/debug.keystore | openssl sha1 -binary | openssl base64

# Androidに必要なkeystoreを生成(Release用）, $1はkeyAlias名として指定する（自分が決める）
keytool -genkey -v -keystore android/release.keystore -alias $1 -keyalg RSA -validity 10000
keytool -list -v -keystore android/release.keystore
keytool -exportcert -alias $1 -keystore android/release.keystore | openssl sha1 -binary | openssl base64

# AndroidのRelease用バイナリ生成、GooglePlayにリリースするために必要
flutter build appbundle --release --flavor production --target lib/main_production.dart