うたうよ！ボーカノードン

# 【0. まえがき】
こんにちは！くつしたすきぞうです！
アドベントカレンダー3本目の記事ともなると搾りカスみたいなものしか出ませんね。
でもどうしても皆さんにお伝えしたかったことがあるので記事を起こしました！

音を鳴らすノードンは歌をうたうことができます。
名付けて**ボーカノードン**。

<iframe width="560" height="315" src="https://www.youtube.com/embed/pOdc0DG3U6M?start=15" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

仕組みはとても簡単で、皆さんも方法さえ知っていればすぐに採用できると思うので、
今回布教したいと思います。

クリスマスまで時間もないのでさっさと進めてチャチャっと終わらせます。
では行くぞ！

# 【1.実演】
今回はこちらの曲に歌を付けていきます。
ドン・キホーテのテーマ曲です。(正式名称:Miracle Shopping ～ドン・キホーテのテーマ～)
いまリコーダーで音が入っているところをボーカノードンに歌わせましょう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xN0hrPJFTzc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## STEP 1　発音部分を作る

まずは実際に歌を歌う部分を作ってみましょう！
下の図のような配置を真似してみてください。

![KutsusitaSukizo-1604816345803415553-img2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/ca7b797b-e601-5b9b-cccd-4de360547f9e.jpeg)

ワイヤーワープの役割分けは下記のとおりです。
発音のワープIDを母音の音に合わせておくと、後々わかりやすいです。
| ワープID |名前 | 
|:-:|:-:|
| A,I,U,E,O|発音入力部(STEP2で説明)|
| M |音程入力部(STEP3で説明)|


まず前提としてボーカノードンは楽器の「おねえさん」を使っています。
下の図の通り、音階ごとに発音が設定されていますが、じつは「マミムメモ」しか発音できません。
あとは歌詞表示によって**ちゃんと歌えているかのように錯覚させています。**

定数ノードンには「マミムメモ」のすべてをドの音程に揃える役割があります。

![KutsusitaSukizo-1604816345803415553-img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/967e87a4-1c7f-b8dd-a97d-67b84dae194d.png)

## STEP 2　発音を音楽に乗せる
次に先程のワイヤー出口に繋がる入力部を作っていきます。
「発音」と「音程」の2つのパラメータを入力させる必要がありますが、まずは発音から。
元の歌詞をボーカノードン用にマミムメモに替えていきましょう。

>**ドンドンドン　ドンキー　ドンキ　ホーテ
    ↓変換
<font color="Red">モモモ　モーミー　モーミ　モーメ</font>**

字面が多少アホっぽいのはご容赦ください。
ちなみに50音の中で母音的に分類できない「ン」については「ム」で代用することが多いです。

ワイヤーワープ入口に歌詞変換したものを入力したものがこちらになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/bTf3R4pSFLQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

なんか棒読みっぽいですよね。
これはまだ音程の情報を入力していないからです。

## STEP 3　音程を音楽に乗せる
次に音程を入力していきます。
要するに高さポートに音階分の高さを入力するわけです。
元の音程はこんな感じでしたね！

>**<font color="Red">ファファファ　ソーファー　ファファ　ラソファー</font>**

先程の音階表に当てはめて、狙った音程になるような分数を高さポートに入力してあげましょう。
![１KutsusitaSukizo-1604816345803415553-img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/39f60f50-e6cc-7cef-78d4-ee87b6a1b0a5.png)
例えばファの音であれば、下の図のようにマッピングを設定すれば5/12が出力されます。
![2022121922375800-1DC473CEFCA17AB42EE8681FFF996D70.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953004/1858b8a4-9740-06aa-f8b9-30de943ac619.png)

ここまでできれば準備完了です。あとはワイヤーを繋いで再生してあげれば…

<iframe width="560" height="315" src="https://www.youtube.com/embed/ubPRZmxrXTQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ちゃんと歌ってくれましたね。
これさえ知っていれば皆さんもボーカノードンを自由に使うことができます。
ね、簡単でしょう？


# 【2. 最後に(出典紹介)】
ボーカノードンのインスピレーションはUまさんの「MIMI GAMES」内にある「キキトリ道場」から始まりました。
音を鳴らすノードンの「おねえさん」で喋らせる技術があるってことは、それっぽく歌を歌わせることも理論上可能では…？と考えたのです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「音を聴く」をテーマにしたミニゲームが3つ入った「MIMI GAMES」を公開しました！<br>それぞれのゲームでどこまでスコアを伸ばせるかチャレンジしてみてください！<br>ゲームID:G 003 D6B 985<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> <a href="https://t.co/3ICc6pGpu5">pic.twitter.com/3ICc6pGpu5</a></p>&mdash; Uま (@UMAtgv) <a href="https://twitter.com/UMAtgv/status/1477169276977311746?ref_src=twsrc%5Etfw">January 1, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

やっぱ人の作品をプレイすることでクリエイター同士が高めあっていくのは素晴らしいですね！
今回のアドベントカレンダーでもまた新たなインスピレーションが得られそうでワクワクしています。

最後に完成したワンフレーズ分のドン・キホーテのサビ部分を流して終わりたいと思います。
ではまた！

<iframe width="560" height="315" src="https://www.youtube.com/embed/UXSpocBA44I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>