【ChatGPT】ノーコードで英語の発音を評価してくれるアプリの作り方

この記事を読んで自分も試したくなったのでアプリを作ってみました。

いざアプリ開発へ！

対象となる方

• なにかアプリを作りたいけどプログラミングはしたくない方
• 英語の発音の勉強がしたいけどいいアプリに出会っていない方

Createとは？

アプリ開発に「Create」を使っています。
「Create」は、自然言語と画像を使用してコードを自動生成します。
無料でChatGPTやStable Diffusionを利用できます。←スゴイ

Createの使い方

利用するにはメールアドレスを登録する必要があります。
メールアドレスを登録するとCreateのURLが送られてきます。

メールに記載されたURLにアクセスして開始です。
画面右側の「New Page」から作成していきます。

画面右側のエリアに作りたいアプリの説明を書きます。

「/」（スラッシュ）を入力すると組み込みたいアドオンを選択できます。
「Add-ones」のプルダウンからも選択できます。

画面右下の「Generate」ボタンで入力した説明をもとにアプリの自動生成が開始されます。

画面右上の「Demo」をクリックすると作成したアプリのデモが確認できます。
「Build」をクリックすると引き続きアプリ作成ができます。
動作確認が終わったら、最後に画面右上の「Publish」をクリックしてアプリのURLを作成します。

英語の発音を評価してくれるアプリ

アプリの考え方はざっくりとこんな感じです。

• 自分の英語の発音がネイティブに近い発音かどうかを評価する。

• 使い方のイメージ
  　画面に英会話を表示
  　→　発音ボタンをクリックして自分で読む
  　→　スコアを表示（発音がネイティブに近ければ100点）

• 発音があっているかどうか確認するため、読み上げるボタンを追加する。
  　読み上げにはアドオンとして「Text to Speech」を使おう。

• 自分がどんな発音になっているか確認するため、発音した英語をリアルタイムに出力したい。
  　リアルタイム出力にはアドオンとして「Audio Transcription」を使おう。

• スコアの計算は、「画面に表示された英単語」と「発音したときに出力された英単語」の一致している割合で評価する。

• クリアしたら次の英会話を表示するためのボタンを追加する。
  　

• 日常英会話もいいけど、楽しく勉強したいな。
  　画面に表示する英会話は「Google Gemini」で検索した結果を使おう。

• スコアで100点を取ったらアニメーションほしいな。
  　

そんなこんなで作成したアプリがこちらです。
あくまでもお試しで作成していますので楽しみながら遊んでみてください。
（不具合があっても大目に見てください。）

入力したプロンプトを載せておきます。
そのまま利用しても良いですし、もっとああしたい、こうしたいがあったら自分で機能追加もしてみてください！（自分で使いたいアプリ作れます。）

入力したプロンプト

アプリ名：
ネイティブ発音アプリ

説明：
あなたの英語の発音をチェックしましょう
画面を表示したタイミングでGoogle Geminiに"映画Matrixで使われている有名なセリフを英語で10個教えて インデックスの番号、アスタリスク、数字は表示しないでセリフだけ表示して"と相談して、英語のセリフだけを保持する。
英語のセリフにアスタリスクがある場合は削除する。
英語のセリフに数字がある場合は削除する。
「更新する」ボタンを説明のすぐ下に配置する。
「更新する」ボタンは緑系のボタンの色。立体的なボタン。
「更新する」ボタンをクリックすると、 保持している英語のセリフを上から順番にひとつだけ「英会話」に出力する。

ラベル「英会話」のテキストを配置します。
英会話には映画の有名な英語のセリフを出力します。

「発音を聞く」ボタンを「英会話」のテキストのすぐ下に配置します。
「発音を聞く」ボタンは青系のボタンの色。立体的なボタン。
「発音を聞く」ボタンをクリックすると、Text to Speechで「英会話」のテキストに出力した英語で発音してくれます。

「発音する」ボタンを「発音を聞く」ボタンのすぐ下に配置します。
「発音する」ボタンは赤系のボタンの色。立体的なボタン。
「発音する」ボタンで音声を開始できます。
音声は5秒後に終了します。

「あなたの英会話」に
「発音をする」ボタンで発音した音声を
Audio Transcription でテキスト出力します。

「発音スコア」
英語の発音を評価します。「英会話」の英単語と「あなたの英会話」の英単語とで単語が一致している確率が高ければ100点となる。一致している確率が低ければ0点となる。

発音スコアが100点の時は、クラッカーとCongratulations!の文字をポップアップで表示して消える。

さいごに

• ノーコードで簡単にアプリが作れる時代きた。ほかにもいろいろ作ってみたい。
• 「Create」がなくなっても（？）大丈夫なようにコードもダウンロードできるから、ローカル環境でアプリ開発もできそう。