苔桃日記

超気まぐれ

Make a Melody! というWebアプリを作った話

この記事は Tsukuba DTM Lab. Advent Calendar 2016 の2日目の記事です。

簡略自己紹介

Tsukuba DTM Lab.(以下TDL) に所属する canacel (かなせる)です。
最近は苔桃楓(こけももかえで)という名義で曲を作っていたりします。
TDL は "DTM" と名のつく通り、DTM をするサークルですが、
今回の記事では DTM とはほぼ関係ないことを書きます。

Make a Melody!

で、何を書くか迷っていたのですが、
昨年、初めて Webアプリケーション というものを作ったことを思い出しました。
作って遊んで Github に置いてそれっきり放置していたのですが
当時好評だったし鯖もあるしせっかくなので手を加えつつ公開してみました。

それがこの Make a Melody! です

f:id:kokemomokaede:20161202004406p:plain

※画像はイメージです

Web アプリケーションとは

Web 上で動くアプリケーションのことです。
TDL 民に馴染みの深い代表的な Web アプリとして Twitter や Slack(Web版) が挙げられます。

何ができるの

フォームに名前と苗字を入れて [♪Make♪]ボタンを押すと、1秒程度の長さのあなただけのメロディが流れます。
そのため、音の出る環境でご使用することをおすすめします。

現状では「あなただけ」とは限らず、他の人と被ってしまう可能性があります。
ご了承ください。

また、入力された名前はサーバには保存されないので、
安心して本名やニックネームを入力して遊んでください。

注意点

  • 日本語ではなくローマ字で記入してください
  • 最初の一文字は大文字にしてください
  • ミドルネームには対応しておりません
  • 英字以外の文字にも対応しておりません(韓国語やアラビア語など)
  • IE と一部の Android には対応しておりません(Web Audio APIが)
  • ブラウザによっては何回かやると音が流れなくなるので 再読み込みしてください(後述)

これを作ったきっかけ

授業で「なんか面白いWebアプリを作れ」と言われたので。
あとなんか音が出るやつを作りたかった。

作成期間

去年の5月、1週間程度で作りました。
Web の技術に触れて1ヶ月程度の頃に作ったのでほぼ右も左もわかっていませんでした。
今はどっちが右でどっちが左かくらいはわかるようになってる、はず

使用技術

Web アプリを作るとき、主に3つの技術が必要になります。

  1. HTML - Web ページの中身を記すための技術(まさにこの「文字」がそれです)
  2. CSS - Web ページの見た目を記す技術(背景画像や文字の色、配置など)
  3. JavaScript - Web ページをなにか拡張させるための技術(このボタンを押したらこの音が鳴る、など)

Web アプリのキモになるのは、だいたい JavaScript です。
略して js と呼ぶことが多いです。
js をどれくらい駆使できるかによってアプリの機能や面白さが変わってきます。
もちろんものによってはこの3つ以外の技術を使うことになります。Ruby とか PHP とか聞いた事ある人多いかもしれません。

このアプリも例に漏れずこの3つの技術を使っています。

開発人数

1人です。(1人で作れという課題だったので)
この程度かもう少し大きめの規模であれば1人での制作が可能です。

これが会社規模まで大きくなると、人数も増えて役割も分業制になります。
(たとえば js を書く人はエンジニア、CSS を書く人はデザイナー、というふうに分けられます)

なんで音が鳴るの

Web Audio API という js の技術を使っています。

なんで自分だけのメロディが作れるの

入力された名前と苗字からメロディをアレコレしているからです。

メロディの著作権はどこにあるの

あなたのメロディなのでご自由に使ってもらって構いません。
ただしメロディは仕様変更により変わる可能性があります。今後仕様変更があるかどうかと言われると多分ないです。

なんで音が鳴らなくなるの

現在、ChromeSafari では、
何回かボタンを押すと音が鳴らなくなるエラーが発生します。
このあたり強い人、対策を教えて欲しい…

Uncaught DOMException: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).

Web アプリ制作のメリット

  • 「あーこういうサイトがあったらいいのに!(あったら面白そう!)」ってのを作れる技術が身につく
  • お金はほぼかからない(Webブラウザとテキストエディタがあればとりあえず何か作れる)
  • 手軽(規模による)
  • 技術の習得が早い(作曲と比べて)
  • 作ったものをすぐWeb上で公開できる(DTM も曲をすぐ公開できるので似たような感じか)
  • 就職に繋がる(DTM は就職に繋がらない、とまでは言いませんが、Webエンジニアの求人は楽曲制作の求人とは比にならないくらい多いです)

Web アプリ制作のデメリット

  • エラーにハマると死ぬ
  • エラーの解決方法がわかったけど英語で書かれていることが多くてよくわからない(慣れると多少わかるようになる)
  • アプリを作る前の環境構築が面倒(一度やればいいだけだけど)
  • 技術の流れがとても早いので頑張ってついていく必要がある

総括

Web アプリを作るって一見難しそうに見えるけど、多分作曲の方がめっちゃ難しいと思うんです。。。
Web を使うと面白いものが手軽に作れて楽しいよねっていう話でした。

Web の技術に興味がある人、とりあえず HTML と CSSJavaScript を書けるようになりましょう。
ついでに何か作ってみて、余力があれば世に公開しましょう。

Web の技術に興味がない人、そのまま曲を作り続けてください。
Web アプリを書くことより DTM で作曲することの方がおそらく難しいことです。

もっと知りたい、バグを見つけた、など

私のついったーや、Slackで気軽にメッセください。おそらくMTにはほぼ来ません。

もしくは、Githubでソースコードを参照することもできます。
(結構ぐちゃぐちゃですが。。。)

旅2日目

今日はあまり特筆すべきことがない。

 

8:30

ホテルの朝食を食べる。バイキング方式。

ビジネスホテルなので、種類はとても少ない。

そのことを難点として挙げてクチコミに書く人もいるようだが、

個人的には、種類は少なくて良いので、1つ1つがちゃんと美味しくて口に合うものを提供してくれた方がありがたい。

あとは紅茶を淹れられれば良い。

 

10:30

博物館へ行く。

ただの博物館ではない。その博物館は、オルゴールしか展示されていない、オルゴールの博物館だ。

しかもそこへ行く交通手段は、ロープウェイのみである。ロマンに溢れている。

 

ロープウェイに乗るため、そこそこ長い時間バスに揺られて移動。

チケットを買う際、「風が強いから、もしかしたらロープウェイ止まるかも」というようなことをチケット係の人に言われた。

案の定、私が乗るはずだった便は、強風により運行中止となってしまった。

 

天気図をよく見たら、台風が思ったより近付いていた。

 

せっかくここまできたのに!せっかくのオルゴールが!バス代が!

しかしこれも旅の醍醐味。何が起こるか分からない。

すぐ側に寂れた遊園地があったが、こうも風が強ければ、ジェットコースターも動いていないだろう。

悲しみのとんぼ返り。

 

12:30

f:id:kokemomokaede:20160920232742j:plain

 

ランチついでの紅茶。あまり美味しいとは思えず。

紅茶とゼリーの組み合わせってなかなか無くない?

 

場所が場所だったためか、客層もよく、優雅で上品な空間での食事だった。

 

13:30

また博物館へ行く。

ただの博物館ではない。世界各所の楽器が展示されている楽器の博物館だ。

こちらは駅からほぼ直結しており、屋根伝いで建物まで行ける。

 

なんと楽器の展示を見るだけでなく、楽器の演奏を録音したものを聴くこともできる。

f:id:kokemomokaede:20160920233754j:plain

これは私も持っている型で、最近は主にDJ用として使っている。

やや音がこもって聴こえるが、遮音性は抜群。

 

 

f:id:kokemomokaede:20160920234454j:plain

電子楽器も展示されている。このコーナーは2周回った。

 

 

f:id:kokemomokaede:20160920234702j:plain

昔のピアノやオルガンには、なぜか燭台が付いているものがある。ゴシックな雰囲気。

 

 

f:id:kokemomokaede:20160920234935j:plain

なんか本みたいになってるとこがおそらく空気弁。カッコイイ。

 

 

f:id:kokemomokaede:20160920235226j:plain

豪華チェンバロチェンバロハープシコードって同じ楽器らしい。

おそらく当時の貴族とか王朝の家に置かれていたんだろう。

 

 

f:id:kokemomokaede:20160920235632j:plain

電子チェンバロ。作られたのはかなり最近のようだが、チェンバロが使われた時代に乗っ取って神々しい絵が描かれている。

しかも演奏もできる。

 

 

f:id:kokemomokaede:20160920235834j:plain

ジラフピアノというらしい。剥き出しのアップライトピアノのよう。

 

なかなか楽しかった。ここはまた来たい。

 

 

15:30

本当は楽器屋巡りでもしたかった。

が、雨がひどく降っていた。雨にも負けじと、風も強く吹いていた。昨日買った折り畳み傘なんて差している場合ではなかった。楽器屋へ行くのを断念。

 

17:00

新幹線に乗る。

 

21:30

家に到着。

 

短いようで長い2日間だった。

しばらく旅には行かなくても良さそう。

 

おそらく旅の目的は果たせた。筈。

もし次誰かと来ることがあれば、そのときはあの有名なハンバーグ屋に行きたい。

あとオルゴールリベンジしたい。

 

 

旅1日目

Twitter に長い文章を書きたくないのでここに残す。

 

1泊2日の旅に出ている。

目的は3つある。主な目的は、インスピレーションを得ること。

あと周囲のいろんな人が旅行してたので旅行したくなった。

 

10:30

家を出る。

 

12:30

f:id:kokemomokaede:20160919230141j:plain

お昼にカフェでも行こうと思ったら、思ったより人気店で結構並んでいた。

仕方なく別のカフェへ。

今度誰か誘って行きたい。

 

14:30

f:id:kokemomokaede:20160919230139j:plain

美術館へ行く。目的はダリ展。

実はまっとうな美術展へ行って歴史ある画家の芸術品を鑑賞したのはこれが初めて。

で、やはり、絵は、わからなかった。

「ダリの絵は、ダリにもわからない」なんていうダジャレがあるくらいだし、分からなくてもいいか。

そして思ったより、人が多い。こんなに人が多くては、見るのも疲れる。

 

印象的だったのは、

最初の方で、「キュビズムななんちゃら」という絵があり、それを見た子供が「こわいー!」と泣き叫んでいたことである。

一見、不可解な絵ではあるが、そこから「恐怖」を子供に与えるという、凄まじい力を持っている絵なのだろう。そんな曲書きたいなぁ。

 

また、展示の中には、ウォルト・ディズニールイス・ブニュエルという映画監督らとコラボした映像作品も放映されていた。

映像の中には一部ショッキングなシーンもあり、倒れてしまうお客さんもいた。

 

気持ち悪さで倒れてしまうような、恐怖で泣き叫んでしまうような、しかし美しく、ちゃんと音楽として成り立っている音楽は、どのようにすれば作れるのだろうか?

 

16:00

f:id:kokemomokaede:20160919230210j:plain

新幹線に乗る。

飛行機はもう数えられないほど乗ったことがあるが、新幹線はまだ数えるほどしかない。

 

19:00

f:id:kokemomokaede:20160919230050j:plain

雨が降っていたが、折り畳み傘を持ってきていなかったので買う。ついでに入浴剤も。

遠出する度に、雨に降られて折り畳み傘を買っている気がする。

 

 

19:30

f:id:kokemomokaede:20160919230154j:plain

鰻を食す。

入ったお店はほとんど人がおらず、半貸切状態。しかし人が多すぎてうるさいよりかは大分マシ。ただお店の経営が心配になる。

店の窓から新幹線のホームが見えてとても愉快だった。

鰻はとても美味しかったが、夏に食べた地元産の鰻のほうが分厚い気がした。

 

 

明日も色々巡る予定。