タマのけいさんドロップス（タマドロ）

小学校低学年向けの計算練習 WEB アプリです。たしざん・ひきざん・かけざん・百マスたしざんを解いて、ドロップを集めます。

ローカルで動かす

画像などを /img/... のように「サイトのいちばん上から」の場所で読み込んでいるので、ファイルを直接開くのではなく、かんたんなサーバーで開きます。

python3 -m http.server 8765
# ブラウザで http://localhost:8765/ を開く

画面のしくみ

index.html 1枚のアプリです。URL の # のうしろで画面が切り替わります（js/app.js）。

URL	画面
#/	さいしょの画面
#/add #/sub #/multi #/hundredgrid	そのモードのレベル選択 → 問題
#/records #/records/add など	タマのきろく（ドロップびん・カレンダー・タイムのうつりかわり・にがてマップ）
#/music	おんがくのへや（ためしているあいだは /music on のときだけ。下の「おんがくのへや」）
#/keys	けんばんの レベル選択 → レッスン（/music on のときだけ）
#/black	くろいけんばんの レベル選択 → レッスン（/music on で、けんばんの Lv6 を クリアしたあと）
#/notes	おんぷよみの レベル選択 → レッスン（/music on のときだけ）
#/notesBass	おんぷよみ／ヘおん の レベル選択 → レッスン（/music on のときだけ）
#/bassTb #/bassTuba	ヘおんよみ（トロンボーン・ユーフォ／チューバ）。お休み中（へやの ボタンは かくしている。URL では ひらける）
#/rhythm	リズムの レベル選択 → レッスン（/music on のときだけ）
#/piano	じゆうにひこう（/music on のときだけ）

以前の URL（tamaadddrops.html など）のページはなくなりました（開くと 404 になります）。

おんがくのへや（ためしているところ）

• 設定（歯車）の入力欄に /music on と入れると、さいしょの画面に「おんがくのへや」のボタンが出ます（/music off で かくれます）。

• ひみつの しかけ（じっきで ためしやすく。js/music.js の TamaMusicSecret）：さいしょの画面で、パソコンは Shift を おしながら「ひきざん」を 5かい クリック、タブレットは 「たしざん」を おさえた まま べつの 指で「ひきざん」を 5かい タップ すると、「おんがくのへや」が 出ます。出ている ときに 同じ ことを すると かくれます（/music on・off と 同じ 設定）。1かいごとに 3びょう いないで つづけて おした ときだけ かぞえます。しかけの 操作では 画面は うつりません（ふつうの クリックは いつもどおり）。入力欄は、さいしょの画面にも 計算の画面にもあります。/rescue /delete /master on は、計算・けんばんの画面でだけ使えます。

• へやの中は「けんばん」「くろいけんばん」「じゆうにひこう」「おんぷよみ」「おんぷよみ（ヘおん）」「リズム」。（ヘおんよみ の トロンボーン・ユーフォ／チューバ は お休み中で、ボタンを かくしている）右上の「おと あり／なし」は、テンキーの音などもふくめて ぜんぶの音に効きます。

• 音は js/sound.js でつくります（ピアノふうの音を その場でつくるので、音のファイルは いりません）。けんばんは さわった しゅんかん（pointerdown）に鳴り、何本の指でも おせます。おんがくの画面に いるあいだは、iPhone のマナーモードでも 音が出るようにしています（navigator.audioSession。使えないブラウザでは いままでどおり）。

• 音のデータ（js/notes.js）は、「どの けんばんか（MIDI の番号。60 が まんなかのド）」と「どんな名前か（ド〜シ と ♯♭）」を べつに持ちます。黒いけんばんには 名前が2つ（ド♯／レ♭）あります。

• おんがくのへやの 作業の 引継ぎ（きめた こと・つぎに やること）は docs/handoff-music.md に あります。

• けんばんの 画面（けんばん・くろいけんばん・おんぷよみ）：けんばんは 画面の いちばん下に ひくめに おいて、まんなか（カード・がくふ）を ひろく とります。「はじめにもどる」は まん丸の ボタン（くるりん やじるし）で、けんばんの 左下に かさなります（左下は たいてい くらい けんばん）。マウスを のせると 横に のびて「はじめにもどる」と 出ます。右上の「けんばんの おおきさ」スライダー（「けんばんの よみかた」スイッチの 左。せまい 画面では スイッチの 下）で、けんばんを はばも たかさも 同じ わりあいで 大きく・小さく できます（0.6〜1.8ばい。大きく すると はしは 見きれる。上の 文字・がくふは けんばんの 上の はしに あわせて 上下し、つもった ドロップも いっしょに うごく。きめた おおきさは tamadoro.keys.zoom に おぼえる）。

けんばんの レベル（js/modes/keys.js）

レベル	内容	けんばんの名前
おとあそび	すきな けんばんを 10かい鳴らす（ドロップは いつも水色。黒いけんばんは「ド♯／レ♭」のように 2つの名前の ふきだし）	あり
Lv1 ドレミ	ド・レ・ミ を 4かいずつ（12もん）	あり
Lv2 ド〜ソ	ド〜ソ を 3かいずつ（15もん）	あり
Lv3 まほう	はじめに ド と ソ の名前が まほうで きえる	一部
Lv4 ド〜ソ	ド〜ソ	なし
Lv5 ファ〜ド	ファ〜たかいド	あり
Lv6 ド〜ド	ド〜たかいド を 2かいずつ（16もん）	なし
Lv7 メロディ	3〜4おんの メロディを 左から じゅんばんに（8もん）。和音の じゅんばん C → F → G（G7）→ C で出し、C にもどるときは ドで おわる	なし
Lvオニ	Lv1〜7 を ぜんぶ まぜる（1おん12もん＋メロディ4もん）。見せる けんばんの はしが 毎回かわる（ファ〜ミ・ミ〜ミ・ファ〜ファ・シ〜シ。どれも 黒いけんばん 10こ）	なし

• けんばんは、左はしが ドに ならないように、すこし よぶんに見せます（黒いけんばんを 目じるしに ドを さがす力を つけるため）。 はしでは、黒いけんばんの かたまり（3こ・2こ）を かけさせません（3・2・3・2 と くりかえして見える）。かけると、3この かたまりが 2こに見えて、そこも ドに見えてしまうからです。Lv1〜4 は ファ〜シ、そのほかは ファ〜ミ です。そのレベルで使う けんばんは あかるく、そのほかは うすく見せます。うすい けんばんも 押せば鳴りますが、まちがいには なりません。
• まちがえた けんばんも 鳴って、「ミだよ」のように 何を おしたかを ふきだしで見せます。正解すると、その音を ふくむ和音が 小さく ポロロンと鳴ります（ド・ミ・ソ → C、ファ・ラ → F、レ・シ → G）。
• 解放は、おとあそびの ドロップ1こで Lv1、オニは Lv7 の ドロップ5こ、ほかは 3こ。まちがいの上限（5かい）・5もんごとの金のドロップ・ノーミスで金のごほうび・まちがえた問題を さいごにもういちど は、計算と同じです。
• 1もんごとの きろく（tamadoro.stats.v1 の keys。キーは「ド」「たかいド」「ドレミ」など）と、1回ごとの きろく（tamadoro.log.v1）を のこします。ドロップは びん・カレンダーに入りますが、「タマのきろく」の けんばんの タブ・「にがてちょうせん」は まだありません。
• 正解ごとの ドロップは、上の ばらばらな場所から おちてきて、けんばんの上に 左から ならびます（大きさは 32px。計算の 50px より 小さく、めだちすぎないように。KEYS_PILE_SIZE）。画面の はしまで ならんだら、2だんめは 1だんめの ドロップと ドロップの あいだに はまって つもります（keysPileSlot）。つもりつづけると 問題も 見えなくなりますが、それで かまいません。つもった ドロップは 指で うごかせます。レベル選択へ もどると とびちります。
• クリア・ざんねんの カードは、画面の 上のほうに 出します（けんばんの上に つもった ドロップと かさならないように。カードは ドロップより手前）。

くろいけんばん（js/modes/black.js。問題の進め方は けんばんと同じ js/engines/keys.js）

• 「♯（シャープ）は すぐ みぎどなり、♭（フラット）は すぐ ひだりどなり」の きまり 1つで さがします（「♯は 黒いけんばん」とは 教えない）。
• 黒いけんばんで 正解すると、聞かれたのが どちらの名前でも、その けんばんの上に 2つの名前（「ド♯／レ♭」）を出します。くりかえすうちに 2つの名前が むすびつきます。
• けんばんの Lv6（ド〜ド・もじなし）で ドロップを 1こでも もらうと ひらきます（keys_coins_7）。それまでは、おんがくのへやの ボタンに カギがかかり、「しろい けんばんの Lv6 を クリアすると ひらくよ」と出ます。ためすときは、けんばんの画面で /rescue → Lv7 まで ひらくと、ここも ひらきます。
• さがしかたの たすけは すこしずつ へらします：Lv1・2 は 矢印と 白いけんばんの 名前、Lv3〜5 は 名前だけ、Lv6 は なし（「けんばんの よみかた」スイッチで 名前を 出せる）。
• 矢印：もとの音（レ♯ なら レ）は ふちどりだけ（ぬりつぶすと「ここを おす」に 見えるので）。矢印は おす けんばんの ほうを さします。黒いけんばんへは その すぐ下から ななめ上（↗・↖）、白いけんばんへは よこ（→・←）。
• もとの音を おしたら「おしい！」：レ♯ で レを おすと、まちがいに しないで「おしい！ そこが レ。レ♯は その すぐ みぎどなり」（けんばんの 上に「そこが レ！」）。
• せまい 画面（はば 600px より 下）では、つかわない けんばんを 見せずに 1つずつを 大きく します（narrowView。Lv1〜4 は ド〜シ、Lv5・6 は ひくいシ〜たかいド）。
• ミ♯（＝ファ）・ファ♭（＝ミ）・シ♯（＝ド）・ド♭（＝シ）は、Lv5 で はじめて おしえます。それまでは「ド♯ ＝ ？♭」の ボタンにも 出しません。
• ♯・♭ の 名前の 問題は オクターブを くべつしません（anyOctave）。シ♯ は ひくい ほうの ドでも たかい ほうの ドでも 正解で、「シ♯は ド！」と 出します。もとの音（「おしい！」）も オクターブちがいで おなじ あつかい。
• Ver.6.3.82 で レベルを 6つに 作りなおしました（dataVersion: 2。まえの 版の ドロップ・ベストタイム・きろくは 消える）。

レベル	内容	ガイド
Lv1 ♯	ド♯・レ♯・ファ♯・ソ♯・ラ♯ を 2かいずつ（10もん。入門なので すぐ クリア）	もとの音を ふちどりして「↗」・白いけんばんの名前
Lv2 ♭	レ♭・ミ♭・ソ♭・ラ♭・シ♭ を 2かいずつ（10もん。入門）	もとの音を ふちどりして「↖」・白いけんばんの名前
Lv3 ♯と♭	まぜて 16もん（ここが 本番）	白いけんばんの名前
Lv4 2つの名前	「ド♯ ＝ ？♭」の ？を ボタンで こたえる（10もん）。ボタンは 黒いけんばんの 名前 5こ（レ♭・ミ♭・ソ♭・ラ♭・シ♭／ド♯・レ♯・ファ♯・ソ♯・ラ♯）。けんばんは 鳴るだけ。正解すると その けんばんが 鳴って「ド♯ ＝ レ♭」	白いけんばんの名前
Lv5 ミ♯	白いけんばんに なる 名前（12もん）。はじめの 4もんは ミ♯・ファ♭・シ♯・ド♭ の じゅんに 1つずつ 矢印つきで「ミの すぐ みぎどなりに、くろい けんばんは ないよ」。それから まぜて 8もん。正解すると「ミ♯は ファ！」	白いけんばんの名前（はじめの 4もんは 矢印も）
Lv6 まぜて	前半は けんばんを おす 問題（♯♭ 8もん・白いけんばんの 名前 4もん を まぜて 12もん）、後半は ボタンで こたえる 8もん（「ド♯ ＝ ？♭」4もん ＋「ド♭ ＝ ？」4もん。「ド♭ ＝ ？」は ♯・♭ なしの ド〜シ の ボタンで、こたえは シ。応用なので ここで はじめて 出す）。同じ 問題は 出ない。前半で まちがえた 問題は 後半の まえに もういちど（part）	なし（「けんばんの よみかた」スイッチ）

This is the beginning of the README. Read the rest at the original. Read the full README ↗