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

はじめに このチュートリアルでは、フロントエンドフレームワークとして flutter を使用し、バックエンドサービスとして back4app を使用してai音声翻訳アプリを構築する方法を学びます。このアプリは、ユーザーが複数の言語間で音声、テキスト、画像を翻訳できるようにします。aiによる翻訳、光学文字認識（ocr）、音声認識機能を備えています。このチュートリアルの終わりまでに、リアルタイム翻訳を処理し、将来の使用のためにback4appに履歴を保存できるアプリを構築することができます。 前提条件 このチュートリアルを完了するには、次のものが必要です back4appアカウント が必要です。 back4app https //www back4app com/ で無料アカウントにサインアップしてください。 flutter sdk がローカルマシンにインストールされている必要があります。公式の flutterインストールガイド https //flutter dev/docs/get started/install に従ってください。 dart と flutter の基本的な知識が必要です。flutterが初めての場合は、次の flutterドキュメント https //flutter dev/docs を確認してから進んでください。 翻訳apiプロバイダー のアカウントが必要です。例えば、 google cloud translation や deepl などです。 rest api と 非同期プログラミング に関する知識が必要です。 ステップ1 — back4appバックエンドの設定 このステップでは、back4appアプリケーションを設定し、データモデルを定義し、翻訳履歴、言語、ユーザーデータを保存するためにバックエンドを構成します。 1 1 back4appで新しいアプリケーションを作成する あなたの back4appダッシュボード https //dashboard back4app com/ にログインします。 "新しいアプリを作成"をクリックします。 アプリ名（例："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 プロジェクトを作成する ターミナルを開いて、次のコマンドを実行します flutter create ai voice translator プロジェクトディレクトリに移動します cd ai voice translator 2 2 必要な依存関係を追加する pubspec 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 flutter pub get を実行して、パッケージをインストールします。 2 3 flutterアプリでparseを初期化する 新しいファイルを作成します lib/config/back4app config 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'; 'your application id' と 'your client key' をback4appからのキーに置き換えます。 に lib/main dart , parseを初期化します // 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 // 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）とのインタラクションを管理します。 // 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 サポートされている言語を表します。 // 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, }); } // 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, }); } // 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, }); } // 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, }); } // 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 テキスト入力と翻訳を処理するために // 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 パッケージ // 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 パッケージ // 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 音声翻訳を処理するために // 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 パッケージ // 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を処理するために // 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に保存する 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 で一般的なフレーズを管理する // 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プラットフォームへのデプロイの準備をします。