会員サイト

英単語を読み上げて音声認識機能で発音チェックをする学習アプリを作ります

このチュートリアルでは、ランダムに選んだ英単語を読み上げて、音声認識機能で発音チェックをする学習アプリを作成します。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"発音学習アプリ"にします。

コンポーネントの追加

レイアウト パレットから 水平配置コンポーネント を3個追加し、ビューアー上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に水平配置1, 2, 3,という名前になっているはずです。

“水平配置1“

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"ラベル2″、"レベル"に名前を変更します。
• “ラベル2″の テキスト を"難易度"に設定します。
• “レベル"スピナーの文字列から要素プロパティーは"初級,中級,上級"、選択要素は"初級"にします。

“水平配置2″

• ユーザーインターフェース パレットから ラベルを2個追加し、それぞれ"ラベル3″、"出題単語"に名前を変更します。
• “ラベル3″の テキスト を"出題単語:"に設定します。
• “出題単語"の テキスト を空白に設定します。

“水平配置3“

• ユーザーインターフェース パレットから ラベルを2個追加し、それぞれ"ラベル4″、"聞き取り単語"に名前を変更します。
• “ラベル4″の テキスト を"聞き取り単語:"に設定します。
• “聞き取り単語"の テキスト を空白に設定します。

“ラベル1"

• “水平配置1“の上にユーザーインターフェース パレットからラベル を追加し、名前を"ラベル1″、テキスト を"単語を聞いて、発音してみましょう！"に設定します。

“単語を聞く"

• “水平配置2“と“水平配置3“の間にユーザーインターフェース パレットからボタン を追加し、名前を"単語を聞く"、テキスト を"単語を聞く"に設定します。

“発音を確認"

• “水平配置3“の下にユーザーインターフェース パレットからボタン を追加し、名前を"発音を確認"、テキスト を"発音を確認する"に設定します。

“結果“

• “発音を確認"ボタンの下にユーザーインターフェース パレットからラベル を追加し、名前を"結果"、テキスト を"結果"、テキストカラーを赤に設定します。

非可視コンポーネント

• メディア パレットから テキスト読み上げ コンポーネントを1つ、音声認識 コンポーネントを1つ追加します。

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

有名なブロックくずしゲームです

有名なゲームを作りながら、同じコンポーネントがたくさんあるときの、"すべてのコンポーネント“ブロックを使ったループ処理の仕方を学びます。

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

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

デザイン編集

Screen1のタイトルを"ブロック崩しゲーム"にします。

ダウンロードセクションからダウンロードした画像と音源をすべて、メディアのファイルをアップロードボタンをクリックしてアップロードします。

ブロックの配置

ドローイングとアニメーション パレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップして、高さと横幅は"親要素に合わせる"にします。

画像スプライト を 5 個 “キャンバス1 “に追加し、それぞれの 画像プロパティ を blockgreen.png に設定します。以下のように X プロパティと Y プロパティを調整し、横一列に配置します：

• X: 0, 68, 136, 204, 272
• Y: 25

同様に、別の 画像スプライト を 5 個 “キャンバス1" に追加し、画像プロパティ を blockblue.png に設定。以下のように配置します：

• X: 0, 68, 136, 204, 272
• Y: 60

同じ手順で 画像スプライト を 5 個追加し、画像プロパティ を blockyellow.png に設定し、次のように配置します：

• X: 0, 68, 136, 204, 272
• Y: 95

ブロックを見やすくするために、"キャンバス1 “の背景色をライトグレーに変更します。ここまでの画面構成は、ブロックが3段に並び、各段がそれぞれの色で構成されます。

スコア表示とリスタートボタンの配置

レイアウト パレットから 水平配置コンポーネント を2個キャンバス1の下に追加します。1つ目は″水平配置1″、2つ目は″水平配置2″になります。

″水平配置1″に、ユーザーインターフェース パレットから ラベル を2つ配置し、"ラベル1“の テキスト を"得点"に、"ラベル2“の テキスト を"0″にします。″水平配置1″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

″水平配置2″に ユーザーインターフェースパレットからボタンコンポーネントを追加し、名前を"リスタート"、テキスト も"リスタート"にします。″水平配置2″の水平に整列するは"中央揃え"にし、横幅は"親要素に合わせる"に設定します。

パドルとボールの配置

ドローイングとアニメーション パレットから 画像スプライト を1個"キャンバス1″の下中央にドラッグアンドドロップし、名前を"パドル"、画像プロパティ を blockwhite.png に設定します。

同じパレットから ボール コンポーネントを1つ追加し、名前を"ボール"、半径 を10に設定します。

サウンドの設定

メディア パレットから サウンド コンポーネントを2個追加し、それぞれ"当り音"、"ゲームオーバー音"という名前を付けます。

“当り音"の ソース に hit.mp3 を、"ゲームオーバー音"の ソース に over.mp3 を指定します。

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

入力した言葉を多言語に翻訳して結果を読み上げるアプリを作ります

このチュートリアルでは、入力したテキストを多言語に翻訳し、結果を音声で読み上げるアプリを作成します。App Inventor 2日本語化プロジェクトでは翻訳コンポーネントが動作しないため、Google Apps Scriptで作成した無料のウェブアプリを呼び出して翻訳処理を行います。このウェブアプリは自由に利用可能です。ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。

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

デザイン編集

Screen1のタイトルを"翻訳"にします。

コンポーネントの追加

レイアウト パレットから 水平配置コンポーネント を4個追加し、ビューア上に縦に並べ、横幅は"親要素に合わせる"に設定します。上から順に水平配置1, 2, 3, 4という名前になっているはずです。

“水平配置1“

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"入力言語ラベル"、"入力言語"に名前を変更します。
• “入力言語ラベル"の テキスト を"入力言語"に設定します。
• “入力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"英語"にします。

“水平配置2″

• ユーザーインターフェース パレットから ラベル と スピナー を追加し、それぞれ"出力言語ラベル"、"出力言語"に名前を変更します。
• “出力言語ラベル"の テキスト を"出力言語に設定します。
• “出力言語"スピナーの文字列から要素プロパティーは"英語,日本語,スペイン語,フランス語,ドイツ語"、選択要素は"日本語"にします。

“水平配置3“

• ユーザーインターフェース パレットから ラベル、テキストボックス、ボタン を追加し、それぞれ"入力ラベル"、"入力"、"入力消去"に名前を変更します。
• “入力ラベル"の テキスト を"入力"に設定します。
• “入力"の横幅は親要素に合わせるにし、マルチライン をチェックしてヒントは空白にします。
• “入力消去"の テキスト を"X"、横幅を32ピクセルに設定します。

“水平配置4“

• ユーザーインターフェース パレットから ラベルとテキストボックスを追加し、それぞれ"出力ラベル"、"出力"に名前を変更します。
• “出力ラベル"の テキスト を"翻訳結果出力"に設定します。
• “出力"の 横幅は親要素に合わせるにしマルチラインをチェックしてヒントは空白にします。

“翻訳ボタン“

• “水平配置4″の下にユーザーインターフェース パレットからボタン を追加し、名前を"翻訳ボタン"、テキスト を"翻訳実行"に設定します。

非可視コンポーネント

• メディア パレットから テキスト読み上げ コンポーネントを1つ、接続 パレットから ウェブ コンポーネントを1つ追加します。

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

人工知能の機械学習モデルを使って画像を精度良く分類するアプリを作りましょう

このチュートリアルでは、機械学習モデルを使用し、画像を自動的に分類するアプリを作成します。カメラで撮影した画像をAIが解析し、その結果を英語で表示し、さらに日本語に翻訳して音声で読み上げます。

ページの最後にあるダウンロードセクションからアセットに使用するindex.htmlファイルをダウンロードしてください。 また、ソースコードもダウンロードできます。

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

アプリの概要

このアプリでは、Googleが提供するオープンソースの機械学習ライブラリである TensorFlow.js を使用して画像分類を行います。分類モデルには MobileNet を採用しており、簡単に他のモデルへ置き換えることも可能です。アプリの仕組みは次のようになっています。

1. 画像の取得: カメラで撮影した画像を外部サーバーにアップロードし、URLを取得します。
2. 画像の分類: ウェブビューで画像を表示し、JavaScript関数で画像の分類処理を行います。
3. 英日翻訳と音声読み上げ: 推論結果は英語で表示されますが、多言語翻訳アプリで使っているのと同じ翻訳方法で日本語に変換し、音声で結果を出力します。

このアプリでは、JavaScriptコードを含むHTMLファイル（index.html）をウェブビューで読み込み、JavaScript関数をアプリから呼び出すことで画像分類を実現しています。index.html の詳細はダウンロードセクションで確認できます。

デザイン編集

Screen1のタイトルを"ビジョンアプリ"にします。

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

前準備

1. App Inventor日本語版でApp Inventor版 ChatGPTと話そう！(その１)プロジェクトを選択してプロジェクトメニューから「選択したプロジェクトをローカルコンピュータにエクスポート(.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.

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

プロンプト

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

GPT-4とのやり取り

プロンプト

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

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

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

home.page.html

home.page.ts

返答

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

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

GPT-4とのやり取り

プロンプト

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

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

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

home.page.html

home.page.ts

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

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

GPT-4とのやり取り

プロンプト

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

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

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

home.page.html

home.page.ts

返答

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

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

GPT-4とのやり取り

プロンプト

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

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

ステップ１：細かい機能の説明
ステップ２：作り方の概略
ステップ３：初めての人でもわかるような詳しい作り方。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. ユーザーからテキスト入力を受け付けるUI（ユーザインターフェース）を提供します。ここではテキストエリアと送信ボタンがあります。
2. ユーザーが送信ボタンを押すと、そのテキストはChatGPTに送信されます。この送信にはOpenAIのAPIを使用します。
3. ChatGPTからの返答が取得できたら、それをアプリケーションのUIに表示します。

ステップ２：作り方の概略

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

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

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

ionic start myChatApp blank --type=angular

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

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

cd myChatApp

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

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

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

GPT-4とのやり取り

プロンプト

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

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

ステップ１：細かい機能の説明
ステップ２：作り方の概略
ステップ３：初めての人でもわかるような詳しい作り方。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の公式ドキュメンテーションを参照してください。

プロンプト

コードを全部表示して