会員サイト

ChatGPT (GPT-4)を使って作ろうとした、ChatGPTに入力したプロンプトを送って返答を画面に表示するApp Inventorアプリ「ChatGPTと話そう！(その１)」です。

ChatGPT (GPT-4)は万能ではありません。間違ったことを教えることもあるので、その都度修正してもらう必要があります。ここでは結局ChatGPT (GPT-4)はApp Inventorアプリを作れなかったので、人間が作りました。どうもGPT-4はApp Inventorの知識はあまりないようですね。

GPT-4とのやり取り

プロンプト　「iPhone版 ChatGPTと話そう！（その１）」とほぼ同じものです

次の機能を持つアンドロイドアプリをApp Inventorで作る方法をステップ１からステップ３にしたがって教えてください。App Inventorの初心者でもわかるように詳しくお願いします。

機能：
1. 入力したテキストをChatGPTに送信。モデルはgpt-3.5-turbo
2. 戻ってきた返信を画面に表示

ステップ１：細かい機能の説明
ステップ２：作り方の概略
ステップ３：初めての人でもわかるような詳しい作り方。ChatGPTとの通信部分はAPIのことを知らない人にもわかるように説明してください

返答

ステップ１：細かい機能の説明 このアンドロイドアプリでは、次の機能があります。

1. ユーザーがテキストを入力できるテキストボックス
2. テキストが入力された後、送信ボタンをクリックすると、入力されたテキストがChatGPT（gpt-3.5-turbo）に送信される
3. ChatGPTから返信を受け取り、画面上に表示する

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

1. MIT App Inventorで新しいプロジェクトを作成
2. 必要なコンポーネントをデザイナー画面に配置
3. 各コンポーネントをブロックエディタで関連付ける
4. ChatGPT APIに接続するための設定

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

• MIT App Inventorのウェブサイト（http://appinventor.mit.edu/）にアクセスし、新しいプロジェクトを作成します。
• デザイナー画面で以下のコンポーネントを配置します。

  • テキストボックス（入力）
  • ボタン（送信ボタン）
  • ラベル（返信の表示）
  • Web コンポーネント（APIと通信）

• ブロックエディタで以下の手順に従ってブロックを作成します。
  a. 送信ボタンがクリックされたら、入力されたテキストを取得し、Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。
  b. APIからの返信を受け取ったら、返信の内容をラベルに表示するブロックを作成します
• ChatGPT APIに接続するための設定を行います。
  a. OpenAIのウェブサイト（https://beta.openai.com/signup/）でAPIキーを取得します。
  b. App Inventorのデザイナー画面で、Web コンポーネントを選択し、PropertiesパネルでURLを設定します。URLは「https://api.openai.com/v1/engines/gpt-3.5-turbo/completions」となります。
  c. ブロックエディタで、Web コンポーネントの「set Web.Headers」ブロックを使用して、APIキーを含むヘッダー情報を設定します。ヘッダー情報は次のようになります。
• “Content-Type": “application/json"
• “Authorization": “Bearer あなたのAPIキー"
  d. 送信ボタンがクリックされたときのブロックで、入力されたテキストをChatGPT APIに送信するように設定します。具体的には、「set Web.Body」ブロックを使用して、送信するテキストを次のようなJSON形式に設定します。
  – {“prompt": “ここに入力されたテキスト", “max_tokens": 60}
  e. 'Web.GotText’イベントのブロックで、APIからの返信（responseContent）を取得し、ラベルに表示するように設定します。

これらの手順を踏むことで、入力されたテキストをChatGPTに送信し、返信を画面に表示するアンドロイドアプリを作成できます。

ただし、App Inventorは直接的な外部APIとの連携に制限があります。そのため、上記の方法は理想的なシナリオを示していますが、実際にはOpenAIのAPIと直接通信するためには、サーバー側のスクリプト（PHP, Node.js, Pythonなど）が必要となります。そのスクリプトはOpenAIのAPIを呼び出し、結果をApp Inventorに返します。

App Inventorが直接APIを呼び出すことが難しい場合は、Firebaseや他のクラウドサービスを使用して中間サーバーを作成し、そこからOpenAIのAPIを呼び出す方法もあります。このアプローチを取る場合は、その実装は少し複雑になりますが、一般的なプログラミング知識とFirebaseまたは選択したクラウドサービスの基本的な理解があれば実現可能です。

ChatGPTはApp Inventor日本語版のことは知らないようで「」の中が英語になっているので日本語化プロジェクトで言語を英語に切り替えて作ってみます。

3.a.がよくわからないので聞いてみます。

プロンプト

これわからない「Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。」

OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 10.15.7上でXcode 12.2を使い、動作確認にはiOSシミュレータ(iOS 14.2)を使いました。

ここで作るのはChatGPTと話そう！(その１)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。１時間以内で動きました。

GPT-4とのやり取り

プロンプト

次の機能を持つiOSアプリをXcodeとSwiftUIで作る方法をステップ１からステップ３にしたがって教えてください。初心者でもわかるように詳しくお願いします。

機能：
1. 入力したテキストをChatGPTに送信。モデルはgpt-3.5-turbo
2. 戻ってきた返信を画面に表示

ステップ１：細かい機能の説明
ステップ２：作り方の概略
ステップ３：初めての人でもわかるような詳しい作り方。ChatGPTとの通信部分はAPIのことを知らない人にもわかるように説明してください

返答

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

GPT-4とのやり取り

プロンプト

App Inventorアプリの「もぐらたたきゲーム」って知ってる?

返答

はい、「もぐらたたきゲーム」は、MIT App Inventorを使って作成された簡単なゲームです。このゲームは、もぐらを叩くことを目的としており、App Inventorプラットフォームを使ってデザインとプログラムが行われています。このゲームの作成方法に関する情報は、MIT App Inventor 2 日本語化プロジェクトのウェブサイトで見つけることができます。[1]

まず、「もぐらたたきゲーム」を作成するには、App Inventorの[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、"MoleMash"と名前を付けます。次に、デザイン編集でScreen1のタイトルを"もぐらたたき"に変更し、モグラの画像をダウンロードします。その後、描画とアニメーションパレットからキャンバスコンポーネントをビューアーにドラッグアンドドロップし、ユーザーインターフェースパレットからラベルとボタンをドラッグアンドドロップして配置します[1]。

また、宮島健さんによるもぐらたたきゲームチュートリアルのビデオもYouTubeで見つけることができます[2]。このチュートリアルを参考にして、App Inventorで独自のもぐらたたきゲームを作成することができます。

今までのようにここでコードを書いてもらうとApp Inventorで作ったモグラたたきゲームとはだいぶ違ったものしか作ってくれないので、いったん機能をまとめてもらいます。

プロンプト

「もぐらたたきゲーム」の機能をまとめて

返答

「もぐらたたきゲーム」は、MIT App Inventorを使用して作成されたシンプルなゲームです。以下に、その主な機能をまとめました。

1. 画面デザイン: ゲーム画面には、もぐらの画像、キャンバス、スコア表示用のラベル、リセットボタンが配置されます[1]。
2. もぐらのアニメーション: もぐらの画像がランダムにキャンバス内で表示され、プレイヤーはそれをタップして叩くことが目的です。もぐらの画像がランダムな位置に移動し、時間経過とともに速度が上がることがあります。
3. スコア計算: プレイヤーがもぐらを叩くたびにスコアが加算され、ラベルに表示されます。ゲームの難易度やスコアの計算方法は、プログラムをカスタマイズすることで変更可能です。
4. リセット機能: リセットボタンを押すと、ゲームが再開され、スコアがゼロにリセットされます[1]。

このような基本的な機能を持つ「もぐらたたきゲーム」は、App Inventorの基本的な使い方やプログラミングの概念を学ぶのに適したプロジェクトです。

プロンプト

この機能を持つiPhoneアプリをXcodeとSwiftUIで作って

返答

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

GPT-4とのやり取り

プロンプト

App Inventorアプリのお絵かきアプリって知ってる？

返答

はい、App Inventorのお絵かきアプリについては知っています。App Inventorは、GoogleとMITが共同開発した、ビジュアルなプログラミング環境です。これを使って、Androidアプリを作成することができます。お絵かきアプリは、App Inventorで開発された一般的なアプリケーションの例です。

お絵かきアプリは、ユーザーが画面上で指を使って線を描くことができるシンプルなアプリです。App Inventorのコンポーネントを使用して、キャンバス、ペイント機能、消しゴム、色選択、線の太さなどの機能を実装することができます。

このようなアプリは、初心者向けのプログラミング学習に適しており、App Inventorでアプリ開発を始める人によく使われる例題です。基本的な操作だけでなく、応用的な機能も実装できますので、プログラミングの練習にもなります。

プロンプト

XcodeとSwiftUIを使って同じように動くiPhoneアプリ作って

返答

XcodeとSwiftUIを使って、お絵かきアプリを作成する方法を説明します。まず、Xcodeを開いて新しいプロジェクトを作成し、SwiftUIを選択してください。

以下は、お絵かきアプリに必要なコードの基本構造です。これをプロジェクト内のContentView.swiftにコピーしてください。

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使っています。このアプリではスマホを振るというジェスチャーを使うので、動作確認にはiPhone 11実機(iOS 16.4.1)を使いました。

準備

iPhone版 話して！(その１)を動くようにする

iPhone版 話して！(その１)のコードはiOSシミュレータでは動くもののiPhone 11実機では声が聞こえなかったので、以下のようにコードを修正しました。AVAudioSessionをリセットする部分を追加しています。GPT-4に聞いたのですが日本語ではなかなか動くコードを作れなかったので、英語でいろいろ試して最終的にこのコードで動きました。

import SwiftUI
import AVFoundation
struct ContentView: View {
    @State private var speechSynthesizer = AVSpeechSynthesizer()
    var body: some View {
        VStack {
            Button(action: {
                self.configureAudioSession()
                self.speakText("今日は新宿で映画を見よう")
            }) {
                Text("話して!")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
    func configureAudioSession() {
        let audioSession = AVAudioSession.sharedInstance()
        do {
            try audioSession.setCategory(.playback, mode: .spokenAudio, options: [])
            try audioSession.setActive(true, options: [])
        } catch {
            print("Failed to configure audio session: \(error.localizedDescription)")
        }
    }
    func speakText(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        speechSynthesizer.speak(utterance)
    }
}

iPhoneの振るジェスチャーを無効にする

iPhoneではデフォルトで振るジェスチャーは入力取り消しをするので、これを以下の手順で無効にします。

iPhoneの設定->アクセシビリティ->タッチ->シェイクで取り消しをOFF

GPT-4とのやり取り

プロンプト

このコードにスマホを振るとテキストフィールドに入力された言葉を話す機能を追加して

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。macOS 12.6.3上のXcode 14.2ではiOSシミュレータがiOS 16.2までしか上げられず、iOS 16.2ではテキスト読み上げに必要な音声データが入っていない上にmacOS 12.6.3ではXcode 14.3がインストールできなかったので、macOS 13.2.1上でXcode 14.3を使っています。

GPT-4とのやり取り

プロンプト

「話して！(その１)」というApp Inventorアプリ知ってる？

返答

はい、「話して！(その1)」というMIT App Inventorアプリについて知っています。このアプリは、App Inventor 2 を使って作成されており、ボタンを押すと音声合成でしゃべるシンプルなアプリです。このアプリを作成するには、まず「プロジェクトを新規作成」からプロジェクト名に「TalkToMe」と入力します。次に、ボタンコンポーネントをScreen1にドラッグアンドドロップし、ボタンのテキストを"話して!"に変更します。最後に、メディアパレットからテキスト音声化コンポーネントをドラッグしてビューアーに配置します。MIT App Inventor では、他にも様々な機能を使って多種多様なアプリを作ることができます

プロンプト

XcodeとSwiftUIを使って同じように動くiPhoneアプリ作って

返答

App Inventorアプリを作るときのお助けGPTです。作るアプリのアイデアが欲しい時、作っていて困った時に使えます。日本語版GPTに加えて、豊富な英語の知識を与えた英語版GPTもあります。英語版GPTは日本語でも使えます。英語で答えてきたら「日本語で表示して」と頼めば翻訳してくれます。無料アカウントでも利用できます。試してみてください。下の画像をクリックすればすぐに使えます。