MIT App Inventor 2 日本語化プロジェクト
OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 10.15.7上でXcode 12.2を使い、動作確認にはiOSシミュレータ(iOS 14.2)を使いました。
ここで作るのはChatGPTと話そう！(その１)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。１時間以内で動きました。
次の機能を持つ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)を使いました。
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]。
このような基本的な機能を持つ「もぐらたたきゲーム」は、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)を使いました。
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版 話して！(その１)のコードは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の設定->アクセシビリティ->タッチ->シェイクで取り消しをOFFこのコードにスマホを振るとテキストフィールドに入力された言葉を話す機能を追加して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を使っています。
「話して！(その１)」という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以降ではREAD_EXTERNAL_STORAGEの権限が拒否される場合があるため、エラーが出る可能性があります。
ソースコードを見ながらこのチュートリアルを読んだ方がわかりやすいと思います。ページの最後にあるダウンロードセクションからソースコードをダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[コンピュータからプロジェクト（.aia）をインポートします]を選択し、ソースコードを選択してインポートしてください。
SQLite自体はAndroidに標準装備です。
データベースファイルの準備
ZIPファイルの解凍とデータベースのインポート
都道府県から町域までの選択フロー
郵便番号データの取得
データの加工
SQLiteデータベースの作成
CREATE TABLE "japanzip" (
"id" INTEGER NOT NULL UNIQUE,
"zip" TEXT,
"prefs" TEXT,
"city" INTEGER,
"street" TEXT,
PRIMARY KEY("id" AUTOINCREMENT)
);japanzip.sqliteとして保存し、ZIP圧縮してjapanzip.zipとします。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、”ZipJapan”と名前を付けます。
垂直配置レイアウトの設定
非可視コンポーネントなど
このチュートリアルでは、スマホで遊べるシューティングゲームを作成します。ロケットを指で動かし、指を離すと発射するシンプルな操作で、空飛ぶ円盤を撃退しましょう。効果音も加え、臨場感のあるゲームを完成させます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"FlyingSaucer“と名前を付けます。
ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。ソースコードもダウンロードできます。
Screen1のタイトルを"空飛ぶ円盤撃退"にします。
ドローイングとアニメーション パレットから キャンバス コンポーネントをビューアーにドラッグアンドドロップし、幅は"親要素に合わせる"、高さは"80%"に設定します。
ドローイングとアニメーション パレットから 画像スプライト コンポーネントを3個追加し、名前を"ロケット“、"円盤"、"爆発に設定します。先ほどパソコンにダウンロードした画像をアップロードして、以下のように画像を設定します。
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″の下に追加し、その中にユーザーインターフェースパレットからボタンを配置します。"水平配置2″のプロパティで水平に整列するを"中央揃え"に横幅を"親要素に合わせる"にします。ボタンの名前とテキストを"リスタート"に設定します。
メディア パレットから サウンド コンポーネントを4個追加し、名前とソースを次のように設定します。
launcher7.mp3small_explosion1.mp3failure.mp3over.mp3
センサー パレットから タイマー コンポーネントをビューアーにドラッグアンドドロップし、タイマー間隔を1000ミリ秒、タイマー有効をチェックします。
機械学習を使って画像を分類するエクステンションです。機械学習モデルをアンドロイドデバイス上に持つのでネットワーク接続がない環境でも動きます。MITオリジナルのLookExtensionは動かないアンドロイドデバイスがありますが、日本語化プロジェクトでハックしたバージョンは推論速度は遅くなるものの、こういったアンドロイドデバイスでも動くようになっています。ここからダウンロードしてください。
このエクステンションを使ったアプリの作り方はまだ公開していません。エクステンションを使わない精度の高い人工知能画像分類アプリのチュートリアルは公開中です
LookExtensiomは機械学習用ソフトウェアのTensorFlowのJavaScript版であるTensorFlow.jsを使っています。TensorFlow.jsは推論を行うBackendモジュールとしてデフォルトでWebGL2(GPU使用)を使用しますがすべてのアンドロイドデバイスがWebGL2をサポートしているわけでは無いのでWebGL2をサポートしていないデバイスでは実行時にエラーが発生します。そこでWebGL2をサポートしないデバイスではWebGL2を使わずにCPUを使うように変更しました。変更ファイルはassests/look.jsのみです。以下の＋行を追加します。
スマホらしく方位センサーを使ったゲームを作ります。スマホを傾けて紫色のボールをころがしてゴールにボールを入れて得点します。途中にあるブラックホールに落とさないようにうまくコントロールする必要があります。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"RollingBall“と名前を付けます。Screen1のタイトルを"ボールころがしゲーム"にします。
ページの最後にあるダウンロードセクションから使用する画像と音源をクリックしてダウンロードしてください。 このチュートリアルでは段階的にアプリの組み上げ、テストを繰り返してアプリを作っていきます。ここで行うように段階的に作っていく方がバグの少ないアプリを作れます。
まずは紫色のボールを動かす部分からです。
ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグし、"フィールドキャンバス“と名前を付け、横幅は"親要素に合わせる"、高さは"70%"に設定します。
ドローイングとアニメーション パレットから画像スプライト を"フィールドキャンバス“に追加し、名前を"ボール“に設定します。ダウンロードした 3DPurpleBall.png をアップロードしてボールの画像として設定し、次のプロパティを設定します。
センサーパレットから、 方位センサーをビューアーにドラッグアンドドロップします。
アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。
方位センサー1 パネルの"いつも方位センサー1.方位が変化したら"ブロックを追加します。
ボール.進行方向 と ボール.スピード にそれぞれ 方位センサー1.角度 と 方位センサー1.マグニチュード を下図のように指定します。方位センサーの角度は-180～180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0～1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。
ここまででテストしてみましょう。Companionアプリをつないで実際にスマホを傾けてボールが動くことを確認してください。うまく動きますか？
このチュートリアルでは、スマホで遊べる「もぐらたたき」ゲームを作成します。モグラがランダムに現れるので、タッチして得点を稼ぐシンプルなゲームです。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"MoleMash"と名前を付けます。
Screen1のタイトルを"もぐらたたき"にします。モグラの画像をここからパソコンにダウンロードします。
ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。
ユーザーインターフェース パレットから ラベル と ボタン をキャンバス1の下に配置し、以下のように名前とプロパティを設定します。
メディアパレットから、 サウンドコンポーネントをビューアーにドラッグアンドドロップします。非可視コンポーネントのサウンドコンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。
モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。
画像スプライトを使ってモグラを描画します。画像スプライトはキャンバスの中を移動する画像です。画像スプライトには速さ、進行方向、インターバル（描画間隔）を指定でき、タッチされたかを検出することもできます。