ChatGPT,チュートリアル

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

プロンプト

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

残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

ChatGPT,チュートリアル

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 を使って作成されており、ボタンを押すと音声合成でしゃべるシンプルなアプリです。このアプリを作成するには、まず「プロジェクトを新規作成」からプロジェクト名に「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に標準装備です。

データベースファイルの準備

  • 全国郵便番号データベース(約12万件)を事前にSQLite形式で作成し、このファイルをZIP圧縮してアセットに含めます。App Inventorのアセットの制限(5MB)を超えないように圧縮しています。
  • 圧縮ファイルがアセットにない場合、指定サーバーからデータベースZIPファイルをダウンロードして使用する機能もあります。

ZIPファイルの解凍とデータベースのインポート

  • ZIPファイルを解凍し、SQLiteにインポートします。その後、都道府県リストを取得してスピナーで表示します。

都道府県から町域までの選択フロー

  • 都道府県が選択されると、その都道府県内の市町村リストをスピナーに表示。
  • 市町村が選択されると、指定市町村内の町域リストを表示。
  • 最終的に町域が選択されると、郵便番号が表示されます。

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

    郵便番号データの取得

    データの加工

    • ダウンロードしたデータからローマ字列を削除し、通し番号の列を追加します。
    • Shift JISからUTF-8に文字コードを変換して、CSVファイルとして保存します。

    SQLiteデータベースの作成

    • SQLiteのGUIツール(例: DB Browser for 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”と名前を付けます。

    エクテンションの追加

    • AppInventor extension for SQLiteからDownload AIXをクリックしてローカルパソコンにダウンロードし、org.bennedum.SQLite.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします
    • https://puravidaapps.com/zip.php からTaifunZip extension (aix file)をダウンロードし、com.puravidaapps.TaifunZip.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします。
    • https://puravidaapps.com/file.php からTaifunFile extension (aix file)をダウンロードし、com.puravidaapps.TaifunFile.aixをエクステンションパレットからエクステンションインポートをクリックしてインポートします。

    デザイン編集

    垂直配置レイアウトの設定

    • 垂直配置レイアウトをビューアーにドラッグアンドドロップし、水平に整列するは"中央揃え"、横幅は"親要素に合わせる"に設定します。
    • 以下のコンポーネントを順に追加します。それぞれのコンポーネントの名前はカッコ内のもの。

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

    非可視コンポーネントなど

    • 接続 パレットから ウェブ を、ストレージ パレットから ファイル を追加。
    • japanzip.zip ファイルをアセットにアップロードします。

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

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    ゲーム,チュートリアル

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

    このチュートリアルでは、スマホで遊べるシューティングゲームを作成します。ロケットを指で動かし、指を離すと発射するシンプルな操作で、空飛ぶ円盤を撃退しましょう。効果音も加え、臨場感のあるゲームを完成させます。

    [プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"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:テキスト="得点"
    • 得点:テキスト="0″
    • ラベル2:テキスト="残り時間"
    • 残り時間:テキスト="秒"
    • ステータス:テキスト="ロケットを指で左右に動かして指を離すと発射できます"、フォントサイズ=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.0、この値はプログラム内で変更します
    • 目に見える:チェック

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

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

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

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

    方位センサー1 パネルの"いつも方位センサー1.方位が変化したら"ブロックを追加します。

    ボール.進行方向ボール.スピード にそれぞれ 方位センサー1.角度方位センサー1.マグニチュード を下図のように指定します。方位センサーの角度は-180~180の範囲の数値で、スマホ画面を水平から真右に傾けると0、左に傾けると-180、スマホの上側に傾けると90、手前に傾けると-90になります。方位センサーのマグニチュードは0~1の範囲の数値で、スマホ画面が水平なら0、垂直なら1になります。

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

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

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    ゲーム,チュートリアル

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

    このチュートリアルでは、スマホで遊べる「もぐらたたき」ゲームを作成します。モグラがランダムに現れるので、タッチして得点を稼ぐシンプルなゲームです。

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

    デザイン編集

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

    コンポーネントの追加

    ドローイングとアニメーション パレットから キャンバス をビューアーにドラッグアンドドロップし、高さと横幅を280ピクセルに設定します。

    ユーザーインターフェース パレットから ラベルボタン をキャンバス1の下に配置し、以下のように名前とプロパティを設定します。

    • ラベル:名前="点数"、テキスト="点数: 0″
    • ボタン:名前="リセットボタン"、テキス ="リセット"

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

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

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

    画像スプライトの追加

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

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

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

    このチュートリアルでは、画面上で指を使って自由に絵を描ける お絵かきアプリ を作成します。クリアボタンで画面を消去し、何度でも描き直すことができます。

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

    デザイン編集

    キャンバスの追加

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

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

    キャンバス1のプロパティの高さと横幅を"親要素に合わせる"に変更します。これにより、画面全体に描画スペースが広がり、どのサイズの画面でも対応できるようになります。

    画面クリアボタンを追加

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

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

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

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

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

    スマホを振ると話す機能としゃべる言葉の入力機能の追加

    ここではスマホを振るとしゃべる機能としゃべる言葉を入力する機能を追加します。

    App Inventorを起動してログインし、TalkToMeプロジェクトを開いてください。App Inventorは前回開いたプロジェクトを自動的に開くので、もうTalkToMeプロジェクトが開いてあるかもしれません。

    デザイン編集

    加速度センサーを追加

    センサーパレットから、 加速度センサーコンポーネントをドラッグしビューアーに配置します。ドロップすると、ビューアー下部の非可視コンポーネントとマークされた領域に表示されます 。

    ブロック編集

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

    加速度センサーの揺れたらイベントをプログラム

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内

    チュートリアル,ユーティリティ

    話しをするアプリを作りましょう

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

    デザイン編集

    ボタンを追加

    ボタンのテキストを変更

    ボタン1のプロパティのテキストにある “ボタン1のテキスト”を消し、"話して!"と入力します。

    テキスト読み上げコンポーネントの追加

    残りのコンテンツを表示するにはログインする必要がありますどうぞ . 会員ではないですか ? 入会のご案内