Quest4 - LINE学習クイズBot

Quest4 - 科目選択画面
Quest4 - クイズ画面
Quest4 - 結果画面

プロジェクト概要

Google Apps ScriptとLINE Messaging APIを活用した対話型学習支援システムです。LINE Botを通じて、理科・社会・国語・英語の4科目24カテゴリから学習でき、Google Spreadsheetに格納された問題データベースから、ユーザーが選択した科目・分野・問題数に応じて出題し、リアルタイムで正誤判定と解説を提供します。

開発目的

  • LINE Messaging APIを活用した実践的なBot開発スキルの習得
  • Google Apps Scriptによるサーバーレスアーキテクチャの実装
  • Flex Messageを駆使したモダンなUI/UX設計
  • 教育分野におけるチャットボットの有効活用

使用技術

プログラミング言語

JavaScript (ES6+) JSON

バックエンド

Google Apps Script LINE Messaging API v2 Google Spreadsheet API v4 Properties Service

Google Apps Script: サーバーレスバックエンド・Webhook処理
LINE Messaging API: メッセージ送受信・Bot機能
Properties Service: ユーザー状態管理・セッション保持

フロントエンド（LINE UI）

LINE Flex Message Postback Action Carousel Template

主な機能

1. 4科目対応の総合学習システム

  • 理科（12カテゴリ）: 中1〜中3の物理・化学・生物・地学
  • 社会（3カテゴリ）: 歴史・地理・公民
  • 国語（5カテゴリ）: 漢字・ことわざ・慣用句・四字熟語・文法
  • 英語（4カテゴリ）: 英単語・英熟語・英文法・穴埋め
  • 合計24カテゴリの幅広い学習範囲をカバー

2. 直感的な3段階選択UI

  • 科目選択: 2×2グリッドレイアウトで4科目を一覧表示
  • カテゴリ選択: Carouselで複数カテゴリをスワイプ表示
  • 問題数選択: 5問/10問/20問/30問から選択

3. インタラクティブなクイズ機能

  • ランダム出題: データベースから問題をランダム抽出
  • 4択問題: Flex Messageによる美しいボタンUI
  • 即時フィードバック: 正誤判定と正解・解説の表示
  • 進捗管理: 問題番号と正解数のリアルタイム表示

4. Google Spreadsheet連携

  • 科目ごとに独立したSpreadsheet管理
  • カテゴリ別シート構成
  • データ更新時の自動反映
  • 問題形式: 問題文・選択肢4つ・正解・解説

5. セッション管理機能

  • Properties Serviceによるユーザー状態保持
  • 出題中の問題データ保存
  • 正解数・進捗のトラッキング
  • クイズ終了時の自動クリーンアップ

システム構成

データフロー

LINEユーザー
↓ メッセージ送信
LINE Platform
↓ Webhook
Google Apps Script
↓ データ取得
Google Spreadsheet（問題DB）
↓ 問題抽出・ランダム化
Flex Message生成
↓ LINE Messaging API
ユーザーへ返信
↓ Postback（回答）
正誤判定・次問題送信

工夫した点

1. Flex Messageによる高度なUI設計

  • 2×2グリッドレイアウト: 科目選択・問題数選択を視覚的に整理
  • Carouselテンプレート: 多数のカテゴリを4つずつグループ化してスワイプ表示
  • カラーリング: 科目選択（紺色）、カテゴリ選択（オレンジ）、選択肢（青色）で視覚的に区別

2. 堅牢なエラーハンドリング

  • Spreadsheet/シート存在確認
  • データ空チェック → 「準備中」メッセージ表示
  • try-catchによる例外処理
  • ユーザーへの分かりやすいエラーメッセージ

3. 状態管理の最適化

  • Properties Serviceを活用したセッション管理
  • 必要最小限のデータ保存（JSON形式）
  • クイズ終了時の自動クリーンアップ（deleteAllProperties()）

4. ユーザビリティの向上

  • 連続出題: 正誤判定と次問題を1回の応答で送信（ユーザー待機時間短縮）
  • 正解表示の充実: 不正解時に正解記号と内容を両方表示
  • 進捗表示: 「問題3/10」のように現在位置を明示

5. データ構造の柔軟性

  • Spreadsheet IDを定数化 → メンテナンス性向上
  • カテゴリとシート名の動的マッピング
  • 問題数の配列管理 → 簡単に変更可能

技術的ハイライト

1. Postbackデータの階層的設計

// 科目選択
data: `subject=理科`

// カテゴリ選択
data: `category=理科|中１物理`

// 問題数選択
data: `start_quiz=理科|中１物理|10`

// 回答選択
data: `answer=①`
  • パイプ区切りで複数情報を1つのデータに格納
  • split()で復元し、科目・カテゴリ・問題数を取得
  • シンプルなデータ構造で状態管理を効率化

2. ランダム出題アルゴリズム

while (questions.length < parseInt(questionCount) && dataRows.length > 0) {
    const idx = Math.floor(Math.random() * dataRows.length);
    questions.push(dataRows.splice(idx, 1)[0]);
}
  • Math.random()でランダムインデックスを生成
  • splice()で抽出済み問題を配列から削除
  • 重複出題を完全に防止
  • 指定問題数に達するまでループ

3. 連続出題の最適化

// 正誤判定 + 次問題を1つの配列で送信
const messages = [
    { type: 'text', text: '🎉 正解です！' },
    createQuestionMessage(userId, index + 1)  // 次問題
];
sendReply(replyToken, messages);
  • 複数メッセージの一括送信でユーザー待機時間を短縮
  • 正誤判定と次問題を同時に表示
  • LINE Messaging APIの配列機能を活用
  • スムーズな学習体験を実現

活用シーン

1. 学生向け

  • 通学時間: スマホで手軽に復習
  • テスト前: 苦手分野の集中学習
  • 隙間時間: 5問モードでサクッと学習

2. 教育者向け

  • 宿題配信: LINE Botで問題を配布
  • 小テスト: 授業前の確認テスト
  • データ更新: Spreadsheetで簡単に問題追加

3. 学習塾向け

  • 生徒管理: 学習状況の把握
  • 反転授業: 事前学習ツール
  • 保護者連携: 学習報告の自動化（拡張機能として）

今後の展望

1. 短期的な改善

  • 解説の表示/非表示切り替え機能
  • 出題履歴の記録（同じ問題の重複回避）
  • タイマー機能（制限時間設定）
  • 正答率の可視化グラフ

2. 中期的な機能追加

  • ユーザー別の学習履歴管理
  • 弱点分野の自動抽出
  • ランキング機能（友達と競争）
  • 復習モード（不正解問題の再出題）

3. 長期的な拡張

  • AIによる問題自動生成
  • 音声問題の対応
  • 画像問題の対応
  • 高校生・大学受験への対応
  • 他の学習コンテンツ（英会話、数学など）の追加

開発情報

開発形態

個人開発

役割

企画・設計・実装・テスト

開発時の注意事項

本プロジェクトは教育・学習目的で開発しました。開発および運用にあたり、以下の点に配慮しています。

LINE Messaging APIの適切な利用

  • LINE Developersの利用規約を遵守し、個人的な学習範囲内での開発
  • メッセージ送信のレート制限を守り、過度なAPI呼び出しを避ける
  • ユーザーのプライバシーを尊重し、個人情報の収集は最小限に留める
  • テストは限定的なユーザーでのみ実施し、大規模配信は行わない

Google Apps Scriptの制限事項

  • Google Apps Scriptの実行時間制限（6分）を考慮した設計
  • Properties Serviceの容量制限（9KB）に配慮したデータ管理
  • Spreadsheet APIの1日あたりの読み取り上限を意識した実装
  • 同時アクセス時の処理を考慮したエラーハンドリング

問題データの著作権配慮

  • 問題データは自作またはオープンソースのものを使用
  • 教育目的での利用範囲を遵守
  • 第三者の著作権を侵害しないよう、問題内容に十分配慮
  • 商用利用や無断転載を行わない方針を明示

技術的配慮

  • セキュリティ: アクセストークンの適切な管理（環境変数化推奨）
  • パフォーマンス: 必要最小限のデータ取得でSpreadsheetへの負荷を軽減
  • 保守性: コードの可読性を重視し、将来的な機能追加に対応
  • ユーザビリティ: 直感的なUI設計でストレスフリーな学習体験を提供

倫理的配慮

  • 本ツールはポートフォリオとしての技術紹介を目的としている
  • 学習支援という教育的価値を最優先に考えた設計
  • 実用的な学習ツールとして、学生・教育者・塾への貢献を目指す
  • オープンソース化については、悪用防止の観点から慎重に検討

謝辞

  • LINE Corporation: LINE Messaging APIの提供と充実したドキュメント
  • Google: Google Apps ScriptとSpreadsheet APIの無償提供
  • 教育関係者の皆様: 問題内容の監修や学習カリキュラムへの助言
  • オープンソースコミュニティ: JavaScriptライブラリと技術情報の共有
← 開発作品一覧に戻る

関連ページ

ロト６予測ツール

詳しく見る

e-typing自動タイピング

詳しく見る

開発作品

詳しく見る