かしこくもなりたいし、女の子にもなりたかった。

とってもガーリーなゆるふわ愛され何でも屋を目指す、30代男性がお送りするファビュラスなブログ。

Web Music ハッカソン#3に実は行ってたって話。

f:id:takustaqu:20141115034528j:plain

またハッカソンいかへん?という話はエンジニアの松尾君(通称niuやん)と度々話をしていたものの、なかなか都合がつく良いイベントが見つからず...と、そんなときに出会ったのが、このWeb Music Hackathonでした。

しかも会場は情報産業界の憧れとも言えるGoogleの日本オフィス。行くっきゃない!

と、最近の話のようにいってますが、実はこれ9月の話ですorz でもこれを書かないで、次のハッカソンには行けないしね!


イデア

いうまでもない話としてハッカソンは当日作ってなんぼなイベントである故、当日何が(APIとか、ガジェットとか)用意されているか?でやはり本番作るものは決めたいところですが、この辺は前回同様に松尾さんとのアイデア出しをあらかじめ行いました。

事前にある程度公開されていた機材類の他に意表をつく飛び道具が出てくることは幸い無かったので、事前ブリーフィングでのアイデアをほぼそのまま持ち出すことになります。。

イデア出し

  • WebAudio APIとWeb MIDI APIを使いたい。
    • 「そういやGetUserMediaでマイクの音ひろって、スペアナ表示してるデモ見たことある。」
    • 「WebMIDIあればポケットミクとかさくっと使えますな。」
  • 何かしらの飛び道具を持ち込みたい。

上記のアイデア出しから、以下のようにまとまっていきます。

オーディオケーブル1本でMIDI化できるとしたら、
それはクールと呼べるのではないだろうか?

それが、今回のオタマトーンをPCのライン入力に繋ぐだけで、MIDI化されるWebアプリケーション」です。非常にシンプル、そして誰の目に見てもクールです。多分。

が!

このアイデア、俺のやる事があんまりないんですよね.... そんなわけで、スマートフォン用UIを作るという私の仕事の創出を目的とした機能が付いたわけです。


開発

実行環境

なぜnode.jsではなくnode-webkitだったのか

node-webkitとは、簡単に言うとChromiumの中に入ってるJavaScriptエンジン(V8)を、同じV8派生であるnode.jsに置き換えた奇跡の融合物です。しかも1つのパッケージに纏めて、あたかも単体のアプリケーションのように振る舞うことも出来ます。

我々はデモマシンにnode.jsをインストールしたり、などの手間がないので単なるnodeなアプリケーションの実行にも使う事がありますが、今回の最大の目的は、WebMIDIやピッチ解析をnode-webkit内蔵のWebkitで行えば、アプリケーションを立ち上げて、そのアプリケーションが提供するWebサーバーにスマートフォンで繋ぎに掛かればスマートじゃん!という発想からでした。

まあ肝心のWebMIDI周りの実装が今のChromeに追いついていない事もあったので、結局node-webkit内での実行をあっさり諦めて単なるWeb+socket.ioなサーバーとなったのですが、単なるnode.jsでの実行としなかった理由はこういった経緯があったためです。(まあ動かせなくもなかったんでしょうが、その辺のスマートさよりも一通り動く事を優先する必要がありましたし、確実な方法を取ったと)


UI周り

ぶっちゃけ処理周りは専門外なので書いた奴のエントリー読んで頂くとして、私は前述の通りデザイナなので、スマートフォン上で展開されるUIを書いていました。

f:id:takustaqu:20141115034556j:plain

タイトルバーに出ていたYAYANEは、kirinsan.orgの名誉総教祖であるヤヤネヒロコ神からいただいています。(こう書くといつも本人に怒られるんですけどね!)

UIとエンジン部は前述の通りSocket.io越しで叩いています。この構造、まるでフォトカプラ越しにやり取りをするMIDIのような感じで素敵じゃん?とよく判らない事を考えて居たのですが、意外とこういう開発をするときにUIと内部の処理を切り分ける手法としては有りなのかもしれません。(ケースバイケースですし、ローカルで完結するようなもんであればはっきりいってお行儀は良くないですが)

感覚を与えるUI

ダイレクトな反応は、学習性の高いUIに必須だと思っています。そのため、今どの音なのか?ということの表示の仕方は、入力デバイスとしてのオタマトーンを扱う上での「感覚」を養うために非常に重要だと考えました。

これが、画面レイアウトの一番目立つ箇所に検出したノートを表示するようにした根拠です。

アニメーションの持つ情報

ピッチ変化はリニアな移動、もしくは時間と変化の2軸グラフで表現できるでしょう。ギターのチューナのようなものも考えましたが、今回は文字が上下に移動して切り替わるシンプルな物としました。ダイレクトに結果をきびきびかえても良いんでしょうが、変化に合わせてアニメーションするのは、自分の行動がどういう結果をもたらしているのか?を体感出来るようにする意図があります。

このあたりはほんとはもっと精密な制御をするべきなのかもしれませんが、シンプルにCSSのみでおこなっています。

f:id:takustaqu:20141115034612j:plain


プレゼンテーション

幸いな事に今回は日本語話者が中心だったため、プレゼンテーションは素直に日本語で行いました。

例によってゲラゲラ騒がしく作業していた事と、割と周りになにをやっているか理解されていた感があったものの、オタマトーンから銃声がするというだけで笑いが取れるのはなかなかに爽快です。芸人冥利に尽きます。

正直あとから見直すと不手際が目立つのも確かなので、このあたりどれだけスムーズに見せるか?は本当に以降気を付けたいところ。


反省点

  • 事前にある程度スライドで準備しておけるところは準備しておこう...
  • 落ち着いて話そう、
  • 2人ともgitによるチームでの作業に不慣れ故Dropboxの共有で済ませてたので、次回からはちゃんとやろう、
  • 食わず嫌いせずにそろそろ生産性向上に強めよう。Scss使えよ、
  • 音色のプリセットの組み替えとショートカットボタンの実装はやりたかった。正直デモの時にそのあたり非常に無様だと自分で思ってしまったので、どうにかしないとな、

終わってみて

まあ改めてこう思い返すと、我々kirinsan.orgの良い点は、目標設定が上手く行ってるという点かもしれないと思いました。作りたいと思った完成形になんだかんだ到達出来てますからね。実はこれって結構難しい事なんでないかな?と思う訳です。

そして我々2人のもう一つの良い点としては、「お互いを笑わせに掛かってる」という点かもしれません。

今回なかなかカルチャーショックだったのは、Chromeの中の人たちから日々変わるWebMIDIの実装、そして変わった結果、で、必要あらばできたてのビルドまで用意しているというまさに最前線の方々がそこにいたという点。これ感動でした。

そして肝心の結果は、総合3位!ありがとうございます。Tシャツもらっていきました。壁に飾ってます。

次回はもう明日に迫ったTechCrunch Tokyo Hackathon 2014です。正直まだなにをするのか、今まで以上に見当も付きませんが、今度も変わらずのスタンスで、kirinsan.orgらしい事が出来れば良いですね。