ChatGPT,claude,gemini,アプリ設計,チュートリアル,生成AI

JavaScriptにQRCode.jsというライブラリがあってこれを使うと簡単にQRコードが作れるらしいです。App Inventor 2 ではウェブビューにJavaScriptを含むhtmlファイルをアセットとして登録すればJavaScriptを呼び出してデータのやり取りができます。App Inventor 2 には直接QRコードを作る機能は無いので、QRCode.jsを使ってQRコードを作るApp Inventor 2 アプリを作ることにしました。

作り方はChatGPTとGemini、最近賢くなったと噂に聞くClaude 3.7 Sonnetに相談してみました。

  1. MIT App Inventor 2 App Maker
  2. ChatGPT-o1
  3. Gemini 2.0 Flash Thinking
  4. Claude 3.7 Sonnet

  • 1は大体はいいみたい。
  • 2も大体はいいみたい。
  • 3はJavaScript関数を呼ばずにwindow.postMessageを使っているのでうまく動くか分からないので却下。
  • 4はブロック編集部分が間違っているので却下。

1と2で作ってみます。

MIT App Inventor 2 App Maker

JavaScriptのQRCode.jsを使ってApp Inventor 2 アプリを作りたい。ただし、ウェブビューは見えなくし、App Inventor 2 からウェブビューに文字列を渡して、できたQRコードはApp Inventor 2 に渡してキャンバスコンポーネントに表示して保存できるようにしたい。作り方を教えて。

### **MIT App Inventor 2でQRCode.jsを使ったQRコード生成アプリの作成方法**

MIT App Inventor 2 で `QRCode.js` を使い、ウェブビューを非表示にしながらQRコードを生成し、キャンバスに表示して保存するアプリを作成する手順を説明します。

---

### **🔹 概要**
1. **ウェブビューコンポーネントを利用するが非表示にする**
2. **App Inventor 2 から WebViewer に文字列を送信**
3. **QRCode.js を使用してQRコードを生成**
4. **生成したQRコードをApp Inventor 2に渡し、Canvasに表示**
5. **Canvasの画像として保存**

---

## **📌 手順**

### **❶ MIT App Inventor 2 でのコンポーネント設定**
まず、以下のコンポーネントを **デザイナー画面** で追加します。

| **コンポーネント名** | **種類** | **説明** |
|-----------------|---------|----------------------------|
| `WebViewer1` | WebViewer | QRコードを生成するための非表示Webコンポーネント |
| `Canvas1` | Canvas | 生成したQRコードを表示するキャンバス |
| `Button1` | Button | QRコードを生成するボタン |
| `TextBox1` | TextBox | QRコードに埋め込むテキスト入力欄 |
| `File1` | File | 画像を保存するためのファイルコンポーネント |

---

### **❷ `QRCode.js` を利用するHTMLファイルを作成**
App Inventor 2 の **WebViewer** に QRコード生成処理をさせるために、外部HTMLを作成し、それをアプリ内で利用します。

#### **📄 `qrcode.html` の作成**
以下のHTMLファイルを作成し、`Assets` にアップロードしてください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>
        function generateQRCode(data) {
            document.getElementById("qrcode").innerHTML = ""; // QRコードをリセット
            new QRCode(document.getElementById("qrcode"), data);
        }

        function getQRCodeImage() {
            var canvas = document.querySelector("canvas");
            if (canvas) {
                var imageData = canvas.toDataURL("image/png");
                AppInventor.setWebViewString(imageData); // App Inventorに送信
            }
        }
    </script>
</head>
<body>
    <div id="qrcode"></div>
</body>
</html>
```
✅ `generateQRCode(data)` 関数で QRコードを生成し、  
✅ `getQRCodeImage()` 関数で `base64` 画像を App Inventor 2 に渡します。

---

### **❸ App Inventor 2 のブロックエディタ設定**
次に、MIT App Inventor の **ブロックエディタ** で以下のようにブロックを作成します。

#### **🟢 ボタンを押したらQRコードを生成**
1. **`Button1.Click`**
   - `WebViewer1.GoToUrl` を実行し、以下のようにURLをセット:
   ```
   file:///android_asset/qrcode.html
   ```
   - **`WebViewer1.EvaluateJavaScript`** を呼び出し、以下のスクリプトを実行:
   ```
   generateQRCode("入力されたテキスト")
   ```
   - ここで `TextBox1.Text` を利用して QRコードを作成します。

2. **QRコード画像を取得**
   - **`Clock1.Timer`** を設定し、一定時間後に以下を実行:
   ```
   WebViewer1.EvaluateJavaScript("getQRCodeImage()")
   ```

---

### **❹ QRコード画像をCanvasに表示**
- `WebViewer1.WebViewStringChanged` イベントを利用し、以下を設定:
  ```
  Canvas1.BackgroundImageinBase64 = WebViewer1.WebViewString
  ```

---

### **❺ 画像を保存**
1. **キャンバスの画像を保存するための処理**
   - `Button2.Click` に以下を設定:
   ```
   File1.SaveAs(Canvas1.SaveAs("QRCode.png"))
   ```
   - これで、QRコード画像が `QRCode.png` として保存されます。

---

## **📌 完成イメージ**
**📷 UIデザイン**
```
[TextBox1](ここにQRコードに変換する文字を入力)
[Button1]  (QRコード生成ボタン)
[Canvas1]  (生成したQRコードを表示)
[Button2]  (QRコード画像を保存)
```

---

## **✅ まとめ**
1. **WebViewer を非表示** にして `QRCode.js` を利用
2. **App Inventor 2 から WebViewer にデータ送信**
3. **QRコードを生成し、base64 画像として取得**
4. **Canvas に QRコードを表示**
5. **生成した QRコードを保存**

これで、ウェブビューを見せずに QRコードを作成し、App Inventor 2 で表示・保存するアプリが完成します!

ChatGPT-o1

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

AI,ChatGPT,チュートリアル,生成AI

画像フィルターアプリで使っているJavaScriptを含む imagefilter.html に新しいフィルターを追加してもらう方法です。生成AI関連チュートリアルは通常はゴールド会員特典ですが皆さんに生成AIに興味を持ってもらいたいので無料会員特典として公開します。無料のChatGPTでできるので試してみてください。

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

ChatGPT,チュートリアル

GPT-4を使ってApp InventorアプリのチュートリアルページからiPhoneアプリを作ることを試み、既に5種類のiPhoneアプリを作ることに成功しました。しかし、一々チュートリアルページを作るのは面倒なので、App Inventorアプリの情報をチュートリアルページを使う以外でGPT-4に渡すことができないかと検討していましたが、やっと見つかりました。ここではApp Inventor版「 ChatGPTと話そう!(その1)」 に音声入力・出力機能を付け加えて、「ChatGPTと話そう!(その2)」を作ります。ただし英語でGPT-4プロンプトを入力しないとまともな返答をしてくれませんでした。

前準備

  1. App Inventor日本語版でApp Inventor版 ChatGPTと話そう!(その1)プロジェクトを選択してプロジェクトメニューから「選択したプロジェクトをローカルコンピュータにエクスポート(.aia)」を実行し、ローカルコンピュータに.aiaファイルをダウンロードします。
  2. ローカルコンピュータでダウンロードしたファイルの.aiaを.zipに変更し、このファイルを解凍します。
  3. フォルダーの中にScreen1.bky, Screen1.scm, project.propertiesの三つのファイルがあります。これらをGPT-4に送り込みます。

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

Do you understand what the App Inventor project files doing below?

project.properties:

Screen1.scm:

Screen1.bky:

返答

These are MIT App Inventor project files which define an app that interacts with the OpenAI GPT-3 model to provide a chat interface. Let’s break down what each file is doing:

  1. project.properties: This file contains metadata about the project, such as the app name, version, primary and accent colors, location usage, etc. It also defines the main screen of the application and the location of source files, assets, and build files.
  2. Screen1.scm: This file describes the components of Screen1 in the form of a JSON object. It specifies the UI components and their properties such as Text Box, Button, Labels, and Web components.
  3. Screen1.bky: This file is written in Blockly, a visual programming language developed by Google. It defines the functionality of the application. Here’s a high-level overview of what this file is doing:

    • The app takes input text from TextBox1.
    • When Button1 is clicked, if the input text is not empty, a web request is made to the OpenAI API. The headers for this request are set to include the appropriate Content-Type and Authorization (with a global API key). The body of the POST request is formed as per the OpenAI API specifications, including the input text as the message from the user to the GPT-3 model.
    • When the response from the API (Web1.GotText event) is received, it is decoded from JSON and processed. The content field is extracted from the choices array, which contains the GPT-3 model’s generated response. This response text is then displayed in Label2. The original input text is also displayed in Label3, and TextBox1 is cleared.

Please note that these are general interpretations based on the information provided. The precise behavior of the app might vary and is subject to the entire codebase and the runtime environment.

正しく理解しているようなので、音声入力・出力機能を追加してもらいます。

プロンプト

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

ChatGPT,チュートリアル

音声入力・出力が動いた「Ionic版 ChatGPTと話そう!(その2)」のソースコードをChatGPTに与えてApp Inventorアプリに変換してもらおうとしました。GPT-4だけで動くものを作るのはApp Inventorの知識不足で難しそうなので、GPT-4の返答を参考にしながら人間が作るのが効率が良さそうです。ここではそのように作りました。

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

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

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

home.page.html

home.page.ts

返答

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

ChatGPT,チュートリアル

OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはChromeを使いました。

ここで作るのは「Ionic版 ChatGPTと話そう!(その2)」としてChatGPTに音声入力したプロンプトを送って返答を画面に表示してから音声出力するアプリです。Ionicではソースを変更すると何もしなくてもブラウザ内のアプリが自動的に更新されるので変更が簡単です。

GPT-4とのやり取り

プロンプト

OpenAIのAPIとのやり取りは「Ionic版 ChatGPTと話そう!(その1)」で動いているので、音声入力・出力を追加するように頼んでみます。ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。cordova、capacitorというのはモバイルデバイス特有のセンサーなどをIonicでサポートするためのものですが、cordovaは2022年4月でサポートが終わったので、capacitorをしています。実際のところこのアプリでは使いませんでしたが。

次のIonicプログラムに音声入力と音声出力の機能を追加したGUIアプリを作る方法をステップ1からステップ3にしたがって教えてください。cordovaでは無くcapacitorを使ってください。

ステップ1:細かい機能の説明
ステップ2:作り方の概略
ステップ3:初めての人でもわかるような詳しい作り方とソースコード

home.page.html

home.page.ts

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

ChatGPT,チュートリアル

OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.4上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

音声入力・出力が動いた「Ionic版 ChatGPTと話そう!(その2)」のソースコードをChatGPTに与えてiPhoneアプリに変換してもらいました。

GPT-4とのやり取り

プロンプト

ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。

次のIonicプログラムと同じ機能を持つiOSアプリをSwiftUIで作る方法をステップ1からステップ3にしたがって教えてください。Xcode version=14.3, Swift version=5で、 iOS16以上をサポートしてください。初心者でもわかるように詳しくお願いします。

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

home.page.html

home.page.ts

返答

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

ChatGPT,チュートリアル

OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはSafariを使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。

GPT-4とのやり取り

プロンプト

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

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

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

返答

前提として、このアプリケーションを作るには以下のものが必要です:

  1. OpenAIのAPIキー(https://beta.openai.com/signup/ から取得可能)
  2. Node.jsのインストール
  3. Ionicのインストール(npm install -g @ionic/cli)
  4. 基本的なJavaScriptやTypeScriptの知識
  5. 基本的なHTMLとCSSの知識

ステップ1:細かい機能の説明

このアプリケーションは大きく分けて以下のような動作を行います:

  1. ユーザーからテキスト入力を受け付けるUI(ユーザインターフェース)を提供します。ここではテキストエリアと送信ボタンがあります。
  2. ユーザーが送信ボタンを押すと、そのテキストはChatGPTに送信されます。この送信にはOpenAIのAPIを使用します。
  3. ChatGPTからの返答が取得できたら、それをアプリケーションのUIに表示します。

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

  1. Ionicを使って新しいアプリケーションを作成します。アプリケーションにはテキスト入力と送信ボタンがあります。
  2. TypeScriptでAPIとの通信部分を実装します。具体的には、ユーザーが送信ボタンを押したときにAPIにテキストを送信し、結果を取得する関数を作ります。
  3. 取得した結果を画面に表示します。これにはAngularのバインディング機能を使用します。

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

新しいIonicアプリケーションを作成します:

ionic start myChatApp blank --type=angular

ここで"myChatApp"は作成するアプリケーションの名前です。

アプリケーションのディレクトリに移動します:

cd myChatApp

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

ChatGPT,チュートリアル

OpenAIのGPT-4を使って新しいPythonアプリを作ります。動作確認にはJupyter Notebookを使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。1回で動きました。GPT-4はPythonが得意みたいですね。

GPT-4とのやり取り

プロンプト

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

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

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

返答

この説明では、Pythonの基本的な知識と、OpenAIのAPIへのアクセス方法を既に知っていることを前提とします。また、GUIライブラリとしてtkinterを使用します。OpenAIのAPIキーを取得するためにはOpenAIのウェブサイトで登録する必要があります。

ステップ1:細かい機能の説明

このGUIアプリには以下の機能が含まれます:

  1. テキスト入力フィールド:ユーザーがChatGPTに送信するメッセージを入力するための場所です。
  2. 送信ボタン:このボタンをクリックすると、入力フィールドのテキストがChatGPTに送信されます。
  3. テキスト表示エリア:ChatGPTからの応答が表示される場所です。

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

  1. GUIを構築するために、Pythonの組み込みライブラリであるtkinterを使用します。
  2. テキストフィールド、送信ボタン、テキスト表示エリアを含むウィンドウを作成します。
  3. 送信ボタンがクリックされたときに実行される関数を作成します。この関数では、テキストフィールドの内容を取得し、ChatGPTに送信します。また、ChatGPTからの応答を取得し、テキスト表示エリアに表示します。

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

最初に必要なモジュールをインポートします。

import tkinter as tk
import openai

次に、OpenAIのAPIキーを設定します。

openai.api_key = 'your-api-key'

tkinterでウィンドウを作成します。

window = tk.Tk()
window.title("Chat with GPT-3.5-turbo")

入力フィールド、送信ボタン、テキスト表示エリアを作成します。

entry_field = tk.Entry(window, width=50)
entry_field.pack()

response_area = tk.Text(window, height=10, width=50)
response_area.pack()

send_button = tk.Button(window, text="Send", command=send_message_to_gpt)
send_button.pack()

ここで、send_message_to_gpt関数を定義します。


def send_message_to_gpt():
    message = entry_field.get()
    entry_field.delete(0, tk.END)

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[
            {"role": "system", "content": "You are a helpful assistant."},
            {"role": "user", "content": message}
        ]
    )

    response_area.insert(tk.END, "User: " + message + "\n")

この関数では、まずユーザーからのメッセージをテキストフィールドから取得します。そして、そのメッセージをChatGPTに送信します。応答が戻ってきたら、それをテキスト表示エリアに表示します。

最後に、GUIを表示するためにメインループを実行します。

window.mainloop()

以上で、指定された機能を持つ基本的なGUIアプリが作成できます。ただし、このコードはあくまで基本的なものであり、エラーハンドリングなどは含まれていません。また、APIキーはソースコード中にハードコーディングしない方が安全です。実際のアプリケーションでは、環境変数などからAPIキーを読み込むようにすることをお勧めします。

また、このコードはgpt-3.5-turboモデルの使用方法を示すものであり、モデルの詳細な設定やパラメータの調整についてはOpenAIの公式ドキュメンテーションを参照してください。

プロンプト

コードを全部表示して

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

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に送信するブロックを作成します。」

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