英語クイズ自動生成アプリの作成

目的

AI（Gemini）に英語の問題をJSONファイル生成してもらい、それを使用するアプリを作成します。Gemini API、LINE Messaging API、GitHub Actions、Node.js を使用しました。

アプリ作成

HTML, CSS, JS を使用して4択クイズができるものを作成します。チャット形式でAIに作成をお願いするだけでそれなりのものを作ってくれます。

今回作成したものは以下のサイトです。

作成時の質問内容（できること）

• HTML, CSS, JSで4択クイズを作成したい
• クイズデータをJSONで入力できるようにしたい
• JSONのフォーマットを quiz.json のようにしたい
• 間違えた問題を JSON でダウンロードしたい
• 間違えた問題の解説を Gemini に質問したい

[
  {
    "question": "日本の首都はどこでしょう？",
    "options": ["大阪", "東京", "京都", "名古屋"],
    "correctAnswer": 1
  },
  {
    "question": "りんごを英語で書くと？",
    "options": ["Banana", "Orange", "Apple", "Grape"],
    "correctAnswer": 2
  },
  {
    "question": "Webサイトでデザイン（装飾）を担当する言語は？",
    "options": ["HTML", "CSS", "JavaScript", "Python"],
    "correctAnswer": 1
  }
]

Gemini API を使った問題の自動生成

API Key の取得

Google AI Studio で API Key を取得します。

↓ AI Studioのリンク

↓ マニュアル、他にもいろんな人が取得方法を記事にしてくれてるので参考にします。

API Key を使用した問題生成

以下の JavaScript コードで Gemini に問題を作成してもらいます。用途にあわせて prompt や responseSchema を変えることになります。API Key は 変数の ai を new している時に使われています。

LINE Messaging API を使った通知

英語の問題が更新できたらLINEで通知します。

LINE チャネルアクセストークンの取得

LINE公式アカウントに登録し、Messaging APIを有効にして、チャネルアクセストークンを取得します。以下のサイトを参考にします。他にもいろんな人が記事にしてくれているので参考にしましょう。

ブロードキャストメッセージの送信

マニュアルに curl での送信方法が書かれているので、このHTTPリクエストが送信できるようにコードを書きます。

以下の JavaScript コードで送信するようにしました。

GitHub Actionsを使った自動実行

GitHub Actions で問題の作成とLINE通知の JavaScript を実行できるようにします。

Secrets の構成

GitHub repository の以下パスに Secrets を作成し、これまでに取得した API Key と Token を保管します。

Settings ＞ Secrets and variables ＞ Actions ＞ Repository secrets

• GEMINI_API_KEY
• LINE_CHANNEL_ACCESS_TOKEN

GitHub Actions の構成

2つの workflow を用意しました。

• generate-quiz.yaml
  • 問題生成ワークフロー
  • メニューから実行
  • 時間指定での実行を構成予定
• broadcast-after-pages-deployment.yaml
  • LINE通知ワークフロー
  • GitHub Pages の更新 action 完了を検知して実行

GitHub Actions から Secrets を参照

workflow のファイル（generate-quiz.yamlの例）で、Secrets を環境変数とします。

環境変数を JavaScript から使用します。

ここで npm run generate で generate.js が動作するのは、package.json の scripts 指定です。

Action 実行

GitHub の Actions で "Generate Quiz Data" を実行すると問題を生成します。この実行で以下の動作（連鎖）をします。

1. Generate Quiz Data
   • クイズを自動生成し、ファイルを更新
2. pages build and deployment
   • GitHub Pages を更新し、デプロイ完了
3. Broadcast after pages-build-deployment
   • LINEメッセージを送信

まとめ

Gemini API、LINE Messaging API、GitHub Actions、Node.js を使用して問題の定期更新ができるアプリを作成することができました。