「VexFlow タブ譜 コードフォーム」の版間の差分

提供：yonewiki
(同じ利用者による、間の45版が非表示)
6行目: 6行目:
[[VexFlow 使い方]]に戻る。
[[VexFlow 使い方]]に戻る。
== '''概要''' ==
== '''概要''' ==
　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタで表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。
　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。


　
　
108行目: 108行目:
   svgElement.appendChild(newGroup);
   svgElement.appendChild(newGroup);
}
}
function insertArrowPathToSVG(StartPos, EndPos) {
  var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  newGroup.setAttribute('transform', 'translate(0, 0)');
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  var arrowLength = 10;
  var angle = Math.atan2(EndPos.y - StartPos.y, EndPos.x - StartPos.x);
  var arrowAngle = 20 * (Math.PI / 180);
  // 矢印のポイント1を計算
  var arrowX1 = EndPos.x - arrowLength * Math.cos(angle - arrowAngle);
  var arrowY1 = EndPos.y - arrowLength * Math.sin(angle - arrowAngle);
   
  // 矢印のポイント2を計算
  var arrowX2 = EndPos.x - arrowLength * Math.cos(angle + arrowAngle);
  var arrowY2 = EndPos.y - arrowLength * Math.sin(angle + arrowAngle);
  var pathStr = "M " + StartPos.x + " " + StartPos.y + " L " + EndPos.x + " " + EndPos.y + " M " + EndPos.x + " " + EndPos.y + " L " + arrowX1 + " " + arrowY1 + " M " + EndPos.x + " " + EndPos.y + " L " + arrowX2 + " " + arrowY2;
  path.setAttribute('d', pathStr);
  path.setAttribute('stroke', 'black');
  path.setAttribute('stroke-width', '1');
  path.setAttribute('fill', 'none');
  newGroup.appendChild(path);
  svgElement.appendChild(newGroup);
}


function insertTrilPathToSVG(Shift, Direction = 1) {
function insertTrilPathToSVG(Shift, Direction = 1) {
642行目: 670行目:
const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St3.draw();
Guitar1St3.draw();
const Guitar1_St3_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "4" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
];
const Guitar1_St3_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar1_St3_notes_1, [0, 1, 2, 3, 4, 5, 6]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
const Guitar1_St3_beam_1 = new VF.Beam([Guitar1_St3_notes_1[1], Guitar1_St3_notes_1[2]]);
const Guitar1_St3_beam_2 = new VF.Beam([
  Guitar1_St3_notes_1[3], Guitar1_St3_notes_1[4], Guitar1_St3_notes_1[5], Guitar1_St3_notes_1[6]
  ]);
var Guitar1_St3_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St3_Voice_1.setStrict(true);
Guitar1_St3_Voice_1.addTickables(Guitar1_St3_notes_1);
var Guitar1_St3_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St3_Voice_2.setStrict(true);
Guitar1_St3_Voice_2.addTickables(Guitar1_St3_notes_2);
var formatterGuitar1_St3 = new VF.Formatter().joinVoices([Guitar1_St3_Voice_1, Guitar1_St3_Voice_2]);
formatterGuitar1_St3.format([Guitar1_St3_Voice_1, Guitar1_St3_Voice_2], nStaveWidth - 20 - 10);
Guitar1_St3_Voice_1.draw(ctx, Guitar1St3);
Guitar1_St3_Voice_2.draw(ctx, Guitar1St3);
Guitar1_St3_beam_1.setContext(ctx).draw();
Guitar1_St3_beam_2.setContext(ctx).draw();
shiftGuitar1_3st= addShift(
  Guitar1_St3_notes_1,
  [0, 1, 2, 3, 4, 5, 6],
  [3, 3, 3, 3, 3, 3, 3.8]
);


const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St4.draw();
Guitar1St4.draw();
const Guitar1_St4_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
];
const Guitar1_St4_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar1_St4_notes_1, [0, 1, 2, 3, 4, 5, 6, 7]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
const Guitar1_St4_beam_1 = new VF.Beam([
  Guitar1_St4_notes_1[0], Guitar1_St4_notes_1[1], Guitar1_St4_notes_1[2], Guitar1_St4_notes_1[3]
  ]);
const Guitar1_St4_beam_2 = new VF.Beam([
  Guitar1_St4_notes_1[4], Guitar1_St4_notes_1[5], Guitar1_St4_notes_1[6], Guitar1_St4_notes_1[7]
  ]);
var Guitar1_St4_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St4_Voice_1.setStrict(true);
Guitar1_St4_Voice_1.addTickables(Guitar1_St4_notes_1);
var Guitar1_St4_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St4_Voice_2.setStrict(true);
Guitar1_St4_Voice_2.addTickables(Guitar1_St4_notes_2);
var formatterGuitar1_St4 = new VF.Formatter().joinVoices([Guitar1_St4_Voice_1, Guitar1_St4_Voice_2]);
formatterGuitar1_St4.format([Guitar1_St4_Voice_1, Guitar1_St4_Voice_2], nStaveWidth - 20 - 10);
Guitar1_St4_Voice_1.draw(ctx, Guitar1St4);
Guitar1_St4_Voice_2.draw(ctx, Guitar1St4);
Guitar1_St4_beam_1.setContext(ctx).draw();
Guitar1_St4_beam_2.setContext(ctx).draw();
shiftGuitar1_4st= addShift(
  Guitar1_St4_notes_1,
  [0, 1, 2, 3, 4, 5, 6, 7],
  [3, 3, 3, 3, 3, 3, 3, 3.8]
);




674行目: 837行目:
}
}
Guitar1_tab4.draw();
Guitar1_tab4.draw();


const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
698行目: 859行目:
Guitar1tab_1st.x = Guitar1_Tab1_1.x
Guitar1tab_1st.x = Guitar1_Tab1_1.x
Guitar1tab_1st.y = Guitar1_Tab1_1.y
Guitar1tab_1st.y = Guitar1_Tab1_1.y


const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
723行目: 886行目:
Guitar2_St1.addKeySignature('D').setContext(ctx);
Guitar2_St1.addKeySignature('D').setContext(ctx);
Guitar2_St1.draw();
Guitar2_St1.draw();
const Guitar2_St1_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "1" }),
];
const Guitar2_St1_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar2_St1_notes_1, [0]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
var Guitar2_St1_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St1_Voice_1.setStrict(true);
Guitar2_St1_Voice_1.addTickables(Guitar2_St1_notes_1);
var Guitar2_St1_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St1_Voice_2.setStrict(true);
Guitar2_St1_Voice_2.addTickables(Guitar2_St1_notes_2);
var formatterGuitar2_St1 = new VF.Formatter().joinVoices([Guitar2_St1_Voice_1, Guitar2_St1_Voice_2]);
formatterGuitar2_St1.format([Guitar2_St1_Voice_1, Guitar2_St1_Voice_2], nStaveWidth - 20 - 10);
Guitar2_St1_Voice_1.draw(ctx, Guitar2_St1);
Guitar2_St1_Voice_2.draw(ctx, Guitar2_St1);
shiftGuitar2_1st= addShift(
  Guitar2_St1_notes_1,
  [0],
  [3]
);


const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
Guitar2_St2.draw();
Guitar2_St2.draw();
const Guitar2_St2_notes_1 = [
  new VF.StaveNote({ keys: ["b/4"], duration: "2" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "2" }),
];
const Guitar2_St2_notes_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
];
UniqueIds = getUniqueNoteheadIds(Guitar2_St2_notes_1, [0, 1]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
var Guitar2_St2_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St2_Voice_1.setStrict(true);
Guitar2_St2_Voice_1.addTickables(Guitar2_St2_notes_1);
var Guitar2_St2_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 });
Guitar2_St2_Voice_2.setStrict(true);
Guitar2_St2_Voice_2.addTickables(Guitar2_St2_notes_2);
var formatterGuitar2_St2 = new VF.Formatter().joinVoices([Guitar2_St2_Voice_1, Guitar2_St2_Voice_2]);
formatterGuitar2_St2.format([Guitar2_St2_Voice_1, Guitar2_St2_Voice_2], nStaveWidth - 20 - 10);
Guitar2_St2_Voice_1.draw(ctx, Guitar2_St2);
Guitar2_St2_Voice_2.draw(ctx, Guitar2_St2);
shiftGuitar2_2st= addShift(
  Guitar2_St2_notes_1,
  [0, 1],
  [3, 3]
);


const Guitar2_St2_1 = new Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
const Guitar2_St2_1 = new Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
747行目: 1,005行目:
Guitar2_Tab1.draw();
Guitar2_Tab1.draw();


Guitar2tab_1st.x = Guitar2_Tab1_1.x;
Guitar2tab_1st.y = Guitar2_Tab1_1.y;


Guitar2Tab1.x = Guitar2_Tab1.x;
Guitar2Tab1.x = Guitar2_Tab1.x;
760行目: 1,020行目:
Guitar2_Tab2_1.draw();
Guitar2_Tab2_1.draw();


Guitar2tab_2st.x = Guitar2_Tab2.x;
Guitar2tab_2st.y = Guitar2_Tab2.y;


const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
Guitar2_Tab3.draw();
Guitar2_Tab3.draw();
Guitar2tab_3st.x = Guitar2_Tab3.x;
Guitar2tab_3st.y = Guitar2_Tab3.y;




768行目: 1,033行目:
Guitar2_Tab4.draw();
Guitar2_Tab4.draw();


Guitar2tab_4st.x = Guitar2_Tab4.x;
Guitar2tab_4st.y = Guitar2_Tab4.y;


var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);
var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);
1,002行目: 1,269行目:
insertTextToSVG(Guitar1_st1_option);
insertTextToSVG(Guitar1_st1_option);


insertTiePathToSVG({x:shiftGuitar1_1st[2].x , y:shiftGuitar1_1st[2].y + 10}, {x:shiftGuitar1_1st[2].x + 35, y:shiftGuitar1_1st[2].y + 10});
 


var Guitar1_st2_option = {
var Guitar1_st2_option = {
1,017行目: 1,284行目:


insertTiePathToSVG({x:shiftGuitar1_2st[2].x , y:shiftGuitar1_2st[2].y + 10}, {x:shiftGuitar1_2st[2].x + 35, y:shiftGuitar1_2st[2].y + 10});
insertTiePathToSVG({x:shiftGuitar1_2st[2].x , y:shiftGuitar1_2st[2].y + 10}, {x:shiftGuitar1_2st[2].x + 35, y:shiftGuitar1_2st[2].y + 10});
var Guitar1_st3_option = {
    textContent: ["；", "；", "；", "；", "；", "；", "\uFF64"], // 必須文字列
    strID: "Guitar1_st3", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar1_3st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st3_option);
insertTiePathToSVG({x:shiftGuitar1_3st[2].x , y:shiftGuitar1_3st[2].y + 10}, {x:shiftGuitar1_3st[2].x + 35, y:shiftGuitar1_3st[2].y + 10});
var Guitar1_st4_option = {
    textContent: ["；", "；", "；", "；", "；", "；", "；", "\uFF64"], // 必須文字列
    strID: "Guitar1_st4", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar1_4st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st4_option);
insertTiePathToSVG({x:shiftGuitar1_4st[0].x , y:shiftGuitar1_4st[0].y + 10}, {x:shiftGuitar1_4st[0].x + 35, y:shiftGuitar1_4st[0].y + 10});
insertTiePathToSVG({x:shiftGuitar1_4st[3].x , y:shiftGuitar1_4st[3].y + 10}, {x:shiftGuitar1_4st[3].x + 35, y:shiftGuitar1_4st[3].y + 10});
insertArrowPathToSVG({x:shiftGuitar1_4st[1].x + 10 , y:shiftGuitar1_4st[1].y + 20}, {x:shiftGuitar1_4st[1].x + 45, y:shiftGuitar1_4st[1].y + 70});


//u254F左利き用4線フレット
//u254F左利き用4線フレット
insertTiePathToSVG({x:shiftGuitar1_1st[2].x , y:shiftGuitar1_1st[2].y + 10}, {x:shiftGuitar1_1st[2].x + 35, y:shiftGuitar1_1st[2].y + 10});
var Guitar1tab_st1_option = {
var Guitar1tab_st1_option = {
     textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
     textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
1,041行目: 1,342行目:
};
};
insertTextToSVG(Guitar1tab_st1_option);
insertTextToSVG(Guitar1tab_st1_option);
var Guitar1tab_st2_option = {
    textContent: ["\uFF03", "５", "４", "３", "：", "：", "：", "［"], // 必須文字列
    strID: "Guitar1tab_st2", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar1tab_2st.x + 10, y:Guitar1tab_2st.y + 80},
{x:Guitar1tab_2st.x + 15, y:Guitar1tab_2st.y + 90},
{x:Guitar1tab_2st.x + 30, y:Guitar1tab_2st.y + 90},
{x:Guitar1tab_2st.x + 45, y:Guitar1tab_2st.y + 90},
{x:Guitar1tab_2st.x + 27, y:Guitar1tab_2st.y + 50},//3弦中ポジ
{x:Guitar1tab_2st.x + 10, y:Guitar1tab_2st.y + 60},//4弦内ポジ
{x:Guitar1tab_2st.x + 10, y:Guitar1tab_2st.y + 70},//5弦内ポジ
{x:Guitar1tab_2st.x + 42, y:Guitar1tab_2st.y + 80},//外全セーハ
//{x:Guitar1tab_2st.x + 60, y:Guitar1tab_2st.y + 40},//2弦ネックマーク
//{x:Guitar1tab_2st.x + 60, y:Guitar1tab_2st.y + 50},//3弦ネックマーク
//{x:Guitar1tab_2st.x + 60, y:Guitar1tab_2st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1tab_st2_option);
var Guitar1tab_st3_option = {
    textContent: ["\uFF03", "５", "４", "３", "：", "＿", "？", "？"], // 必須文字列
    strID: "Guitar1tab_st3", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar1tab_3st.x + 10, y:Guitar1tab_3st.y + 80},
{x:Guitar1tab_3st.x + 15, y:Guitar1tab_3st.y + 90},
{x:Guitar1tab_3st.x + 30, y:Guitar1tab_3st.y + 90},
{x:Guitar1tab_3st.x + 45, y:Guitar1tab_3st.y + 90},
//{x:Guitar1tab_3st.x + 27, y:Guitar1tab_3st.y + 50},//3弦中ポジ
//{x:Guitar1tab_3st.x + 10, y:Guitar1tab_3st.y + 60},//4弦内ポジ
{x:Guitar1tab_3st.x + 42, y:Guitar1tab_3st.y + 70},//5弦外ポジ
{x:Guitar1tab_3st.x + 10, y:Guitar1tab_3st.y + 60},//内全セーハ
//{x:Guitar1tab_3st.x + 42, y:Guitar1tab_3st.y + 60},//外全セーハ
{x:Guitar1tab_3st.x + 80, y:Guitar1tab_3st.y + 30},//1弦ネックマーク
//{x:Guitar1tab_3st.x + 60, y:Guitar1tab_3st.y + 40},//2弦ネックマーク
//{x:Guitar1tab_3st.x + 60, y:Guitar1tab_3st.y + 50},//3弦ネックマーク
//{x:Guitar1tab_3st.x + 60, y:Guitar1tab_3st.y + 60},//4弦ネックマーク
//{x:Guitar1tab_3st.x + 60, y:Guitar1tab_3st.y + 70},//5弦ネックマーク
{x:Guitar1tab_3st.x + 80, y:Guitar1tab_3st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1tab_st3_option);
var Guitar1tab_st4_option = {
    textContent: ["\uFF03", "６", "５", "４", "：", "＿", "？", "？", "\uFF03", "７", "６", "５", "：", "＿", "？", "？"], // 必須文字列
    strID: "Guitar1tab_st4", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar1tab_4st.x + 10, y:Guitar1tab_4st.y + 80},
{x:Guitar1tab_4st.x + 15, y:Guitar1tab_4st.y + 90},
{x:Guitar1tab_4st.x + 30, y:Guitar1tab_4st.y + 90},
{x:Guitar1tab_4st.x + 45, y:Guitar1tab_4st.y + 90},
//{x:Guitar1tab_4st.x + 27, y:Guitar1tab_4st.y + 50},//3弦中ポジ
//{x:Guitar1tab_4st.x + 10, y:Guitar1tab_4st.y + 60},//4弦内ポジ
{x:Guitar1tab_4st.x + 42, y:Guitar1tab_4st.y + 70},//5弦外ポジ
{x:Guitar1tab_4st.x + 10, y:Guitar1tab_4st.y + 60},//内全セーハ
//{x:Guitar1tab_4st.x + 42, y:Guitar1tab_4st.y + 60},//外全セーハ
{x:Guitar1tab_4st.x + 80, y:Guitar1tab_4st.y + 30},//1弦ネックマーク
//{x:Guitar1tab_4st.x + 60, y:Guitar1tab_4st.y + 40},//2弦ネックマーク
//{x:Guitar1tab_4st.x + 60, y:Guitar1tab_4st.y + 50},//3弦ネックマーク
//{x:Guitar1tab_4st.x + 60, y:Guitar1tab_4st.y + 60},//4弦ネックマーク
//{x:Guitar1tab_4st.x + 60, y:Guitar1tab_4st.y + 70},//5弦ネックマーク
{x:Guitar1tab_4st.x + 80, y:Guitar1tab_4st.y + 80},//6弦ネックマーク
{x:Guitar1tab_4st.x + 100 + 10, y:Guitar1tab_4st.y + 80},
{x:Guitar1tab_4st.x + 100 + 15, y:Guitar1tab_4st.y + 90},
{x:Guitar1tab_4st.x + 100 + 30, y:Guitar1tab_4st.y + 90},
{x:Guitar1tab_4st.x + 100 + 45, y:Guitar1tab_4st.y + 90},
{x:Guitar1tab_4st.x + 100 + 42, y:Guitar1tab_4st.y + 70},//5弦外ポジ
{x:Guitar1tab_4st.x + 100 + 10, y:Guitar1tab_4st.y + 60},//内全セーハ
{x:Guitar1tab_4st.x + 100 + 80, y:Guitar1tab_4st.y + 30},//1弦ネックマーク
{x:Guitar1tab_4st.x + 100 + 80, y:Guitar1tab_4st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1tab_st4_option);
var Guitar2_st1_option = {
    textContent: ["，"], // 必須文字列
    strID: "Guitar2_st1", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar2_1st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2_st1_option);
var Guitar2_st2_option = {
    textContent: ["＊"], // 必須文字列
    strID: "Guitar2_st2", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftGuitar2_2st,
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2_st2_option);
var Guitar2tab_st1_option = {
    textContent: ["\u254F", "３", "２", "１", "：", "：", "／", "／", "／", "／"], // 必須文字列
    strID: "Guitar2tab_st1", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar2tab_1st.x + 10, y:Guitar2tab_1st.y + 80},
{x:Guitar2tab_1st.x + 15, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 30, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 45, y:Guitar2tab_1st.y + 90},
{x:Guitar2tab_1st.x + 27, y:Guitar2tab_1st.y + 70},//4弦中ポジ
{x:Guitar2tab_1st.x + 27, y:Guitar2tab_1st.y + 60},//5弦中ポジ
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 30},//1弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 40},//2弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 50},//3弦ネックマーク
{x:Guitar2tab_1st.x + 60, y:Guitar2tab_1st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2tab_st1_option);
var Guitar2tab_st2_option = {
    textContent: ["\uFF03", "５", "４", "３", "：", "：", "：", "［"], // 必須文字列
    strID: "Guitar2tab_st2", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: 0,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 80},
{x:Guitar2tab_2st.x + 15, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 30, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 45, y:Guitar2tab_2st.y + 90},
{x:Guitar2tab_2st.x + 27, y:Guitar2tab_2st.y + 50},//3弦中ポジ
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 60},//4弦内ポジ
{x:Guitar2tab_2st.x + 10, y:Guitar2tab_2st.y + 70},//5弦内ポジ
{x:Guitar2tab_2st.x + 42, y:Guitar2tab_2st.y + 80},//外全セーハ
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 40},//2弦ネックマーク
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 50},//3弦ネックマーク
//{x:Guitar2tab_2st.x + 60, y:Guitar2tab_2st.y + 80},//6弦ネックマーク
], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar2tab_st2_option);


var EGuitar2Text_options = {
var EGuitar2Text_options = {
1,178行目: 1,639行目:
                   }
                   }
                 }
                 }
              }
            }
          }
          else if (numberOfValues === 23) {
            if (dAttribute.startsWith('M')) {
              var MnumberOfValues = (dAttribute.match(/M/g) || []).length; // カンマの数 + 1 = 数値の数
              var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数
              var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
              if (MnumberOfValues == 2){
              if (CnumberOfValues == 11){
                path.setAttribute("fill", "none");
                path.setAttribute("stroke", "none");
              }
               }
               }
             }
             }
           }
           }
           else if (numberOfValues === 1) {
           else if (numberOfValues === 1) {
             if (dAttribute.startsWith('M')) {
             if (dAttribute.startsWith('M')) {
               var AnumberOfValues = (dAttribute.match(/A/g) || []).length; // カンマの数 + 1 = 数値の数
               var AnumberOfValues = (dAttribute.match(/A/g) || []).length; // カンマの数 + 1 = 数値の数

2024年4月12日 (金) 23:54時点における版

VexFlow 使い方に戻る。

概要

　コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタあるいは連桁で表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。

　

タブ譜 コードフォーム


　コードは以下のとおりです。 


<div id="yonet202403Mid_Output01"></div>
<script>

</script>


　

　

VexFlow 使い方に戻る。

「https://wiki.yo-net.jp/index.php?title=VexFlow_タブ譜_コードフォーム&oldid=7792」から取得