テキストで作るコード譜

概要

テキストで「| Cm7 | F7 |」のように書くと、ブラウザで譜面になるエディタです。移調できます。コードの音が鳴ります。PDFに出せます。コンビニで印刷できます。そして、演奏中に両手がふさがっていてもページがめくれます。最後の機能だけ少し奇妙に聞こえると思いますが、これは「うなずくとページがめくれる」という機能で、Webカメラで顔の角度を読んでうなずきを検出します。Bluetoothのフットスイッチでも操作できますし、BPMに合わせて自動スクロールもします。要するに、演奏者が手を動かさずに済む工夫を全部入れました。

用途

練習・演奏の現場で、書く・見る・印刷する・演奏する、までを一つの画面で完結させるためのツールです。

使用技術

• — PHP / バニラJavaScript
• — VexFlow（譜面描画）
• — jsPDF + svg2pdf（PDF出力）
• — MediaPipe Face Landmarker（うなずき検出）
• — Web Audio API（コード再生）
• — NWPS API V2（コンビニ印刷連携）

工夫点

技術面

フロントエンドはビルドツールもSPAフレームワークも使わず、依存ゼロで動かしています。MediaPipeのような重いライブラリは、必要になったタイミングで動的にimportする方式で、初期表示の重さを避けています。コンビニ印刷のAPIキーはサーバー側に隠して、フロントエンドからは触れない構造にしました。

使いやすさ

演奏中に両手がふさがる、という現場の制約から逆算して、うなずき・フットスイッチ・自動スクロールの三系統のページめくりを用意しました。三つは互いに干渉せず、フットスイッチを使っているときは自動スクロールが止まるなど、細かい譲り合いをします。