1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Scratch
  6. »
  7. 小学生から始める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入門。ピアノ鍵盤を作って音を鳴らそう!

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

java

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

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

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

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

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

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

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

wordpress

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

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

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

【Gitの使い方 – その4】ブランチを使って履歴を分岐させる方法

エビの殻や、ポテチ、煮干しなどを食べると、必ずと言っていいほど口が血だらけになります。@It_is_Rです。 さて、Gitの使い方4回目の今回は、ブランチについてです。 ブランチは作業を枝分か

コメントをどうぞ!

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