App Inventor版 ChatGPTと話そう！(その２): Ionic版から作る

提供していただいたIonicプログラムは、ユーザが音声入力を開始・停止し、その音声内容をテキストとしてOpenAIのChatGPT APIに送信し、その結果を音声として再生するというものです。この機能をApp Inventorで実装する方法を以下のステップで説明します。

ただし、App InventorはIonicなどの一部のフレームワークに比べて機能面で制限があるため、全ての機能を再現することは難しいかもしれません。特にOpenAIのChatGPT APIへの直接的な接続はサポートされていないため、代わりの方法を提案します。

ステップ１：細かい機能の説明

まずIonicプログラムがどのような機能を持っているか説明します。

• ユーザがテキストエリアにテキストを入力できます。
• 音声入力開始ボタンをクリックすると、音声認識が開始されます。
• 音声入力停止ボタンをクリックすると、音声認識が停止されます。
• 送信ボタンをクリックすると、入力されたテキスト（音声認識結果）がOpenAIのChatGPT APIに送信されます。
• ChatGPT APIからのレスポンスはテキストとして画面に表示され、また音声として再生されます。

ステップ２：作り方の概略

次に、これらの機能をApp Inventorで再現するための概略を説明します。

1. ユーザインターフェースを設定します。テキストボックス、ボタンなどのコンポーネントを配置します。
2. 音声認識を開始するためのボタンのイベントハンドラを設定します。App InventorのSpeechRecognizerコンポーネントを利用します。
3. 音声認識の結果をテキストボックスに表示するように設定します。
4. 送信ボタンのイベントハンドラを設定します。ここでは、Webコンポーネントを使用して外部APIに接続します。
5. レスポンスをテキストとして表示し、音声として再生するように設定します。TextToSpeechコンポーネントを使用します。

ステップ３：初めての人でもわかるような詳しい作り方

以下に、具体的な手順を詳細に説明します。ただし、OpenAIのAPIを直接使用することができないので、その代わりに任意の外部APIを使用する例を示します。なお、実際にはAPIの利用には適切なキーが必要です。

1. App Inventorを開き、新しいプロジェクトを作成します。
2. ユーザインターフェースの設定：
   • Designer画面で、左側のPaletteからTextBoxを選択し、Viewerの任意の位置にドラッグアンドドロップします。これがユーザの入力を受け取るテキストボックスとなります。
   • 同様に、PaletteからButtonを3つ追加します。それぞれのボタンには、"音声入力開始"、"音声入力停止"、"送信"といった適切なテキストを設定します。
   • PaletteからLabelを選択し、Viewerに追加します。これがAPIのレスポンスを表示するためのものです。
3. 音声認識の設定：
   • PaletteからSpeechRecognizerを選択し、Viewerに追加します。このコンポーネントは非表示です。
   • “音声入力開始"ボタンをクリックした時のイベントハンドラを設定します。Blocks画面で、SpeechRecognizer1.GetTextブロックを追加します。
4. 音声認識の結果を表示する設定：
   • Blocks画面で、SpeechRecognizer1.AfterGettingTextイベントを選択します。
   • TextBox1のTextに結果を設定するためのブロックを追加します。これにより、音声認識の結果がテキストボックスに表示されます。
5. 外部APIへの送信設定：
   • PaletteからWebを選択し、Viewerに追加します。このコンポーネントは非表示です。
   • “送信"ボタンをクリックした時のイベントハンドラを設定します。ここでは、Web1.UrlとWeb1.Getブロックを使用して外部APIに接続します。
6. レスポンスの表示と音声再生の設定：
   • PaletteからTextToSpeechを選択し、Viewerに追加します。このコンポーネントは非表示です。
   • Web1.GotTextイベントを設定します。このイベントは、WebコンポーネントがAPIからレスポンスを受け取った時に発生します。
   • Label1のTextにレスポンスを設定し、TextToSpeechコンポーネントを使用してレスポンスを音声として再生します。

以上が、IonicプログラムをApp Inventorで実装する方法です。なお、OpenAIのAPIを直接使用する代わりに、自分で作成した中間サーバーを利用する方法もあります。その中間サーバーでOpenAIのAPIと通信を行い、App Inventorからはその中間サーバーにリクエストを送るという形になります。