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

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. お疲れさまでした！