AI練習アプリの作り方
BUILD YOUR OWN APP
AIと英語で話す練習アプリを、自分の授業に合わせて作る
AIを相手に英語で話す練習アプリを、先生ご自身の環境に設置して使えます。プログラミングの経験は必要ありません。完成したコードと設置マニュアルを無料で公開しています。アカウントの登録から動作確認まで、順調に進めば1時間半から2時間ほどで設置できます。 ここで配布している2つは、同じしくみの上に別の題材を載せたものです。仕組みが分かれば、先生の授業に合わせて別のアプリを作ることもできます。
共通のしくみ
配布している2つのアプリ（英語ディベート練習アプリ／学校紹介 英会話練習アプリ）は、どちらも同じ流れで動きます。実際の画面はAI練習アプリのページからお試しいただけます。利用にはパスワードが必要です。お試し用のパスワードは、AI練習アプリのページ内に記載しています。
- AIが英語で問いかける（音声で読み上げます）
- 生徒が英語で答える（キーボード入力でも、マイク録音でも可）
- AIが講評を返す（良かった点・次に気を付ける点・答え方の例）
土台となる技術も共通です。コードはGitHubに置き、Renderで動かし、AIの鍵（APIキー）はRenderにだけ保管します。パスワードを知っている人だけが使える形で、個人情報や練習記録は保存しません。
変わるのは「何について話すか」だけです。この部分をAIに指示して書き換えれば、別の題材のアプリになります。
2つのバリエーション
同じ土台に、それぞれ別の題材を載せたものです。
| ① 英語ディベート練習 | ② 学校紹介 英会話練習 | |
|---|---|---|
| 話す題材 | 論題（学校生活・社会の話題） | 自分の学校のこと |
| AIの役割 | 対戦相手・ジャッジ | 学校を訪れた英語話者 |
| 練習の内容 | 質問・反論・要約・判定 | 質問に答え、学校を説明する |
| 事前の入力 | なし | 学校名と公式サイトURL |
| 向いている場面 | ディベート部・授業でのディベート | 留学生の受け入れ・海外校との交流・学校紹介スピーチ |
3つ目以降は、先生ご自身で
題材を差し替えれば、別のアプリになります。たとえば、次のようなものが同じ方法で作れます。
- 修学旅行の説明 — 訪問先で自分たちの旅程や目的を英語で伝える
- 部活動の紹介 — 活動内容や大会の成績を英語で説明する
- 地域の紹介 — 自分の住む町の名所や特産品を案内する
- 面接練習 — 志望理由や自己PRを英語で答える
配布しているコードを土台に、「どんな場面で、誰が、何について話すか」をAIに説明して書き換えてもらうのが基本の作り方です。設置マニュアルの後半に、AIへ渡す条件のまとめ方も収録しています。
配布物
2つのアプリそれぞれに、設置マニュアルとコード一式を用意しています。初めての方はマニュアルを見ながら進めてください。GitHubに慣れていない方はZIP版を利用できます。
① 英語ディベート練習アプリ
AIを相手に、質問・反論・要約・判定を練習できます。論題について英語で意見を述べ、その場で応答する力を養います。
設置マニュアル
GitHub・Render・APIキー・音声APIの設定を、画面例つきで順に説明しています。（PDF・1.8MB／v0.8）
コード一式（ZIP）
ダウンロードしてRenderへ配置できる配布版です。（ZIP・43KB／v1.4.0）
② 学校紹介 英会話練習アプリ
学校名と公式サイトのURLを入力すると、その学校の情報にもとづいてAIが英語で質問します。自分の学校について英語で説明する練習に使えます。
設置マニュアル
GitHub・Render・APIキー・音声APIの設定に加え、学校の指定方法も説明しています。（PDF・1.7MB／v1.3）
コード一式（ZIP）
ダウンロードしてRenderへ配置できる配布版です。（ZIP・37KB／v1.3.1）
設置の流れ
- コード一式をGitHubまたはZIPで入手します。
- RenderでWebサービスを作成します。
- 必要な環境変数をRenderに登録します。
- デプロイ完了後、パスワード認証と主要な練習機能を確認します。
詳しい画面操作は、配布する設置マニュアルをご覧ください。
Renderの環境変数
ANTHROPIC_API_KEY：必須APP_PASSWORD：必須（利用者のパスワード）OPENAI_API_KEY：音声を使う場合に必須STT_MODEL：gpt-transcribe（任意・既定値）TTS_MODEL：gpt-4o-mini-tts（任意・既定値）TTS_VOICE：marin（cedarにも変更可）TTS_RESPONSE_FORMAT：mp3（任意・既定値）
APIキーやパスワードはコードに書かず、必ずRenderのEnvironment Variablesへ登録してください。
STT_MODEL以下は設定しなくても、上記の値が既定で使われます。Start Commandは npm start、PORT はRenderが自動設定するため追加不要です。
学校紹介アプリの場合は、OPENAI_API_KEY が必須です（音声機能が中心のため）。また、学校サイトの読み込みに関する SITE_FETCH_TIMEOUT_MS、CONTEXT_CACHE_TTL_MS を任意で設定できます。詳しくは設置マニュアルをご覧ください。
音声機能について
どちらのアプリも同じ音声機能を使います。音声認識は gpt-transcribe、読み上げは gpt-4o-mini-tts を使用します。既定の声は marin で、cedar にも変更できます。音声形式はMP3で、全体を受信してから再生するため通信量を抑えられます。
設置後は、AIの発言が表示されたら「▶ Listen」を一度押し、最後まで再生されること、同じ音声をもう一度再生できることを確認してください。PCで途中で止まる場合は、動画やオンライン会議を停止する、Bluetoothを外して本体スピーカーで試す、別のブラウザや端末で比較する、の順に確認します。
「▶ Listen」で聞こえる声はAI生成音声であり、人間の録音ではありません。画面上にもその旨を表示しています。録音データと読み上げる文章はOpenAI APIへ送信されます。生徒には氏名・住所・連絡先などの個人情報を入力させないでください。
AIのモデル名（gpt-transcribe など）は、各社の更新にともなって将来変わることがあります。設置した時点で正しくても、年月が経つと使えなくなることがあります。うまく動かなくなったときは、OpenAI と Anthropic の公式ドキュメントで最新のモデル名を確認し、Renderの環境変数で指定し直してください。コード自体を書き換える必要はありません。
記録とAPIキーについて
- アプリには練習内容をデータベースやファイルへ保存する機能を設けていません。記録を残したい場合は、AIに依頼して保存機能を追加するコードを書いてもらうこともできます。その際は、保存する内容と保管場所について、学校の個人情報の取り扱い方針をご確認ください。
- APIキーはサーバー側の環境変数から読み込み、ブラウザへ送信しません。
- ただし、RenderやAIサービス提供会社側のログ・データの扱いは、それぞれの規約や設定に従います。
ご利用にあたって
本アプリおよび配布資料は、内容と各サービスの利用規約をご確認のうえ、ご自身の責任でご利用ください。 学校で利用する場合は、所属校の情報セキュリティ方針や個人情報の取り扱いも確認してください。