VexFlow タブ譜フレット番号と旗表示 - 版の履歴

Yo-net: /* タブ譜フレット番号と旗表示 */

2024-04-15T11:27:37Z

タブ譜フレット番号と旗表示

← 古い版		2024年4月15日 (月) 20:27時点における版
3,786行目:		3,786行目:
	<tr>		<tr>
	<td>第1弦</td>		<td>第1弦</td>
	<td>-1</td>		<td style="text-align: right;">-1</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>第2弦</td>		<td>第2弦</td>
	<td>0</td>		<td style="text-align: right;">0</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>第3弦</td>		<td>第3弦</td>
	<td>1</td>		<td style="text-align: right;">1</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>第4弦</td>		<td>第4弦</td>
	<td>2</td>		<td style="text-align: right;">2</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>第5弦</td>		<td>第5弦</td>
	<td>3</td>		<td style="text-align: right;">3</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>第6弦</td>		<td>第6弦</td>
	<td>4</td>		<td style="text-align: right;">4</td>
	</tr>		</tr>
	</table>		</table>

2024年4月15日 (月) 11:23にYo-netによる

2024-04-15T11:23:01Z

← 古い版		2024年4月15日 (月) 20:23時点における版
3,759行目:		3,759行目:

	ものすごく長いコードになったな。1ページみっちり楽譜を描くだけでも、相当のコード量になりますね。		ものすごく長いコードになったな。1ページみっちり楽譜を描くだけでも、相当のコード量になりますね。


			812行目からタブ譜を描くための5線譜描画が始まります。Tab譜には調号や拍子に関する記号が記載されないので、左側の余白が大きくなりますので、仮想的な透明の小節を作って、そこを起点に符棒と符旗や連桁を描画します。あとで、符頭を消す関数を作ってあるので、普通に描画してから消すという方式です。UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes1_1, [1, 2]);のようにするとGuitar1_tab_notes1_1というSteveNoteオブジェクトの要素1と2の符頭を消すIDをUniqueIdsに格納します。VexFlowによる描画が終わったあとでUniqueIdsを使って、符頭を消します。


			以下のように


			<syntaxhighlight lang="javascript">
			shiftGuitar1_tab1 = addShift(
			Guitar1_tab_notes1_1,
			[0, 0, 0, 0, 1, 2],
			[3, 2, 1, 0, 1, -1]
			);
			</syntaxhighlight>


			フレット番号を記述する位置をaddShift関数でStaveNoteオブジェクトを基準に取得します。1拍目からの2分音符のx方向の値を4要素分取得する必要がありますので、要素の0を4回取得するように[0, 0, 0, 0, …]として同じ要素を繰り返し指定しています。y方向には5弦、4弦、3弦、2弦の位置を取得するべく、[3, 2, 1, 0, …]のように指定います。1弦は-1、6弦は4が対応しています。したがって


			<table style="border: 0; border-collapse: collapse;">
			<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
			<td>弦</td>
			<td>位置番号</td>
			</tr>
			<tr>
			<td>第1弦</td>
			<td>-1</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>第2弦</td>
			<td>0</td>
			</tr>
			<tr>
			<td>第3弦</td>
			<td>1</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>第4弦</td>
			<td>2</td>
			</tr>
			<tr>
			<td>第5弦</td>
			<td>3</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>第6弦</td>
			<td>4</td>
			</tr>
			</table>


			1101行目までが、同じように2小節目から4小節目にもタブ譜内に符棒や符旗や連桁の記号をしるすための指示がつづきます。


			1502行目からはVexFlowで描画できない記号をペタペタ表示していく関数になっています。全角の数字はタブ譜に表示するフレット番号の文字を表すコードポイントになっていて、全角の数字と1桁のフレット番号が対になっています。"０", "２", "２", "２", "９", "９"のようにポジションを記録しているshiftなんちゃらとした名前のオブジェクトに格納されている座標の順番どおりにコードポイントを示しています。10より大きい値のフレット番号は別のコードポイントに格納されていて、\uXXXXのような形式でXXXXに16進数を指定して、表示させます。Stave_x_Offsetキーの値も[10, 0, 10, 0, 0, 0],のように配列要素ごとに個別の値を指定できます。配列ではない数値を付与すると、その数値が全てに適用されますし、配列要素値が足りない場合は最後に指定した要素の値が使いまわされます。Stave_y_Offsetも同じ仕組みです。


			\uFF7Cは上向きの2分音符の4フレット幅のタブ譜向け記号です。"．"全角のドットは付点やアクセントに使えるドットになっています。\uFF7Aは1フレット幅の2分音符です。ちょっと大きすぎるっすね。次の記事ではちょうどいい感じの2分音符も表示しています。



			あとはTr．のような文字を表示したい場合は全角で"Ｔｒ．"のように指定するとちょうどいい感じの大きさ手書き英文字が描けるようになっています。コードポイントごとの文字の解説は別の記事で詳しく解説するようにするつもりです。




	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

2024年4月15日 (月) 10:42にYo-netによる

2024-04-15T10:42:54Z

← 古い版		2024年4月15日 (月) 19:42時点における版
1,904行目:		1,904行目:


	<syntaxhighlight lang="javascript" line start="1" highlight="812-815, 817-845, 847-849, 851-853, 855-858, 860-864, 871-874, 876-909, 911, 912, 914, 915, 917-919, 921-923, 925-928, 930-934, 936, 937, 955-988, 990, 991, 993-995, 997-999, 1001-1004, 1006-1010, 1012, 1013, 1015-1021, 1028-1030, 1032-1064, 1066, 1067, 1069, 1070, 1072, 1073, 1075-1077, 1079-1081, 1083-1086, 1088-1092, 1094-1098, 1100, 1101, 1501-1512, 1514-1521, 1523-1533, 1535-1552, 1554, 1556, 1558-1568, 1570, 1572, 1574, 1576, 1578, 1581-1588, 1590-1600, ">		<syntaxhighlight lang="javascript" line start="1" highlight="812-815, 817-845, 847-849, 851-853, 855-858, 860-864, 871-874, 876-909, 911, 912, 914, 915, 917-919, 921-923, 925-928, 930-934, 936, 937, 955-988, 990, 991, 993-995, 997-999, 1001-1004, 1006-1010, 1012, 1013, 1015-1021, 1028-1030, 1032-1064, 1066, 1067, 1069, 1070, 1072, 1073, 1075-1077, 1079-1081, 1083-1086, 1088-1092, 1094-1098, 1100, 1101, 1501-1512, 1514-1521, 1523-1533, 1535-1552, 1554, 1556, 1558-1568, 1570, 1572, 1574, 1576, 1578, 1581-1588, 1590-1600, 1602, 1604, 1608, 1610, 1613, 1615-1626">
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<script>		<script>

2024年4月15日 (月) 10:16にYo-netによる

2024-04-15T10:16:15Z

← 古い版		2024年4月15日 (月) 19:16時点における版
1,904行目:		1,904行目:


	<syntaxhighlight lang="javascript" line start="1" highlight="">		<syntaxhighlight lang="javascript" line start="1" highlight="812-815, 817-845, 847-849, 851-853, 855-858, 860-864, 871-874, 876-909, 911, 912, 914, 915, 917-919, 921-923, 925-928, 930-934, 936, 937, 955-988, 990, 991, 993-995, 997-999, 1001-1004, 1006-1010, 1012, 1013, 1015-1021, 1028-1030, 1032-1064, 1066, 1067, 1069, 1070, 1072, 1073, 1075-1077, 1079-1081, 1083-1086, 1088-1092, 1094-1098, 1100, 1101, 1501-1512, 1514-1521, 1523-1533, 1535-1552, 1554, 1556, 1558-1568, 1570, 1572, 1574, 1576, 1578, 1581-1588, 1590-1600, ">
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<script>		<script>

Yo-net: /* 概要 */

2024-04-07T13:58:03Z

概要

← 古い版		2024年4月7日 (日) 22:58時点における版
33行目:		33行目:


	最後の部分でupdateAllUniqueIdsに取得した符頭を消す全てのノートidの集合を処理する部分の精度をあげる改造をしました。前の項目までの処理だとノートに付随する付点を消したり、アクセント記号が消えたりする可能性がありました。タブ譜を描くという目的のためにはアクセントは消さず、臨時記号は消した方がよさそうです。あと、追加の五線譜もタブ譜にはいらないので消す対象としました。四分音符と二分音符、全音符の符頭は消します。		最後の部分でupdateAllUniqueIdsに取得した符頭を消す全てのノートidの集合を処理する部分の精度をあげる改造をしました。前の項目までの処理だとノートに付随する付点を消したり、結局ほとんどのアクセントは使えないのですが、アクセント記号が消えたりする可能性がありました。


			タブ譜の音の高さはならす弦の高さで旗の付け根の位置をきめるだけの音の高さです。一番低い位置の弦か、高い位置の弦を音として指定するだけです。6弦は一番下の線で、E/4の位置ですから、G/4で旗の長さは十分でしょう。1弦の位置は五線譜の一個上の位置なので、A/5の位置で、そのままだと追加線が表示されますが、下向きの符棒なら、stem_directionを-1にして、F/5までの線でよいでしょう。そういう感じで音の高さを弦の位置におきかえて考えます。1弦でも装飾音符なら上向きの旗になることもあるので、その場合はB/5とかを指定してstem_directionを1というのもあるでしょう。でも大丈夫です。符頭消去処理では五線譜の追加線も消えるようになっていますので、きにせず、高い位置の弦も高い音符を使えばいいのです。1弦を描くために使った、五線譜で音符を書き始めるとバランスが難しくなってきますので、使わない方がよいでしょう。


			弦をひとつしかつかわない音なんかで、VexFlowの機能をアクセント記号を書きたいときには書けばいいでしょう。2弦以上同時に鳴らすアーティキュレーションは、符旗がながくなってしまうので、描けません。基本的には、手動でアーティキュレーション記号もBravuraフォントを使って描くのがよいでしょう。タブ譜を描くという目的のためにはアクセントは消さず、臨時記号は消した方がよさそうです。あと、追加の五線譜もタブ譜にはいらないので消す対象としました。四分音符と二分音符、全音符の符頭は消します。

2024年4月7日 (日) 13:33にYo-netによる

2024-04-07T13:33:44Z

← 古い版		2024年4月7日 (日) 22:33時点における版
13行目:		13行目:

	頑張ってタブ譜をなっとくいくレベルの描画をしてみました。これくらいの描画がVexFlowで出来たら、まじでバリバリ使ってたと思う。けど、ほとんど自作の描画です。慣れないうちは疲れるね。スライド、ハンマリング、プリングオフといった指示を省略しています。次の記事でつけよかな。		頑張ってタブ譜をなっとくいくレベルの描画をしてみました。これくらいの描画がVexFlowで出来たら、まじでバリバリ使ってたと思う。けど、ほとんど自作の描画です。慣れないうちは疲れるね。スライド、ハンマリング、プリングオフといった指示を省略しています。次の記事でつけよかな。


			追加した関数は


			*insertTiePathToSVG({x:(始点x座標), y:(始点y座標)}, {x:終点x座標, y:終点y座標}, 方向数値(1 or -1), 深さ数値);

			*insertTrilPathToSVG([{x:(始点x座標), y:(始点y座標)}, {x:終点x座標, y:終点y座標}], 方向数値(1 or -1));

			*getUniqueStaveNotesIds(StaveNote notes, arr = [])

			*updateAllFlagUniqueIds(getUniqueStaveNotesIds()の戻り値)


			で、タイやスラーを独自で描く関数と音符と音符の間に描くトリル記号を描く関数を追加しました。いずれの関数も始点と終点のキー.xと.yを含むオブジェクトを引数に受け取ります。方向数値はstem_directionに準じて1が規定値で、1なら下向きに膨らんだタイ、スラーになり、トリルは旗が上向きのときのトリル記号になり-1なら逆向きです。insertTiePathToSVGが引数にとる深さ数値は10ピクセル±2がベジェ曲線のハンドル値になるカーブの深さになります。もっと深くしたい場合は大きい値を指定するとよいですが、カーブの内側と外側の±2は固定なので、薄い線になるでしょう。


			トリルの時は4分音符の長さで行うときは旗の無い8分音符が2つの間をすばやく何回か繰り返すという意味なので8分音符で描いてから、旗を消すという処理が必要になります。２分音符のときは２分音符の符頭に置き換えないとだめでしょう。全音符のときは２分音符二つの旗と符棒を消さないと駄目ですね。符棒も旗も消す関数も必要かもしれませんね。あとでつくっておこうかな。


			最後の部分でupdateAllUniqueIdsに取得した符頭を消す全てのノートidの集合を処理する部分の精度をあげる改造をしました。前の項目までの処理だとノートに付随する付点を消したり、アクセント記号が消えたりする可能性がありました。タブ譜を描くという目的のためにはアクセントは消さず、臨時記号は消した方がよさそうです。あと、追加の五線譜もタブ譜にはいらないので消す対象としました。四分音符と二分音符、全音符の符頭は消します。


			タブ譜の数字は自作フォントでは全角の数字に割り当てていますので、9までなら全角文字でいけます。１０以降も全角文字２つの数字を使えばよいのでしょうけれど、つめつめにした専用の数字が違うコードポイントに格納されています。


3,691行目:		3,715行目:
	}		}
	}		}
	}		}//21は全音符、2分音符の符頭です。35はナチュラル、95はシャープ、41はフラット
	else if (numberOfValues === 21 \|\| numberOfValues === 35 \|\| numberOfValues === 95 \|\| numberOfValues === 41) {		else if (numberOfValues === 21 \|\| numberOfValues === 35 \|\| numberOfValues === 95 \|\| numberOfValues === 41) {
	path.setAttribute("fill", "none");		path.setAttribute("fill", "none");
3,728行目:		3,752行目:


			ものすごく長いコードになったな。1ページみっちり楽譜を描くだけでも、相当のコード量になりますね。



	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

Yo-net: /* タブ譜フレット番号と旗表示 */

2024-04-07T12:24:37Z

タブ譜フレット番号と旗表示

差分を表示

Yo-net: /* タブ譜フレット番号と旗表示 */

2024-04-07T12:20:25Z

タブ譜フレット番号と旗表示

← 古い版		2024年4月7日 (日) 21:20時点における版
979行目:		979行目:
	new VF.StaveNote({ keys: ["d/5"], duration: "16" }),		new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
	new VF.StaveNote({ keys: ["d/5"], duration: "8" }),		new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16" }),		new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16" }),		new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
	new VF.GhostNote({ keys: ["b/4"], duration: "2" }),		new VF.GhostNote({ keys: ["b/4"], duration: "2" }),
	];		];

Yo-net: /* タブ譜フレット番号と旗表示 */

2024-04-07T04:42:30Z

タブ譜フレット番号と旗表示

← 古い版		2024年4月7日 (日) 13:42時点における版
974行目:		974行目:

	const Guitar1_tab_notes3_1 = [		const Guitar1_tab_notes3_1 = [
			new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
			new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
			new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
			new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
			new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16" }),		new VF.StaveNote({ keys: ["b/4"], duration: "16" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16" }),		new VF.StaveNote({ keys: ["b/4"], duration: "16" }),
	new VF.~~StaveNote({ keys: ["b/4"], duration: "16" }),~~		new VF.GhostNote({ keys: ["b/4"], duration: "2" }),
	~~new VF.StaveNote~~({ keys: ["b~~/4"], duration: "16" }),~~
	~~new VF.StaveNote({ keys: ["b/4"], duration: "8" }),~~
	~~new VF.StaveNote({ keys: ["e/4"], duration: "16" }),~~
	~~new VF.StaveNote({ keys: ["e/4"], duration: "16" }),~~
	~~new VF.GhostNote({ keys: ["e~~/4"], duration: "2" }),
	];		];
	const Guitar1_tab_notes3_2 = [		const Guitar1_tab_notes3_2 = [
1,047行目:		1,047行目:

	const Guitar1_tab_gracenotes4 = [		const Guitar1_tab_gracenotes4 = [
	new VF.GraceNote({ keys: ['b/4'], duration: '8', slash: true })		new VF.GraceNote({ keys: ['d/5'], duration: '8', slash: true })
	];		];

	const Guitar1_tab_notes4_1 = [		const Guitar1_tab_notes4_1 = [
	new VF.StaveNote({ keys: ["b/4"], duration: "8" }),		new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "8" }),		new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "8" }),		new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "8" }),		new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "4" }),		new VF.StaveNote({ keys: ["d/5"], duration: "4" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),		new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),		new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),

Yo-net: /* タブ譜フレット番号と旗表示 */

2024-04-07T04:20:46Z

タブ譜フレット番号と旗表示

← 古い版		2024年4月7日 (日) 13:20時点における版
1,057行目:		1,057行目:
	new VF.StaveNote({ keys: ["b/4"], duration: "4" }),		new VF.StaveNote({ keys: ["b/4"], duration: "4" }),
	new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),		new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
	new VF.StaveNote({ keys: ["d/5"], duration: "16", stem_direction: -1 }),		new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
	new VF.StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }),		new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
	];		];
	const Guitar1_tab_notes4_2 = [		const Guitar1_tab_notes4_2 = [

VexFlow タブ譜 フレット番号と旗表示 - 版の履歴

Yo-net: /* タブ譜 フレット番号と旗表示 */

2024年4月15日 (月) 11:23にYo-netによる

2024年4月15日 (月) 10:42にYo-netによる

2024年4月15日 (月) 10:16にYo-netによる

Yo-net: /* 概要 */

2024年4月7日 (日) 13:33にYo-netによる

Yo-net: /* タブ譜 フレット番号と旗表示 */

Yo-net: /* タブ譜 フレット番号と旗表示 */

Yo-net: /* タブ譜 フレット番号と旗表示 */

Yo-net: /* タブ譜 フレット番号と旗表示 */

VexFlow タブ譜フレット番号と旗表示 - 版の履歴

Yo-net: /* タブ譜フレット番号と旗表示 */

Yo-net: /* タブ譜フレット番号と旗表示 */

Yo-net: /* タブ譜フレット番号と旗表示 */

Yo-net: /* タブ譜フレット番号と旗表示 */

Yo-net: /* タブ譜フレット番号と旗表示 */