ドット絵シーケンサ 技術的うらばなし

Web Musicハッカソン#4@京都にて制作した『ドット絵シーケンサ』の技術的な話をまとめました。

Transcript

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