BeatBubble

小学生が音楽を通して、試行錯誤と表現を学ぶための創作環境。

音楽は手段であって主題ではありません。学ぶのは「自分の意図を持ち、直しながら近づけていくこと」です。 価値の単位は完成した曲ではなく試した回数——だからこのアプリは、 子どもが曲を手に入れるためではなく、自分で作れるようになるために設計されています。

低い床（数秒で音が出る）と高い天井（近づいていく先がある）を両立させ、 その間にある制約は、子どもが育つにつれて自分で外していく足場として扱います。

設計上の非目標（意図的にやらないこと）は CLAUDE.md を参照してください。

特徴

• グリッド編集: タップ/クリックで短音入力、ドラッグで長音（持続音）入力
• メロディ + ドラム: 音階パートと打楽器パート（kick, snare, hihat）
• ドレミ表記: 日本語表示では音名をドレミ（ド・レ・ミ…）、英語表示では ABC（C, D, E…）で表示
• リアルタイム再生: Web Audio API による先読みスケジューリング（ループ再生・プレイヘッド表示）
• 音色選択: メロディ音色を 4 種類から選択可能（Piano / Synth / Marimba / Flute）
• Undo: ノート操作を最大 50 件遡って取り消し
• 音域調整: チップ型 UI で表示・入力可能な音域を動的に変更（C2–C7）
• 黒鍵（半音）トグル: 設定で黒鍵（♯/♭）の表示・入力を ON/OFF
• 長さ調整: グリッドの横幅を「ブロック」単位で増減（1 ブロック = 1 拍 = 4 マス）。授業に合わせて短く・長く
• 音符フィルター: 使用する音符を個別に ON/OFF して音階を制限
• テンポ制御: 40–200 BPM のスライダー
• お題（チャレンジ）: 「あめの音」「おばけが ちかづいてくる」など正解のないお題。採点せず、曲に応じて画面が反応する。同じお題に対する答えのばらつき自体が学び
• おとのいきもの: 3度や反復などの音楽的な関係を、教えずに発見できる仕組み。見つけると「生き物との出会い」として現れる。用語は体験の後から任意で確認できる。協和＝正解／不協和＝失敗とは扱わない（不協和にも休符にも生き物がいる）
• おとのずかん (/discoveries): 出会った生き物の図鑑。未発見はシルエット。採点も順位付けもしない
• いっしょにつくる: 出会った生き物から1体を選ぶと、編集画面にふわふわ浮いて付いてくる（ドラッグで移動可）
• 先生ページ (/teacher): 先生のみ。誰がどの曲を作ったかの確認と、不適切な曲の非表示（可逆）。児童には保存時に「先生に見える」ことを明示
• 設定パネル: テンポ・音色・音域・ブロック数・黒鍵・使う音・リセットを「⚙ せってい」パネルに集約（リセットは確認ステップ付き）
• 曲の保存・共有: Supabase に保存し、みんなの曲一覧ページで共有
• おとのいきもの: 音の組み合わせやリズムを再生中に発見すると生き物と出会える（初回だけ演出。既に会った生き物は静かに見守る）
• 日本語 / 英語切り替え: 各ページにロケールトグル（localStorage で永続化）
• レスポンシブ対応: デスクトップ・タブレット・スマホに最適化（タッチ操作対応）

操作

操作	動作
空セルをクリック	メロディノート追加（duration=1）
ノートをクリック	ノート削除
ノート始点からドラッグ	持続時間を変更
ドラム行をクリック	ヒットのトグル
⚙ せってい	設定パネルの開閉

ページ構成

パス	内容
/	作曲エディタ
/discoveries	おとのずかん（出会った生き物のアルバム）
/songs	みんなの曲一覧（SNS 風フィード）
/teacher	先生ページ（先生のみ。誰が作ったかの確認と非表示）

保存した曲は /songs に表示され、「あそぶ」ボタンで /?load=<id> 経由でエディタに読み込まれます。古い形式で保存された曲は読み込み時に現行モデルへ自動移行されます。

技術スタック

• Next.js 16 (App Router) / React 19
• TypeScript (strict)
• Web Audio API（複数音色シンセ + ドラム合成、外部ライブラリ不使用）
• Supabase（曲データの保存・取得）

プロジェクト構成

src/
├── app/
│   ├── components/   # Header, SettingsPanel, Grid, NotePanel, SaveModal
│   │   ├── discovery/ # 出会い演出・図鑑エントリ UI
│   │   ├── companion/ # いっしょにつくる（同伴キャラ）UI
│   │   └── challenges/# お題の選択・演出 UI
│   ├── discoveries/  # おとのずかん（アルバム）ページ
│   ├── songs/        # みんなの曲一覧ページ
│   ├── teacher/      # 先生ページ（先生のみ・モデレーション）
│   ├── styles/       # 機能別に分割したグローバル CSS（base/header/settings/grid/…）
│   ├── layout.tsx
│   ├── page.tsx      # 作曲エディタ（状態の配線とコンポーネント合成）
│   └── globals.css   # styles/ を @import するエントリ
├── core/             # 型定義・純粋関数による状態操作 + 旧データ移行（DOM/Audio 非依存）
├── discovery/        # 何を見つけたかの判定（純粋ロジック・DOM/Audio 非依存）
│   └── rules/        # 和音・メロディ・リズム別の検出ルール
├── creatures/        # 見つけたものを「どう見せるか」（絵・名前・演出）。検出はしない
├── challenges/       # お題のカタログと、曲に応じた場面の反応
├── audio/            # Web Audio エンジン（先読みスケジューリング）
├── ui/               # 色・グリッド表示・音名表記（ドレミ）ヘルパー
├── hooks/            # 状態・操作・発見フィードバックを配線するカスタムフック
└── lib/              # Supabase クライアント、DBリポジトリ、i18n 翻訳定義

設計上の約束

• src/core/* は 純粋・不変（DOM/AudioContext/時刻に非依存）
• 音高は 音名文字列（"C4", "F#3" など）で保持
• 持続音は 1 ノート + durationSteps で表現（セル複製はしない）
• グリッド長は totalSteps(song) から導出（blocks × stepsPerBeat）。再生・グリッド描画ともここを参照
• AudioContext の生成/再開は ユーザー操作（再生ボタン）起点

環境変数

Vercel（または .env）に以下を設定してください：

NEXT_PUBLIC_SUPABASE_URL=https://<project-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>

開発

pnpm install
pnpm dev          # http://localhost:3000
pnpm lint         # ESLint
pnpm test         # Vitest（コアのユニットテスト）
pnpm format       # Prettier

公開フィードの安全対策・モデレーション

/songs は匿名で読み書きできる公開フィード。安全対策は2層:

• クライアント層（UX）: src/lib/validation.ts — タイトル/作者名の長さ・空チェック、NGワード、曲データのサイズ上限。保存前に検証してエラー表示。
• サーバー層（強制）: supabase/migrations/0001_harden_songs_feed_safety.sql — CHECK 制約（長さ/サイズ）、hidden モデレーション列、RLS で公開は「表示中の行」のみ読み書き可。匿名は更新/削除不可。

不適切な曲を隠す（サービスロール / SQL エディタ）:

update public.songs set hidden = true  where id = '<uuid>';  -- 非表示
update public.songs set hidden = false where id = '<uuid>';  -- 復帰

未対応（#31）: レート制限（エッジ関数が適切。素朴なDBトリガーは授業中の同時保存を阻害するため不可）、通報フロー（reports テーブル＋通報ボタン）。