通訳アプリ
リアルタイム通訳が可能なアプリを作成します
このチュートリアルでは、リアルタイムで日本語から外国語、外国語から日本語に、話した言葉を翻訳して話してくれる通訳アプリを作ります。外国語は英語、スペイン語、フランス語、ドイツ語から選べます。普通の会話スピードで動くので、外国語話者との会話に使えます。
音声認識・翻訳API・音声合成の機能を組み合わせたアプリです。言語の切り替え、日本語と外国語の入力対応、翻訳APIとの通信など、多機能なアプリになります。
App Inventor 2日本語化プロジェクトでは翻訳コンポーネントが動作しないのと翻訳コンポーネントは精度があまり良くないため、Google Apps Scriptで作成した無料のウェブアプリを呼び出して翻訳処理を行います。このウェブアプリは自由に利用可能です。ページの最後にあるダウンロードセクションからソースコード(aiaファイル)をダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Interpreter“と名前を付けます。
このチュートリアルで学べること
- 音声認識コンポーネントの使い方
- Google Apps Script を使った翻訳APIとの通信
- ウェブ コンポーネントでJSONデータを外部APIに送受信する方法
- 翻訳されたテキストをテキスト読み上げ コンポーネントで音声再生する方法
- ディクショナリで選択肢を管理する方法
使用コンポーネント
ラベル、テキストボックス、スピナー、ボタン、ウェブ、水平配置、テキスト読み上げ、音声認識
使用ブロック
グローバル変数、ディクショナリ、プロシージャ、もしならば else
デザイン編集
Screen1のタイトルを"通訳アプリ"にします。
コンポーネントの追加
レイアウト パレットから 水平配置コンポーネント を4個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に水平配置1, 2, 3, 4という名前になっているはずです。
“水平配置1“
- ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"外国語ラベル"、"外国語"に名前を変更します。
- “外国語ラベル"の テキスト を"外国語"に設定します。
- “外国語"スピナーの文字列から要素プロパティーは"英語,スペイン語,フランス語,ドイツ語"、選択要素は"英語"にします。
“水平配置2″
- ユーザーインターフェース パレットから ラベル、テキストボックス を追加し、それぞれ"入力ラベル"、"入力"に名前を変更します。
- “入力ラベル"の テキスト を"入力結果"に設定します。
- “入力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。
“水平配置3“
- ユーザーインターフェース パレットから ラベル、テキストボックス を追加し、それぞれ"出力ラベル"、"出力"に名前を変更します。
- “出力ラベル"の テキスト を"翻訳結果"に設定します。
- “出力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。
“水平配置4“
- ユーザーインターフェース パレットから ボタン を2個追加し、名前を"日本語入力ボタン"、"外国語入力ボタン"、テキスト を"日本語入力"、"外国語入力"にそれぞれ設定します。
非可視コンポーネント
- メディア パレットから テキスト読み上げ コンポーネントと音声認識コンポーネントを、接続 パレットから ウェブ コンポーネントを追加します。
