ChatGPT,チュートリアル

OpenAIのGPT-4を使って新しいAndroidアプリをAndroid Studio FlamingoとKotlinを使って作ります。Android StudioはWindowsでもMac, Linux, ChromeOSでも動きますので手元のパソコンが使えます。
ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。いろいろ試してみましたが、GPT-4はAndroidアプリはうまく作れなかったので、もしやと思い、英語でプロンプトを入れたら動くコードをくれました。日本語のKotlinのコードはあまり入っていないようですね。

GPT-4とのやり取り

プロンプト

Please tell me how to create an android app with the following features with Android Studio and kotlin according to step 1 to step 3. Please be detailed so that even a beginner can understand.

Features:
1. send the entered text to ChatGPT. The model is gpt-3.5-turbo
2. display the returned reply on the screen

Step 1: Explanation of detailed functions
Step 2: Outline of how to make it
Step 3: Explain in detail so that even a newcomer can understand. the communication part with ChatGPT should

返答

This is a simple guide to create an Android application in Kotlin using Android Studio that can communicate with the ChatGPT-3.5-turbo API.

This guide assumes you have Android Studio installed on your machine and basic knowledge of Kotlin. If you need to install Android Studio, please refer to the official Android Studio website.

Here are the steps you need to follow to create the Android Application:

Step 1: Explanation of Detailed Functions

  1. User Input: We need to create an interface where users can input text. For this, we will use an EditText view.
  2. Send Request: When users have entered the text, we need to send it to the OpenAI server via a POST request. This can be done using a library like Retrofit or OkHttp.
  3. Receive Response: Once we have sent the request, we will receive a response from the server. This response needs to be handled and displayed to the user.
  4. Display Response: We will display the response in a TextView.

Step 2: Outline of How to Make It

  1. Create a New Project in Android Studio: Start a new Android Studio project with an Empty Activity.
  2. Layout Design: Design the layout of your application using the XML file in the 'res/layout’ directory. You should have an EditText for input and a Button to send the request, and a TextView to display the response.
  3. Networking: Add Retrofit or OkHttp to your project to handle HTTP requests.
  4. API Key: Register on the OpenAI website and get an API Key. This key will be used to authorize your requests to the OpenAI server.
  5. Request and Response: Create a function to handle the request and response. This function will take the text from the EditText, send it as a request to the OpenAI server, receive the response, and display it in the TextView.

Step 3: Detailed Explanation for Beginners

  1. Project Setup: Open Android Studio, click on “New Project", select “Empty Activity", and click “Next". Give your application a name, select “Kotlin" as the language, and finish.
  2. Layout Design: Open the 'activity_main.xml’ file from the 'res/layout’ directory. Remove any existing code and paste the following:

This will create an EditText for input, a Button for sending the request, and a TextView to display the response.

  1. Adding Dependencies: Now we need to add Retrofit and Gson dependencies to our project. Open your 'build.gradle’ (Module) file and add these lines inside dependencies:

implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

Click “Sync Now" at the top right corner of the screen to download and integrate these libraries into your project.

  1. API Key: Go to the OpenAI website, create an account, and get your API Key. We will use this key to authorize our requests.
  2. Setting up Retrofit: Now, we will setup Retrofit to handle HTTP requests.
    Creating a Data Class: First, we need to create a data class that represents the request payload and the response payload. The request payload for GPT-3.5-turbo is a JSON that looks like this:

So, our data classes will look like this:

延々と説明が続きます。

プロンプト

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

ChatGPT,チュートリアル

ChatGPT (GPT-4)を使って作ろうとした、ChatGPTに入力したプロンプトを送って返答を画面に表示するApp Inventorアプリ「ChatGPTと話そう!(その1)」です。

ChatGPT (GPT-4)は万能ではありません。間違ったことを教えることもあるので、その都度修正してもらう必要があります。ここでは結局ChatGPT (GPT-4)はApp Inventorアプリを作れなかったので、人間が作りました。どうもGPT-4はApp Inventorの知識はあまりないようですね。

GPT-4とのやり取り

プロンプト 「iPhone版 ChatGPTと話そう!(その1)」とほぼ同じものです

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

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

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

返答

ステップ1:細かい機能の説明 このアンドロイドアプリでは、次の機能があります。

  1. ユーザーがテキストを入力できるテキストボックス
  2. テキストが入力された後、送信ボタンをクリックすると、入力されたテキストがChatGPT(gpt-3.5-turbo)に送信される
  3. ChatGPTから返信を受け取り、画面上に表示する

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

  1. MIT App Inventorで新しいプロジェクトを作成
  2. 必要なコンポーネントをデザイナー画面に配置
  3. 各コンポーネントをブロックエディタで関連付ける
  4. ChatGPT APIに接続するための設定

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

  • MIT App Inventorのウェブサイト(http://appinventor.mit.edu/)にアクセスし、新しいプロジェクトを作成します。
  • デザイナー画面で以下のコンポーネントを配置します。

    • テキストボックス(入力)
    • ボタン(送信ボタン)
    • ラベル(返信の表示)
    • Web コンポーネント(APIと通信)

  • ブロックエディタで以下の手順に従ってブロックを作成します。
    a. 送信ボタンがクリックされたら、入力されたテキストを取得し、Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。
    b. APIからの返信を受け取ったら、返信の内容をラベルに表示するブロックを作成します
  • ChatGPT APIに接続するための設定を行います。
    a. OpenAIのウェブサイト(https://beta.openai.com/signup/)でAPIキーを取得します。
    b. App Inventorのデザイナー画面で、Web コンポーネントを選択し、PropertiesパネルでURLを設定します。URLは「https://api.openai.com/v1/engines/gpt-3.5-turbo/completions」となります。
    c. ブロックエディタで、Web コンポーネントの「set Web.Headers」ブロックを使用して、APIキーを含むヘッダー情報を設定します。ヘッダー情報は次のようになります。
  • “Content-Type": “application/json"
  • “Authorization": “Bearer あなたのAPIキー"
    d. 送信ボタンがクリックされたときのブロックで、入力されたテキストをChatGPT APIに送信するように設定します。具体的には、「set Web.Body」ブロックを使用して、送信するテキストを次のようなJSON形式に設定します。
    – {“prompt": “ここに入力されたテキスト", “max_tokens": 60}
    e. 'Web.GotText’イベントのブロックで、APIからの返信(responseContent)を取得し、ラベルに表示するように設定します。

これらの手順を踏むことで、入力されたテキストをChatGPTに送信し、返信を画面に表示するアンドロイドアプリを作成できます。

ただし、App Inventorは直接的な外部APIとの連携に制限があります。そのため、上記の方法は理想的なシナリオを示していますが、実際にはOpenAIのAPIと直接通信するためには、サーバー側のスクリプト(PHP, Node.js, Pythonなど)が必要となります。そのスクリプトはOpenAIのAPIを呼び出し、結果をApp Inventorに返します。

App Inventorが直接APIを呼び出すことが難しい場合は、Firebaseや他のクラウドサービスを使用して中間サーバーを作成し、そこからOpenAIのAPIを呼び出す方法もあります。このアプローチを取る場合は、その実装は少し複雑になりますが、一般的なプログラミング知識とFirebaseまたは選択したクラウドサービスの基本的な理解があれば実現可能です。

ChatGPTはApp Inventor日本語版のことは知らないようで「」の中が英語になっているので日本語化プロジェクトで言語を英語に切り替えて作ってみます。

3.a.がよくわからないので聞いてみます。

プロンプト

これわからない「Web コンポーネントでOpenAIのAPIに送信するブロックを作成します。」

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

ChatGPT,チュートリアル

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のことを知らない人にもわかるように説明してください

返答

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

ChatGPT,チュートリアル

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で作って

返答

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

ChatGPT,チュートリアル

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

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

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のみです。以下の+行を追加します。

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