Web Musicハッカソン#4@京都にて制作した『ドット絵シーケンサ』の技術的な話をまとめました。
ドット絵シーケンサ技術的うらばなしWeb Music ハッカソン #4 @京都 Jul 25, 2015
View Slide
• armorik83• 京都市• Webエンジニア• 元音楽屋、MIDI講師
Web Music ハッカソン？
• Web MIDI API (Chrome 43)• Web Audio API (Chrome 35)• これらのAPIを活用するハッカソン• 第四回は西日本初の大会で、京都市で開催
• MIDI検定1級所持• MIDI検定認定講師資格も所持 （専門学校で講師をしていました）• 今はWebの仕事をしている• 出場するしかない• 今回は初ハッカソン
チーム編成
• armorik83• _likr• pastelinc• ussy9
• armorik83 from ng-kyoto• _likr from ng-kyoto• pastelinc from ng-kyoto• ussy9 (内輪感あるチームに快く参加していただきありがとうございました）
3人もng-kyoto宣伝 [ng-kyoto Angular Meetup #2] [検索]
何をつくろう
DAWでこういう遊びをした人、居るはず
音符をドットに見立てて絵が描けるやつ作るか！
で、こんなん作りました
設計
• ドット絵が描ける• ドットは鍵盤（MIDIキーボード）にて入力• 現在のカーソルにドットが置かれたら カーソルは右に動く（DAWのステップ入力的）• 領域外の低音を弾くとカーソルは左右に自由に動かせる
• ドットは2値ではなくベロシティによる濃淡表現が可能• MIDIは16チャンネルまであるので チャンネルごとの色分けで最大16色使用可• 1ドットは16分音符1個に対応• 縦1ドットが半音単位だと不協和音が頻発するので スケール（旋律：長調、短調、Blues風など…）を選択し シーケンサ上のドット絵でありながら調性が整う
• ドットは2値ではなくベロシティによる濃淡表現が可能• MIDIは16チャンネルまであるので チャンネルごとの色分けで最大16色使用可• 1ドットは16分音符1個に対応• 縦1ドットが半音単位だと不協和音が頻発するので スケール（旋律：長調、短調、Blues風など…）を選択し シーケンサ上のドット絵でありながら調性が整う元音楽屋として、ここかなりこだわらせてもらった
• Firebaseによる複数人同時編集• WebGLによる3D表現• DAWではない、Webっぽさを意識
技術選定
• Web MIDI API• AngularJS• Firebase• SVG• WebGL• 独自ライブラリ
• ハッカソンにおいて最重要APIなのだが 4人の作業時間を合わせると、扱った時間は一番短い• InputもOutputも取り扱う• Web Audio APIは使用していないWeb MIDI API
• UIとアプリケーションの中枢はAngularJS 1.4.3を採用• 経験者が75%という強み• 改めてモックアップを作るのに最適な フレームワークだと実感AngularJS
• 永続化• 複数人同時編集の同期• Web Music ハッカソンがGDG主催なので（？）Firebase
• UIの描画はすべてSVG• D3.jsを使用• 配列の可視化に強いSVG
• ussy9さんのアイデア• three.jsで利用• 音の再生にあわせてイイ感じに3D演出が動く！WebGL
• MIDI入力をグリッドの座標に変換 座標をMIDI出力に変換するためのロジック• 入った数値を内部の関数によって変換する 単純なコンバータ• 前例が無いのでライブラリ的に実装独自ライブラリ
担当者
• Web MIDI API: pastelinc, armorik83• AngularJS: _likr• Firebase: _likr• SVG: _likr• WebGL: ussy9• 独自ライブラリ: armorik83
ぱんだ無双！！
作業開始
• GitHubにリポジトリ立ち上げて作業• 全員Gitの知識があったのでPRベースのチーム開発• Slackもすぐに立ち上げ、進捗や口で伝えにくい部分（ソース周りなど）をチャットで相談• 口頭で話しつつ、参考サイトのURLなどを貼っていく• GitHubと連携させてPR情報がドンドン入ってくるの めちゃ便利だった
• AngularJS周りは_likrが整備（AngularJSのベテラン強い）• 当たり前のようにES2015 Babel + Browserify• `npm run watch` によるwatchifyベースの開発• CSSなし、gulpなし、ESLintなし、テストなしの ハッカソンらしい軽量装備（少ないほどチーム内に広めやすい）• AngularJS周りの設計については ng-kyoto Angular Meetup #2で詳しく話す
• 仕様の詳細を決める• ドットは縦40, 横64とする• 縦は、スケールの周期が5音〜7音のため 6〜8オクターブ必要となることから限界の40• 横は、4分の4拍子4小節分の16分音符数から算出 将来的にはいくらでも可能（なはず）
• データ構造的には[[0..39], [0..39]..[0..39]] length 40の配列を格納するlength 64の配列• 音符（Note）は3プロパティを持つ• NoteNumber• Velocity• Channel• 意図的にMIDI仕様と同じ構造にした
• ハッカソン時間内で全てのプロパティが有効に 活用されなかったとしても、VelocityやChannel値は 今後の表現に活用できるため省略せず含ませた• 絶対時間情報も持たせない• Note OnとNote Offの送出時間差で 音符の長さを表現• これもMIDI仕様に従っている
• AngularJSのアプリケーション中枢が 非MIDIのNote onやNote offイベントをpubする• イベントを受けたMIDIプレイヤーと3Dレンダラーが それぞれ作用する• MIDIプレイヤーはイベントに合わせて 生のMIDI Note on/offを送信• 3DレンダラーはVelocity値などを活用し three.js APIを叩いて表現（この辺担当してなくて詳しくない）
• MIDIインタフェース（受信側）は鍵盤から入力されたNoteNumber（ドレミに番号を振ったもの）を 変換ライブラリを通して座標のY値に変換する• 変換ライブラリは2時間足らずで作成 テスト駆動でやりたかったので、別リポジトリを立ち上げ gulpのwatchとMochaでガンガン回しながら開発• gulpは定番構成を使ったので3分で開発開始できた• 普段からハッカソン用スケルトンみたいなのがあると強い
アーキテクチャ
8FC.*%*"1*.BJO$POUSPMMFS锃侭䕵WJTVBMJ[FS8FC(-䬐䔲%JSFDUJWFHSJEء٦؛ٝ؟邌爙䬐䔲%JSFDUJWFBOHVMBSNPEVMF 'JSFCBTF宕竲⻉ծ醱侧،ؙإأ儗ךⰟ剣.*%**OQVU.*%*Ⰵ⸂Ⳣ椚4FSWJDF.*%*1MBZFS.*%*⳿⸂4FSWJDF$POWFSUFS.*%*/PUF/VNCFS䏟垥ח䏟垥.*%*/PUF/VNCFSחバックエンドフロントエンドブラウザAPI層
結果と反省点など
で、こんなんできました
• 受賞して景品を頂きました！ (Thanks!)
• WebGL全般• 旋律に応じてMIDIを座標に変換するコンバータ• 旋律選択（長調とBluesのみ）• MIDI入力に合わせて画面にドットが点灯• MIDIを出力してソフトシンセ（Cubase使用）で発音• Firebaseでの編集同期できたところ
• ChannelやVelocityに応じた色の変化（今は黒一色）• カーソルを自由に動かせる機能 今はドットを入力しないと隣にカーソルが移動しないやってないところ
• 40*64の配列の編集はかなり重いのか 同期がとにかく遅い• 開発中にスクリーンを真っ白にする機能をまるで 忘れていて、デモ中に1から点を打っていく演出が できなかった• 開発中の大量の点があったためデモ再生で一斉に 音が鳴り、旋律選択があまり伝わっていなかった惜しかったところ
• MIDI入力部分のフォローが足りていなかった （最重要機能で完成も一番ギリギリ）• Web MIDI APIの予習はもうちょっとしておくべきだった• デバイスポート周り、端末依存しそうなコードを いかに抽象化できるか• けっこう低レイヤーで直接叩くと使いにくいという学び• 今回はDAWのソフトシンセ依存だったので可搬性・再現性が悪い Web Audio APIのシンセと組み合わせたらブラウザ内で完結できそう個人的な反省点
• 反省点はありつつも、6時間でここまで作れたことは自分でも驚いた• ES2015はチーム内のコーディングを ある程度整えるポテンシャルがある（他言語のclass構文経験者なら余裕）• AngularJSのイベント駆動でインタフェースや内部APIを実装より 先に定めたおかげで、双方ブロッキングせずに開発が進んだ• 細かいところは詰まってないがシーケンサは ブラウザのみでも十分作れる（要パフォーマンス・チューニング）感想
• この人数・納期規模の開発だと とにかく設計力 ＆ 実装力（あと地味に命名力）• ここが高ければ高いほど初速が良く、全体が進みだす• 配列処理周りのアルゴリズム・API暗記は必須と痛感• 今後、だいたい開始時に出たアイデアの7割が 達成ギリギリラインだと見積もっていく今後の課題
• 今回のハッカソンで制作した『ドット絵シーケンサ』は オープンソースカンファレンス2015 Kansai@Kyoto のng-kyotoブースにて展示します• 8月7-8日 京都リサーチパークで開催 http://www.ospn.jp/osc2015-kyoto/• ぜひ遊びにきてね宣伝
お疲れさまでした！
okunokentaro
atinfinity
ryounasso
fwbrasil
rakus_dev
kasacchiful
ffjlabo
seike460
gregonnet
miyuki2203
aridlehoover
clown0082
kazupon
carmenintech
quramy
panda_program
tammyeverts
michaelherold
sonatard
ammeep
paulrobertlloyd
pedronauck
orderedlist
myddelton
tanoku