1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Scratch
  6. »
  7. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratchスクラッチ入門、はじめていきます。

前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシューティングゲームを作りました。
今回はピアノの鍵盤けんばんを作って、音をらしてみましょう。

目次
  1. プロローグ
  2. ピアノ鍵盤けんばん素材そざい
  3. プロジェクト名を変更する
  4. スプライトをScratchに読み込む
  5. 鍵盤けんばん複製ふくせいしよう
  6. 鍵盤をけんばんならべる
  7. スプライトに名前をつけよう
  8. 鍵盤けんばんすと音がなるようにしよう
  9. まとめ

プロローグ

アル

ドーレーミー

りこ

あ、アル。ピアノいてるの?

アル

うん、全然弾けないけど

山田

だったら、Scratchスクラッチ簡易的かんいてきなピアノ鍵盤けんばんを作って、演奏えんそうしてみたらどうだべか?

アル

そんなことできるの!?

りこ

すごい、私もやってみたい!


今回作成するものはこちらです。
はたマークを押して、鍵盤を押すと弾くことができます。

ピアノ鍵盤けんばん素材そざい

今回使用する素材についてです。

山田

今回使う素材そざいだべ。下の画像を右クリックして、さらに「名前を付けて画像を保存」をクリックして、自分のパソコンに保存するべ

白鍵A

白鍵B

白鍵C

黒鍵

山田

ちなみにこの素材は、「自分が作りました」と言わない限り、どう使ってもいいべよ。
ただ他のサイト公開こうかいしている素材は、その規約きやくまっていることが多いから、ちゃんと確認かくにんして使うべよ

※素材を使って生じたいかなる損害そんがいも、山田先生も管理人も一切責任を負いません。
報告ほうこく不要ふようです。しかし「使ったよ」といっていただければ、山田先生と管理人は喜びます。

プロジェクト名を変更する

ではまず、プロジェクト名を変更しましょう。

りこ

どんなふうになるのかな

スプライトをScratchに読み込む

さきほど保存ほぞんした画像をScratchスクラッチに読み込んでいきます。

まずは最初さいしょから入っているねこのスプライトを「×」を押して削除さくじょしましょう。

山田

この猫はわだずの永遠えいえんのライ……

アル

毎回毎回……もういいよ!

スプライトリスト右下の猫(犬?)のマークにマウスカーソルを合わせ、出てきた「スプライトをアップロード」のボタンをクリックします。

これでステージとスプライトリストに鍵盤けんばんが読み込まれました。

鍵盤が読み込まれた
りこ

でもこれじゃあ鍵盤の数が足りないよ

山田

そんなときは、じゃんけんゲームの時にも紹介した「複製ふくせい」を使うべ

鍵盤けんばん複製ふくせいしよう

続いて、鍵盤けんばん複製ふくせいします。

山田

複製のやり方は覚えているべか? スプライトリストで複製したいスプライトを右クリックして「複製」を選べばいいべよ

右クリックして「複製」
りこ

いくつか複製する必要があるよね

山田

そうだべ。なので複製して次の数だけ作って欲しいんだべ

鍵盤はいくつか複製する必要があります。
hakken_a : 全部で2つ
hakken_b : 全部で2つ
hakken_c : 全部で3つ
kokken : 全部で5つ

りこ

hakken_aはさっき複製したから、もうしなくていいね

するとこのように鍵盤がたくさんになりました。

たくさん複製された
りこ

わぁ、たくさん表示されたね

鍵盤をけんばんならべる

続いて、鍵盤けんばんならべていきます。

山田

次は鍵盤のスプライトをピアノの鍵盤みたく並べていくべよ

では鍵盤画像のように並べてみましょう。

さらにスプライトリストの方も、ドレミの順番じゅんばんになるように並べ替えます。
スプライトリストからスプライトをクリックすると青く光り、対応たいおうしているスプライトがどれか分かります。

スプライトリストから スプライトをクリックすると 青く光る

これを使って、スプライトリストのスプライトの順番をドレミの順(鍵盤の並び)にならべ変えます。

スプライトをドラッグで 順番を変える
アル

並べ替えたよ……でもすごくたくさん。もうどれがどれだか分からないよ

山田

そんな時はスプライトに名前をつけるといいべよ

スプライトに名前をつけよう

つづいて、スプライトに名前をつけていきます。

山田

じゃあ、スプライトに名前をつけていくべよ

スプライト名を変更します。
まずスプライトリストから、名前を変えたいスプライトを選び、「スプライト」の部分を変更します。
今回は「ド」にしました。

同じように全てのスプライトに名前をつけましょう。

すべてのスプライト名を変更
りこ

これで分かりやすくなったね!

鍵盤けんばんすと音がなるようにしよう

つづいて、鍵盤けんばんすと音がなるようにしていきます。

山田

つづいて、音が出るようにするべよ

アル

わーい、すごいすごい!

山田

音が出るようにするには「拡張機能かくちょうきのう」を使う必要ひつようがあるから、それもふくめて紹介しょうかいするべよ!

まず、「ド」のスプライトを選択せんたくし、「イベント」から「このスプライトがされたとき」をスクリプトエリアにドラッグします。

続いて、画面左下の「拡張機能を追加」ボタンをクリックします。

「音楽」の拡張機能を追加します。

これで「音楽」の拡張機能が追加されました。

「音楽」の拡張機能が追加された

「60の音符を0.25拍鳴らす」をドラッグし、「このスプライトが押されたとき」につなげます。

この60と言うのがScratchスクラッチでは「ド」の音になります。

では、今作った一番上のブロックをドラッグして、「ド#」のスプライトにコピーします。

「ド#」のスプライトを選択し、「60」の部分をクリックします。
すると鍵盤が表示されるので、画像のように音をド#にします。すると、数値すうちが「61」に変わります。
この61がScratchでは「ド#」の音になります。

一番上のブロックをドラッグして、「レ」のスプライトにコピーします。

「レ」のスプライトを選択し、「61」の部分をクリックします。
表示された鍵盤から、画像のようにレを選択します。すると、数値が「62」に変わります。
この62がScratchでは「レ」の音になります。

同じように、レ#〜シの音も作ります。
これでScratch上でのピアノの完成です。

鍵盤を押すと、音が出ます。

まとめ

今回はScratchスクラッチ上で音が出せるピアノを作りました。

りこ

わー、音が出てる。楽しい!

アル

うん! これでチューリップが弾ける! 山田先生もいてよ

山田

てやんでぇ、べらぼうめ! ねこふんじゃっただべよ……あれ、鍵盤けんばんが足りないべ

りこ

でも、同じようにやれば、鍵盤を増やすこともできそうだね

山田

自分でカスタマイズするのも楽しいべな。これからも色んなプログラミングのやり方をしっかりとを学ぶべよ

りこ

はーい!

アル

はーい!

このシリーズの一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
  7. Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
  8. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  9. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  10. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  11. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  14. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  17. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  20. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  21. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  22. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  23. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  25. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  26. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)
  27. WindowsにPythonをインストールしてみよう!小学生からのPython入門
  28. MacにPythonをインストールしてみよう!小学生からのPython入門
  29. Pythonでじゃんけんゲームを作ってみよう!小学生からのPython入門
  30. Pythonのtkinterを使って、ウィンドウを表示してみよう!
  31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

スポンサードリンク

関連コンテンツ

オススメ記事

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利にする方

Pythonでrandomを使う。乱数の生成やランダムに選択する関数まとめ

今回は、Pythonでランダムな数値を生成したり、リストのなかからランダムに選択、リストの順番をシャッフルする方法など、randomモジュールで使える関数をまとめました。 しっかり覚えて、目的

Pythonでじゃんけんゲームを作ってみよう!小学生からのPython入門

さて、今日《きょう》もプログラミングを学《まな》んでいきましょう! 今回《こんかい》はPython《パイソン》を使《つか》ったゲーム作りに挑戦《ちょうせん》してみたいと思います。作るゲームはじ

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。そんなときは、gulpfile.jsを分割して管理すると

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

メインループを作ってみよう!

【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだっ

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。