LineBotからM5Stackのスピーカーでドレミファソラシドを鳴らしてスケールを覚える！

## 本記事について
先日参加したハッカソンで作成したものを紹介していきます。

[【増枠！】M5Stackハッカソン by #ヒーローズリーグ](https://mashupawards.connpass.com/event/188452/)

## 何を作ったか
LineBotからメッセージを送りM5Stackのスピーカーを鳴らして楽器のスケールの理解を促すツールを作りました。

##スケールとは
かいつまんでいうとドレミファソラシドのバリエーションのことです。
ドレミファソラシドのメロディを歌ってください。
歌えますよね？
では、ラから歌ってください！ラシドレミファソラ。
暗い響きになりました？
メロディを構成している音は二つとも一緒になります。
ですが始まる音によって響きが明るいもの、暗いものになります。
ひとまずこの記事読むにはそれくらいの理解で大丈夫です！
これを覚えておくと後々作曲やフレーズ作りに役立ったりします。

スケールの代表的な七つのパターンをご覧いただくと↓

イオニアン（スケール）
ドリアン（スケール）
フリジアン（スケール）
リディアン（スケール）
ミクソリディアン（スケール）
エオリアン（スケール）
ロクリアン（スケール）

呪文みたいですね。笑

さらにこのようなパターンが6０種以上あります。
「[音楽　スケール](https://www.google.com/search?rlz=1C5CHFA_enJP908JP908&sxsrf=ALeKk00VovwQPWj7CR0306okNhN_P-7YPg%3A1600859788978&ei=jC5rX7OfO63fmAXehZ5I&q=%E9%9F%B3%E6%A5%BD+%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB+&oq=%E9%9F%B3%E6%A5%BD+%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB+&gs_lcp=CgZwc3ktYWIQAzIECCMQJzIGCAAQBBAlMgYIABAEECUyBggAEAQQJTIGCAAQBBAlMgYIABAEECVQhxFYzxRg3hZoAHAAeACAAaICiAGzBZIBBTAuMS4ymAEAoAEBqgEHZ3dzLXdpesABAQ&sclient=psy-ab&ved=0ahUKEwizlbq4k__rAhWtL6YKHd6CBwkQ4dUDCA0&uact=5)」 などでググると約 39,900,000 件 ヒットしますから
それほど興味の持たれるトピックなのであります。

__という長ったらしい説明はデバイス使えばもっと直感的に理解できるんじゃないかと思って今回の制作にあたりました。__

## デモ
実際に見てもらうのが早いのでデモをこちらの節でお披露目します。
ディスプレイに英語の音名が表示されるので対応表を載せておきます。

|C|D|E|F|G|A|B|
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|ド|レ|ミ|ファ|ソ|ラ|シ


###イオニアン（スケール）
Cメジャースケールの方が一般的かも。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LineBotからM5Stackと通信してCメジャースケール(いわゆるドレミファソラシド)を鳴らしました😆<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%92%E3%83%BC%E3%83%AD%E3%83%BC%E3%82%BA%E3%83%AA%E3%83%BC%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ヒーローズリーグ</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/pyqJqobdzh">pic.twitter.com/pyqJqobdzh</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1307582691462709249?ref_src=twsrc%5Etfw">September 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###ドリアン（スケール）
なんか臭いそう。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LineBotからM5Stackと通信してDドリアンスケール(レから始まるドレミファソラシド)を鳴らしました🎵<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%92%E3%83%BC%E3%83%AD%E3%83%BC%E3%82%BA%E3%83%AA%E3%83%BC%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ヒーローズリーグ</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/yHgS2DLBL7">pic.twitter.com/yHgS2DLBL7</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1307583517170130944?ref_src=twsrc%5Etfw">September 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


###フリジアン（スケール）
コメントが思いつかない。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LineBotからM5Stackと通信してEフリジアンスケール(ミから始まるドレミファソラシド)を鳴らしました🐔<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E3%83%92%E3%83%BC%E3%83%AD%E3%83%BC%E3%82%BA%E3%83%AA%E3%83%BC%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#ヒーローズリーグ</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/vLDwh2xo0X">pic.twitter.com/vLDwh2xo0X</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1307583951603511301?ref_src=twsrc%5Etfw">September 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###リディアン（スケール）
編み物ちゃうよ（CじゃなくてFでした）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5StackとLinebotでCリディアンスケール<a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://twitter.com/hashtag/m5stack?src=hash&amp;ref_src=twsrc%5Etfw">#m5stack</a> <a href="https://t.co/ISTEaGiZDy">pic.twitter.com/ISTEaGiZDy</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1308765341208600576?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###ミクソリディアン（スケール）
響きの中で一番好きです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ミクソリディアンだけ動かない！</p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1308765416928546818?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ので、現在究明中。

###エオリアン（スケール）
マイナースケールと言った方が一般的。（CではなくAでした。)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5StackとLinebotでCエオリアンスケール<a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/0WwzBNn7ZC">pic.twitter.com/0WwzBNn7ZC</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1308764791800963075?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
###ロクリアン（スケール）
一番苦手です。なんか覚えられない。（CではなくBでした。)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">M5StackとLinebotでCロクリアンスケール<a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://twitter.com/hashtag/m5stack?src=hash&amp;ref_src=twsrc%5Etfw">#m5stack</a> <a href="https://t.co/HMRMQBzrMC">pic.twitter.com/HMRMQBzrMC</a></p>&mdash; ウーリズム (@Uh_rhythm) <a href="https://twitter.com/Uh_rhythm/status/1308764512351215618?ref_src=twsrc%5Etfw">September 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## UIFLOW & LineBotの連携
クライアント側であるLineBotで知りたいスケールの数字を入力します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/08f90679-2c7e-256e-09c5-8b8c14f5e0ea.png" width="50%">

UIFLOWのButtonというブロックは内部的にURLを持っていますので、APIのエンドポイントと同様の役割を担ってくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164405/24599b00-6888-04a2-c99b-3522bdc6bd01.png" width="80%">


そちらで取得したURLをbotからの入力値によって切り替えます。

```javascript

async function handleEvent(event) {
    if (event.type !== 'message' || event.message.type !== 'text') {
      return Promise.resolve(null);
    }
    if (event.message.text == "1") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameA()')
      message = "イオニアンスケールの構成音はCDEFGABCです。"
    } else if (event.message.text == "2") {
      message = "ドリアンスケールの構成音はDEFGABCDです。"
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameB()')
    } else if (event.message.text == "3") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameC()')
      message = "フリジアンスケールの構成音はEFGABCDEです。"
    } else if (event.message.text == "4") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameD()')
      message = "リィディアンスケールの構成音はFGABCDEFです。"
    } else if (event.message.text == "5") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameE()')
      message = "ミクソリィディアンスケールの構成音はGABCDEFGです。"
    } else if (event.message.text == "6") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameF()')
      message = "エオリアンスケールの構成音はABCDEFGAです。"
    } else if (event.message.text == "7") {
      axios.get('http://api.m5stack.com/v1/{{ APIKEY }}/call?func=_remote_ButtonNameG()')
      message = "ロクリアン スケールの構成音はBCDEFGABです。"
    }
```

何となく雰囲気はわかっていただけましたでしょうか。

こちらの方に詳しく書きましたので、是非お読みいただければと思います。

https://qiita.com/UhRhythm/items/ee7b398f0a9b58501867

##感想
M5Stackのスピーカーブロックでかなりはっきりとした音量で音符を鳴らせることを発見して、
今回の制作にいたりました。
ハッカソンの限られた時間内では残りの数十パターンの実装はかないませんでしたが、土台となるものができてよかったです。
音楽とIoTが組み合るといろんなことができそうでわくわくしますね！！