スマホを傾けると音が鳴る 簡単テルミンも作れるプログラミング講座

音のテンポを変えてみよう

鈴木顕照氏（以下、鈴木）：ということで2つ目のテーマにいきたいと思いますが。2つ目のテーマにいく前に、ちょっと質問が1個来てましたので見ていきましょうか。Eさんから「テンポを変えてみたい」。Fさんから「シャープやフラットもできるのでしょうか？」っていうのが来ておりました。

中島俊治氏（以下、中島）：できます（笑）。

鈴木：できます。もちろん。

中島：授業ですかね。プログラムっぽくお話をしましょう。私の画面を見てください。そんな質問が来ると思ってなかったんでびっくりですが。

鈴木：テンポを変えたりとか、シャープやフラットですね。

中島：いろんなとこでやっちゃったんで、どこにいったかわからなくなっちゃった。あっあったあった。どこだ？　ちょっと待ってください。

鈴木：この辺のソースをいじると、そういうことも可能ですね。

中島：悔しい。どこだ、どこだ？　あ、あったあった。前回キャンバスという……あ、そうか前回は動かないやつだったね、実はアニメーションができまして、そこにこれ「setInterbal」があります。一定期間ごとに動かしましょう。さっきは一定時間ごとに「ドレミソ」具体的にはこれ「1000」と書いてあります。1秒。

これ例えば「500」にしてみると倍の早さになります。逆に「2000」とすると2秒。1つの音を2秒かけて動かす。だからこれで音の長さを変えることができる。もっと詳しくやると二分音符、四分音符、全音符とかあります。あと休符はありますがそれは皆さんにお任せしたいと思います。

あと、音ですよね。シャープとかフラットですよね。ここの値を変えれば結構です。そのときに何かしら、シのシャープは何か決めておく。そんなかたちにしていただければオッケーです。

今日は1文字ずつしか扱えないようにしたので、C#とかD#とかそういったかたちになさっていって、周波数を変えてあげる。基本周波数でやってますからね。というかたちでよろしいかと思います。

鈴木：なるほど。これでテンポが変えられる。

中島：時間はミリ秒単位ね。

鈴木：わかりました。ありがとうございます。

中島：こんな楽器があるんですね。これってたぶんテルミンの話をしているのかな？　でもいいですよね。

きょうから君もWebミュージシャン②

鈴木：じゃあちょっと戻りましょうか。本日2つ目のテーマにいきましょう。2つ目のテーマは、こちらです。

江川みどり氏（以下、江川）：「きょうから君もWebミュージシャン②」（笑）。テーマ①のときからわかってたんですけど。

鈴木：①って付いてたからね。そりゃ②くるよなみたいな。

中島：そりゃそうだね。

鈴木：これ③も④も来るかもしれないですからね。

中島：えっ（笑）。

鈴木：今日、このテーマでいくのかなみたいなのがありますからね。

中島：それでいい？

江川：ボードにした意味がないですね。

中島：楽器をつくるのも結構大変らしい。私たちはプログラミングでなんとかする、コンテンツを載っける、それを処理するためのものであると思っています。なのでWebミュージシャン②。せーの。

全員：ツー（笑）。

中島：ということでテーマの②ですね。何をするかというとプログラムの、パソコンもそうですがいちばん初期の頃はプログラムをお守する人が居て管理者が居て、その人がデータ入力をして出力をしてそれをみんなに伝える。

伝えるときによく昔のお茶の水博士とかはコンピューターから紙テープが出てきて、難しい丸ポチを解読して「これは大変だ、アトム！」みたいな感じで言ってるわけですよ。

でもそれだけだと使える人が限られてくる、ということがありまして今では様々な入力の方式がある。例えば四角い箱をつくるときもそうですね。入力ボックスがありますよね。

名前とか住所を入れる。それからこういうタッチもそうですよね。スマートフォンでいうタッチとかね。マウスもそうですね。そういった様々な入力デバイスができるようになりました。

じゃあ私たちは音楽を入力で演奏ができるように、それこそテルミンと似たようなものをつくれるようにしていきたいと思います。たまたまこの前、おもちゃ屋さんで。

なぜおもちゃ屋さんなのかよくわかりませんが、いろいろ見てましたらば、何かおもしろいやつで、オタマジャクシのような形の、スライドで音が変わるやつがありましたんで、じゃあスライドで変わるようにしてみようっていうことをやります。

要は入力の仕組みを学んで頂きます。いきましょう。JSくんに移ってください。

鈴木：はい、JSくんにいきましょう。

JSくんで作ってみよう

中島：JSくんの中で今度は「サンプル2」になります。よろしいでしょうかね。せーの、よいしょ！　それで実はもう入ってます。これだけで動くんですよ。動きますよ。上は何て書いてあるかな。

「Webで君もミュージシャン②」、それから「button onclick」、ボタンを押したらミュージックがはじまるよ！　もうそのまま私言ってます。もっと大きくしよっか。ごめんなさい。見えなかったね、今ね。私も見えなかった（笑）。

「h1」はタイトルだしね。それから「button」があって、押したらば「on click」、押したらミュージックスタートするんだよって書きました。「musicStart」ってどんなもの、何ですか、というのもJavaScriptの中で定義してあげる。これは実は定義してあげています。

プログラムはさっきとほとんど同じです。入力の値によってデーター変えて、それが動けばいいというかたちにしておきましたので、あまり詳しいことは必要なかったりするんだけれども。

ちょっと待ってね、下が出てこない。どこだどこだ？　あ、来た来た。プログラムはこんな感じになってます。そんなに思いっきり長く、あ、ちょっと待ってね、見えてはいけないものが見えてました（笑）。

鈴木：危ない危ない。

中島：ネタが先にばれちゃった（笑）。それはいいとして、ここにJavaScriptを全部書いて、これをやれば基本的には音が出るようになってるんですよ。じゃあ見たよ、上も見たよと1回コンッとクリック押しといて、見たよ見たよとそのまま下に行きまして、『プレビュ』ボタンを1回押しちゃいます。

ちょっと待ってね。1回リセットしておきましょう。さっきのJavaScriptが残っちゃったりすることがよくあるので、リセットしてもう1回『プレビュ』ボタンを押しました。音出してみましょう。いきますよ。あれ？　聞こえます？

鈴木：音鳴ってないですよ。

江川：鳴ってないですね。

中島：おかしいなぁ。私は鳴ってるんですけどね、というか操作できないですね。実は入力を操作するためのパーツがこの中に無いんです。それで私たちはなるべく簡単に、それから横文字無しでっていう授業をかじり部ではやっておりました。

最後ですからコーディングしてみましょう。コーディングといっても、HTMLをちょっと書き足すだけになりますが、今から私が書くものを皆さん頑張ってメモしてください。いきます。

鈴木：皆さんここはしっかりメモ取りましょうね。ここからすごい大変なんですよね。

中島：大変です。1個間違ったら。

鈴木：山場ですもんね。

中島：山場です。

入力用のスライダーのパーツを作ろう

中島：いきましょう。ゆっくりいきますね。入力のパーツ、HTML5で入力のパーツをいろいろ覚えましたということを実はこの前CANVASの時間とかに申し上げております。

この前というのは何カ月か前ですけれども。その中でこのように書きます。見えますかね、みんな大丈夫かな。「input」いいですか。それから「type」、入力のパーツのタイプが「range」。

鈴木：range（発音よく）。

中島：さすがですね部長。

鈴木：いやぁそうなんですよ（笑）。英語全然できないですけどね。

中島：スライダーのことです。入力用のスライダーのパーツをつくりましょう。ちょっと名前を付けてあげないと扱いにくいので、そのパーツの名前を「id」です。これも一緒。「range」。オレンジ！　オレンジになっちゃいましたね、私今ね。

鈴木：オが入っちゃいましたね（笑）。

中島：オゥソーリィ（笑）。ということで今2ついきました。今はゆっくりやってますけど大丈夫ですか？　耳のほうに片寄っちゃうとね、書けなくなっちゃうからね。

「input type="range" id=range"」名前も一緒にしちゃいました。それからこれ小っちゃいんですよ。大きくしたほうが扱いやすいので、本当はあまり好ましくないんだけどスタイルシート、「style」を入れちゃいます。ここでCSSを直接指定してあげます。

「width」横幅点点「300」ピクセルですよ。もっと長くしてもいいですよ。こんな感じ。ちょっとここまで置きましょうか。大丈夫かな？

鈴木：皆さん、1回ちょっと待ちます。大丈夫ですよ。訳わかんないなと思いながらもとにかくメモってください。

中島：画面は見せておいたほうがいいですね。

鈴木：皆さんこれ見ながらメモ取っといてくださいね。今は理解できなくても結構です。これを後で皆さんに入力してもらいます。

中島：今はかじってんだもんね。

鈴木：そういうことです。

江川：inputとtypeの間は空白ですか？　空けないとダメ？

中島：半角空白空けてください。むちゃくちゃいい質問。そう、空けてください。

江川：ちょっと開いてるところは全部空けなきゃ、ちゃんと反映されないんですか？

中島：そうそう。

江川：わかりました。書いておこう。

中島：めちゃくちゃいい質問ですよね。

鈴木：いいですねぇ。ダブルクォーテーションとかね。セミコロンとか。

中島：今、横で見えてるんですけど、丸って書いてあるからひょっとして丸って本当に字を間違えそうな気がするんだけどね（笑）。

江川：半角。

鈴木：気をつけないとね。

スライダーを左右に動かすと音が変化していく

中島：そんなことをしながら次にいきましょう。あと何が足りないかというと、実はこれはrangeと言いまして、スライダーなんですよ。値を決めることができる。スライダーの一番下と一番上の値を決めてデフォルトをいくらにするって決められることができます。width300の後にこう書きます。「min」。

鈴木：ミン？

中島：ミニマム。

鈴木：なるほど。

中島：最低限です。これをどうしようかな、毎回私違うんだけど、「440」にしましょう。「440」です。標準が「value」と書きます。value、値のことです。値を880。ラの音なんですよこれ。

それから最高がmaxになります。「max」これをいくらにしようかな、1660ぐらいだったかな。すいません、ちょっと覚えてないのですが。まぁそれぐらいにしておきましょう。違う。880の倍は1760。すいません。

かけ算できた今？（笑）。はい、こういうかたちにしておいてあげて、最後に山括弧にしてあげてください。皆さん大丈夫かな。

鈴木：Gさんが「かじり部、楽しいです」って来てますよ。

江川：あー嬉しい！　ありがとうございます。

中島：ちょっとしばらくこのままにしておきます。minは一番下の周波数440、一番最高が1760、間が880、これ倍になってますよね。音っていうのは倍々ですからね。これでたぶんいいんじゃないのかな。

鈴木：皆さんどうでしょうか。メモ終わりましたかね？　大丈夫ですか。

中島：カウントダウンしてみようか。

全員：10、9、8、7、6、5、4、3、2、1、終了でーす。

中島：いいですよ。もしまだの人は一生懸命見ててください。じゃあこれでできたので、よいしょ。本当に正しい？　input style、あるね、いいですね。それからid rangeオーレンジ（笑）、ミニマム440、バリューが880、マックス1760、これでオッケーにしよう。

失敗した失敗したでなんとかなるよ。プログラムだから。はいできた、『プレビュ』ボタンを押しますが、1回リセットしておいてもう1回もしたほうが安全です。クリアにして押しましょう。はい、できた。

これで君もミュージシャン。これがスライダーです。

鈴木：これか！

中島：マウスで掴んで右左できます。いきますよ。『START』ボタン押します。

（音が鳴る）

江川：高い。

（スライダーを左右に動かすと音が変化していく）

鈴木：おおっ。

中島：皆さん、聞こえますかね。これが今、440。これがデフォルト880、一番上が1760。ということで2オクターブ分の音がもう出るようになりました。ちょっとうるさくなったので、リセットボタンを押しちゃいます。これで1回無くなっちゃうんで。

鈴木：そうなんですね。

中島：停止ボタンの意味も兼ねておきましたので、やってみてください。

鈴木：これはおもしろいですね。

中島：じゃあここまで頑張りましょう。

鈴木：コーチありがとうございました。皆さんメモ大丈夫ですか？　ここからはミドちゃんと皆さんが打ち込む番でございます。それでは実習スタート。

音が鳴るがスライダーが動かないハプニング

【実習タイム】

江川：わあー出た出た！　（手を叩いて喜ぶ）

鈴木：すごいじゃんか。

中島：なんか違ってるっぽいんだけど。リセットボタン押して、前のやつをクリアしておいて。大丈夫やってみて。

江川：押しますよ。

（音が鳴るがスライダーが動かない）

江川：えっ？　動かない!?

全員：（笑）。

鈴木：はい、ミドちゃん、できませんでした。

江川：ちょ、ちょっと待ってください。

中島：じゃあそれを直してもらってる間に、こちらのほうを見てください。私のほうです。

鈴木：コーチの画面を見ていきまーす。

中島：どうしてもうまくいかない人もいらっしゃると思います。半角空白が入っていたり、何かしているかもしれない。ということで、実はみんなできたほうが楽しいですよね。皆さんのスクリプトのほうを見てください。

鈴木：ここは注目ですよ皆さん。

中島：できてる人はいいんですよ。『いいね』ボタンを押している人はいんだけど、ちょっとやっぱり難しかったっていう人は、実はここ。

鈴木：ありました。

中島：これをコピペして上に乗っけてください。さっきとちょっと数字が、一緒にしたかな？　ちょっと順番違っているかもしれませんけども同じことにしていますから、これをそのままさっきのところに上書きしてもらったら動くようになります。

もし動かなかったんだけど、っていう人はその後、一生懸命勉強すればいい。だいたいプログラムっていうのは書き間違いしかないですから。そうしているうちにミドリーヌが一生懸命頑張ってやってますけどどうですか？

江川：これたぶんメモが違うんだと思います。

鈴木：Hさんがコメントでヒントをくれているけど。

中島：なになに？

江川：maxイコールダブルクォーテーションが……1個抜けてまーす！

中島：やったね、そこだ。さっきのvalueの値が880で真ん中に来るはずなのに、来ないからあそこらへん間違えてるんだろうなぁという気がしてた。

江川：でもよかった。ありがとうございます、Hさん。よし、じゃあちょっとこれで、やってみたいと思います。

鈴木：やってみましょう。

江川：コンッコンッて押してプレビュ。あ。

中島：1回リセットしておこう。

江川：そして「プレビュ」押します。あぁなんか既に動いてる。

中島：ドキドキ。真ん中にきているもんね。

江川：もう1回いきますね。

（音が鳴ってスライダーを左右に動かす）

鈴木：おっ、おおー！

中島：いけました。

鈴木：ミドちゃんもいけました。『できた』も1613できたということで皆さん大丈夫でしょうかね。

江川：よかった。

中島：なんかすごい疲れてるっぽいですが。

江川：なんかすごいわかりました。生放送なのでどの先生も時々、打ち間違ったりとかあるじゃないですか、どうしても。その気持ち（笑）。

中島：今わかった（笑）。その気持ちわかってもらえると友達になれそう。

江川：友達ですよ。友達？

鈴木：コーチと部員の関係なので。

中島：あっそうか。ごめんね。

鈴木：関係を覆すのやめてもらっていいですか。

中島：コーチです。

江川：部員です。

鈴木：部長です。

中島：英語の先生です。

鈴木：違います（笑）。

重力加速度もプログラムで取れる

中島：もう1つだけ。さっきテルミンって話をしてましたよね。実はスマートフォンはこういった光学センサーとか、近接センサーとか、そういうのが付いてるんですよ。ちょっと同じものをつくってもおもしろくない。実はつくってたんですけど、もうちょっと違うものを今からご紹介します。

中身を見てもそれはわからないかもしれないので、ちょっと待ってね。見えますかね。スマートフォンです。さっきアプリケーションを1個つくりまして。それでこんなことができます。これは全体見てなくても結構です。画面は関係ないから。いいですか。

（スマートフォンから音が鳴る）

ここから鳴ってますね。はい、どうぞ（江川氏にスマートフォンを渡す）。こう傾けてみてください。音が高くなる、縦にすると。

江川：低くなった。

中島：もっともっと。はい、行き過ぎた。すいません、そこまでは行かない。素直にすると一番下に落ちていきます。

鈴木：うわぁ！

江川：すごいすごいすごい！

中島：地球の重力でやってますんで、ブレてるんですよ。だからこういう形になるけれども、もうちょっとちゃんとすればいいんですけどね。でもおもしろいでしょ。重力で再生する。

江川：開いた口を塞がらない（笑）。

中島：なになに？

鈴木：すごいなぁと思って。

江川：部長、やってみますか（鈴木氏にスマートフォンを渡す）。

中島：今一番高い音になってるはずなんですよ。低くなるでしょ。（音が途切れがちになる）何か電波発射してます？

鈴木、江川：すごい。

中島：ちょっと止まっちゃったかな。

鈴木：これで。傾きで音階が変わるという。

中島：そう。スマートフォンには重力センサーがついているので、それとこれを引っ掛けちゃったんですよ。テルミンもおもしろいです。つくったんだけど、ちょっとおもしろくないから重力センサーで、私は昨日の朝の4時までやってました。

鈴木：すぅごーい！

中島：おもしろいでしょ。こういうのも是非触れてみてください。どうやってつくるかっていうのは、ちょっと私の画面を見ていただきたいですが。「サンプル②の②」がここにありまして、これをクリックすると、今のサンプルそのまま見れるようにしておきました。

これはChromeとFirefoxでないとたぶん見れないと思います。iPhoneはちょっとごめん（笑）。という感じなんで、Firefoxが一番いいんですけど。こういったもの、こういうプログラムがあって、この中で1番大事なものを1つだけ言っておきます。ここ。

鈴木：なんだこれは？

中島：言葉だけ覚えてください。acceleration加速度、includingGravity重力、重力加速度がとれるんだよっていう話ね。プログラムでとれるんですよ。JavaScriptでとれますよ。皆さんも是非つくってみてください。

鈴木：へぇ?。

江川：すごいですね。

中島：感動した？

鈴木：感動しました。ということで以上でしょうか。

中島：はい。以上です。

全員：はい、ありがとうございました。

良いコードを書いてください

鈴木：ミュージシャンというか、もうすごいですね、なんかねぇ。

江川：いろんなものを超えましたね。

鈴木：なんかねぇ（笑）。「売り物になります」って来てますね。

中島：売ります（笑）。

鈴木：売るんですね。

江川：「コーチ素敵！」って来てます。

鈴木：すごいですね。びっくりしました、本当に。ありがとうございます。質問が来てるのかな？　質問ちょっと見てみようかな。Jさん「スクリプト見せてください」は今見せました。「JSくんエディターでタグの閉じ忘れとか、よろしくないコードを書いて提出したらまずくない？」って来てます。

中島：確かにね。良いコードを書いてください。なかなか言いづらいんでごめんなさい。

鈴木：Kさん「ここで入力してるんでしょうか？」。

中島：ここって何だろう？

鈴木：ちょっとわからないですね。詳しく教えてください。

中島：JSくんのエディターのURLなので、普通にJSくんでつくろうと思ったらそのページに行きますので。そこで先生提出ってやったら、よいしょっとあのページのことですね。

鈴木：わかりました。Lさんから「重力？」って来てますね。

中島：重力、いいでしょう（笑）。

鈴木：「すごすぎて授業の内容忘れた」って（笑）。ということで皆さん前半はこちらで終了でございます。皆さんお疲れ様でした。

中島、江川：疲れ様でした。

鈴木：この後は休憩コーナーです。