[{"data":1,"prerenderedAt":1978},["ShallowReactive",2],{"content-/piano-roll-implementation":3,"related-/piano-roll-implementation":1928,"all-pages-for-dir":1976,"og-image-/piano-roll-implementation":1977},{"id":4,"title":5,"body":6,"category":1908,"description":1909,"extension":1910,"meta":1911,"navigation":1912,"path":1913,"project_name":1914,"published":1915,"publishedAt":1916,"seo":1917,"stem":1918,"tags":1919,"todo":1926,"unpublished":1915,"updatedAt":1926,"__hash__":1927},"pages/2026-06/2026-06-11/piano-roll-implementation.md","Synthesia風「降ってくる音符」のピアノアプリをWeb Audio + Canvasで作った——実装の詳細メモ",{"type":7,"value":8,"toc":1882},"minimark",[9,14,23,48,52,79,83,86,146,153,156,164,290,304,564,567,574,693,696,700,707,748,759,762,771,775,778,786,1175,1182,1185,1192,1213,1216,1323,1337,1348,1352,1355,1363,1366,1401,1404,1466,1474,1484,1506,1517,1575,1582,1585,1596,1716,1731,1734,1737,1748,1798,1801,1804,1807,1811,1821,1825,1834,1837,1840,1843,1857,1860,1878],[10,11,13],"h1",{"id":12},"synthesia風降ってくる音符のピアノアプリをweb-audio-canvasで作った","Synthesia風「降ってくる音符」のピアノアプリをWeb Audio + Canvasで作った",[15,16,17,18,22],"p",{},"「こういうピアノアプリ作れますか」と1枚のスクリーンショット（暗い夜空を背景に、青と金色の音符バーが88鍵の鍵盤へ降ってくる映像）から始まったプロジェクト。YouTubeのピアノ演奏動画でよく見る、いわゆる ",[19,20,21],"strong",{},"Synthesia風（ピアノロール型）ビジュアライザー"," を、外部ライブラリなし・ブラウザ標準APIだけで実装した。",[24,25,26,34],"ul",{},[27,28,29,30],"li",{},"デモページ: ",[31,32,33],"a",{"href":33},"/piano-roll",[27,35,36,37,41,42,41,45],{},"実装: ",[38,39,40],"code",{},"apps/web/app/pages/piano-roll.vue"," ＋ ",[38,43,44],{},"app/utils/pianoRoll.ts",[38,46,47],{},"app/data/piano-roll/songs.ts",[49,50,51],"h2",{"id":51},"どんなアプリか",[24,53,54,57,63,70,73,76],{},[27,55,56],{},"音符バーが画面上部から降ってきて、鍵盤の上端（判定ライン）に届いた瞬間に音が鳴り、鍵盤が光る",[27,58,59,62],{},[19,60,61],{},"青が右手、金色が左手","。本家Synthesiaや演奏系YouTuberの配色に合わせた",[27,64,65,66,69],{},"バーには",[19,67,68],{},"運指番号","（1=親指〜5=小指）を表示できる（トグルでオン/オフ）",[27,71,72],{},"内蔵曲は「エリーゼのために（主部・約1分）」「カノン」「きらきら星」の3曲",[27,74,75],{},"テンポ（50〜150%）・音量・シークバー付き",[27,77,78],{},"音はすべてWeb Audio APIでリアルタイム合成。音源ファイルは1つも使っていない",[49,80,82],{"id":81},"全体構成ロジックと副作用の分離","全体構成——ロジックと副作用の分離",[15,84,85],{},"ファイルは3つに分けた。CLAUDE.mdの「純粋関数とI/Oを分離する」方針に沿っている。",[87,88,89,105],"table",{},[90,91,92],"thead",{},[93,94,95,99,102],"tr",{},[96,97,98],"th",{},"ファイル",[96,100,101],{},"役割",[96,103,104],{},"副作用",[106,107,108,121,133],"tbody",{},[93,109,110,115,118],{},[111,112,113],"td",{},[38,114,44],{},[111,116,117],{},"鍵盤レイアウト計算・時間変換・再生位置の検索",[111,119,120],{},"なし（純粋関数のみ）",[93,122,123,127,130],{},[111,124,125],{},[38,126,47],{},[111,128,129],{},"内蔵曲の音符データ",[111,131,132],{},"なし（定数データ）",[93,134,135,140,143],{},[111,136,137],{},[38,138,139],{},"app/pages/piano-roll.vue",[111,141,142],{},"Canvas描画・Web Audio発音・UIイベント",[111,144,145],{},"すべてここに集約",[15,147,148,149,152],{},"純粋関数に切り出したおかげでVitestのユニットテストが34本書けて、後述するとおり",[19,150,151],{},"データの不整合をテストが実際に1件検出した","。",[49,154,155],{"id":155},"曲データの持ち方",[157,158,160,161],"h3",{"id":159},"_1音-midi-start-dur-hand-finger","1音 = ",[38,162,163],{},"{ midi, start, dur, hand, finger }",[165,166,171],"pre",{"className":167,"code":168,"language":169,"meta":170,"style":170},"language-typescript shiki shiki-themes vitesse-light vitesse-light","export interface NoteEvent {\n  midi: number      // MIDIノート番号（A0=21 〜 C8=108、A4=69が440Hz）\n  start: number     // 開始位置（曲ごとの時間単位）\n  dur: number       // 長さ（同上）\n  hand: 'L' | 'R'   // 左手 / 右手（バーの色分け）\n  finger?: number   // 運指番号 1〜5（任意）\n}\n","typescript","",[38,172,173,194,211,224,237,268,284],{"__ignoreMap":170},[174,175,178,182,186,190],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"sHkkW","export",[174,183,185],{"class":184},"stQ0i"," interface",[174,187,189],{"class":188},"sSkh3"," NoteEvent",[174,191,193],{"class":192},"shFtX"," {\n",[174,195,197,201,204,207],{"class":176,"line":196},2,[174,198,200],{"class":199},"s4oTP","  midi",[174,202,203],{"class":192},": ",[174,205,206],{"class":188},"number",[174,208,210],{"class":209},"sxvE3","      // MIDIノート番号（A0=21 〜 C8=108、A4=69が440Hz）\n",[174,212,214,217,219,221],{"class":176,"line":213},3,[174,215,216],{"class":199},"  start",[174,218,203],{"class":192},[174,220,206],{"class":188},[174,222,223],{"class":209},"     // 開始位置（曲ごとの時間単位）\n",[174,225,227,230,232,234],{"class":176,"line":226},4,[174,228,229],{"class":199},"  dur",[174,231,203],{"class":192},[174,233,206],{"class":188},[174,235,236],{"class":209},"       // 長さ（同上）\n",[174,238,240,243,245,249,253,255,258,260,263,265],{"class":176,"line":239},5,[174,241,242],{"class":199},"  hand",[174,244,203],{"class":192},[174,246,248],{"class":247},"sMJiu","'",[174,250,252],{"class":251},"sdGka","L",[174,254,248],{"class":247},[174,256,257],{"class":192}," | ",[174,259,248],{"class":247},[174,261,262],{"class":251},"R",[174,264,248],{"class":247},[174,266,267],{"class":209},"   // 左手 / 右手（バーの色分け）\n",[174,269,271,274,277,279,281],{"class":176,"line":270},6,[174,272,273],{"class":199},"  finger",[174,275,276],{"class":184},"?",[174,278,203],{"class":192},[174,280,206],{"class":188},[174,282,283],{"class":209},"   // 運指番号 1〜5（任意）\n",[174,285,287],{"class":176,"line":286},7,[174,288,289],{"class":192},"}\n",[15,291,292,293,296,297,300,301,303],{},"時間は秒ではなく「",[19,294,295],{},"曲ごとの時間単位","」で持つ。エリーゼのためになら16分音符=1単位、きらきら星なら4分音符=1単位。曲側に ",[38,298,299],{},"unitSec","（1単位の秒数）を持たせて、再生時に掛け算で秒へ変換する。こうすると楽譜からの書き起こしが「16分音符が何個分か」を数えるだけになり、テンポ調整も ",[38,302,299],{}," 1個の変更で済む。",[165,305,307],{"className":167,"code":306,"language":169,"meta":170,"style":170},"// エリーゼのために 冒頭「ミ・レ♯・ミ・レ♯・ミ・シ・レ・ド」\nn(76, 0, 1, 'R', 4), n(75, 1, 1, 'R', 3), n(76, 2, 1, 'R', 4), n(75, 3, 1, 'R', 3),\nn(76, 4, 1, 'R', 4), n(71, 5, 1, 'R', 2), n(74, 6, 1, 'R', 4), n(72, 7, 1, 'R', 3),\n",[38,308,309,314,444],{"__ignoreMap":170},[174,310,311],{"class":176,"line":177},[174,312,313],{"class":209},"// エリーゼのために 冒頭「ミ・レ♯・ミ・レ♯・ミ・シ・レ・ド」\n",[174,315,316,320,323,327,330,333,335,338,340,343,345,347,349,352,355,358,360,363,365,367,369,371,373,375,377,379,381,384,386,388,390,392,394,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,427,429,431,433,435,437,439,441],{"class":176,"line":196},[174,317,319],{"class":318},"senZ8","n",[174,321,322],{"class":192},"(",[174,324,326],{"class":325},"sM54T","76",[174,328,329],{"class":192},",",[174,331,332],{"class":325}," 0",[174,334,329],{"class":192},[174,336,337],{"class":325}," 1",[174,339,329],{"class":192},[174,341,342],{"class":247}," '",[174,344,262],{"class":251},[174,346,248],{"class":247},[174,348,329],{"class":192},[174,350,351],{"class":325}," 4",[174,353,354],{"class":192},"),",[174,356,357],{"class":318}," n",[174,359,322],{"class":192},[174,361,362],{"class":325},"75",[174,364,329],{"class":192},[174,366,337],{"class":325},[174,368,329],{"class":192},[174,370,337],{"class":325},[174,372,329],{"class":192},[174,374,342],{"class":247},[174,376,262],{"class":251},[174,378,248],{"class":247},[174,380,329],{"class":192},[174,382,383],{"class":325}," 3",[174,385,354],{"class":192},[174,387,357],{"class":318},[174,389,322],{"class":192},[174,391,326],{"class":325},[174,393,329],{"class":192},[174,395,396],{"class":325}," 2",[174,398,329],{"class":192},[174,400,337],{"class":325},[174,402,329],{"class":192},[174,404,342],{"class":247},[174,406,262],{"class":251},[174,408,248],{"class":247},[174,410,329],{"class":192},[174,412,351],{"class":325},[174,414,354],{"class":192},[174,416,357],{"class":318},[174,418,322],{"class":192},[174,420,362],{"class":325},[174,422,329],{"class":192},[174,424,383],{"class":325},[174,426,329],{"class":192},[174,428,337],{"class":325},[174,430,329],{"class":192},[174,432,342],{"class":247},[174,434,262],{"class":251},[174,436,248],{"class":247},[174,438,329],{"class":192},[174,440,383],{"class":325},[174,442,443],{"class":192},"),\n",[174,445,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478,481,483,486,488,490,492,494,496,498,500,502,504,506,508,511,513,516,518,520,522,524,526,528,530,532,534,536,538,541,543,546,548,550,552,554,556,558,560,562],{"class":176,"line":213},[174,447,319],{"class":318},[174,449,322],{"class":192},[174,451,326],{"class":325},[174,453,329],{"class":192},[174,455,351],{"class":325},[174,457,329],{"class":192},[174,459,337],{"class":325},[174,461,329],{"class":192},[174,463,342],{"class":247},[174,465,262],{"class":251},[174,467,248],{"class":247},[174,469,329],{"class":192},[174,471,351],{"class":325},[174,473,354],{"class":192},[174,475,357],{"class":318},[174,477,322],{"class":192},[174,479,480],{"class":325},"71",[174,482,329],{"class":192},[174,484,485],{"class":325}," 5",[174,487,329],{"class":192},[174,489,337],{"class":325},[174,491,329],{"class":192},[174,493,342],{"class":247},[174,495,262],{"class":251},[174,497,248],{"class":247},[174,499,329],{"class":192},[174,501,396],{"class":325},[174,503,354],{"class":192},[174,505,357],{"class":318},[174,507,322],{"class":192},[174,509,510],{"class":325},"74",[174,512,329],{"class":192},[174,514,515],{"class":325}," 6",[174,517,329],{"class":192},[174,519,337],{"class":325},[174,521,329],{"class":192},[174,523,342],{"class":247},[174,525,262],{"class":251},[174,527,248],{"class":247},[174,529,329],{"class":192},[174,531,351],{"class":325},[174,533,354],{"class":192},[174,535,357],{"class":318},[174,537,322],{"class":192},[174,539,540],{"class":325},"72",[174,542,329],{"class":192},[174,544,545],{"class":325}," 7",[174,547,329],{"class":192},[174,549,337],{"class":325},[174,551,329],{"class":192},[174,553,342],{"class":247},[174,555,262],{"class":251},[174,557,248],{"class":247},[174,559,329],{"class":192},[174,561,383],{"class":325},[174,563,443],{"class":192},[157,565,566],{"id":566},"繰り返し構造は関数で組み立てる",[15,568,569,570,573],{},"エリーゼのためには A-A-B-A-B-A 構成（約60秒）。A部48単位・B部25単位の配列を1回ずつ定義し、",[38,571,572],{},"shiftEvents","（全ノートの開始位置をオフセットする純粋関数）で並べて組み立てた。",[165,575,577],{"className":167,"code":576,"language":169,"meta":170,"style":170},"events: [\n  ...fuerEliseA,\n  ...shiftEvents(fuerEliseA, 48),\n  ...shiftEvents(fuerEliseB, 95),\n  ...shiftEvents(fuerEliseA, 120),\n  ...shiftEvents(fuerEliseB, 167),\n  ...shiftEvents(fuerEliseA, 192),\n]\n",[38,578,579,590,601,618,636,653,670,687],{"__ignoreMap":170},[174,580,581,584,587],{"class":176,"line":177},[174,582,583],{"class":318},"events",[174,585,586],{"class":192},":",[174,588,589],{"class":192}," [\n",[174,591,592,595,598],{"class":176,"line":196},[174,593,594],{"class":192},"  ...",[174,596,597],{"class":199},"fuerEliseA",[174,599,600],{"class":192},",\n",[174,602,603,605,607,609,611,613,616],{"class":176,"line":213},[174,604,594],{"class":192},[174,606,572],{"class":318},[174,608,322],{"class":192},[174,610,597],{"class":199},[174,612,329],{"class":192},[174,614,615],{"class":325}," 48",[174,617,443],{"class":192},[174,619,620,622,624,626,629,631,634],{"class":176,"line":226},[174,621,594],{"class":192},[174,623,572],{"class":318},[174,625,322],{"class":192},[174,627,628],{"class":199},"fuerEliseB",[174,630,329],{"class":192},[174,632,633],{"class":325}," 95",[174,635,443],{"class":192},[174,637,638,640,642,644,646,648,651],{"class":176,"line":239},[174,639,594],{"class":192},[174,641,572],{"class":318},[174,643,322],{"class":192},[174,645,597],{"class":199},[174,647,329],{"class":192},[174,649,650],{"class":325}," 120",[174,652,443],{"class":192},[174,654,655,657,659,661,663,665,668],{"class":176,"line":270},[174,656,594],{"class":192},[174,658,572],{"class":318},[174,660,322],{"class":192},[174,662,628],{"class":199},[174,664,329],{"class":192},[174,666,667],{"class":325}," 167",[174,669,443],{"class":192},[174,671,672,674,676,678,680,682,685],{"class":176,"line":286},[174,673,594],{"class":192},[174,675,572],{"class":318},[174,677,322],{"class":192},[174,679,597],{"class":199},[174,681,329],{"class":192},[174,683,684],{"class":325}," 192",[174,686,443],{"class":192},[174,688,690],{"class":176,"line":689},8,[174,691,692],{"class":192},"]\n",[15,694,695],{},"B部の末尾とA部のピックアップ（ミ・レ♯）が重なる箇所は、B部側を1音手前で止めてA部の先頭に受け渡している。この接続部のオフセット計算を間違えると同じ鍵盤の音が同時刻に重複するが、それは後述のテストが守ってくれる。",[157,697,699],{"id":698},"楽譜データはどこから来るのかよくある質問","楽譜データはどこから来るのか（よくある質問）",[15,701,702,703,706],{},"今回の3曲は",[19,704,705],{},"楽譜を見ながら手で配列に書き起こした","。外部データは使っていない。ただし世の中には機械可読の楽譜データがオープンで存在する。",[24,708,709,715,721,732,740],{},[27,710,711,714],{},[19,712,713],{},"MIDIファイル（.mid）",": 「いつ・どの鍵盤を・どれくらいの強さで」の演奏イベント列。このアプリのデータ形式とほぼ1対1で対応する。クラシックの著作権切れ楽曲はネット上に大量にある",[27,716,717,720],{},[19,718,719],{},"MusicXML",": 五線譜の記譜情報（音符・休符・運指・強弱記号まで）を持つXML。楽譜編集ソフトの標準交換形式",[27,722,723,731],{},[31,724,730],{"href":725,"target":726,"rel":727},"https://imslp.org/","_blank",[728,729],"noopener","noreferrer","IMSLP（国際楽譜ライブラリープロジェクト）",": パブリックドメイン楽譜のスキャンPDFが約70万点。「エリーゼのために」も原典版から校訂版まで揃う",[27,733,734,739],{},[31,735,738],{"href":736,"target":726,"rel":737},"https://www.mutopiaproject.org/",[728,729],"Mutopia Project",": LilyPond形式＋MIDI付きのフリー楽譜集",[27,741,742,747],{},[31,743,746],{"href":744,"target":726,"rel":745},"https://musescore.org/",[728,729],"MuseScore",": 無料の楽譜編集ソフト。MusicXML/MIDIの読み書きができ、コミュニティ投稿の楽譜も多い（投稿物は権利状態に注意）",[15,749,750,751,754,755,758],{},"つまり「有名曲ならオープンソース（正確にはパブリックドメイン）の楽譜データがあるか？」への答えは",[19,752,753],{},"イエス","。MIDIファイルをパースして ",[38,756,757],{},"NoteEvent[]"," に変換するローダーを書けば、手書き起こしなしで曲を増やせる。",[157,760,761],{"id":761},"紙の楽譜のスキャンからでも読めるのか",[15,763,764,765,770],{},"できる。**OMR（Optical Music Recognition、楽譜の光学認識）**という分野があり、代表的なオープンソース実装が ",[31,766,769],{"href":767,"target":726,"rel":768},"https://github.com/Audiveris/audiveris",[728,729],"Audiveris","。スキャン画像→MusicXMLに変換でき、MuseScoreのPDFインポートも内部でこれを使っている。認識精度は印刷品質に依存するので「OMRで8〜9割→目視で修正」が現実的な運用。家にある練習用の楽譜をスキャンして取り込むワークフローは、①Audiveris等でMusicXML化 → ②MusicXML→NoteEvent変換器を書く、の2段で実現できる。手書きの書き込みが多い楽譜なら、画像を直接AIに読ませて配列に書き起こさせる方が早いケースもある。",[49,772,774],{"id":773},"_88鍵レイアウトの計算","88鍵レイアウトの計算",[15,776,777],{},"鍵盤はA0（MIDI 21）〜C8（MIDI 108）の88鍵。白鍵52個・黒鍵36個。",[24,779,780,783],{},[27,781,782],{},"白鍵: 描画幅を52等分",[27,784,785],{},"黒鍵: 直前の白鍵との境界の中央に、白鍵の62%幅で配置",[165,787,789],{"className":167,"code":788,"language":169,"meta":170,"style":170},"export const layoutKeyboard = (width: number, low = 21, high = 108): KeyRect[] => {\n  const whites = whiteKeysBetween(low, high)   // 52個\n  const ww = width / whites.length\n  const whiteX = new Map(whites.map((m, i) => [m, i * ww]))\n  return midiRange(low, high).map((m) => {\n    if (!isBlackKey(m)) return { midi: m, x: whiteX.get(m) ?? 0, w: ww, black: false }\n    const bw = ww * 0.62\n    return { midi: m, x: (whiteX.get(m - 1) ?? 0) + ww - bw / 2, w: bw, black: true }\n  })\n}\n",[38,790,791,848,876,900,956,987,1069,1087,1164,1170],{"__ignoreMap":170},[174,792,793,795,798,801,804,807,810,812,814,816,819,821,824,826,829,831,834,837,840,843,846],{"class":176,"line":177},[174,794,181],{"class":180},[174,796,797],{"class":184}," const ",[174,799,800],{"class":318},"layoutKeyboard",[174,802,803],{"class":192}," =",[174,805,806],{"class":192}," (",[174,808,809],{"class":199},"width",[174,811,203],{"class":192},[174,813,206],{"class":188},[174,815,329],{"class":192},[174,817,818],{"class":199}," low",[174,820,803],{"class":192},[174,822,823],{"class":325}," 21",[174,825,329],{"class":192},[174,827,828],{"class":199}," high",[174,830,803],{"class":192},[174,832,833],{"class":325}," 108",[174,835,836],{"class":192},"):",[174,838,839],{"class":188}," KeyRect",[174,841,842],{"class":192},"[]",[174,844,845],{"class":192}," =>",[174,847,193],{"class":192},[174,849,850,853,856,858,861,863,866,868,870,873],{"class":176,"line":196},[174,851,852],{"class":184},"  const ",[174,854,855],{"class":199},"whites",[174,857,803],{"class":192},[174,859,860],{"class":318}," whiteKeysBetween",[174,862,322],{"class":192},[174,864,865],{"class":199},"low",[174,867,329],{"class":192},[174,869,828],{"class":199},[174,871,872],{"class":192},")",[174,874,875],{"class":209},"   // 52個\n",[174,877,878,880,883,885,888,891,893,896],{"class":176,"line":213},[174,879,852],{"class":184},[174,881,882],{"class":199},"ww",[174,884,803],{"class":192},[174,886,887],{"class":199}," width",[174,889,890],{"class":184}," / ",[174,892,855],{"class":199},[174,894,895],{"class":192},".",[174,897,899],{"class":898},"sz8Xr","length\n",[174,901,902,904,907,909,912,915,917,919,921,924,927,930,932,935,937,939,942,944,946,948,951,953],{"class":176,"line":226},[174,903,852],{"class":184},[174,905,906],{"class":199},"whiteX",[174,908,803],{"class":192},[174,910,911],{"class":184}," new ",[174,913,914],{"class":318},"Map",[174,916,322],{"class":192},[174,918,855],{"class":199},[174,920,895],{"class":192},[174,922,923],{"class":318},"map",[174,925,926],{"class":192},"((",[174,928,929],{"class":199},"m",[174,931,329],{"class":192},[174,933,934],{"class":199}," i",[174,936,872],{"class":192},[174,938,845],{"class":192},[174,940,941],{"class":192}," [",[174,943,929],{"class":199},[174,945,329],{"class":192},[174,947,934],{"class":199},[174,949,950],{"class":184}," * ",[174,952,882],{"class":199},[174,954,955],{"class":192},"]))\n",[174,957,958,961,964,966,968,970,972,975,977,979,981,983,985],{"class":176,"line":239},[174,959,960],{"class":180},"  return",[174,962,963],{"class":318}," midiRange",[174,965,322],{"class":192},[174,967,865],{"class":199},[174,969,329],{"class":192},[174,971,828],{"class":199},[174,973,974],{"class":192},").",[174,976,923],{"class":318},[174,978,926],{"class":192},[174,980,929],{"class":199},[174,982,872],{"class":192},[174,984,845],{"class":192},[174,986,193],{"class":192},[174,988,989,992,994,997,1000,1002,1004,1007,1010,1013,1016,1018,1020,1023,1026,1028,1030,1032,1035,1037,1039,1042,1045,1047,1049,1052,1054,1056,1058,1061,1063,1066],{"class":176,"line":270},[174,990,991],{"class":180},"    if",[174,993,806],{"class":192},[174,995,996],{"class":184},"!",[174,998,999],{"class":318},"isBlackKey",[174,1001,322],{"class":192},[174,1003,929],{"class":199},[174,1005,1006],{"class":192},"))",[174,1008,1009],{"class":180}," return",[174,1011,1012],{"class":192}," { ",[174,1014,1015],{"class":898},"midi",[174,1017,203],{"class":192},[174,1019,929],{"class":199},[174,1021,1022],{"class":192},", ",[174,1024,1025],{"class":898},"x",[174,1027,203],{"class":192},[174,1029,906],{"class":199},[174,1031,895],{"class":192},[174,1033,1034],{"class":318},"get",[174,1036,322],{"class":192},[174,1038,929],{"class":199},[174,1040,1041],{"class":192},") ",[174,1043,1044],{"class":184},"??",[174,1046,332],{"class":325},[174,1048,1022],{"class":192},[174,1050,1051],{"class":898},"w",[174,1053,203],{"class":192},[174,1055,882],{"class":199},[174,1057,1022],{"class":192},[174,1059,1060],{"class":898},"black",[174,1062,203],{"class":192},[174,1064,1065],{"class":180},"false",[174,1067,1068],{"class":192}," }\n",[174,1070,1071,1074,1077,1079,1082,1084],{"class":176,"line":286},[174,1072,1073],{"class":184},"    const ",[174,1075,1076],{"class":199},"bw",[174,1078,803],{"class":192},[174,1080,1081],{"class":199}," ww",[174,1083,950],{"class":184},[174,1085,1086],{"class":325},"0.62\n",[174,1088,1089,1092,1094,1096,1098,1100,1102,1104,1107,1109,1111,1113,1115,1117,1120,1122,1124,1126,1128,1130,1133,1135,1137,1140,1143,1145,1147,1149,1151,1153,1155,1157,1159,1162],{"class":176,"line":689},[174,1090,1091],{"class":180},"    return",[174,1093,1012],{"class":192},[174,1095,1015],{"class":898},[174,1097,203],{"class":192},[174,1099,929],{"class":199},[174,1101,1022],{"class":192},[174,1103,1025],{"class":898},[174,1105,1106],{"class":192},": (",[174,1108,906],{"class":199},[174,1110,895],{"class":192},[174,1112,1034],{"class":318},[174,1114,322],{"class":192},[174,1116,929],{"class":199},[174,1118,1119],{"class":184}," -",[174,1121,337],{"class":325},[174,1123,1041],{"class":192},[174,1125,1044],{"class":184},[174,1127,332],{"class":325},[174,1129,1041],{"class":192},[174,1131,1132],{"class":184},"+",[174,1134,1081],{"class":199},[174,1136,1119],{"class":184},[174,1138,1139],{"class":199}," bw",[174,1141,1142],{"class":184}," /",[174,1144,396],{"class":325},[174,1146,1022],{"class":192},[174,1148,1051],{"class":898},[174,1150,203],{"class":192},[174,1152,1076],{"class":199},[174,1154,1022],{"class":192},[174,1156,1060],{"class":898},[174,1158,203],{"class":192},[174,1160,1161],{"class":180},"true",[174,1163,1068],{"class":192},[174,1165,1167],{"class":176,"line":1166},9,[174,1168,1169],{"class":192},"  })\n",[174,1171,1173],{"class":176,"line":1172},10,[174,1174,289],{"class":192},[15,1176,1177,1178,1181],{},"黒鍵判定はピッチクラス（MIDI番号 mod 12）が ",[38,1179,1180],{},"{1, 3, 6, 8, 10}"," ＝ C#/D#/F#/G#/A# かどうかを見るだけ。実物のピアノはC#とD#で黒鍵の寄り方が微妙に違うが、この用途では境界中央の簡易配置で見た目に違和感はない。",[49,1183,1184],{"id":1184},"落下バーの座標系",[15,1186,1187,1188,1191],{},"描画の核は「",[19,1189,1190],{},"再生位置 pos（秒）と画面のy座標の対応付け","」。",[24,1193,1194,1200,1207],{},[27,1195,1196,1197],{},"鍵盤の上端 = 判定ライン ",[38,1198,1199],{},"hitY",[27,1201,1202,1203,1206],{},"先読み窓 ",[38,1204,1205],{},"LOOKAHEAD = 3.0秒","：今から3秒以内に鳴る音だけが画面に見える",[27,1208,1209,1210],{},"ピクセル/秒 ",[38,1211,1212],{},"pps = hitY / LOOKAHEAD",[15,1214,1215],{},"各ノートの矩形は毎フレームこう決まる。",[165,1217,1221],{"className":1218,"code":1219,"language":1220,"meta":170,"style":170},"language-javascript shiki shiki-themes vitesse-light vitesse-light","const bottom = hitY - Math.max(0, nt.startSec - pos) * pps  // 発音中は鍵盤上端に張り付く\nconst top    = hitY - (nt.startSec + nt.durSec - pos) * pps // 残り時間ぶん上に伸びる\n","javascript",[38,1222,1223,1277],{"__ignoreMap":170},[174,1224,1225,1228,1231,1233,1236,1238,1241,1243,1246,1248,1251,1253,1256,1258,1261,1263,1266,1268,1271,1274],{"class":176,"line":177},[174,1226,1227],{"class":184},"const",[174,1229,1230],{"class":199}," bottom",[174,1232,803],{"class":192},[174,1234,1235],{"class":199}," hitY",[174,1237,1119],{"class":184},[174,1239,1240],{"class":199}," Math",[174,1242,895],{"class":192},[174,1244,1245],{"class":318},"max",[174,1247,322],{"class":192},[174,1249,1250],{"class":325},"0",[174,1252,329],{"class":192},[174,1254,1255],{"class":199}," nt",[174,1257,895],{"class":192},[174,1259,1260],{"class":199},"startSec",[174,1262,1119],{"class":184},[174,1264,1265],{"class":199}," pos",[174,1267,872],{"class":192},[174,1269,1270],{"class":184}," *",[174,1272,1273],{"class":199}," pps",[174,1275,1276],{"class":209},"  // 発音中は鍵盤上端に張り付く\n",[174,1278,1279,1281,1284,1287,1289,1291,1293,1296,1298,1300,1303,1305,1307,1310,1312,1314,1316,1318,1320],{"class":176,"line":196},[174,1280,1227],{"class":184},[174,1282,1283],{"class":199}," top",[174,1285,1286],{"class":192},"    =",[174,1288,1235],{"class":199},[174,1290,1119],{"class":184},[174,1292,806],{"class":192},[174,1294,1295],{"class":199},"nt",[174,1297,895],{"class":192},[174,1299,1260],{"class":199},[174,1301,1302],{"class":184}," +",[174,1304,1255],{"class":199},[174,1306,895],{"class":192},[174,1308,1309],{"class":199},"durSec",[174,1311,1119],{"class":184},[174,1313,1265],{"class":199},[174,1315,872],{"class":192},[174,1317,1270],{"class":184},[174,1319,1273],{"class":199},[174,1321,1322],{"class":209}," // 残り時間ぶん上に伸びる\n",[15,1324,1325,1328,1329,1332,1333,1336],{},[38,1326,1327],{},"Math.max(0, ...)"," が効いていて、発音が始まったバーは下端が判定ラインに固定されたまま上端だけが下りてくる。つまり",[19,1330,1331],{},"バーが鍵盤に「吸い込まれていく」見え方","が、座標式1行で出る。発音中のノートは ",[38,1334,1335],{},"shadowBlur"," でグロー＋対応する鍵盤を同色で塗る。",[15,1338,1339,1340,1343,1344,1347],{},"背景の星空は ",[38,1341,1342],{},"Math.random()"," で位置・半径・透明度を決めた点をリサイズ時に生成して ",[38,1345,1346],{},"fillRect"," するだけ。1〜2pxの点でも数が散っていれば夜空に見える。",[49,1349,1351],{"id":1350},"音の合成ピアノ音をオシレーター3本で偽装する","音の合成——ピアノ音をオシレーター3本で偽装する",[15,1353,1354],{},"サンプル音源を使わず、1音ごとにオシレーターを組み立てる減衰音シンセで「ピアノっぽさ」を出している。",[165,1356,1361],{"className":1357,"code":1359,"language":1360,"meta":170},[1358],"language-text","osc(triangle, f)    ── gain 1.00 ─┐\nosc(sine,    2f)    ── gain 0.30 ─┼─ lowpass(6f, max 8.5kHz) ─ envelope ─┬─ master\nosc(sine,    3f)    ── gain 0.10 ─┘                                      └─ reverb send(0.22) ─ convolver ─ master\n","text",[38,1362,1359],{"__ignoreMap":170},[15,1364,1365],{},"ポイントは4つ。",[1367,1368,1369,1375,1381,1387],"ol",{},[27,1370,1371,1374],{},[19,1372,1373],{},"倍音構成",": 基音は三角波（奇数倍音を含み、サイン波より「芯」が出る）。そこに2倍音・3倍音のサイン波を薄く重ねる",[27,1376,1377,1380],{},[19,1378,1379],{},"ローパスフィルタ",": カットオフを基音の6倍（上限8.5kHz）に置き、高域のギラつきを落とす。低い音ほどこもり、高い音ほど抜ける、という実楽器の傾向も一応出る",[27,1382,1383,1386],{},[19,1384,1385],{},"エンベロープ",": 10msの立ち上がり → 指数カーブで素早く減衰 → ノート長に合わせてリリース。ピアノらしさの大半は「打鍵直後にスッと減衰する」このカーブが担っている",[27,1388,1389,1392,1393,1396,1397,1400],{},[19,1390,1391],{},"リバーブ",": ホワイトノイズを ",[38,1394,1395],{},"(1 - i/len)^2.8"," で減衰させた1.8秒のバッファを ",[38,1398,1399],{},"ConvolverNode"," のインパルス応答にする。お手軽だが空間感が一気に出る",[15,1402,1403],{},"周波数変換は平均律の定義そのまま。",[165,1405,1407],{"className":167,"code":1406,"language":169,"meta":170,"style":170},"export const midiToFreq = (midi: number): number => 440 * 2 ** ((midi - 69) / 12)\n",[38,1408,1409],{"__ignoreMap":170},[174,1410,1411,1413,1415,1418,1420,1422,1424,1426,1428,1430,1433,1435,1438,1440,1443,1446,1448,1450,1453,1456,1458,1460,1463],{"class":176,"line":177},[174,1412,181],{"class":180},[174,1414,797],{"class":184},[174,1416,1417],{"class":318},"midiToFreq",[174,1419,803],{"class":192},[174,1421,806],{"class":192},[174,1423,1015],{"class":199},[174,1425,203],{"class":192},[174,1427,206],{"class":188},[174,1429,836],{"class":192},[174,1431,1432],{"class":188}," number",[174,1434,845],{"class":192},[174,1436,1437],{"class":325}," 440",[174,1439,950],{"class":184},[174,1441,1442],{"class":325},"2",[174,1444,1445],{"class":184}," ** ",[174,1447,926],{"class":192},[174,1449,1015],{"class":199},[174,1451,1452],{"class":184}," - ",[174,1454,1455],{"class":325},"69",[174,1457,872],{"class":192},[174,1459,890],{"class":184},[174,1461,1462],{"class":325},"12",[174,1464,1465],{"class":192},")\n",[157,1467,1469,1470,1473],{"id":1468},"スケジューリングsetintervalでは音はずれる","スケジューリング——",[38,1471,1472],{},"setInterval","では音はずれる",[15,1475,1476,1477,1479,1480,1483],{},"JavaScriptのタイマーは数十ms平気でずれるので、発音タイミングを ",[38,1478,1472],{}," で直接叩くと曲がヨレる。定石どおり",[19,1481,1482],{},"2層構え","にした。",[24,1485,1486,1492],{},[27,1487,1488,1489,1491],{},"50ms周期の ",[38,1490,1472],{}," は「見張り役」。再生位置から0.25秒以内に始まるノートを見つけたら、",[27,1493,1494,1497,1498,1501,1502,1505],{},[19,1495,1496],{},"AudioContextのサンプルクロック","（",[38,1499,1500],{},"actx.currentTime","）基準の正確な時刻を計算して ",[38,1503,1504],{},"osc.start(when)"," で予約する",[15,1507,1508,1509,1512,1513,1516],{},"再生位置は「アンカー方式」で管理する。再生開始時に ",[38,1510,1511],{},"anchorPos","（曲内位置）と ",[38,1514,1515],{},"anchorCtx","（オーディオ時計）を記録し、現在位置は常に計算で出す。",[165,1518,1520],{"className":1218,"code":1519,"language":1220,"meta":170,"style":170},"const currentPos = () => playing ? anchorPos + (actx.currentTime - anchorCtx) * rate : pos\n",[38,1521,1522],{"__ignoreMap":170},[174,1523,1524,1526,1529,1531,1534,1536,1539,1542,1545,1547,1549,1552,1554,1557,1559,1562,1564,1566,1569,1572],{"class":176,"line":177},[174,1525,1227],{"class":184},[174,1527,1528],{"class":318}," currentPos",[174,1530,803],{"class":192},[174,1532,1533],{"class":192}," ()",[174,1535,845],{"class":192},[174,1537,1538],{"class":199}," playing",[174,1540,1541],{"class":184}," ?",[174,1543,1544],{"class":199}," anchorPos",[174,1546,1302],{"class":184},[174,1548,806],{"class":192},[174,1550,1551],{"class":199},"actx",[174,1553,895],{"class":192},[174,1555,1556],{"class":199},"currentTime",[174,1558,1119],{"class":184},[174,1560,1561],{"class":199}," anchorCtx",[174,1563,872],{"class":192},[174,1565,1270],{"class":184},[174,1567,1568],{"class":199}," rate",[174,1570,1571],{"class":184}," :",[174,1573,1574],{"class":199}," pos\n",[15,1576,1577,1578,1581],{},"テンポ変更（",[38,1579,1580],{},"rate","）やシークのたびにアンカーを取り直すだけで、一時停止・再開・倍速が全部この1本の式に乗る。状態変数に時間を足し込んでいく方式と違って誤差が蓄積しない。",[49,1583,1584],{"id":1584},"運指番号の表示",[15,1586,1587,1588,1591,1592,1595],{},"「どの指で押さえるかの定石を、降ってくるバーに書けないか」という要望で追加した機能。",[38,1589,1590],{},"NoteEvent"," の ",[38,1593,1594],{},"finger","（1=親指〜5=小指）をそのままバーの下端付近に描く。",[165,1597,1599],{"className":1218,"code":1598,"language":1220,"meta":170,"style":170},"if (fingerChk.checked && nt.finger && h >= 18 && w >= 9) {\n  g2d.fillText(String(nt.finger), x + w / 2, Math.min(bottom, hitY) - 9)\n}\n",[38,1600,1601,1650,1712],{"__ignoreMap":170},[174,1602,1603,1606,1608,1611,1613,1616,1619,1621,1623,1625,1627,1630,1633,1636,1638,1641,1643,1646,1648],{"class":176,"line":177},[174,1604,1605],{"class":180},"if",[174,1607,806],{"class":192},[174,1609,1610],{"class":199},"fingerChk",[174,1612,895],{"class":192},[174,1614,1615],{"class":199},"checked",[174,1617,1618],{"class":184}," &&",[174,1620,1255],{"class":199},[174,1622,895],{"class":192},[174,1624,1594],{"class":199},[174,1626,1618],{"class":184},[174,1628,1629],{"class":199}," h",[174,1631,1632],{"class":192}," >=",[174,1634,1635],{"class":325}," 18",[174,1637,1618],{"class":184},[174,1639,1640],{"class":199}," w",[174,1642,1632],{"class":192},[174,1644,1645],{"class":325}," 9",[174,1647,872],{"class":192},[174,1649,193],{"class":192},[174,1651,1652,1655,1657,1660,1662,1665,1667,1669,1671,1673,1675,1678,1680,1682,1684,1686,1688,1690,1692,1695,1697,1700,1702,1704,1706,1708,1710],{"class":176,"line":196},[174,1653,1654],{"class":199},"  g2d",[174,1656,895],{"class":192},[174,1658,1659],{"class":318},"fillText",[174,1661,322],{"class":192},[174,1663,1664],{"class":318},"String",[174,1666,322],{"class":192},[174,1668,1295],{"class":199},[174,1670,895],{"class":192},[174,1672,1594],{"class":199},[174,1674,354],{"class":192},[174,1676,1677],{"class":199}," x",[174,1679,1302],{"class":184},[174,1681,1640],{"class":199},[174,1683,1142],{"class":184},[174,1685,396],{"class":325},[174,1687,329],{"class":192},[174,1689,1240],{"class":199},[174,1691,895],{"class":192},[174,1693,1694],{"class":318},"min",[174,1696,322],{"class":192},[174,1698,1699],{"class":199},"bottom",[174,1701,329],{"class":192},[174,1703,1235],{"class":199},[174,1705,872],{"class":192},[174,1707,1119],{"class":184},[174,1709,1645],{"class":325},[174,1711,1465],{"class":192},[174,1713,1714],{"class":176,"line":213},[174,1715,289],{"class":192},[24,1717,1718,1721,1728],{},[27,1719,1720],{},"バーが小さすぎるとき（高さ18px未満・幅9px未満）は描かない。ごちゃつき防止",[27,1722,1723,1724,1727],{},"バーの",[19,1725,1726],{},"下端寄り","に置くのがミソ。プレイヤーの視線は判定ライン付近にあるので、鍵盤に届く直前に番号が目に入る",[27,1729,1730],{},"トグルでオフにできる",[15,1732,1733],{},"運指データはエリーゼのためにだけ付けた。右手の「ミ・レ♯」交互は4-3、左手のアルペジオ（ラ・ミ・ラ）は5-2-1、といった一般的な校訂版ベースの簡易版（運指は版によって違うので、あくまで一例）。",[49,1735,1736],{"id":1736},"テストが実データのバグを1件捕まえた話",[15,1738,1739,1740,1743,1744,1747],{},"純粋関数化の恩恵で、Vitestのテストが34本ある。鍵盤レイアウト（88鍵・白鍵52個・全キーが幅に収まる）、時間変換、再生位置検索、",[38,1741,1742],{},"formatTime"," のほか、",[19,1745,1746],{},"曲データ自体の整合性テスト","を入れた。",[165,1749,1751],{"className":167,"code":1750,"language":169,"meta":170,"style":170},"it.each(PIANO_SONGS)('同じ鍵盤の音が同時に重ならない', (song) => { ... })\n",[38,1752,1753],{"__ignoreMap":170},[174,1754,1755,1758,1760,1763,1765,1768,1771,1773,1776,1778,1780,1782,1785,1787,1789,1792,1795],{"class":176,"line":177},[174,1756,1757],{"class":199},"it",[174,1759,895],{"class":192},[174,1761,1762],{"class":318},"each",[174,1764,322],{"class":192},[174,1766,1767],{"class":199},"PIANO_SONGS",[174,1769,1770],{"class":192},")(",[174,1772,248],{"class":247},[174,1774,1775],{"class":251},"同じ鍵盤の音が同時に重ならない",[174,1777,248],{"class":247},[174,1779,329],{"class":192},[174,1781,806],{"class":192},[174,1783,1784],{"class":199},"song",[174,1786,872],{"class":192},[174,1788,845],{"class":192},[174,1790,1791],{"class":192}," {",[174,1793,1794],{"class":192}," ...",[174,1796,1797],{"class":192}," })\n",[15,1799,1800],{},"これが初回実行で実際に失敗した。きらきら星の伴奏に入れたGコード（ソ＋レ）の「レ（D4）」が、メロディの「レ」と同時刻に重なっていた。同じ鍵盤を同時に2つのノートが叩くのは物理的にあり得ない（＝データ起こしのミス）。伴奏のボイシングをソ＋シに変えて解消した。楽譜の手起こしは絶対にどこかで間違えるので、この種の「物理的にあり得ない状態の検出」をテストにしておく価値は高い。",[15,1802,1803],{},"エリーゼのためにをA-B連結で60秒に拡張したときも、接続部のオフセット計算が正しいことをこのテストが保証してくれた。",[49,1805,1806],{"id":1806},"今後の拡張メモ",[157,1808,1810],{"id":1809},"本物のピアノを繋いで弾くweb-midi","本物のピアノを繋いで弾く（Web MIDI）",[15,1812,1813,1814,152,1817,1820],{},"ChromeはWeb MIDI APIを実装しているので、",[19,1815,1816],{},"USBでPCに繋いだ電子ピアノの打鍵をブラウザで受け取れる",[38,1818,1819],{},"navigator.requestMIDIAccess()"," で鍵盤の押し離し（Note On/Off）が取れるため、「降ってくるバーに合わせて実際の鍵盤を弾いて判定する」音ゲー化は技術的に素直にできる。対応楽器は「USB to Host端子（USB-B）を持つ電子ピアノ」で、ここ10年の機種ならエントリー帯でもほぼ全機種が該当する（Yamaha Pシリーズ、Casio Privia、Roland FPシリーズ、Korg Bシリーズなど。PC側はUSBケーブル1本、ドライバ不要のクラスコンプライアント対応が主流）。アコースティックピアノの場合は消音ユニット付きモデル（YAMAHAサイレントピアノ等）やDisklavierのようなMIDI出力を持つ機種に限られる。",[157,1822,1824],{"id":1823},"midiファイルローダー","MIDIファイルローダー",[15,1826,1827,1830,1831,1833],{},[38,1828,1829],{},".mid"," をドラッグ＆ドロップ → パース → ",[38,1832,757],{}," 変換。トラックやノート番号の中央値から左手/右手を推定すれば、手持ちのMIDIが全部この画面で再生できるようになる。",[157,1835,1836],{"id":1836},"楽譜スキャン取り込み",[15,1838,1839],{},"前述のOMR（Audiveris → MusicXML → 変換器）ルート。練習中の曲を取り込んで、運指は自分の先生の指示どおりに上書きする、という使い方が見える。",[49,1841,1842],{"id":1842},"ハマりどころ",[24,1844,1845,1851],{},[27,1846,1847,1850],{},[19,1848,1849],{},"Nuxt devサーバーのSSRモジュールキャッシュ固着",": ページを開いたままファイルを編集していたら、Vite側（クライアント）は新コードなのにSSR側が古いコードを返し続け、hydration mismatchで500になった。devサーバー再起動で解消。HMRを信用しすぎないこと",[27,1852,1853,1856],{},[19,1854,1855],{},"検証中の「再生が進まない」誤検知",": DevTools経由で再生位置を計測していたら半速〜停止に見えたが、正体は同じページを人間が同時に操作していた（再生/一時停止ボタンの取り合い）。アプリのバグではなかった。ブラウザ自動化で検証するときは、操作主体が他にいないか先に確認すべし",[49,1858,1859],{"id":1859},"まとめ",[24,1861,1862,1869,1872,1875],{},[27,1863,1864,1865,1868],{},"Synthesia風ビジュアライザーの本体は「",[19,1866,1867],{},"座標式1本（時間→y座標）と音声時計のアンカー1本","」で、思ったより小さく作れる",[27,1870,1871],{},"音源ファイルなしでも、倍音3本＋減衰エンベロープ＋コンボリューションリバーブで「それらしいピアノ」になる",[27,1873,1874],{},"曲データを純粋データとして持つと、テストで楽譜起こしのミスを機械的に検出できる",[27,1876,1877],{},"楽譜データの世界にはMIDI / MusicXML / IMSLP / OMRという既存資産があり、手書き起こしからの卒業ルートも整っている",[1879,1880,1881],"style",{},"html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}",{"title":170,"searchDepth":196,"depth":196,"links":1883},[1884,1885,1886,1893,1894,1895,1899,1900,1901,1906,1907],{"id":51,"depth":196,"text":51},{"id":81,"depth":196,"text":82},{"id":155,"depth":196,"text":155,"children":1887},[1888,1890,1891,1892],{"id":159,"depth":213,"text":1889},"1音 = { midi, start, dur, hand, finger }",{"id":566,"depth":213,"text":566},{"id":698,"depth":213,"text":699},{"id":761,"depth":213,"text":761},{"id":773,"depth":196,"text":774},{"id":1184,"depth":196,"text":1184},{"id":1350,"depth":196,"text":1351,"children":1896},[1897],{"id":1468,"depth":213,"text":1898},"スケジューリング——setIntervalでは音はずれる",{"id":1584,"depth":196,"text":1584},{"id":1736,"depth":196,"text":1736},{"id":1806,"depth":196,"text":1806,"children":1902},[1903,1904,1905],{"id":1809,"depth":213,"text":1810},{"id":1823,"depth":213,"text":1824},{"id":1836,"depth":213,"text":1836},{"id":1842,"depth":196,"text":1842},{"id":1859,"depth":196,"text":1859},"dev","音符バーが上から降ってきて鍵盤に届くと音が鳴るピアノビジュアライザー /piano-roll の実装記録。曲データの持ち方、88鍵レイアウト計算、落下バーの座標系、Web Audioによるピアノ音合成、運指番号表示、楽譜データの入手方法やMIDIキーボード対応の展望まで。","md",{},true,"/piano-roll-implementation","mdx-playground",false,"2026-06-11T00:00:00.000Z",{"title":5,"description":1909},"2026-06/2026-06-11/piano-roll-implementation",[1920,1921,1922,1923,1924,1925],"Web Audio","Canvas","Vue","ピアノ","音楽","Nuxt",null,"VLkMSQ-RfbKimFTjbtzINToFhmW67wim4Em_Z-uzWJs",[1929,1939,1947,1959,1967],{"title":1930,"description":1931,"path":1932,"tags":1933,"publishedAt":1938,"updatedAt":1926},"Micron個別ページを作った（工場マップ＋月間キャパシティ詳細）","/memory-makers/micron を新規作成。USA / Japan / Taiwan の工場地図をSVGで描き、Fab別の月間キャパシティ推移を5マイルストーンで可視化した。3カラムから上下レイアウトへ作り直し、会計四半期に暦月併記を足すまでの過程をまとめる。","/micron-fab-page-with-capacity-map",[1934,1935,1936,1922,1937,1925],"Micron","DRAM","memory-makers","SVG","2026-06-07T00:00:00.000Z",{"title":1940,"description":1941,"path":1942,"tags":1943,"publishedAt":1946,"updatedAt":1926},"メモリーメーカー動向ハブを新設し、DRAM市場シェアの推移を可視化した一日","サムスン電子とSK Hynixの個別ページを揃えたメモリーメーカー動向ハブを新設。会社ごとに違う決算データの構造をどう吸収したか、過去8四半期のDRAM市場シェアをどう可視化したかを記録する。","/memory-makers-hub-dram-share",[1944,1935,1925,1945,1922],"メモリー半導体","データ可視化","2026-06-02T00:00:00.000Z",{"title":1948,"description":1949,"path":1950,"tags":1951,"publishedAt":1958,"updatedAt":1926},"microGPTを会計の言葉で読み切る教材を作った日","200行のGPT実装を、予実管理や配賦や感応度といった会計の言葉に翻訳して読み切るためのインタラクティブ教材をNuxtで実装した。malformedが連発した末に引き継ぎドキュメントとサブエージェントへ切り替えた一日の記録。","/microgpt-accounting-textbook",[1952,1953,1954,1955,1956,1957],"microgpt","教材","vue","nuxt","malformed","サブエージェント","2026-05-31T00:00:00.000Z",{"title":1960,"description":1961,"path":1962,"tags":1963,"publishedAt":1966,"updatedAt":1926},"「テーブルに状態を持たせてはいけない」を、会員データを操作して3設計を見比べる教材に仕立てた","状態カラムの上書き・イベント記録・状態テーブル分割の3設計を、同じ会員データに同じ操作を流し込んで同時に動かし、履歴がどう残る／消えるかを見比べられるインタラクティブ教材を作った話。ロジックは純粋関数に隔離した。","/state-vs-events-interactive-lesson",[1922,1925,1964,1965,1953],"データベース設計","イベントソーシング","2026-05-27T00:00:00.000Z",{"title":1968,"description":1969,"path":1970,"tags":1971,"publishedAt":1975,"updatedAt":1926},"教科書とクイズを Part 1/2 の2カラムに整え、ローカルのマークダウンビューアまで作った","決算書を読む教科書とクイズの index を Part 1/2 の2カラムに直し、ローカル専用のマークダウンビューアを生やし、目次のスクロール追従ハイライトまで仕込んだ早朝の積み残し潰し。","/textbook-quiz-twocolumn-memo-viewer",[1925,1922,1972,1973,1974],"Layout","UI改善","dev環境","2026-05-18T00:00:00.000Z",[],"https://log.eurekapu.com/og/blog/piano-roll-implementation.png?v=2026-06-11T00%3A00%3A00.000Z&title=Synthesia%E9%A2%A8%E3%80%8C%E9%99%8D%E3%81%A3%E3%81%A6%E3%81%8F%E3%82%8B%E9%9F%B3%E7%AC%A6%E3%80%8D%E3%81%AE%E3%83%94%E3%82%A2%E3%83%8E%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92Web%20Audio%20%2B%20Canvas%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%9F%E2%80%94%E2%80%94%E5%AE%9F%E8%A3%85%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%83%A1%E3%83%A2&author=Kei%20Komatsu&sig=156895939fde1e6c",1781213456141]