【完走賞ゲット-8】Music Blocks：ブロックを使った音関連のビジュアルプログラミングを軽く試す

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 8日目の記事です。
（今年は、1人アドベントカレンダーをやりつつ、プライベートで使っている／関わりのある技術・コミュニティのカレンダー複数にも投稿していて、これが 12記事目の公開記事になりました）

この記事では、以下の「Music Blocks」について書いていきます。

●音楽と算数とプログラミングをいっしょに学べる学習ソフト Music Blocks公式サイト
　https://gakken-steam.jp/music_blocks/

![Music Blocks](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/568a9e7e-0b0b-d427-3880-e692000d958d.png)

Music Blocks に関する情報として、それが掲載されているニュース記事も一つ、以下に記載してみます。

●学研プラス、「Music Blocks」を使ったSTEAM教育コンテンツを先行公開 | ICT教育ニュース
　https://ict-enews.net/2020/03/18gakken-8/

## Music Blocks の公式サイトについて
まず、Music Blocks の公式サイトの内容を見ていきます。

### 提供元と注意事項
以下は、提供元や注意事項が書かれた部分です。

![提供元](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1d87c477-454b-fccf-b81b-962439993000.png)

![注意事項](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/22dfd9cf-245c-de16-48fc-1eca4c246f07.png)

### オンライン版の環境や動画などへのリンク
以下は、オンライン環境へのリンクや、動画・プリントなどのリンクです。

![オンライン版の環境や動画など](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2f511d8c-506f-c6aa-66d7-9ce28c0f6041.png)
![動画やプリントなど](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8bda2bc5-27cb-445b-1f6e-b9db6552aa2f.png)

## オンライン版にアクセスして情報を見てみる
それでは、オンライン版にアクセスしてみます。以下のような画面で、ブロックを用いたプログラムを組む画面へと進んでいきます。

![画面遷移中](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f91732f5-6e51-d6d0-8734-f19ccc6c078a.png)
![オンライン版の画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0653be26-27d9-9b5d-2a9f-f58e57042877.png)

最初は、サンプルが表示されたり、説明が出てきたりしました。
![オンライン版の画面（説明を閉じたもの）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cde8cb27-ae8d-14aa-b465-63e11859e0c8.png)

### 利用できるブロック（一部）
利用できるブロックをいくつか見てみます。

![音符](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d64cd03f-cebf-23fc-5747-fb21bc5ee80b.png)
![拍子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/10db67e7-8d6d-effa-76f8-4915272b516b.png)
![音の高さ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2de01d17-79d4-85f4-4d3b-3fb91228ad56.png)

上に掲載したのは一部のみですが、それだけでも音を出すブロックに関して、様々な種類のものがあるようです。

また、タブを切り替えると、音を出すブロック以外に、条件分岐や繰り返しなどの処理が行えるものや、描画をするのに使うブロックなども選べるようです。
![実行手順など](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/47185329-22f2-3bf0-4820-484a7b1cf670.png)
![ネズミの動きなど](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/919249e0-4dcb-0bbd-3742-597ef61e597f.png)

## オンライン版を使ってみる
### 動画を題材にしてみる
それでは、オンライン版のブロックプログラム作成を試そうと思います。
しかし、何から手をつけてよいか迷うところです。そこで、公式の動画を見て、題材にしてみます。

#### そもそも何ができるのか？
●Music Blocksってどんなソフト？何ができるの？ - YouTube
　https://www.youtube.com/watch?v=S9l5Nz6VhSU
<iframe width="560" height="315" src="https://www.youtube.com/embed/S9l5Nz6VhSU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

#### 題材として扱う動画
ざっと、公式動画のリストを見て、その中で 1つ題材を選んでみました。

●ドンカカ～リズムといっしょに図形を描こう～ 加藤学園暁秀初等学校 剣持先生 - YouTube
　https://www.youtube.com/watch?v=_4ajP-F44jg
<iframe width="560" height="315" src="https://www.youtube.com/embed/_4ajP-F44jg?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画を見ていきます。

アクション・音符のブロックで、プログラムを組んだところ。
![アクション・音符](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e399d200-6f09-457d-1ae4-f349835679f5.png)

ここにネズミの動きのブロックを加えていき、2つ目の処理ブロックの固まりを作っていき...
![2つ目のアクション作成へ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b62e8a6-21f1-f0b1-071f-03626a4a2bfc.png)

2つ目の処理ブロックの固まりでは、繰り返しを使って連続して音を鳴らしたりしています。
![繰り返し](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8dec4c4b-a173-fe58-f561-960a51ae9e92.png)

向きを変えるという動きを加えて、2つ作成した処理ブロックの固まりを、メインのループから呼ぶ形に。
![向きを変えたり](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cbce1b3b-b0cf-c36f-02e7-2f2547443c9a.png)

メインループの中で呼ぶ処理ブロックを増やしたところ。
![メインの処理を増やす](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/525da35a-8ebc-2d6b-5be3-8838a9c4b714.png)

そろそろ、上記の動画の内容を参考に、自分でブロックのプログラムを組んでみます。

#### 自分で作ってみる
以下のようなプログラムにしてみました。
![自分で組んだプログラム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/12951f8a-1f21-16ec-125a-8cd3cfda0523.png)

動作させてみた時の様子を、キャプチャして動画にしてみました。

https://twitter.com/youtoy/status/1600608211421528064

参照した動画の中の、以下の要素を主に利用した形です。

- 音を鳴らす（音程の変更も少し）
- ネズミを動かす（前進、向きを変える）
- 繰り返し
- 関数的なもの（アクション）