• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

【scratch】音楽機能をつかってピアノをつくろう!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

みなさま、こんにちは!プロクラスの山足です。

Scratch とは教育向けに無償で提供され、世界各国で使われているビジュアル型プログラミング言語です。子供たちは、画面上に予め準備されている複数の命令ブロックを組み合わせてプログラミングをすることができます。
※文部科学省「小学校プログラミング教育に関する研修教材」より抜粋ーhttps://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1416408.htm

そんな、義務教育課程に導入されているプログラミングツール「Scratch(スクラッチ)」を使って、音楽機能を紹介するのと同時に、簡単につくれる「キーボードでピアノ鍵盤」の作り方を紹介したいと思います。

scratchを開く

①「scratch公式サイト」(https://scratch.mit.edu/)にアクセス

②画面左上の「作る」を押す。

こちらの画面が出てきたら準備完了です!チュートリアルは「×(閉じる)」を押しましょう。

音楽機能(拡張機能)を追加

画面左下の「拡張機能を追加」を選択。

「音楽」を選択すると、

「音楽ブロック」が追加されます。これで、用意されている楽器で演奏することができます!

ピアノの鍵盤をえがく

今回、「いつものねこ」は一旦帰ってもらいましょう。
画面右下の「スプライト一覧」から猫の絵の右上にある「×」を押してスプライトを閉じます。

同じく「スプライト一覧」の右下「ねこのマーク」にマウスの矢印を合わせ、出てきた「描く」を選択します。

スプライトのコスチュームを描く画面が出てきます。
「□」をえらんで適当な大きさの鍵盤をえがきましょう。

そのままでは色がおかしいので「白」に直します。

押した鍵盤がわかりやすいようにする

キーボードがどの鍵盤かをわかりやすくする

今回はキーボードの「赤い部分」をピアノに見立てます。

「T」(文字-TEXT-入力)を押して、そのままでは「白」いので「黒」に直して「Q」をえがき、鍵盤に「Q」と書きます。
これは、どのキーがピアノの鍵盤に当てはまってるかをわかりやすくするためです。

押した鍵盤がどれかわかりやすくする

次に、書いた鍵盤を「複製」して、押したときの鍵盤の色をつくります。
これは、どの鍵盤が押されているかわかりやすくするためです。

キーボードを押したら音をならす

「ド」の音を鳴らす

「イベント」⇒「「〇〇」キーが押されたとき」ブロックを使い、鍵盤に書いたキー「q(Q)」を設定します。

scratchの音楽機能では音符は「数字」で表されていますが、このように対応しています。

「音楽」⇒「〇の音符を〇箔鳴らす」を使います。

始めの〇には「音符の数字」を、後の〇には「音を鳴らす長さ」を入力します。
※音を鳴らす長さは「テンポ(bpm)」によって変わり、箔数で長さを入力します。

「q(ド)」には「60(ド)」を入れます。

音が鳴っているときに見た目を変える

次に、音を鳴らすのと同時に、さっき作った押した鍵盤の色に変わるようにします。
「見た目」⇒「コスチュームを〇にする」を使って、キーを押した後に「押した後の鍵盤」になるようにします。

音を鳴らし終えたら同じブロックをつかって「もとの鍵盤」になるようにします。

ここまでつくったら、一度「q」キーを押して音(ド)が鳴るか試してみましょう!

「レ」~「↑ド」まで複製する

右下のスプライト一覧から鍵盤を「複製」していきます。

①コスチュームのテキスト、②押すキー、③音符の数字を
「w(レ)」には「62(レ)」、「e(ミ)」には「64(ミ)」…「i(↑ド)」には「72(↑ド)」と変更していきます。

音符は鍵盤を選んで変えることができます。(数字が間違わないように注意しましょう)

すべてを変更し終えたら鍵盤を整列させましょう。
同様に「↑ド」まで終えたら白鍵盤は完了です。

同様に黒鍵盤も作る

後は繰り返しです。黒鍵盤用に新しいスクリプトを用意して、黒鍵盤をつくっていきます。
ここからは復習です!白鍵盤を作った流れを思い出しながらピアノを完成させましょう!

完成

黒鍵盤までできればこのような形になります!
ぜひscratchの「音楽機能」を使ってピアノをつくってみてください!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
受講者満足度95%以上の人気講座!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら