ChatGPT,iPhoneアプリ

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

音声入力・出力が動いた「Ionic版 ChatGPTと話そう!(その2)」のソースコードをChatGPTに与えてiPhoneアプリに変換してもらいました。

 

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

次のIonicプログラムと同じ機能を持つiOSアプリをSwiftUIで作る方法をステップ1からステップ3にしたがって教えてください。Xcode version=14.3, Swift version=5で、 iOS16以上をサポートしてください。初心者でもわかるように詳しくお願いします。

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

home.page.html

home.page.ts

返答

まず、このIonicアプリは次の機能を持っています:

  1. ユーザがテキストフィールドにメッセージを入力できます。
  2. 音声認識を開始・停止するボタンがあります。
  3. メッセージを送信するボタンがあります。これはユーザのメッセージをOpenAIのGPT-3.5-turbo APIに送り、その結果を受け取って表示します。また、結果を音声で出力します。

次に、これをSwiftUIとiOSで実装する方法を説明します。

ステップ1:細かい機能の説明

このプロジェクトには以下のような主要な部分があります。

  1. テキストフィールド: ユーザがテキストを入力できるようにします。この場合、TextFieldというSwiftUIのコンポーネントを使用します。
  2. 音声認識: ユーザが音声をテキストに変換する機能を提供します。iOSでは、この目的のために SFSpeechRecognizerというクラスがあります。
  3. ボタン: SwiftUIでは、Buttonというコンポーネントを使用します。これを使って音声認識の開始・停止とメッセージの送信の機能を実装します。
  4. OpenAI APIとの通信: OpenAI APIにメッセージを送信し、応答を取得します。これには、SwiftのネットワーキングライブラリであるURLSessionを使用します。
  5. 音声出力: OpenAI APIからの応答を音声で出力します。これにはAVSpeechSynthesizerというiOSのクラスを使用します。

ステップ2:作り方の概略

まず、SwiftUIで新しいプロジェクトを作成します。このプロジェクトには以下のファイルが含まれます。

  1. ContentView.swift: これはメインのビューで、テキストフィールドとボタンを含みます。
  2. SpeechRecognizer.swift: これは音声認識の機能を提供するクラスです。
  3. OpenAIManager.swift: これはOpenAI APIとの通信を管理するクラスです。
  4. SpeechSynthesizer.swift: これは音声出力の機能を提供するクラスです。

各クラスはその目的に応じて必要なメソッドを持つべきです。

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

詳細な実装はかなりのコード量となるため、ここでは最初の部分、つまりビューと音声認識の部分だけをカバーします。

  1. 新しいSwiftUIプロジェクトの作成:Xcodeを開き、新しいプロジェクトを作成します。"App"テンプレートを選択し、プロジェクト名(例えば"OpenAIVoiceApp")を入力します。"Interface"として"SwiftUI"、"Life Cycle"として"SwiftUI App"を選択します。最後に、"Language"として"Swift"を選択し、プロジェクトを作成します。
  2. ビューの作成:ContentView.swiftファイルを開き、以下のように変更します。

import SwiftUI

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    var body: some View {
        VStack {
            TextField("Your message", text: $userInput)
                .padding()

            Button(action: {
                // TODO: Start speech recognition
            }) {
                Text("Start Speech Recognition")
            }
            .padding()

            Button(action: {
                // TODO: Stop speech recognition
            }) {
                Text("Stop Speech Recognition")
            }
            .padding()

            Button(action: {
                // TODO: Send message
            }) {
                Text("Send Message")
            }
            .padding()

            Text(response)
        }
        .padding()
    }
}

これはUIをセットアップするだけで、まだ具体的なアクションは何も実装していません。

3. 音声認識の設定:

まず、音声認識のためにプライバシー設定を追加する必要があります。プロジェクトのInfo.plistファイルを開き、"Privacy – Speech Recognition Usage Description"という新しい項目を追加します。この項目の値は、音声認識を使用する理由をユーザに説明するメッセージです。

次に、新しいSpeechRecognizer.swiftファイルを作成します。このファイルには、音声認識を開始と停止するメソッドと、音声認識の結果を取得するためのデリゲートメソッドが必要です。具体的なコードは次の通りです。



import Foundation
import Speech

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    // 音声認識の結果を返すコールバック
    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        self.speechRecognizer.delegate = self
    }

    func startRecognition() {
        // TODO: Implement this
    }

    func stopRecognition() {
        // TODO: Implement this
    }
}


startRecognitionメソッドとstopRecognitionメソッドは具体的な実装が必要です。その実装は、Appleの公式ドキュメンテーションであるSFSpeechRecognizerを参照してください。

このように、SwiftUIでの基本的なセットアップと音声認識の初期セットアップが完了しました。次にOpenAI APIとの通信と音声出力の設定を行う必要がありますが、その詳細な説明は長くなるためここでは省略します。

OpenAI APIとの通信については、SwiftのURLSessionを使用することが一般的です。音声出力については、AVSpeechSynthesizerクラスを使用します。

以上がIonicアプリをSwiftUIで実装するための基本的なガイドラインです。具体的な実装はアプリの詳細や要件によりますが、上記のガイドラインを参照にして進めてみてください。

プロンプト

OpenAI APIとの通信と音声出力の部分を実装して

返答

もちろんです。それでは、それぞれの詳細なステップを以下に説明します。

OpenAI APIとの通信:

新しいOpenAIManager.swiftファイルを作成します。これはURLSessionを使用してOpenAIのGPT-3.5-turbo APIにリクエストを送信するためのクラスとなります。具体的なコードは次の通りです。



import Foundation

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"  // OpenAIのAPIキーに書き換えてください
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        
        let data = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]
        
        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData
        
        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                completion(.success(content))
            }
        }
        
        task.resume()
    }
}

音声出力:

新しいSpeechSynthesizer.swiftファイルを作成します。これはAVSpeechSynthesizerを使用してテキストを音声に変換するためのクラスとなります。具体的なコードは次の通りです。


import AVFoundation

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}


以上がそれぞれの具体的な実装になります。これらのクラスをContentViewで使用して、音声認識、OpenAI APIとの通信、音声出力の各機能を完全に接続することができます。

プロンプト

ContentView.swiftだけで動くように書き直して

返答

それでは、OpenAIManager, SpeechSynthesizer, SpeechRecognizerのすべてをContentViewに統合しましょう。以下のように変更します。


import SwiftUI
import AVFoundation
import Speech

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    private let openAIManager = OpenAIManager()
    private let speechSynthesizer = SpeechSynthesizer()
    private let speechRecognizer = SpeechRecognizer()

    var body: some View {
        VStack {
            TextField("Your message", text: $userInput)
                .padding()

            Button(action: {
                self.speechRecognizer.startRecognition()
            }) {
                Text("Start Speech Recognition")
            }
            .padding()

            Button(action: {
                self.speechRecognizer.stopRecognition()
            }) {
                Text("Stop Speech Recognition")
            }
            .padding()

            Button(action: {
                self.openAIManager.sendMessage(self.userInput) { result in
                    switch result {
                    case .success(let message):
                        self.response = message
                        self.speechSynthesizer.speak(message)
                    case .failure(let error):
                        print(error)
                    }
                }
            }) {
                Text("Send Message")
            }
            .padding()

            Text(response)
        }
        .padding()
        .onAppear {
            self.speechRecognizer.onResult = { result in
                self.userInput = result
            }
        }
    }
}

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        let data = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]

        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData

        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                DispatchQueue.main.async {
                    completion(.success(content))
                }
            }
        }

        task.resume()
    }
}

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        speechRecognizer.delegate = self
    }

    func startRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        } else {
            do {
                try startRecording()
            } catch {
                print("Failed to start recording")
            }
        }
    }

    func stopRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        }
    }

    private func startRecording() throws {
        recognitionTask?.cancel()
        recognitionTask = nil

        recognitionRequest = SFSpeechAudioBufferRecognitionRequest()

        let inputNode = audioEngine.inputNode

        guard let recognitionRequest = recognitionRequest else {
            fatalError("Unable to create a SFSpeechAudioBufferRecognitionRequest object")
        }

        recognitionRequest.shouldReportPartialResults = true

        recognitionTask = speechRecognizer.recognitionTask(with: recognitionRequest) { result, error in
            if let result = result {
                DispatchQueue.main.async {
                    self.onResult?(result.bestTranscription.formattedString)
                }
            }
        }

        let recordingFormat = inputNode.outputFormat(forBus: 0)
        inputNode.installTap(onBus: 0, bufferSize: 1024, format: recordingFormat) { (buffer: AVAudioPCMBuffer, when: AVAudioTime) in
            self.recognitionRequest?.append(buffer)
        }

        audioEngine.prepare()
        try audioEngine.start()
    }
}

このプログラムは、音声認識でユーザー入力を収集し、それをOpenAI APIに送信し、返されたメッセージを音声として出力する一連のプロセスを実行します。ただし、エラーハンドリングやUIの改良は必要に応じて行う必要があります。また、ユーザーのプライバシーを守るため、APIキーはハードコードせず、安全な方法で管理してください。

Xcodeでビルドしたところエラーが出たので、エラーメッセージをそのまま送ってみます

プロンプト

Heterogeneous collection literal could only be inferred to '[String : Any]’; add explicit type annotation if this is intentional

返答

あなたが受け取ったエラーメッセージは、Swiftがコレクションの型推論に問題があると感じたときに表示されるものです。エラーの根本的な原因は、コードの一部がSwiftにとってあいまいであるということです。

この問題は、"messages"キーに対するデータの形式によるものです。現在、これは2つの異なるタイプのデータ(String[[String: Any]])を混在させているため、コンパイラは型推論に問題を抱えています。

エラーメッセージを解消するために、sendMessageメソッド内のデータオブジェクトを次のように変更します:


let data: [String: Any] = [
    "model": "gpt-3.5-turbo",
    "messages": [
        [
            "role": "user",
            "content": message
        ]
    ]
]


これでコンパイラに明示的にデータの型を伝え、混合型のリテラルが意図的であることを示すことができます。

エラーが消えたので、後はプロンプト表示用のTextFieldが複数行表示できるようにしてボタンを日本語に変更します。

最終的なContentView.swiftです。

import SwiftUI
import AVFoundation
import Speech

struct ContentView: View {
    @State private var userInput = ""
    @State private var response = ""

    private let openAIManager = OpenAIManager()
    private let speechSynthesizer = SpeechSynthesizer()
    private let speechRecognizer = SpeechRecognizer()

    var body: some View {
        VStack {
            TextField("プロンプト", text: $userInput, axis:  .vertical)
                .padding()

            Button(action: {
                self.speechRecognizer.startRecognition()
            }) {
                Text("音声入力開始")
            }
            .padding()

            Button(action: {
                self.speechRecognizer.stopRecognition()
            }) {
                Text("音声入力停止")
            }
            .padding()

            Button(action: {
                self.openAIManager.sendMessage(self.userInput) { result in
                    switch result {
                    case .success(let message):
                        self.response = message
                        self.speechSynthesizer.speak(message)
                    case .failure(let error):
                        print(error)
                    }
                }
            }) {
                Text("送信")
            }
            .padding()

            Text(response)
        }
        .padding()
        .onAppear {
            self.speechRecognizer.onResult = { result in
                self.userInput = result
            }
        }
    }
}

class OpenAIManager {
    private let apiKey = "YOUR_OPENAI_API_KEY"
    private let url = URL(string: "https://api.openai.com/v1/chat/completions")!

    func sendMessage(_ message: String, completion: @escaping (Result<String, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("Bearer \(apiKey)", forHTTPHeaderField: "Authorization")
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        let data: [String: Any] = [
            "model": "gpt-3.5-turbo",
            "messages": [
                [
                    "role": "user",
                    "content": message
                ]
            ]
        ]


        let jsonData = try! JSONSerialization.data(withJSONObject: data, options: [])
        request.httpBody = jsonData

        let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                completion(.failure(error))
                return
            }

            if let data = data {
                let json = try! JSONSerialization.jsonObject(with: data, options: []) as! [String: Any]
                let choices = json["choices"] as! [[String: Any]]
                let message = choices[0]["message"] as! [String: Any]
                let content = message["content"] as! String
                DispatchQueue.main.async {
                    completion(.success(content))
                }
            }
        }

        task.resume()
    }
}

class SpeechSynthesizer {
    private let synthesizer = AVSpeechSynthesizer()

    func speak(_ text: String) {
        let utterance = AVSpeechUtterance(string: text)
        utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
        synthesizer.speak(utterance)
    }
}

class SpeechRecognizer: NSObject, SFSpeechRecognizerDelegate {
    private let speechRecognizer = SFSpeechRecognizer(locale: Locale(identifier: "ja-JP"))!
    private var recognitionRequest: SFSpeechAudioBufferRecognitionRequest?
    private var recognitionTask: SFSpeechRecognitionTask?
    private let audioEngine = AVAudioEngine()

    var onResult: ((String) -> Void)?

    override init() {
        super.init()
        speechRecognizer.delegate = self
    }

    func startRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        } else {
            do {
                try startRecording()
            } catch {
                print("Failed to start recording")
            }
        }
    }

    func stopRecognition() {
        if audioEngine.isRunning {
            audioEngine.stop()
            recognitionRequest?.endAudio()
        }
    }

    private func startRecording() throws {
        recognitionTask?.cancel()
        recognitionTask = nil

        recognitionRequest = SFSpeechAudioBufferRecognitionRequest()

        let inputNode = audioEngine.inputNode

        guard let recognitionRequest = recognitionRequest else {
            fatalError("Unable to create a SFSpeechAudioBufferRecognitionRequest object")
        }

        recognitionRequest.shouldReportPartialResults = true

        recognitionTask = speechRecognizer.recognitionTask(with: recognitionRequest) { result, error in
            if let result = result {
                DispatchQueue.main.async {
                    self.onResult?(result.bestTranscription.formattedString)
                }
            }
        }

        let recordingFormat = inputNode.outputFormat(forBus: 0)
        inputNode.installTap(onBus: 0, bufferSize: 1024, format: recordingFormat) { (buffer: AVAudioPCMBuffer, when: AVAudioTime) in
            self.recognitionRequest?.append(buffer)
        }

        audioEngine.prepare()
        try audioEngine.start()
    }
}

実行方法は「Ionic版 ChatGPTと話そう!(その1)」と同じです。

 

ChatGPT,iPhoneアプリ

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

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

 

GPT-4とのやり取り

プロンプト

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

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

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

返答

ステップ1:細かい機能の説明 このアプリでは、以下の機能を実装します。

  1. テキスト入力フィールドを提供し、ユーザーが入力したテキストを受け取る。
  2. 入力されたテキストをOpenAIのChatGPT API(gpt-3.5-turboモデル)に送信する。
  3. APIから受け取った返信を画面上に表示する。

ステップ2:作り方の概略

  1. XcodeとSwiftUIを使って、UI(ユーザーインターフェース)を作成します。テキスト入力フィールドと送信ボタン、表示エリアを含む。
  2. ChatGPT APIと通信するためのコードを実装します。HTTPリクエストを使ってテキストをAPIに送信し、返信を受け取ります。
  3. APIから受け取った返信を画面上に表示する処理を実装します。

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

  1. UIの作成
  • Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクト名を決めて、User InterfaceにSwiftUIを選択してください。
  • ContentView.swiftファイルを開き、以下のUI要素を追加します。
    • テキスト入力フィールド:ユーザーがテキストを入力できるようにする。
    • 送信ボタン:入力されたテキストをChatGPT APIに送信するためのボタン。
    • 表示エリア:APIから受け取った返信を表示するための領域。
  1. APIとの通信
  • OpenAIのAPIキーを取得します。アカウントを作成し、APIキーをメモしておきます。
  • プロジェクトにAlamofireというライブラリを追加して、簡単にHTTPリクエストを扱えるようにします。Swift Package Managerを使ってインストールすることができます。
  • APIと通信するための関数を作成します。この関数では、入力されたテキストをAPIに送信し、返信を受け取ります。APIキーと入力テキストを使って、HTTP POSTリクエストを作成し、Alamofireを使って送信します。
  1. 返信の表示
  • APIからの返信を受け取ったら、表示エリアにそのテキストを表示します。SwiftUIのTextビューを使って、返信を画面上に表示するコードを追加します。
  • 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理
    1. 返信の表示(続き)
    • 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理を実装します。これには、SwiftUIの@Stateプロパティラッパーを使って、表示用の変数を宣言し、APIから受け取った返信を格納します。

    以下に、実装のサンプルコードを示します。


import SwiftUI
import Alamofire

struct ContentView: View {
    @State private var inputText: String = ""
    @State private var responseText: String = ""

    var body: some View {
        VStack {
            TextField("テキストを入力してください", text: $inputText)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            Button(action: {
                sendToChatGPT(text: inputText)
            }) {
                Text("送信")
                    .padding()
            }
            
            Text(responseText)
                .padding()
        }
    }

    func sendToChatGPT(text: String) {
        let headers: HTTPHeaders = [
            "Content-Type": "application/json",
            "Authorization": "Bearer YOUR_API_KEY"
        ]
        
        let parameters: [String: Any] = [
            "model": "gpt-3.5-turbo",
            "messages": [["role": "system", "content": "iOSアプリのテスト"], ["role": "user", "content": text]]
        ]

        AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions",
                   method: .post,
                   parameters: parameters,
                   encoding: JSONEncoding.default,
                   headers: headers)
            .responseJSON { response in
                switch response.result {
                case .success(let value):
                    if let jsonResponse = value as? [String: Any],
                       let choices = jsonResponse["choices"] as? [[String: Any]],
                       let message = choices.first?["message"] as? [String: Any],
                       let content = message["content"] as? String {
                        DispatchQueue.main.async {
                            self.responseText = content
                        }
                    }
                case .failure(let error):
                    print(error)
                }
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このサンプルコードでは、テキスト入力フィールド、送信ボタン、表示エリアが含まれています。送信ボタンをタップすると、sendToChatGPT関数が呼び出され、APIとの通信が行われます。APIから受け取った返信は、responseText変数に格納され、画面上に表示されます。

注意:このコードでは"YOUR_API_KEY"となっている部分を、取得したOpenAIのAPIキーに置き換えてください。

これで、初心者でもわかるような詳しい手順を提供しました。これを参考にして、XcodeとSwiftUIを使って、ChatGPTと通信するiOSアプリを作成してみてください。

プロンプト

何も表示されないのでデバッグしたいんだけど受け取ったJSONを表示するにはどうしたらいい?

返答

デバッグを行い、受け取ったJSONを表示するためには、responseJSON内でデバッグプリントを追加して、受け取ったJSONデータをコンソールに表示させることができます。

sendToChatGPT関数内のresponseJSONブロックにprint文を追加して、JSONデータを表示させてみましょう。


AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions",
           method: .post,
           parameters: parameters,
           encoding: JSONEncoding.default,
           headers: headers)
    .responseJSON { response in
        switch response.result {
        case .success(let value):
            // 受け取ったJSONをコンソールに表示
            print("JSON Response: \(value)")
            
            if let jsonResponse = value as? [String: Any],
               let choices = jsonResponse["choices"] as? [[String: Any]],
               let message = choices.first?["message"] as? [String: Any],
               let content = message["content"] as? String {
                DispatchQueue.main.async {
                    self.responseText = content
                }
            }
        case .failure(let error):
            print(error)
        }
    }

このprint("JSON Response: \(value)")の部分が、受け取ったJSONデータをコンソールに表示するためのデバッグプリントです。アプリを実行し、送信ボタンをタップした後、Xcodeのコンソールを確認して、受け取ったJSONデータが表示されているか確認してください。

これにより、デバッグを行いながら受け取ったJSONデータを確認できます。これを使って、アプリの動作が正しいかどうかを検証してみてください。

どうもAPI呼び出しのURLが間違っていたようです。"https://api.openai.com/v1/engines/gpt-3.5-turbo/completions"を"https://api.openai.com/v1/chat/completions"に変更したところ動きました。

XcodeでiPhoneアプリを作る

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

プロジェクトの作成

Xcodeを起動してTalk2ChatGPT-1という名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。File > Swift PackageメニューからAlamofireを追加します。コードの中の
YOUR_API_KEYをあなたのAPIキーと置き換えてください。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

iPhoneアプリ

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

GPT-4とのやり取り

プロンプト

WebChatGPTというChrome拡張機能を使って聞いてみます。

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アプリをXcodeSwiftUIで作って

返答

XcodeとSwiftUIを使って、「もぐらたたきゲーム」のiPhoneアプリを作成するには、以下の手順に従ってください。

  1. Xcodeのインストールとプロジェクト作成:
  2. Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクトのテンプレートは「iOS」→「App」を選択し、「Interface」で「SwiftUI」を選択します。プロジェクト名を「MoleMash」にして進みます。
  3. デザインの作成:
  4. SwiftUIでゲームのデザインを作成します。ContentView.swiftファイルを開いて、以下の要素を追加します。
    • キャンバス: ZStackを使用してもぐらの画像と背景を重ねます。
    • スコア表示用のラベル: Textを使用してスコアを表示します。
    • リセットボタン: Buttonを使用してリセット機能を実装します。
  5. もぐらのアニメーションの実装:
  6. もぐらの画像をランダムに移動させるために、@Stateプロパティを使用して位置を制御します。また、Timerを使用して一定間隔でもぐらの位置を更新します。
  7. タッチイベントの処理:
  8. もぐらの画像をタップした時にスコアを加算するために、onTapGestureを使用します。タップした座標ともぐらの画像の座標を比較して、もぐらが叩かれたかどうかを判定し、スコアを更新します。
  9. スコアの計算と表示:
  10. スコアを計算し、Text要素で表示します。もぐらを叩くたびにスコアを加算し、リセットボタンを押したらスコアをリセットします。
  11. デバッグとテスト:
  12. Xcodeのシミュレータを使用してアプリをデバッグし、必要に応じてコードの修正を行います。

このようにして、XcodeSwiftUIを使って「もぐらたたきゲーム」のiPhoneアプリを作成することができます。

プロンプト

コードを書いて

返答

以下に、SwiftUIを使って「もぐらたたきゲーム」の基本的な部分を作成するサンプルコードを示します。このコードは、基本的なゲーム機能を実装するための簡略化されたものですので、実際のアプリ開発では、さらなる改良やエラー処理が必要になります。


import SwiftUI

struct ContentView: View {
    @State private var molePosition = CGPoint(x: 100, y: 100)
    @State private var score = 0
    @State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            Text("Score: \(score)")
                .font(.title)
            
            ZStack {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 300, height: 400)
                    .onTapGesture {
                        moveMole()
                    }
                
                Image("mole")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .position(molePosition)
                    .onTapGesture {
                        score += 1
                        moveMole()
                    }
            }
            
            Button("Reset") {
                score = 0
                moveMole()
            }
            .padding()
        }
        .onReceive(timer) { _ in
            moveMole()
        }
    }
    
    func moveMole() {
        let x = CGFloat.random(in: 50...250)
        let y = CGFloat.random(in: 50...350)
        molePosition = CGPoint(x: x, y: y)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このコードでは、もぐらの画像がランダムな位置に移動し、タップするとスコアが加算されます。リセットボタンを押すと、スコアがゼロにリセットされます。ただし、このコードは簡易的なものであるため、もぐらの速度が上がる機能やゲームの難易度設定などは実装されていません。実際のアプリ開発では、これらの機能を追加するためのコードも必要になります。

これでほとんどOKなんですが、見栄えを良くするために少し調整しました。


import SwiftUI

struct ContentView: View {
    @State private var molePosition = CGPoint(x: 100, y: 100)
    @State private var score = 0
    @State private var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            Text("GPT-4 もぐらたたき")
                .font(.title)
            
            Text("Score: \(score)")
                .font(.title)
            
            ZStack {
                Rectangle()
                    .fill(Color.white)
                    .frame(width: 300, height: 400)
                    .onTapGesture {
                        moveMole()
                    }
                
                Image("mole")
                    .resizable()
                    .frame(width: 50, height: 50)
                    .position(molePosition)
                    .onTapGesture {
                        score += 1
                        moveMole()
                    }
            }
            
            Button("Reset") {
                score = 0
                moveMole()
            }
            .padding()
        }
        .onReceive(timer) { _ in
            moveMole()
        }
    }
    
    func moveMole() {
        let x = CGFloat.random(in: 50...250)
        let y = CGFloat.random(in: 50...350)
        molePosition = CGPoint(x: x, y: y)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してMoleMashという名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

swiftのコードをContentView.swiftに貼り付けます。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

 

iPhoneアプリ

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にコピーしてください。


import SwiftUI

struct ContentView: View {
    @State private var path = Path()
    
    var body: some View {
        VStack {
            DrawingView(path: $path)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .border(Color.black)
        }
    }
}

struct DrawingView: UIViewRepresentable {
    @Binding var path: Path
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.isMultipleTouchEnabled = false
        view.isUserInteractionEnabled = true
        
        let panRecognizer = UIPanGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handlePan(_:)))
        view.addGestureRecognizer(panRecognizer)
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
    
    class Coordinator: NSObject {
        var drawingView: DrawingView
        
        init(_ drawingView: DrawingView) {
            self.drawingView = drawingView
        }
        
        @objc func handlePan(_ recognizer: UIPanGestureRecognizer) {
            let point = recognizer.location(in: recognizer.view)
            
            switch recognizer.state {
            case .began:
                drawingView.path.move(to: point)
            case .changed:
                drawingView.path.addLine(to: point)
            default:
                break
            }
            
            recognizer.view?.setNeedsDisplay()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このコードは、基本的なお絵かき機能を実装しています。画面上で指を動かすことで、線を描くことができます。ただし、色や線の太さを変更する機能はまだ実装されていません。そのため、コードを拡張して、色の選択や線の太さの調整などの機能を追加することができます。

このサンプルコードを使用して、Xcodeでお絵かきアプリを作成することができます。さらに機能を追加することで、より高度なお絵かきアプリを開発することができます。

プロンプト

画面上で指を動かしても、線が描けないんだけど

返答

すみません、こちらの不足がありました。下記のコードを修正したものです。DrawingPathDrawingViewを追加し、Canvasコンポーネントで描画するように変更しました。この修正を加えることで、画面上で指を動かして線が描けるようになります。


import SwiftUI

struct ContentView: View {
    @State private var drawing = Drawing()
    
    var body: some View {
        VStack {
            DrawingView(drawing: $drawing)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .border(Color.black)
        }
    }
}

struct DrawingPath {
    var path = Path()
    let color: Color
    let lineWidth: CGFloat
}

struct Drawing {
    private(set) var paths: [DrawingPath] = []
    
    mutating func addPath(_ path: DrawingPath) {
        paths.append(path)
    }
}

struct DrawingView: View {
    @Binding var drawing: Drawing
    @State private var currentPath: DrawingPath?
    
    var body: some View {
        GeometryReader { geometry in
            Canvas { context, size in
                for drawingPath in drawing.paths {
                    context.stroke(drawingPath.path, with: .color(drawingPath.color), lineWidth: drawingPath.lineWidth)
                }
            }
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        if currentPath == nil {
                            currentPath = DrawingPath(color: .black, lineWidth: 5)
                        }
                        currentPath?.path.addLine(to: value.location)
                    }
                    .onEnded { value in
                        if let currentPath = currentPath {
                            drawing.addPath(currentPath)
                            self.currentPath = nil
                        }
                    }
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

この修正を加えたコードを、プロジェクト内のContentView.swiftにコピーし、再度実行してみてください。画面上で指を動かすと線が描けるはずです。

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してDoodleという名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

iPhoneアプリ

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

準備

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

iPhone版 話して!(その1)のコードは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とのやり取り

プロンプト

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

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)
    }
}

返答

以下のコードは、スマホを振ることでテキストフィールドに入力された言葉を話す機能が追加されたものです。CoreMotionフレームワークを使用し、加速度センサーのデータを取得してスマホが振られたかどうかを判断します。


import SwiftUI
import AVFoundation
import CoreMotion

struct ContentView: View {
    @State private var speechSynthesizer = AVSpeechSynthesizer()
    @State private var motionManager = CMMotionManager()
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("ここにテキストを入力してください", text: $text)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button(action: {
                self.configureAudioSession()
                self.speakText(text)
            }) {
                Text("話して!")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .onAppear {
                self.startMonitoringShakeGesture()
            }
            .onDisappear {
                self.stopMonitoringShakeGesture()
            }
        }
    }

    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)
    }

    func startMonitoringShakeGesture() {
        guard motionManager.isAccelerometerAvailable else { return }
        motionManager.accelerometerUpdateInterval = 0.1

        motionManager.startAccelerometerUpdates(to: OperationQueue.current!) { (data, error) in
            guard let data = data, error == nil else { return }
            if abs(data.acceleration.x) > 2.5 || abs(data.acceleration.y) > 2.5 || abs(data.acceleration.z) > 2.5 {
                self.configureAudioSession()
                self.speakText(text)
            }
        }
    }

    func stopMonitoringShakeGesture() {
        motionManager.stopAccelerometerUpdates()
    }
}

このコードは、入力されたテキストを話す機能と、スマホを振るとテキストを話す機能を含んでいます。テキストフィールドが追加され、startMonitoringShakeGesture()およびstopMonitoringShakeGesture()を使って、画面が表示される時と消える時にシェイクジェスチャーの監視を開始および停止します。

プロンプト

ボタンをクリックしたら「今日は新宿で映画を見よう」と話して、スマホを振ったらテキストフィールドのテキストを話すように変更して。

返答

以下のコードは、ボタンをクリックすると「今日は新宿で映画を見よう」と話し、スマホを振るとテキストフィールドに入力された言葉を話すように変更されています。

import SwiftUI
import AVFoundation
import CoreMotion

struct ContentView: View {
    @State private var speechSynthesizer = AVSpeechSynthesizer()
    @State private var motionManager = CMMotionManager()
    @State private var text = ""

    var body: some View {
        VStack {
            TextField("ここにテキストを入力してください", text: $text)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button(action: {
                self.configureAudioSession()
                self.speakText("今日は新宿で映画を見よう")
            }) {
                Text("話して!")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
            .onAppear {
                self.startMonitoringShakeGesture()
            }
            .onDisappear {
                self.stopMonitoringShakeGesture()
            }
        }
    }

    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)
    }

    func startMonitoringShakeGesture() {
        guard motionManager.isAccelerometerAvailable else { return }
        motionManager.accelerometerUpdateInterval = 0.1

        motionManager.startAccelerometerUpdates(to: OperationQueue.current!) { (data, error) in
            guard let data = data, error == nil else { return }
            if abs(data.acceleration.x) > 2.5 || abs(data.acceleration.y) > 2.5 || abs(data.acceleration.z) > 2.5 {
                self.configureAudioSession()
                self.speakText(text)
            }
        }
    }

    func stopMonitoringShakeGesture() {
        motionManager.stopAccelerometerUpdates()
    }
}

この変更により、ボタンをクリックすると「今日は新宿で映画を見よう」と話し、スマホを振るとテキストフィールドに入力された言葉を話すようになります。

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してTalkToMe-2という名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。

調整としてstartMonitoringShakeGestureの中の2.5をすべて2.0に変更します。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

iPhoneアプリ

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とのやり取り

プロンプト

「話して!(その1)」というApp Inventorアプリ知ってる?

返答

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

プロンプト

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

返答

XcodeとSwiftUIを使って、同様の機能を持つiPhoneアプリを作成する方法を説明します。

  1. Xcodeを開いて、新しいプロジェクトを作成します。プロジェクトのテンプレートとして"iOS"の中の"App"を選択し、次に進みます。
  2. プロジェクト名を入力し、"Interface"で"SwiftUI"を選択し、"Language"で"Swift"を選択してプロジェクトを作成します。
  3. ContentView.swiftファイルを開いて、以下のコードを記述します。

このコードは、"話して!"というテキストを持つボタンを画面に配置し、ボタンが押されると、音声合成で"話して!"としゃべる機能を実現します。AVFoundationフレームワークを使用して、日本語の音声合成が行われます。

以上の手順で、XcodeとSwiftUIを使って、MIT App Inventorで作成されたアプリと同様の機能を持つiPhoneアプリが作成できます。

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してTalkToMe-1という名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。8行目のself.speakText(“話して!")をself.speakText(今日は新宿で映画を見よう)に変更します。

実行

実行結果はこの通り。「話して!」ボタンをクリックするとしゃべります。下の画像をクリックしてYouTubeデモビデオを見てください。

 

iPhoneアプリ

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 12.6.3上でXcode 14.2を使いました。

GPT-4とのやり取り

プロンプト

「こんにちはCodi」というApp Inventorアプリ知ってる?

返答

申し訳ありませんが、私は「こんにちはCodi」という特定のApp Inventorアプリについては知りません。ただし、このアプリ名から推測するに、おそらく日本語で「Hello, Codi」という意味を持つ初心者向けの教育アプリか、プログラミングの基本を学ぶアプリである可能性があります。

MIT App Inventorのプラットフォームは、非常に多くのアプリが作成されており、それぞれが異なる目的や機能を持っています。そのため、特定のアプリについて情報を提供することは難しいです。

GPT-4はこんにちはCodiを知らないので、WebChatGPTというChrome拡張機能を使って同じ質問をしてみます。WebChatGPTを使うとインターネットを検索した結果得られるURLをGPT-4に与えて返答してくれます。情報をGPT-4に追加できるわけです。ここではMITの英語版チュートリアル日本語化プロジェクトのチュートリアルYouTubeビデオが与えられました。

プロンプト

「こんにちはCodi」というApp Inventorアプリ知ってる?

返答

はい、「こんにちはCodi」というApp Inventorアプリについて知っています。「HelloCodi」は、非常に短時間で作成できるシンプルなアプリです。このアプリでは、Codi the bee(蜂)の画像が表示されたボタンを作成し、そのボタンがクリックされるとスマホがブンブンという音を出すようにプログラムします[1]。HelloCodiアプリを作成するためには、Codi the beeの画像ファイルが必要です。この画像ファイルは、以下のリンクからダウンロードできます:Codi画像:codi.jpg[3]。

プロンプト

こんにちはCodiみたいに動くiPhoneアプリ作れる?

返答

はい、App Inventorを使って作成した「こんにちはCodi」のようなアプリをiPhone向けに作成することもできます。ただし、App InventorはAndroidアプリの開発に特化しているため、iPhoneアプリを作成するには別のツールが必要です。SwiftUIやSwiftを使って、同様の機能を持つiPhoneアプリを開発できます。

SwiftUIは、Appleが提供するモダンなUIフレームワークで、簡単にアプリのインターフェイスをデザインできます。Swiftは、iOS、macOS、watchOS、tvOS向けのアプリ開発に使用されるプログラミング言語です。これらのツールを使用して、「こんにちはCodi」のようなボタンを押すと音が鳴るシンプルなiPhoneアプリを作成することができます。

プロンプト

SwiftUIを使って作ってみて

返答

私はAIであるため、実際にアプリを作成することはできませんが、SwiftUIを使用して「こんにちはCodi」のようなアプリを作成する方法を説明します。

まず、Xcodeをダウンロードしてインストールし、新しいプロジェクトを作成します。プロジェクトを作成する際に、User InterfaceにSwiftUIを選択します。

以下は、SwiftUIを使って「こんにちはCodi」のようなアプリを作成するためのコード例です。

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してHelloCodiという名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

イメージファイルと音声ファイルの追加

App Inventor版のこんにちはCodiに使ったcodi.jpgとBee-Sound.mp3ファイルをアセットに追加します。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。

イメージファイル、音声ファイルとContentView.swiftはこちらからzipファイルをダウンロードできます。ダウンロード後解凍してご利用ください。

実行

実行結果はこの通り。クリックすると音も出ます。