苔桃日記

超気まぐれ

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でソースコードを参照することもできます。
(結構ぐちゃぐちゃですが。。。)