Web Music Developers Meetup #3 発表資料 https://gyazo.com/2b81c8ae28acab054b68d8146c2fecef
右側のボタンからStart Presentationするとプレゼンモードになります
https://gyazo.com/42717590c31b77b39809e0c168cfaca2
hyperscoreboxのご紹介
@Web Music Developers Meetup No.3
2018/12/21
by satake.icon
https://gyazo.com/07bbacb0a0839879edc2f2ae20027748
自己紹介
satake.icon 佐竹紘明 (さたけひろあき)
/icons/twitter.icon @isSatake
/icons/github.icon @isSatake
慶應SFC 修士2年
増井俊之研究室
ユーザーインターフェースが専門
春から/icons/サイバーエージェント.icon に就職する
今日話すこと
hyperscorebox を作ったので紹介する
Web時代の新しい楽譜システム
Web (Audio | MIDI) API は直接使ってません
楽譜は印刷物である
せいぜいメモ書きしかできない
他の情報にリンクできない
他の情報からリンクできない
楽譜は印刷物である
この問題を克服する楽譜があれば、もっと便利になるのではないか?
自在に編集したり、ハイパーリンクを利用できる楽譜システムを作る!
作った
hyperscorebox
https://gyazo.com/2b81c8ae28acab054b68d8146c2fecef
hyperscorebox
サクサク楽譜を書ける
音符ハイパーリンクを使って楽譜を整理できる
様々な情報と一緒に楽譜を管理できる
DEMO
Scrapboxを軽く紹介
楽譜入力
音符ハイパーリンク
DEMO (実験的な機能)
楽譜IME
楽譜インポート
インストール
https://gyazo.com/ec3dce663143e003f23b2c4f921fad6e
実装
Scrapboxで動くChrome拡張として実装
TypeScript
abcjs
楽譜を描画する方法
Scrapboxにはコードブロック記法がある
コードハイライトしてくれる機能
code:と書き始めるだけで使える
実際に書いてみる
code:example.js
console.log("わんばんこ");
楽譜を描画する方法
コードブロックに楽譜のSVGを重ねる
code:title.abcなコードブロックが対象
abcjsでSVGを生成
ページ変更を検知してリアルタイムに反映
code:example.abc
abcabc
abcjsはいいぞ
HTML上に楽譜を書けるライブラリ
ABC記法 -> SVG にしてくれる
その他
今後の予定
修士研究の一環で作ってるので、修論を書かないといけない
色々落ち着いてからバージョンアップします
その他
ABC記法のヘルプサイトを作ってます
ABCの逆引き辞書として使えるようにしたい
どなたでも編集可能です
hyperscoreboxをインストールすると楽譜が見えます
ありがとうございました
アドバイス
Background Pageを経由すればabcjsから音声再生できるかも? by @toyoshim