ブラウザでドレミを鳴らしてみよう！ 簡単プログラミング講座

中島コーチは今日でラスト

鈴木顕照氏（以下、鈴木）：じゃあ呼びますか。

江川みどり氏（以下、江川）：呼びましょう。

鈴木：呼びますか？　やめてもいいんですよ。呼びますか？　ではいきますよ。せーのっ！　

鈴木、江川：中島コーチ！

中島俊治氏（以下、中島）：皆さん、わかってますね？　せーのっ、よっ！

鈴木：決まりました（笑）、今回もよろしくお願いします。

中島：よろしくお願いします。

江川：よろしくお願いします。

鈴木：中島コーチでございます。今回も楽しく。今日はラストなんです。中島コーチともこれで、さようならということで（笑）。

中島：さようなら?　だってもう来なくていいって言うんだもん。

江川：そんなこと言ったんですか？

鈴木：そんなこと言ってないですよ。嬉しいですから。だって早く会いたいとかコメントが来てましたから。

中島：ちょっとびっくりした。ありがとう。さっき「まって」がめちゃくちゃ高かったのも、中島がやめるのを待ってって言う意味ですかね？

鈴木、江川：そういうことかもしれませんね。

江川：ねぇ、部長。

鈴木：ということで中島コーチを迎えたところで進めていきたいんですけど、今回のタイムスケジュールを見ていきましょう。タイムスケジュール～ドンッ！　今ここです。緑色に注目してください。1、2、3、4とありますね。

ここの4つのところで今回本編として皆さんに実習していただきます。間の休憩時間のオレンジ色がありますね。真ん中のここが重要なんですね。課題添削＆プレゼントと書いております。

休憩時間なんですけれども、ここでは前半に皆さんが頑張ってつくった作品をここで投稿してもらって、皆さんの課題を僕らが添削します。いい作品にはなんとプレゼントがもらえちゃうんですね。

投稿方法をさらっとだけ見ておきましょう。みどりちゃんの画面にいきますか。

江川：こちらですね。こちらがプログラムかじり部のページになっております。こちらは一番上から投稿できるんですけど、こちらにURLを貼って、そして投稿する際に一言何かコメントやアピールポイントがあると私たちも選びやすいというか、見やすくなりますので、ぜひアピールポイントなどと一緒に併せて投稿してください。

鈴木：はい、ありがとうございます。詳しい投稿方法は部活内で紹介しますので、一旦この「プログラミングかじり部」というグループを別タブで開いておきましょうね。タイムラインの方にも更新確認とか投稿させます。グループのURLとね。

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

鈴木：さっそく進めてまいりましょう。本日4つのテーマがございます。1つ目いきましょうか。1つ目のテーマは、こちらっ！

江川：きょうから君もWebミュージシャン！

鈴木：いいですねカメラワークが（笑）。

江川：①って書いてますよ。テーマの②が見えてきたんですけど（笑）。

鈴木：きょうから君もWebミュージシャン！　っていうことで進めていきます。参りましょうか。君もWebミュージシャンってプログラミング関係ないじゃないですか。

江川：確かに。これプログラミングの部活ですよね？

中島：なんかディスられてますけど。過去2回何をしてきたかっていうことを思い出してもらいたくて。最初は本当に基本の基から始めていきました。足し算、引き算、掛け算、割り算、やりましたよね、思い出してください。

それからif構文っていうもの。もし何々だったら何々する、その流れでBMI、なんでしたっけ？　Body Mass Index（ボディマスインデックス）でしたっけ？

江川：りこちゃんから反感を買うっていう（笑）。

中島：いやいや、そんなことないです。本当にプログラムやってきました。その流れで普通にやっていると他の授業と変わらない。それはかじるじゃなくて、勉強じゃないですか。2回目は描画をやりました。丸、三角、四角を使って何かをつくりましょう。それから動くもの。

3Dのよく見ますが、今JSくんを見ましたら、すごいのが見えてましたけどね。ああいうふうな感じで、違う新しいものをかじってもらおうということでやりました。今一番トレンドなもの。HTML5中で一番トレンドなものでキャンバスに描き、あと3Dをやってもらいました。

今日はさらに最先端。言い方は悪いですが全部のブラウザに対応していなくて。

鈴木：そうなんですね－。

中島：ぶっちゃけて言うとFirefox（ファイヤーフォックス）対応っていうかたちになってくるものを、それから私たちプログラムを何のためにするんだろう、ちょっとみんなに聞いてもらえると嬉しい。

鈴木：聞いてみます？　じゃあ、みどりちゃん聞いてみてください。

何のためにプログラミングをするのか

江川：皆さん、コメント欄から教えてほしいんですけれども。皆さん何のためにプログラミングしますか？　っていうことですね。

中島：私で申しあげますと、個人的なアレですが、やっぱり生活の糧です。本当に昔はプログラムに最初に手をつけたのがC言語だったんですね。C言語で何をしたか？　アプリつくろう。アプリつくって売っちゃえ！　売っちゃって……。

鈴木：お金持ちになりたい。

中島：そういうこと。ぶっちゃけそうですよ。当時がちょうどC言語のMS-DOS時代、それとWindowsがせめぎ合っていた時代だったんですよ。じゃあC言語をちょっとかじったから、それこそ本当にちょっとかじっただけで、たぶんできるかもね、儲かるかもねと。

その時にMS-DOSですか？　Windowsですか？　そこで選択肢が別れてきた。Windowsは重たいし、絶対に誰も使わないし、MS-DOSは軽いし、こっちがいいよね……はずれました（笑）。

そこで買うプログラムを間違えちゃったんですよ。MS-DOS買っちゃったもんだからWindowsの時代になると使えないということで、ちょっとお金儲け失敗しちゃいました。ごめんなさい。でも言いたいことわかりますよね？

それ以外にもありますね。教養で覚えたい。それから何かしら新しいもの、何かわからないけど新しいものを知りたい、おそらく今日の皆さんはそういった方々多いんじゃないですか？

何かわからないけど新しいものを知りたい、例えばこれだけじゃなくてIllustrator、Photoshop、他にもいろいろあります。あと英語もありますよね、部長。

鈴木：もう、英語に触れないでください（笑）。

中島：ごめん。あと3回なので（笑）。そういった新しいもの、お金儲けもありますけど、スマートフォンのアプリケーションをつくっていきましょう、それだったらお金儲けにも、何かしら役に立つかなぁと思って。仕事にも役立つでしょう。

江川：コメントをちょっと見ていきましょうね。

鈴木：Aさん「儲けよう」です。Bさんはいいですねぇ「モテるためにやってます」、Cさんは「9月につくるプレゼンタイム作品のためにプログラミングを学びたいです」。Dさんもいいですねぇ「なんかかっこいいから」。

中島：私のこと？

江川：そういうこととちょっと違う……。

中島：すいません。ごめん（笑）。そうか皆さんやっぱり正直だし、そうだと思います。そういったことも含めて、それから何か新しいから、かっこいいから、そういうことがあって学んでもいいと思いますが、マネタイズといいまして、そこら辺の話もしていきたいと思ったりしておりました。

3回目がそういったものともう1つ、一番新しいものの話をしていきます。何かは楽しみにしておいてください。話ばっかり長くなると進みませんので、やっていきましょう。

鈴木：やっていきますか。それでは今回も中島コーチの実演の後に皆さん、ミドちゃんの実証時間があります。まずは中島コーチの実演をメモを取りながら、しっかりメモメモメモ。メモ取りながらしっかりね、見て覚えてください。それでは中島コーチお願いします。

江川：お願いします。

JSくんエディタで作ってみよう

中島：ではやっていきましょう。毎回同じです。1からやるとそれはそれで楽しいんだけども、細かいところが分かっても全体像がつかめないで終わっちゃって疲れちゃう。

なので最初は皆さんに全体像を知ってもらって、それをカスタマイズする、そういうやり方でやっていきます。なので細かい中身の話はしません。もし興味があればググると大体出てくるんですね。

鈴木：そうですね。schoo WEB-campusの授業がいっぱい出てきますね。ググると。

中島：大正解。そうですね。

鈴木：危なかったですね、今（笑）。

中島：本当にそうですよ。ごめんなさい。ということでJSくんに入ってください。URLはよろしいですかね？　このURLです。始まる前にアクセスした人は、規約に同意というところが、あと何秒っていうカウントダウンのちっちゃい仕組みがつくってたりしてますけどね。入ってください。皆さん大丈夫ですよね。じゃあいきます。せーの、よいしょ！

鈴木：皆さんもJSくんに入ってみてくださいね。

中島：なんかもうつくっている人もいるし、おもしろいですよね。こういうのを見てもいいし。今日やっていく内容です。「エディタ」がありますよね。ここを押してください。いきましょう。せーの、よいしょ！

中島：ちょっと一瞬慌てましたけどね。

鈴木：生放送怖いんですよね。

中島：実はもう既に何かしらこういうような感じで、入っている人もいると思います。前回の授業とか入っている人もいるかもしれない。初めての人はこうですね。何もない状態、nakashimmerっていう名前もない状態ですね。このまっさらな状態で考えていきます。

まず最初。サンプルの中で「サンプル1」「サンプル2」「サンプル2-2」「monaca」って書いてあります。「サンプル1」これをクリックしてみましょう。そうすると何か起こります。なるべく画面を大きくしてやっていきますよ。せーの、よいしょ！

まず皆さんにプログラムがすぐつくれるように、もう埋めちゃいました。よろしいですか。そうすると1つ目のボタンがあった、2つ目にニックネームを入れていっちゃいましょう。

「ミドリーヌ」とか「部長」とか、なるべく人と被らないかたちにしてください。アルファベットでお願いできるといいかな。それがファイル名になりますので、個人の名前はやめたほうがいい。あと空白は入れないでくださいね。

ではいきましょう。Twitterのアカウントとかね、それでもいいかもしれませんが個人情報には気をつけてください。では私は「nakashimmer」と入れました。ちょっと拡大しましょう。1つ目は「サンプル1」を押した。2つ目はニックネーム「nakashimmer」と入れました。この状態です。

それでソースはもう入れちゃってます。本当はここを1から書けばいいんですが、それをやると1時間の時間がたっちゃうので、ズリズリズリーっと確かに入ってるなぁ、1回コンッと押しときましょう。見たよ。周りの色がちょっと変わりますよね。あまり関係ないんだけどね。でもいいと思います。

そのまま下側に行って、なんか難しいJavaScriptがいっぱい入ってる……それで結構です。下の方をちょっと見ると、なんか普通の日本語で書いてある部分があるよね、今日の一番大事なところはそこになります。いや、これドレミファソラシドか、ハハ（笑）。大丈夫見ててください。

とりあえず、あるなぁと思ったらそのまま下に行きます。下に行きまして『プレビュ』ボタンを押しちゃいましょう。いきますよ。せーの、よいしょ！　そうするとね、「Webで君もミュージシャン①」と……フォントが間違ってますけど気にしないでください。これでもうでき上がり。

鈴木：あぁもうでき上がったんですね。

中島：もし何か調子悪いなぁっていう方は、今日『リセット』ボタンをつくってきました。1回リセットしてしまう。だけどデータが残ってますから、1回リセットしちゃって、コンッコンッと押してあげて、そのまま『プレビュ』ボタンを押してあげれば、全部1回リセットしてますからきれいな状態でできます。

プログラミングでドレミの音階を奏でる

中島：はい。これで今から音を出します。ちょっと待ってね。その前に音量チェック。チェックオッケー？

鈴木、江川：オッケー！

中島：チェックオッケー、いきましょう。では鳴らします。ドキドキの瞬間ってライブ行動って大抵何か起こるんですよ。魔物が住んでますからね。悪霊退散のおまじないをお願いします。

鈴木：悪霊退散っ！　もうひどいよ、本当に（笑）。

中島：ではいきましょう。せーの、よいしょ！

（音が鳴る）

鈴木：何か聞こえますね。

中島：何か聞こえました？

鈴木：何か聞こえましたね。

江川：聞こえました。

鈴木：これなんだろう。上にあがってみてください。

江川：はい。

中島：ここ、「ドレソどソラみど」、音階は今日は付けないでやりますね（笑）。歌いたいけどやめておきます。私たちは音を扱えたんですよ。それを発生する仕組みはこの上、「Web audio API」っていうのが提供してくれてます。

これをつくってみてもいいんですが、これは提供してくれている。あとは何が必要？　音。「ドレソどソラみど」。これを変えてみるといいんですね。変えると違う音になります。1つだけやってみます。

「ドレソどソラみど」、これは長調。あと短調ってありますよね。「ラ」って打ってみましょうか。「ドレソどソラみラ」で終わりました。それで1回『プレビュ』ボタンを押して、『リセット』ボタンでも1回押しておきましょう。押したほうがいいかもしれない。『プレビュ』押しましたよ。いきます。せーの、よいしょ！

（音が鳴る）

中島：何か暗い感じですね。短調で終わりました。おもしろいでしょう？　こういったものもプログラムの1つなんですよ。細かい話をすればいろいろあるんですが、ちょっとだけ触れておきます。

実は音を2つ出しています。vco0、vco1、もう1つは変換の関係とかいろいろありますが、音2つ出してそれを組み合わせて音を出してる、詳しいことはコーナーの中で言いますので、その音を取りあえず出せるようにしましょう。

それでちょっと注意事項です。音について「ドレミ」、「ファ」は2文字になっちゃうんでドレミ「ハ」にさせてもらいました。「ドレミハソラシど」、「ド」から「シ」まではカタカナだったら普通の音、1オクターブ上が平仮名という形でさせてもらいました。

だから「ドドドドド」でもいいですし、「レレレレレ」でもいい。皆さん、あそこ変えてみましょう。それを是非先生に提出しておもしろい音楽聞かせてください。今日は、見てみようじゃないです。

鈴木：聞いてみよう。

中島：そう。おもしろいでしょ。普通そんなことやらないですよ。

鈴木：プログラミングですもんね。これは音楽の授業みたいですね。

中島：そうです。プログラミングは何でもできる。それを体験してもらってます。まずはこれを音が出せれるようにやってみましょう。その後、変えてみてください。

鈴木：はい、わかりました。ここからミドちゃんと皆さんの番ですね。メモをしっかり取りましたか？

江川：取りました。

鈴木：少なくない？　大丈夫？（笑）。

江川：めっちゃ少ない（笑）。大丈夫です！

鈴木：5行ぐらいしか書いてないけど。

江川：大丈夫です。いきます！

鈴木：いけるんですね。わかりました。今度は皆さんの番でございますが、ややこしいことは一旦全て忘れて、手順通りやればできるはずなんでね。じゃあさっそく始めましょう。それでは実習スタート！

【実習タイム】

中島：ちょっとだけ説明。1分だけよろしいですか。小技ポイントじゃないんですけども。これの仕組みが「Web audio API」と言いまして、まだ全部のブラウザじゃなくて、昔はFirefoxしかダメだったんですけど最近Chromeがオッケーになってきたので、だんだん他のブラウザでも使えるようになってきたのかなと思っています。

この中で大事なのが私はドレソどドラみなんちゃらと書きますけれども、大事なのはここの周波数なんですよ。一昨日の晩に一生懸命に調べまして、なるべく音階になるようにつくりました。

こういう配列でドと打ったら123.251メガヘルツ、ラの音が440とか880とかですからそういった感じで音を出せれるようにしました。

全て「Web audio API」っていう仕組みなので、是非これを皆さんググってみてください。詳しいことはこの後、ちょこっとお話ししていきますので楽しみにしておいてください。

鈴木：これで1つ目のテーマが終了ということで。皆さんお疲れ様でした。

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

正弦波、短形波、ノコギリ波、三角波で音を奏でる

鈴木：続いてはこちらのコーナーに参りましょう。もっともっと！　かじり部ー！　もっともっと！　かじり部でまだまだかじり足りないあなたのために、中島コーチがもっと上のことを教えてくださいます。それでは中島コーチお願いします。

江川：お願いします。

中島：音ちょっと暗くなかったですか？

鈴木：暗かったです。

中島：私はつくったからじゃないんですけど、これは正弦波といいまして、いわゆるサインカーブでグニーングニーンでした。それで違う音も出せますよ、だってシンセサイザーですから。ね、目指せYMO。すいませんYMO世代だったから（笑）。

皆さんJSくん見てください。どこだっけ、ここら辺かな。今、「ドレソどソラみラ」とやりましたが、その下のここまでって書いてあるさらにその下です。これが、ちょっとかじってみようコーナーの内容です。

vco0、vco1ってこれは音源なんですよ。上の方をみるとオシレーターと書いてありましたかね。本当に発信回路から音を出したようなかたちで音源なんですよ。2つ音を出してまして、どちらもこれなんて書いてある？　「vco0.type=」音のタイプが「sine（サイン）」です。sine以外もできますよ。ちょっとこれを違うところに書き出しますから、見ていてくださいよ。よいしょ。あっどっか行っちゃった。

鈴木：どこへ行った？

中島：ほいっ、あーよかったぁ。今日はいろんなことが起こりますね。ホワイトボードに書き出しますから見てもらいましょう。英語の授業になってきたような気がする。「sine」と書きましたならば……大丈夫発音無いから。

鈴木：あーよかったぁ。

江川：部長と目が合わせられない（笑）。

中島：正弦波です。でも楽しいよね。メモしてください。

鈴木：メモしてくださいね。正弦波。

中島：私ちょっとミュージックにあまり詳しくないので、もし言葉が違ってたらそれはよろしくお願いします。だってこれは英語だからね。「square」スクエアですね。これは矩形波、正方形のギザギザの波形ありますよね。スクエアです。四角形の形の。それからもう1ついきましょう。

よくあるのがこれ。「saw」ノコギリの「tooth」。「sawtooh」ノコギリ波です。これは結構キンキンした音になってくる。これをコピーしておいてください。それからもう1つだけ。「triangle」三角波。クイックイックイックイッの三角波です。その4種類あるのでメモをしておいてください。

その中で1つだけ、ノコギリ波にしてみますので皆さん見ててくださいね。やりたい方はやってもらってもいいですから。いいですか。これコピーしておいてください。sineとsquareとsawtooth、私発音下手だなぁ。じー。

鈴木：うーん、結局じゃないですか。

中島：その間に皆さんはメモ書きしていますから。

鈴木：（笑）sawtoothの正しい発音やっておきましょうか、一応。皆さんはメモ書きしててくださいね。sawtoothの正しい発音の仕方を僕がやります。thがね、僕は難しいんですよ。thの発音が難しいんでね。

江川：ちょっと噛む感じですかね。

鈴木：いきますよ。sawtooth。sawtooth（笑）。

中島：はい、次いきましょう。

江川：めっちゃウケる（笑）。

鈴木：ひどくないですか（笑）。

より豊かな音にする方法

中島：メモしたんでついでだからsawtoothですね。これをじゃあやってみますね。音が2つあると言いました。だからどっちも音をsineというやつをsawtoothにしておきます。それから2つ目もしておきましょう。いいですね。それでもってそのままプレビュしちゃいます。それと前のと被っちゃいけないのでリセットしておきます。

それでもって、よいしょ。「プレビュ」押しました。これでいきますよ。音がちょっと暗いのからキンキンしたそんな音になるんだと思われます。綴りが間違ってなければ。sawtoothのtoothってBluetoothのtoothと一緒ですもんね。じゃあいきましょう。では聞いてください。せーの、よいしょ！

（音が鳴る）

ね。ちょっとラッパ的な音に変わりましたよね。

江川：変わった変わった。

中島：もう1つだけ聞きましょう。sineにしたほうがいいかな。ちょっとsineに戻しときますがこれは是非皆さん、変えてみてください。2つ違う音源にすると更に違うものが出てきます。よろしいですか。もう1回sineにしておきました。元に戻しました。sine版でいきますよ。

（音が鳴る）

ね。よくありがちなものですが、これちょっとリセットして止めちゃいます。もう1カ所変えてみましょう。今、音の種類を変えました。「detune.value」これなんか業界の人はよく使ってるらしくて、2つ音があったら少しずらすんですよ。そうするとうなりが発生して、より豊かな音になっていく。

今は平面的な音でした。なのでこれを「detune.value」2つの音の1つを変えるんですよ。変えちゃいますよ。とりあえず20ぐらいに変えちゃいます。さっきの音、覚えてますよね、きっとね。はい、今やりました。では、いけるかな？　いってみよう。せーの。

（音が鳴る）

鈴木：おぉー。

中島：わかります？　音がうなりを出してます。だから豊かになっている。何か臨場感が出てくるんですね。ただこれ気をつけてください。これを例えば30、40、50ぐらいにしちゃうと離れすぎて逆に、よくあるじゃないですか、音のずれたピアノとかありますよね。

（音が鳴る）

もうずれずれ。ボボボボボって。こういったものもできます。今日は直接コーディングで書くようにしてますが、皆さんはこれを何かしらHTMLでプログラムをつくって入力ボックスをつくったり、パーツをつくって、入力できるようにしたらおもしろくないですか。

鈴木：おもしろいです。

中島：それも使って是非おもしろいのができたら、講師に提出をしてください。それで是非私たちに聞かせてください。

鈴木：そうですね。

中島：今日は完成品を見るんじゃなくて、完成品を聞く。せーの。

鈴木、中島、江川：聞く。（笑）。

中島：とても大事なことです。よろしくお願いします。

鈴木：ということで以上でしょうか。

中島：はい。

鈴木：ありがとうございました。ということで、もっともっと！　かじり部でした。

（拍手）

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