会員サイト

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は日本語でも使えます。英語で答えてきたら「日本語で表示して」と頼めば翻訳してくれます。無料アカウントでも利用できます。試してみてください。下の画像をクリックすればすぐに使えます。