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スクラッチ上で音が出せるピアノを作りました。

りこ

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

アル

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

山田

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

りこ

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

山田

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

りこ

はーい!

アル

はーい!

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

小学生からのScratch入門

  1. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  2. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  3. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  4. 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入門

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した TextV

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。管理画面をカスタマイズするこ

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【初心者向け】cdコマンドの使い方を分かりやすく解説!(Mac)

「cd」は、いま作業《さぎょう》しているディレクトリを移動《いどう》するためのコマンドです。 先日《せんじつ》はWindows《ウィンドウズ》でのcdコマンドの使《つか》い方を紹介しましたが、

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

pipenvの使い方。MacにPython環境を構築する方法

みなさんこんにちは。@It_is_Rです。今回はpipenvを使って、MacにPython環境を構築する方法を紹介します。 pipenvとは pipenvは、Pythonでの開発

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です