＝LOVEイントロクイズ（＝LOVE Intro Quiz）
アイドルグループ ＝LOVE（イコールラブ） の曲で遊べる、ブラウザ／スマホ（PWA）向けの音楽クイズ＆交流アプリです。イントロを聴いて曲名を当てるクイズを中心に、タイムアタック・最大10人のオンライン対戦・ライブのコール練習などができます。＝LOVE が好きで、自分でも遊びたいと思って作りました。フレームワークは使わず、HTML / CSS / JavaScript だけで作っています。
⚠️ 非公式のファン制作物です。 ＝LOVE および権利者・関係各社とは一切関係ありません。実在する楽曲音源・歌詞・公式画像は、このリポジトリには含めていません（詳しくは音源について）。
作品を見る
就職活動のポートフォリオとして公開しています。まずは 1 の作品紹介動画（約3分） からご覧ください。
- ▶ 作品紹介動画 SHORT（約3分）— まずはこちら：https://www.youtube.com/watch?v=Lr5eSe4u8Vk
- 作品の目的・企画・ルール・改善・本人の担当範囲を短時間で確認できるダイジェスト版です。
- 🎮 公開アプリ（GitHub Pages）：https://togashi-sota.github.io/equal-love-intro-quiz/
- 音源は各自の端末に読み込む方式のため、音源なしでは出題は始まりませんが、各モードの説明・遊び方ガイド・収録曲一覧・＝LOVEについて・オンライン対戦のルーム作成画面・パーティー対戦の設定画面までは確認できます。
- ▶ 作品紹介動画 FULL（約5分44秒・詳細版）— より詳しく：https://www.youtube.com/watch?v=2__t1a39MTg
- 各モード・ゲームルール・オンライン対戦・ユーザーテストからの改善・品質管理・技術面まで扱った詳細版です。
企画の意図や工夫、自分がやったことをまとめた資料（PDF）は、別途応募資料として提出しています。動画は初回完成版（2026年9月9日）の内容で、初回完成後に追加したパーティー対戦は動画には含まれていません。パーティー対戦は公開アプリと下の主な機能で確認できます。
スクリーンショット
| ホーム | イントロクイズ | 結果（ランク／自己ベスト） | ライブコールモード |
|---|
| | | |
作ったきっかけ
自分も ＝LOVE のファンで、曲を覚えたりライブを楽しんだりするときに「こんな機能があったら便利だな」と思うことがありました。ふつうのイントロクイズだと ＝LOVE の曲だけで深く遊べるものが無かったので、それなら自分で作ろうと思って作り始めました。
主な機能
遊ぶ（オフライン 10種類）
- イントロクイズ：イントロを聴いて曲名を 4 択で答える。答えが速いほど高得点で、ランク（S/A/B/C）や自己ベストがつきます。
- アウトロクイズ／ランダム再生クイズ／歌詞クイズ／一瞬チャレンジ：曲の最後 5 秒・途中のランダムな位置・歌詞のヒント・ごく一瞬（1.5／1／0.5 秒）だけ、と出題方法を変えた派生モード。
- タイムアタック ＋ ランキング：全問正解までのタイムを競います。ルールはタイムアタック／正解数バトル／ノーミスチャレンジの 3 種類。全問正解・ミス 0 の記録は、出題タイプ・出題数・出題範囲ごとのランキング（TOP10）に反映されます。
- 苦手曲モード：イントロ／アウトロ／シャッフル／リリック／一瞬の 5 系統ごとに、3 回以上答えて正答率 75% 未満の曲を自動で集めて練習できます。
- オリジナル問題作成：好きな曲を 4 曲以上選んで、自分だけの問題セットを保存して遊べます。
- パーティー対戦：1 台のスマホ・タブレットを机の中央に置いて囲み、2〜4 人が同じ問題を同時に聞いて早押しで競うローカル対戦。出題タイプ（イントロ／ランダム再生／アウトロ／一瞬／歌詞）・4 択／音声回答・お手つき・サドンデスに対応（旧「1台対戦」を置き換え。過去の記録はプレイ履歴の「パーティー」タブに残ります）。
- ライブコールモード：曲に合わせて「今のコール」「次のコール」を表示します。カラオケ同期では 3・2・1 のカウントダウンでコールを予告するので、ライブ前の練習に使えます。
オンライン対戦（6モード・最大10人）
- ルームコード、またはフレンドを「一緒に遊ぶ」で招待して同じロビーに集まり、同じ問題で同時に対戦します（Firebase Realtime Database で同期）。
- イントロ対戦／ランダム再生対戦／アウトロ対戦：一般 3 ルール（タイムアタック／正解数バトル／ノーミスチャレンジ）＋ミスペナルティ。
- 歌詞クイズ対戦：正解数バトル／早押しバトル／ポイントバトルの 3 ルール。
- 一瞬バトル：短い再生時間で曲を当て、正解数を競う。一瞬協力：全員の回答からチームの答えを決めて、協力して全問正解を目指す（MVP 表示あり）。
- 出題する曲は、カテゴリのほか「曲を選んで出題」（参加者それぞれが選んだ曲をまとめて出題する共同選曲）も選べます。
- 観戦・再戦・切断からの再接続・ホスト移譲にも対応しています。
記録・交流
- プレイ履歴（オフライン／オンライン／パーティーの全モードまとめて）・自己ベスト・平均回答時間
- 称号 27 種（ステップアップ／マスター／裏チャレンジ）
- フレンド（公開プロフィール）：推し・称号・オンライン状況・最終ログインを確認して招待
- クラウドバックアップ：称号・履歴・自己ベストなどを自動保存。機種変更時は引き継ぎコードで移行、旧端末が使えないときは復旧を依頼できます
音楽・ファン
- 収録 84 曲の一覧・検索・試聴／お気に入り／プレイリスト／オフライン連続再生（順番・シャッフル・リピート）
- ＝LOVEについて（歴史・年表・作品一覧・ライブ）／メンバー紹介（プロフィール・個人活動）
- アプリ内検索（メンバー・曲・CM・ライブ・出演作品・機能などを横断検索）／歌詞検索（端末内の歌詞データから曲を探す。検索語は外部へ送りません）
（全部の機能は、起動したあとにアプリ内の「遊び方ガイド」で見られます。ガイドの最上部からアプリ紹介動画（YouTube・約 5 分 44 秒）も開けます。）
工夫したところ
- 実利用で起きたデータ消失をきっかけに、データ保護を作り込んだ — 友人がブラウザのサイトデータを削除して記録が消えたことから、クラウドバックアップを追加。その後、機種変更のための引き継ぎコード（24 時間有効・1 回限り）と、旧端末が使えない場合の復旧依頼まで整えました。
- カラオケ表示のズレを直した — スマホで遊んでいて、一時停止して再開するとコールの表示がズレることに気づきました。その場で秒数をずらすのではなく、再生時間と補正値を別々に管理するように直しました。
- 苦手曲モードを作り直した — 最初は最後まで遊んだ分しか苦手曲に反映されませんでした。途中でやめた回答も 1 問ごとに記録し、5 系統それぞれで「3 回以上答えて正答率 75% 未満」の曲を自動で苦手曲に入れるようにしました。
- ランキングを作り直した — 最初はタイムアタックだけのランキングでしたが、通常クイズの記録も参加できる 1 つのランキングにしました。今までの記録が消えないように気をつけて直しました。
- ライブで困ったことを機能にした — 初めてのライブだとコールのタイミングが分かりません。そこで、曲に合わせて次のコールを表示するライブコールモードを作りました。
- 回答ボタンの操作感 — 押した瞬間に確定して誤タップしやすかったため、指を離した瞬間に確定し、外へ指を逃がせばキャンセルできる操作に作り直しました。
技術構成
- HTML / CSS / JavaScript（フレームワーク・ライブラリは使わず、ES Modules で分割）
- PWA：
manifest.json + Service Worker（sw.js）で、オフライン起動やホーム画面へのインストールに対応
- Firebase Realtime Database ＋ 匿名認証（オンライン対戦・ランキング・フレンドの公開プロフィール・クラウドバックアップ）
- IndexedDB（音源・歌詞・コールを端末の中に保存＝配らないようにするため）、localStorage（履歴・苦手曲・お気に入りなど）
- HTML Audio（楽曲の再生）／Web Audio API（効果音）
簡単なアーキテクチャ
端末（ブラウザ / PWA）── これだけでも遊べる
├ HTML Audio / Web Audio API … 楽曲の再生・効果音
├ localStorage … 履歴・苦手曲・お気に入り・設定
├ IndexedDB … 音源・歌詞・コール（端末の中に保存）
└ Service Worker … オフライン起動・インストール
│ 匿名認証でつなぐ（オンラインのときだけ同期）
▼
Firebase Realtime Database（クラウド）
└ オンライン対戦・ランキング・フレンドの公開プロフィール・クラウドバックアップ
自分がやったこと / AI の使い方
- 自分（制作者）：どんなゲームにするかの企画、モードやルールを決めること、画面の見た目や使いやすさ、スマホで実際に遊んでの確認、使いにくい所やバグを見つけること、どう直すか決めて直ったか確認すること、完成の判断。
- 生成 AI（Claude Code・ChatGPT）：調べもの、コードを書く手伝い、テストの手伝い、作業の自動化、仕様の整理。
コードを書くところは AI を使いましたが、何を作るか・どこをどう直すか・完成とするかは自分で決めています。 大学の授業で HTML や CSS の基礎は学びました。2026 年 7 月 22 日から約 7 週間で制作し、後半は実際に遊んでもらって見つかった問題の改善と作り直しが中心でした。
テスト
- 独自に作ったブラウザテスト環境（
tests.html、テストファイル 163 個）で、16,603 件の自動回帰チェックを実行しています（2026-10-23 時点）。オンラインの同期や苦手曲の判定、ランキングなど、間違えると気づきにくい部分を確認しながら作りました。
- Firebase の本番接続を伴う部分（オンライン対戦・クラウドバックアップ等）は、自動チェックとは別に、iPhone・Android を含む 3 端末での実機検証で確認しました。
ローカルでの起動方法
ES Modules を使っているため、index.html をダブルクリックして直接開いても動きません（ブラウザの制限のため）。簡単なローカルサーバー経由で開いてください。
- VSCode の「Live Server」拡張機能：このフォルダを開き、
index.html を右クリック →「Open with Live Server」。
デモ・動画
音源について
このアプリは「実在する ＝LOVE の曲のイントロを当てる」ことを目的にしていますが、著作権のことがあるので、本物の曲の音源はこのリポジトリには入れていません。
- 曲データ（
js/data/songs.js）には曲名や選択肢などの情報を持たせていますが、イントロの音源そのものはコードに含めていません。
- 音源は、遊ぶ人が自分の端末で選んだ mp3 を、ブラウザの IndexedDB（端末の中の保存領域）に読み込む方式です。読み込んだ音源はその端末の中にだけ残り、サーバーや GitHub には送られません。
assets/audio/local/ は開発中に音源を一時的に置く場所で、.gitignore で除外していて GitHub にはアップロードされません。
ライセンス
このリポジトリのコード（HTML / CSS / JavaScript）は MIT ライセンス です。これはコードだけに当てはまるもので、＝LOVE の曲・音源の著作権とは関係ありません。
