Flutter Templates
FlutterとBack4Appを使用してAI音声翻訳アプリを構築する方法

34min
はじめに
このチュートリアルでは、フロントエンドフレームワークとして Flutter を使用し、バックエンドサービスとして Back4App を使用してAI音声翻訳アプリを構築する方法を学びます。このアプリは、ユーザーが複数の言語間で音声、テキスト、画像を翻訳できるようにします。AIによる翻訳、光学文字認識（OCR）、音声認識機能を備えています。このチュートリアルの終わりまでに、リアルタイム翻訳を処理し、将来の使用のためにBack4Appに履歴を保存できるアプリを構築することができます。
前提条件
このチュートリアルを完了するには、次のものが必要です:
 Back4Appアカウントが必要です。 Back4Appで無料アカウントにサインアップしてください。
Flutter SDKがローカルマシンにインストールされている必要があります。公式の Flutterインストールガイドに従ってください。
 Dartと Flutterの基本的な知識が必要です。Flutterが初めての場合は、次の Flutterドキュメントを確認してから進んでください。
 翻訳APIプロバイダーのアカウントが必要です。例えば、 Google Cloud Translationや DeepLなどです。
 REST APIと 非同期プログラミングに関する知識が必要です。
ステップ1 — Back4Appバックエンドの設定
このステップでは、Back4Appアプリケーションを設定し、データモデルを定義し、翻訳履歴、言語、ユーザーデータを保存するためにバックエンドを構成します。
1.1. Back4Appで新しいアプリケーションを作成する
あなたの Back4Appダッシュボード にログインします。
"新しいアプリを作成"をクリックします。
アプリ名（例："AI音声翻訳者"）を入力し、アプリアイコンを選択します。
プロンプトが表示された場合は、サーバーの場所を選択します。
"作成"をクリックします。
1.2. アプリケーションキーを取得する
アプリのダッシュボードで、アプリ設定 > セキュリティとキーに移動します。
アプリケーションIDとクライアントキーをメモします。これらはFlutterアプリの構成に必要です。
1.3. データモデルを定義する
Back4Appで以下のクラスを作成します:
ユーザー (デフォルト)
翻訳
言語
フレーズ
辞書エントリ
1.3.1. 翻訳クラスを作成する
「
「クラスを作成」」をクリックします。
「カスタム」を選択し、Translationと名付けます。
「クラスを作成」」をクリックします。
次の列を追加します。Translation:
ユーザー (Pointer<_User>): Userオブジェクトを指します。
sourceLanguage (String): ソース言語コード。
targetLanguage (String): ターゲット言語コード。
sourceText (String): 翻訳する元のテキスト。
translatedText (String): 翻訳されたテキスト。
translationType (String): 翻訳の種類（音声, テキスト, 画像）。
timestamp (DateTime)。
1.3.2. 言語クラスを作成する
新しいクラスを作成する手順を繰り返して、Languageという名前のクラスを作成します。
次の列を追加します：Language:
name (文字列)：言語の名前（例："英語"）。
code (文字列)：言語のISOコード（例："en"）。
flagIconUrl (文字列)：言語を表す旗の画像のURL。
1.3.3. フレーズクラスを作成する
クラスを作成します。Phrase.
次の列を追加します フレーズ:
カテゴリ (文字列): フレーズのカテゴリ（例: "挨拶"）。
ソース言語 (文字列): ソース言語コード。
ターゲット言語 (文字列): ターゲット言語コード。
ソーステキスト (文字列): 元のフレーズ。
翻訳テキスト (文字列): 翻訳されたフレーズ。
1.3.4. DictionaryEntryクラスを作成する
という名前のクラスを作成します DictionaryEntry.
次の列を追加します DictionaryEntry:
単語 (文字列): 定義されている単語。
言語 (文字列): 単語の言語。
定義 (文字列): 単語の定義。
例 (配列): 単語を使用した例文。
1.4. クラスレベルの権限を設定する
認証されたユーザーのみが自分のデータにアクセスできるようにします:
各クラスについて、 セキュリティ > クラスレベルの権限 (CLP) に移動します。
CLPを設定して、認証されたユーザーのみが読み書きアクセスできるようにします。
ステップ 2 — Flutter プロジェクトの初期化
このステップでは、Flutter プロジェクトをセットアップし、Back4App に接続するように構成します。
2.1. 新しい Flutter プロジェクトを作成する
ターミナルを開いて、次のコマンドを実行します:
Bash
flutter create ai_voice_translator
flutter create ai_voice_translator
﻿
プロジェクトディレクトリに移動します:
Bash
cd ai_voice_translator
cd ai_voice_translator
﻿
2.2. 必要な依存関係を追加する
 pubspec.yaml を開いて、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_tts: ^3.3.1
  speech_to_text: ^5.3.0
  google_ml_kit: ^0.7.3
  provider: ^6.0.2
  http: ^0.13.4
﻿
 flutter pub get を実行して、パッケージをインストールします。
2.3. FlutterアプリでParseを初期化する
新しいファイルを作成します lib/config/back4app_config.dart:
Dart
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
﻿
 'YOUR_APPLICATION_ID' と 'YOUR_CLIENT_KEY' をBack4Appからのキーに置き換えます。
に lib/main.dart, Parseを初期化します:
Dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
を作成します lib/app.dart:
Dart
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Voice Translator',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}
﻿
ステップ 3 — テキスト翻訳の実装
最初に実装する機能は基本的なテキスト翻訳です。
3.1. 翻訳サービスの設定
を作成します lib/services/translation_service.dart 翻訳API（Google Cloud Translation APIまたはDeepL）とのインタラクションを管理します。
Dart
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
// lib/services/translation_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class TranslationService {
  final String apiKey = 'YOUR_TRANSLATION_API_KEY';
  final String apiUrl = 'https://translation.googleapis.com/language/translate/v2';

  Future<String> translateText(String text, String sourceLang, String targetLang) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'q': text,
        'source': sourceLang,
        'target': targetLang,
        'format': 'text',
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['data']['translations'][0]['translatedText'];
    } else {
      throw Exception('Translation failed');
    }
  }
}
﻿
3.2. 言語モデルの実装
を作成します lib/models/language.dart サポートされている言語を表します。
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
Dart
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
// lib/models/language.dart
class Language {
  final String name;
  final String code;
  final String flagIconUrl;

  Language({
    required this.name,
    required this.code,
    required this.flagIconUrl,
  });
}
﻿
3.3. テキスト翻訳画面を作成する
作成する lib/screens/text_translation_screen.dart テキスト入力と翻訳を処理するために:
Dart
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
// lib/screens/text_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/translation_service.dart';
import '../models/language.dart';

class TextTranslationScreen extends StatefulWidget {
  @override
  _TextTranslationScreenState createState() => _TextTranslationScreenState();
}

class _TextTranslationScreenState extends State<TextTranslationScreen> {
  final TranslationService translationService = TranslationService();
  final TextEditingController textController = TextEditingController();
  String translatedText = '';
  Language? sourceLanguage;
  Language? targetLanguage;

  Future<void> translate() async {
    if (sourceLanguage != null && targetLanguage != null) {
      final translation = await translationService.translateText(
        textController.text,
        sourceLanguage!.code,
        targetLanguage!.code,
      );
      setState(() {
        translatedText =

 translation;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Translation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(labelText: 'Enter text to translate'),
            ),
            SizedBox(height: 10),
            // Implement language selectors here
            ElevatedButton(onPressed: translate, child: Text('Translate')),
            SizedBox(height: 20),
            Text(translatedText),
          ],
        ),
      ),
    );
  }
}
﻿
ステップ 4 — 音声翻訳の実装
このステップでは、 音声認識 と 音声合成 機能を統合することで音声翻訳を追加します。
4.1. 音声認識の設定
作成する lib/services/speech_recognition_service.dart を使用して speech_to_text パッケージ:
Dart
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
// lib/services/speech_recognition_service.dart
import 'package:speech_to_text/speech_to_text.dart' as stt;

class SpeechRecognitionService {
  final stt.SpeechToText _speech = stt.SpeechToText();

  Future<String?> listenForSpeech() async {
    bool available = await _speech.initialize();
    if (available) {
      await _speech.listen();
      return await Future.delayed(Duration(seconds: 5), () {
        _speech.stop();
        return _speech.lastRecognizedWords;
      });
    }
    return null;
  }
}
﻿
4.2. テキスト読み上げ (TTS) を追加する
作成する lib/services/tts_service.dart を使用して flutter_tts パッケージ:
Dart
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
// lib/services/tts_service.dart
import 'package:flutter_tts/flutter_tts.dart';

class TtsService {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> speak(String text, String languageCode) async {
    await _flutterTts.setLanguage(languageCode);
    await _flutterTts.speak(text);
  }
}
﻿
4.3. 音声翻訳画面を作成する
作成する lib/screens/voice_translation_screen.dart 音声翻訳を処理するために:
Dart
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/voice_translation_screen.dart
import 'package:flutter/material.dart';
import '../services/speech_recognition_service.dart';
import '../services/translation_service.dart';
import '../services/tts_service.dart';

class VoiceTranslationScreen extends StatefulWidget {
  @override
  _VoiceTranslationScreenState createState() => _VoiceTranslationScreenState();
}

class _VoiceTranslationScreenState extends State<VoiceTranslationScreen> {
  final SpeechRecognitionService speechRecognitionService = SpeechRecognitionService();
  final TranslationService translationService = TranslationService();
  final TtsService ttsService = TtsService();

  String? recognizedText;
  String? translatedText;

  Future<void> translateSpeech() async {
    recognizedText = await speechRecognitionService.listenForSpeech();
    if (recognizedText != null) {
      translatedText = await translationService.translateText(
        recognizedText!,
        'en', // Hardcoded source language (English)
        'es', // Hardcoded target language (Spanish)
      );
      setState(() {});
      ttsService.speak(translatedText!, 'es');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Voice Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (recognizedText != null) Text('Recognized: $recognizedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: translateSpeech, child: Text('Start Voice Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
ステップ 5 — 画像翻訳 (OCR) の実装
5.1. OCR サービスの設定
作成する lib/services/ocr_service.dart 使用する google_ml_kit パッケージ:
Dart
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
// lib/services/ocr_service.dart
import 'package:google_ml_kit/google_ml_kit.dart';

class OcrService {
  final textRecognizer = GoogleMlKit.vision.textRecognizer();

  Future<String?> extractTextFromImage(String imagePath) async {
    final inputImage = InputImage.fromFilePath(imagePath);
    final recognizedText = await textRecognizer.processImage(inputImage);
    return recognizedText.text;
  }
}
﻿
5.2. 画像翻訳画面を作成する
作成する lib/screens/image_translation_screen.dart 画像入力とOCRを処理するために:
Dart
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
// lib/screens/image_translation_screen.dart
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../services/ocr_service.dart';
import '../services/translation_service.dart';

class ImageTranslationScreen extends StatefulWidget {
  @override
  _ImageTranslationScreenState createState() => _ImageTranslationScreenState();
}

class _ImageTranslationScreenState extends State<ImageTranslationScreen> {
  final OcrService ocrService = OcrService();
  final TranslationService translationService = TranslationService();
  String? extractedText;
  String? translatedText;

  Future<void> pickAndTranslateImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      extractedText = await ocrService.extractTextFromImage(pickedFile.path);
      if (extractedText != null) {
        translatedText = await translationService.translateText(extractedText!, 'en', 'es');
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Translation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (extractedText != null) Text('Extracted: $extractedText'),
            if (translatedText != null) Text('Translated: $translatedText'),
            SizedBox(height: 20),
            ElevatedButton(onPressed: pickAndTranslateImage, child: Text('Pick Image for Translation')),
          ],
        ),
      ),
    );
  }
}
﻿
ステップ6 — 翻訳履歴とフレーズブック
このステップでは、翻訳履歴の保存とフレーズブックの管理を実装します。
6.1. 翻訳履歴を保存する
更新 lib/services/translation_service.dart で翻訳履歴をBack4Appに保存する:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/translation.dart';

class TranslationService {
  // Existing translation logic

  Future<void> saveTranslation(Translation translation) async {
    final translationObject = ParseObject('Translation')
      ..set('user', ParseUser.currentUser)
      ..set('sourceLanguage', translation.sourceLanguage)
      ..set('targetLanguage', translation.targetLanguage)
      ..set('sourceText', translation.sourceText)
      ..set('translatedText', translation.translatedText)
      ..set('translationType', translation.type);
    await translationObject.save();
  }
}
﻿
6.2. フレーズブックの実装
作成 lib/screens/phrase_book_screen.dart で一般的なフレーズを管理する:
Dart
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/phrase_book_screen.dart
import 'package:flutter/material.dart';
import '../models/phrase.dart';
import '../services/phrase_service.dart';

class PhraseBookScreen extends StatelessWidget {
  final PhraseService phraseService = PhraseService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phrase Book'),
      ),
      body: FutureBuilder<List<Phrase>>(
        future: phraseService.fetchPhrases(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }

          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No phrases found.'));
          }

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final phrase = snapshot.data![index];
              return ListTile(
                title: Text('${phrase.sourceText} → ${phrase.translatedText}'),
                subtitle: Text('Category: ${phrase.category}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
結論
このチュートリアルに従うことで、機能豊富な AI Voice Translator App を Flutter と Back4App で構築しました。以下を実装しました:
基本的および高度なテキスト翻訳。
音声から音声への翻訳を 音声認識 と テキスト読み上げ を使用して。
画像からテキストへの翻訳を OCR を使用して。
翻訳履歴の管理と一般的な表現のフレーズ集。
次のステップ
UI/UXの向上: アプリのインターフェースを改善し、よりスムーズなユーザー体験を提供します。
エラーハンドリングの改善: APIの失敗に対するエラーハンドリングとフォールバックメカニズムを追加します。
オフラインモードの実装: オフラインアクセスのために一般的な翻訳、フレーズ、および履歴をキャッシュします。
アプリのデプロイ: iOSおよびAndroidプラットフォームへのデプロイの準備をします。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
Flutter、Back4App、およびCloud Codeを介したStripe統合を使用したEコマースアプリの構築
FlutterとBack4Appを使用したソーシャルネットワーキングアプリの構築