会員サイト

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 2日本語版にSQLiteエクステンション、Zipエクステンション、Fileエクステンションを追加して使用しています。また、簡単なSQL言語を使用しています。このアプリはandroid 11以降では"The permission READ_EXTERNAL_STORAGE has been denied"エラーが出て動作しません。

ソースコードを見ながらこのチュートリアルを読んだ方がわかりやすいと思います。ページの最後にあるダウンロードセクションからソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[コンピュータからプロジェクト（.aia）をインポートします]を選択し、ソースコードを選択してインポートしてください。  

プログラムの構造（流れ）

SQLite自体はAndroidに標準装備です。

1. あらかじめSQLiteの全国郵便番号データベースファイル（約１２万件）を作成しておき、このファイルのzip圧縮ファイルをアセットとしてアプリに同封します。App Inventorではアセットとしてアップロードできるファイルのサイズは5MB程度が上限なので、圧縮しています。全国郵便番号データベースファイルの圧縮前ファイルサイズは8.5MB、圧縮後ファイルサイズは2.4MBです。万が一、アセットにファイルが無い時あるいは圧縮ファイルサイズが5MBを超えた時に備え、指定サーバーからzip圧縮ファイルをダウンロードして使用する機能も持っています。
2. zip圧縮データベースファイルを解凍後、SQLiteにインポートし、データベースから都道府県のリストを作成してスピナーで表示します。
3. 都道府県が選択されたら指定都道府県内の市町村リストを作成してスピナーで表示します。
4. 市町村が選択されたら指定市町村内の町域リストを作成してスピナーで表示します。
5. 町域が選択されたら定都道府県内指定市町村内指定町域の郵便番号を表示します。

郵便番号データベースファイルの作成(App Inventorは使いません)

https://www.post.japanpost.jp/zipcode/dl/roman-zip.html　より全国一括のzip圧縮データファイルをダウンロードします。解凍後、表計算ソフトでローマ字列を削除し、代わりに通し番号の列を追加します。また文字コードがShift JISなので、UTF-8に変換してからcsvで保存します。

SQLiteデータベースのテーブル構造を以下のように定義し、SQLite GUI管理ツール（たとえばDB Browser for SQLite）を使ってテーブルを作成し、csvファイルをインポートしてデータベースを作成します。ここではjapanzip.sqliteという名前でデータベースを作成し、japanzip.zipというファイルに圧縮しました。japanzip.zipはここからダウンロードしてください。

CREATE TABLE "japanzip" (
	"id"	INTEGER NOT NULL UNIQUE,
	"zip"	TEXT,
	"prefs"	TEXT,
	"city"	INTEGER,
	"street"	TEXT,
	PRIMARY KEY("id" AUTOINCREMENT)
);

プロジェクトを作成

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、”ZipJapan”と名前を付けます。

エクテンションの追加

デザイン編集

垂直配置レイアウトをビューアーにドラッグアンドドロップし、垂直配置1のプロパティーのうち水平に整列するは"中央揃え"、横幅は"親要素に合わせる"にします。その中に2個のラベル（タイトル、空白）、スピナー（選択ドロップダウン）、1個のラベル(初期化ラベル)、1個のボタン(初期化ボタン)、1個のラベル(住所ラベル)、1個のテキストボックス(郵便番号)、1個のボタン(リセット)を上から順番にドラッグアンドドロップします。それぞれのコンポーネントの名前はカッコ内のものにしてください。

それぞれのコンポーネントのプロパティーですが、"タイトル"の背景の色は"カスタム"で#4285f4ffに、フォントサイズは32、テキストは"郵便番号検索"、テキストカラーは"白"にします。"空白"のテキストは空白にします。"選択ドロップダウン"の目に見えるはチェックを外します。"初期化ラベル"のフォントサイズは10、テキストは"郵便番号データベースを初期化します。よろしければ下の初期化ボタンをクリックしてください。"、目に見えるはチェックを外します。"初期化ボタン"のテキストは"初期化"、目に見えるはチェックを外します。"住所ラベル"のテキストは"初期化中"、目に見えるはチェックを外します。"郵便番号"は目に見えるのチェックを外します。"リセット"の背景の色は"カスタム"で#4285f4ffに、太字フォントをチェック、テキストは"リセット"、テキストカラーは"白"にします。

見えないコンポーネント類としてエクテンションに追加したSQLite、 TaifunZip,、TaifunFileと接続パレットにあるウェブ、ストレージパレットにあるファイルをドラッグアンドドロップします。最後にファイルをアップロードをクリックしてjapanzip.zipをアップロードします。ここまでで下図のようになります。

ブロック編集機能を使用したプログラミング

効果音の入ったシューティングゲームを作りましょう

簡単なシューティングゲームを作成します。いくつか効果音を入れて、臨場感を高めます。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"FlyingSaucer“と名前を付けます。

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。

デザイン編集

Screen1のタイトルを"空飛ぶ円盤撃退"にします。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、横幅は"親要素に合わせる"、高さは"80%"にします。次に同じドローイングとアニメーションパレットから、 画像スプライトコンポーネントを3個キャンバス1にドラッグアンドドロップして名前を"ロケット“、"円盤"、"爆発"にし、先ほどパソコンにダウンロードした画像のうち、rocket.pngをアップロードして"ロケット“の画像に、saucer.pngをアップロードして"円盤“の画像に、explosion.pngをアップロードして"爆発“の画像にそれぞれ設定します。他のプロパティは下のように設定してください。

	ロケット	円盤	爆発
目に見える	チェック	チェック	チェック
X	100	0	100
Y	240	0	0
有効	チェック	チェック	チェック
進行方向	0	180	0
インターバル	100	10	0
回転	チェックしない	チェックしない	チェックしない
スピード	0.0	2.0	0.0

レイアウトパレットから、水平配置コンポーネントをキャンパス1の下にドラッグアンドドロップし、その中にユーザーインターフェースパレットから5個のラベルをドラッグアンドドロップして横に並べます。デフォルトのラベルのテキストが長いので、作業中は水平配置コンポーネントの横幅を"親要素に合わせる"にして、ラベルのテキストを適宜短く変更する（"ラベル1のためのテキスト"を"ラベル1″に変更するなど）と楽です。左から順番に名前を"ラベル1“、"得点“、"ラベル2“、"残り時間“、"ステータス“、にします。そしてテキストを順番に"得点"、"0″、"残り時間"、"秒"、"ロケットを指で左右に動かして指を話すと発射できます"にします。ステータスだけはフォントサイズを10にします。

さらに、レイアウトパレットから、水平配置コンポーネントを"水平配置1″の下にドラッグアンドドロップし、その中にユーザーインターフェースパレットからボタンコンポーネントを配置します。"水平配置2″のプロパティで水平に整列するを"中央揃え"に横幅を"親要素に合わせる"にします。あとはボタンの名前をリスタートに、テキストもリスタートにします。

メディアパレットからサウンドコンポーネントを4個ビューアーにドラッグアンドドロップし、それぞれ発射音、爆発音、ハズレ音、ゲームオーバー音と言う名前にします。再生ファイルにlauncher7.mp3、 small_explosion1.mp3、 failure.mp3、 over.mp3の３個の音ファイルをアップロードして指定してください。ここまでで下図のようになります。

そのためにセンサーパレットからタイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマー間隔を1000ミリ秒に設定します。タイマー有効がチェックされていることも確認してください。

ブロック編集機能を使用したプログラミング

日本語化プロジェクト版LookExtension

機械学習を使って画像を分類するエクステンションです。機械学習モデルをアンドロイドデバイス上に持つのでネットワーク接続がない環境でも動きます。MITオリジナルのLookExtensionは動かないアンドロイドデバイスがありますが、日本語化プロジェクトでハックしたバージョンは推論速度は遅くなるものの、こういったアンドロイドデバイスでも動くようになっています。ここからダウンロードしてください。

このエクステンションを使ったアプリの作り方はこちらから

オリジナルのLookExtensionからの変更点とその理由

LookExtensiomは機械学習用ソフトウェアのTensorFlowのJavaScript版であるTensorFlow.jsを使っています。TensorFlow.jsは推論を行うBackendモジュールとしてデフォルトでWebGL2(GPU使用)を使用しますがすべてのアンドロイドデバイスがWebGL2をサポートしているわけでは無いのでWebGL2をサポートしていないデバイスでは実行時にエラーが発生します。そこでWebGL2をサポートしないデバイスではWebGL2を使わずにCPUを使うように変更しました。変更ファイルはassests/look.jsのみです。以下の＋行を追加します。

スマホのセンサーを使ったゲームを作りましょう

スマホらしく方位センサーを使ったゲームを作ります。スマホを傾けて紫色のボールをころがしてゴールにボールを入れて得点します。途中にあるブラックホールに落とさないようにうまくコントロールする必要があります。

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"RollingBall“と名前を付けます。Screen1のタイトルを"ボールころがしゲーム"にします。

ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。 このチュートリアルでは段階的にアプリの組み上げ、テストを繰り返してアプリを作っていきます。ここで行うように段階的に作っていく方がバグの少ないアプリを作れます。

ボール部分

まずは紫色のボールを動かす部分からです。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして名前を"フィールドキャンバス“にし、横幅は"親要素に合わせる"、高さは"70%"にします。次に同じドローイングとアニメーションパレットから、 画像スプライトコンポーネントをフィールドキャンバスにドラッグアンドドロップして名前を"ボール“にし、先ほどパソコンにダウンロードした3DPurpleBall.pngをアップロードして画像に設定します。他のプロパティは下のように設定してください。

• 有効：チェック
• インターバル：10
• 進行方向：０、この値はプログラム内で変更します
• スピード：0.0、この値はプログラム内で変更します
• 目に見える：チェック

さらにセンサーパレットから、 方位センサーをビューアーにドラッグアンドドロップします。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

方位センサーでボールを動かす

ブロック編集機能の左側にある方位センサー1パネルをクリックして開き、"いつも方位センサー1.方位が変化したら"ブロックをドラッグアンドドロップし、ボール.進行方向とボール.スピードに方位センサー1.角度と方位センサー1.マグニチュードを下図のようにはめ込みます。方位センサーの角度は-180～180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0～1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールが動くことを確認してください。うまく動きますか？

ゴール部分とテキスト部分

簡単なゲームを作りましょう

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"MoleMash"と名前を付けます。

デザイン編集

Screen1のタイトルを"もぐらたたき"にします。モグラの画像をここからパソコンにダウンロードします。

コンポーネントを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップします。その下にユーザーインターフェースパレットから、ラベルとボタンをドラッグアンドドロップします。

キャンバス1のプロパティの高さと幅を280ピクセルに変更し、ラベルは名前を"点数"にテキストを"点数:0″に設定します。ボタンは名前を"リセットボタン"にテキストを"リセット"に設定します。

さらにメディアパレットから、 サウンドコンポーネントをビューアーにドラッグアンドドロップします。非可視コンポーネントのサウンドコンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。

タイマーコンポーネントを追加

モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。

画像スプライトを追加

画像スプライトを使ってモグラを描画します。画像スプライトはキャンバスの中を移動する画像です。画像スプライトには速さ、進行方向、インターバル（描画間隔）を指定でき、タッチされたかを検出することもできます。

お絵かきアプリを作りましょう

[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Doodle"と名前を付けます

デザイン編集

キャンバスを追加

ドローイングとアニメーションパレットから、 キャンバスコンポーネントをScreen1にドラッグアンドドロップします。

キャンバスの高さと横幅を"親要素に合わせる"に変更します

キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。

画面クリアボタンを追加

ユーザーインターフェースパレットから、ボタンをキャンバスの下にドラッグアンドドロップし、テキストを"クリア"に設定します。

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

キャンバス.ドラッグイベントの追加