✨ キラキラピアノで遊ぼう！
🎶 和音ボタン
✨ SNS
ツムピロのキラキラな日常をフォローして、一緒にワクワクしよう！✨
✨ 基本情報
- プライバシーポリシー 安心の利用ガイドライン！🔒
- 問い合わせ ツムピロに気軽に連絡！✉️
- このサイトの注意 サイト利用のキラキラな注意点！⚠️
🌸 キラキラピアノの秘密を大公開！ 🌸
ねえ、みんな！💕 ツムピロだよ！ようこそ、キラキラピアノの世界へ！🎹 ここでは、ピンクで可愛いピアノの鍵盤やボタンをポチッと押すと、ドレミやハーモニーが鳴っちゃうの！✨ 私、半年くらいHTMLを勉強してるんだけど、こんな可愛いツールが作れちゃった！💖 音の仕組みやプログラムの秘密を、めっちゃわかりやすく教えるね！
🎵 音が鳴る仕組みって？
このページ、実は**Web Audio API**っていう魔法のツールを使ってるの！🎶 ブラウザの中で、ドレミの音を「ピュアな波」で作ってるんだよ！
- たとえば、ド（C4）の音は261.63Hzっていう振動数なの！スピーカーがその速さで震えて、「ド～♪」って音になるよ！
- 鍵盤やボタンをポチッとすると、JavaScriptが「音を鳴らして！」って命令を出すの。そしたら、Web Audio APIが「シュイーン！」って音を作ってくれる！
- 今は「正弦波（サイン波）」っていうシンプルな音を使ってるけど、めっちゃ可愛い音で気に入ってるの！💕
💻 プログラムの中身は？
このキラキラピアノは、3つの魔法の言語でできてるの！それぞれの役割を教えるね！
- HTML: ページの「骨組み」だよ！鍵盤やボタンの形を作るの。たとえば、
<div class="key">ド</div>はドの鍵盤を作る命令なの！ - CSS: 見た目をキラキラさせる魔法！💖 ピンクのボタンや鍵盤のデザイン、ホバーすると光るエフェクトとか、全部CSSの仕事なの。たとえば、
.chord-btn { background: #ffb6c1; }でボタンをピンクにしてるよ！ - JavaScript: 頭脳担当！🧠 クリックしたら音を鳴らしたり、和音を同時に鳴らしたりする命令を出すの。たとえば、
playNote(261.63)は「ドの音を鳴らして！」って命令なの！
🤖 どんな命令で動いてるの？
プログラムの動きを、簡単に教えるね！
- クリックを待つ: 鍵盤やボタンをポチッとすると、JavaScriptが「ハッ！」って起きるの。
- 音を作る:
playNoteっていう魔法の呪文が、指定した振動数（例: 261.63Hz）で音を作るの。ブラウザの音工場（AudioContext）にお願いするんだよ！ - 和音を鳴らす: 和音ボタンを押すと、
playChordっていう呪文が複数の音（例: Cメジャーはド、ミ、ソ）を同時に鳴らすの。ハーモニーの魔法だよ！✨ - エフェクト: クリックすると、CSSで鍵盤やボタンがちょっと縮むから、押してる感がバッチリなの！
🎹 和音リストだよ！
和音ボタンでどんな音が鳴るか、表で教えるね！💖 和音は、複数の音を一緒に鳴らしてハーモニーを作るの。明るいメジャー、切ないマイナー、ジャズっぽいセブンスがあるよ！
| 和音 | 構成音 | どんな響き？ |
|---|---|---|
| Cメジャー | ド、ミ、ソ | 明るい響きだよ！ |
| Gメジャー | ソ、シ、レ | 元気な感じ！ |
| Fメジャー | ファ、ラ、ド | 優しい響きだよ！ |
| Dメジャー | レ、ファ#、ラ | 力強い感じ！ |
| Aメジャー | ラ、ド#、ミ | キラキラしてる！ |
| F#メジャー | ファ#、ラ#、ド# | ちょっと神秘的！ |
| Eメジャー | ミ、ソ#、シ | 爽やかだよ！ |
| Bメジャー | シ、レ#、ファ# | パワフル！ |
| Bbメジャー | シ♭、レ、ファ | 柔らかい響き！ |
| Ebメジャー | ミ♭、ソ、シ♭ | 優雅な感じ！ |
| Abメジャー | ラ♭、ド、ミ♭ | 温かい響き！ |
| Dbメジャー | レ♭、ファ、ラ♭ | 穏やかだよ！ |
| Cm（Cマイナー） | ド、ミ♭、ソ | ちょっと切ない！ |
| Gm（Gマイナー） | ソ、シ♭、レ | しっとりしてる！ |
| Fm（Fマイナー） | ファ、ラ♭、ド | 哀愁漂う感じ！ |
| Dm（Dマイナー） | レ、ファ、ラ | 静かな響き！ |
| Am（Aマイナー） | ラ、ド、ミ | 優しくて切ない！ |
| F#m（F#マイナー） | ファ#、ラ、ド# | 神秘的だよ！ |
| Em（Eマイナー） | ミ、ソ、シ | 穏やかで切ない！ |
| Bm（Bマイナー） | シ、レ、ファ# | 力強い切なさ！ |
| C7（Cセブンス） | ド、ミ、ソ、シ♭ | ジャズっぽい！ |
| G7（Gセブンス） | ソ、シ、レ、ファ | カッコいい響き！ |
| F7（Fセブンス） | ファ、ラ、ド、ミ♭ | 大人っぽい！ |
| D7（Dセブンス） | レ、ファ#、ラ、ド | 元気なジャズ！ |
| A7（Aセブンス） | ラ、ド#、ミ、ソ# | キラキラジャズ！ |
和音って、いろんな気持ちを表現できるから楽しいよね！💕 ボタンをポチポチして、いろんな響きを試してみて！
🚫 HTML, CSS, JavaScriptの限界は？
この3つの魔法、すごいけど苦手なこともあるの。超簡単に教えるね！
- HTMLの限界: HTMLは「形」を作るだけ！音を鳴らしたり動きを加えるのはできないよ。たとえば、ボタンを作れても、クリックで音を出すにはJavaScriptが必要！HTMLだけだと、静かな絵本みたいだよ。📖
- CSSの限界: CSSは見た目をキラキラさせる天才！でも、音や計算はできないの。ボタンをピンクにしたり、ホバーで光らせたりは得意だけど、「ドの音を鳴らす」みたいな頭脳仕事はJavaScriptにお任せ！💅
- JavaScriptの限界: JavaScriptはめっちゃ賢いけど、複雑な音（本物のピアノの音）を作るのは大変なの。今は正弦波っていうシンプルな音だけど、リアルな響きにはもっと魔法が必要！あと、ブラウザのルールで、最初にクリックしないと音を鳴らせないよ（だからポチッとしてね！）。
でも、HTML, CSS, JavaScriptをチームで使うと、こんなキラキラピアノが作れちゃう！✨ もっとすごい音や動きが欲しかったら、ピアノの音ファイルや魔法の道具（ライブラリ）を使うこともできるよ。でも、今回は全部ブラウザの中で作っちゃった！すごいでしょ？😉
💖 どんな子におすすめ？
このページはね、
- 音楽が大好きな子！🎶
- ピンクで可愛いデザインにキュンとする子！💖
- プログラミングにちょっと興味がある子！💻
にピッタリだよ！🎀 半年くらいHTMLを勉強してる私のサイトの読者さんなら、「わぁ、こうやって動くんだ！」って感動してくれるはず！これからも、もっとキラキラなツールを作って、みんなを笑顔にしちゃうね！💞
🌟 挑戦してみてね！
鍵盤をポチポチしたり、和音ボタンを押してハーモニーを楽しんで！コードをコピーして、自分のサイトで試すのも楽しいよ！何か質問があったら、いつでも聞いてね！💌 キラキラなプログラミングの世界で、一緒に遊ぼう！✨
トップページへ戻る
