VexFlow タブ譜 - 版の履歴

2024年4月15日 (月) 09:47にYo-netによる

2024-04-15T09:47:06Z

← 古い版		2024年4月15日 (月) 18:47時点における版
1,863行目:		1,863行目:


	タブ譜を描いただけですが、ここではVexFlowのタブ譜の技術は使わず、通常の五線譜を二つ重ねているだけです。線が重なると少し汚くなるので、必要最小限になるよう。重ねる五線譜の一つは、10ピクセル上にずらした上で、一番上の線だけを描いています。小節線の長さは調節できないので、一部重なっています。これで6線50ピクセルの幅のタブ譜になります。TAB記号は自作のフォントを前の記事でもやった方法で追加しています。		タブ譜を描いただけですが、ここではVexFlowのタブ譜の技術は使わず、通常の五線譜を二つ重ねているだけです。線が重なると少し汚くなるので、必要最小限になるよう。重ねる五線譜の一つは、10ピクセル上にずらした上で、一番上の線だけを描いています。小節線の長さは調節できないので、一部重なっています。これで6線50ピクセルの幅のタブ譜になります。TAB記号は自作のフォントを前の記事でもやった方法で追加しています。359～385行目でGuitar1のタブ譜の第一弦を追加するために5線譜の10ピクセル上に五線譜の一番上の線だけを描いたものを追記しています。


	ベースのタブ譜は逆に4線譜にしないといけないので、ひとつ削っています。ただし、このままだと小節線が飛び出してしまうので、VexFlowの機能の小節線は描かないようにしました。そして、あらたに作った関数で、30ピクセルの小節線を描くようにしています。なので、この先、二重線にしたり、リピート記号を描いたりする必要が出てきたら、また関数はちょこっと変えていかないといけないのだと思います。繰り返し記号など全部の小節線の種類を網羅しないといけないですね。ベースタブ譜は公式でも対応できないので、これくらいの苦労はしかたないですね。		440～470行目では、Guitar2でも同じことをやっています。


			489～536行目のベースのタブ譜は逆に4線譜にしないといけないので、ひとつ削っています。ただし、このままだと小節線が飛び出してしまうので、VexFlowの機能の小節線は描かないようにしました。そして、あらたに作った関数で、30ピクセルの小節線を描くようにしています。なので、この先、二重線にしたり、リピート記号を描いたりする必要が出てきたら、また関数はちょこっと変えていかないといけないのだと思います。繰り返し記号など全部の小節線の種類を網羅しないといけないですね。ベースタブ譜は公式でも対応できないので、これくらいの苦労はしかたないですね。


			小節線を描くために、準グローバル変数にベースタブ譜小節の位置を格納して記憶しています。即時実行関数が入れ子になっていて、VexFlowの描画は入れ子になっている部分で処理して、管理人が思いつきで描画している奥の手の処理は外側の即時実行関数内で動いています。この外側を準グローバル変数と呼んでいます。これはもうひとつ楽譜を同じhtml内で描くときに変数名が同じになってしまっても問題ないようにするための工夫です。この描画全体に関わる変数という意味で準グローバル変数と呼んでいます。

2024年4月15日 (月) 09:34にYo-netによる

2024-04-15T09:34:13Z

← 古い版		2024年4月15日 (月) 18:34時点における版
941行目:		941行目:


	<syntaxhighlight lang="javascript" line start="1" highlight="">		<syntaxhighlight lang="javascript" line start="1" highlight="359-364, 366-371, 373-378, 380-385, 444-449, 451-456, 458-463, 465-470, 489-495, 497, 498, 503, 505-512, 514, 516-523, 525, 527-534, 536, 835-838">
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<script>		<script>

Yo-net: /* 概要 */

2024-04-04T09:22:26Z

概要

← 古い版		2024年4月4日 (木) 18:22時点における版
7行目:		7行目:
	== '''概要''' ==		== '''概要''' ==
	まともにVexFlowを使う気がないので、VexFlowを実直に学びたいという人向けの記事ではなくなる予定です。VexFlow応用しかやりません。覚えてもしょうがないことはやらないのがここの管理人の方針なのです。まずはタブ譜を表示するだけのことをやってみましょう。応用技をつかえば、ベースのタブ譜も描けるようになる優れた技術です。自称ですけど。		まともにVexFlowを使う気がないので、VexFlowを実直に学びたいという人向けの記事ではなくなる予定です。VexFlow応用しかやりません。覚えてもしょうがないことはやらないのがここの管理人の方針なのです。まずはタブ譜を表示するだけのことをやってみましょう。応用技をつかえば、ベースのタブ譜も描けるようになる優れた技術です。自称ですけど。


			変数名を一旦リセットして、タブ譜スコアを描こうとしている感じの名前に変えてみました。わかりにくい感じになりましたが、Vocalの1小節目ならVocal_St1みたいな名前です。A5サイズの1ページあたりにはだいたい3小節か4小節しか配置できないので、これであとは3小節バージョンをつくったりもしないといけないかもしれませんし、今回はGutar1とGuitar2というGuitarを重ねどりするようなタイプの4ピースバンド向けの構成を作りました。KeyboardやPianoを使うバンドもあるのでもうちょっといろんなひな形を作る必要もありそうです。A5サイズを2段組にしたA4サイズやもうちょっと小さいサイズのスコアもありますよね。手書きするのに小さいサイズのは使いにくいかもだけどね。自分で書いた楽譜を製本したい場合は、InDesignにsvgを埋め込むことも考えないとだめかもしれませんね。もし流行り始めたら、楽譜革命到来だな。自分で製本とか夢みたいだわ。まぁメンドクサくてやってらんねってなるでしょうけど、楽譜フォントを自作できる人も増えたら、個性的な楽譜本とかもつくれちゃうわけで、夢あるな。AIとかいっている時代にようやく自主出版のスコア譜とか描けるようになるっていう時代錯誤。いいね。なんでこんなに楽譜出版業界の個人製作は出遅れるんだろうな。やっぱ楽譜を描くって、まだまだ敷居が高いんだな。バンド譜作成アプリの決定版がいまだに存在しないというね。AdobeやRolandやYAMAHAや各種音楽製品の会社や出版関係の会社やソフトウェア屋さんは、はやく事業化するべきだよね。投資対回収効果があるといいんだけどクラシック用の楽譜作りで満足してる場合じゃないよね。ドレミ出版やシンコーミュージックが手の内を明かさないだろうから難しいのかな。スコアがデジタルで出回り始めたら、耳コピして自分で作ったモノなのかスコア出版社のコピーなのかとかいろいろ権利がわかりづらくなるという問題が発生しそうだし、さすがに作曲者・作詞者・オリジナル演奏者とレーベルも完璧なスコアが知らぬ間に出回ったら、困るだろうね。権利関係を解決してから出まわせってね。お金が4者5者に還元される状況でデジタルスコア時代を迎えないといけない。


			まぁいろいろ気にしてもしょうがないので、学習記事が出来上がったら、手書きで作曲する人向けの印刷して使うひな型を提供しようと思います。ひな形には方眼紙模様はいらないよね。そういえば、そういったひな形を配布してくれてる便利なサイトってあるのかな。あとで調べてみよう。

Yo-net: /* 概要 */

2024-04-04T09:00:38Z

概要

← 古い版		2024年4月4日 (木) 18:00時点における版
7行目:		7行目:
	== '''概要''' ==		== '''概要''' ==
	まともにVexFlowを使う気がないので、VexFlowを実直に学びたいという人向けの記事ではなくなる予定です。VexFlow応用しかやりません。覚えてもしょうがないことはやらないのがここの管理人の方針なのです。まずはタブ譜を表示するだけのことをやってみましょう。応用技をつかえば、ベースのタブ譜も描けるようになる優れた技術です。自称ですけど。		まともにVexFlowを使う気がないので、VexFlowを実直に学びたいという人向けの記事ではなくなる予定です。VexFlow応用しかやりません。覚えてもしょうがないことはやらないのがここの管理人の方針なのです。まずはタブ譜を表示するだけのことをやってみましょう。応用技をつかえば、ベースのタブ譜も描けるようになる優れた技術です。自称ですけど。


	~~ちな、2024年4月上旬、まだ書きかけの記事です。~~

Yo-net: /* タブ譜 */

2024-04-04T09:00:08Z

タブ譜

差分を表示

Yo-net: /* タブ譜 */

2024-04-03T16:42:48Z

タブ譜

← 古い版		2024年4月4日 (木) 01:42時点における版
521行目:		521行目:

	const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);		const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);
	Base_Tab2.~~setEndBegType~~(VF.Barline.type.NONE);		Base_Tab2.setBegBarType(VF.Barline.type.NONE);
	Base_Tab2.setEndBarType(VF.Barline.type.NONE);		Base_Tab2.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {
532行目:		532行目:

	const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);		const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);
	Base_Tab3.~~setEndBegType~~(VF.Barline.type.NONE);		Base_Tab3.setBegBarType(VF.Barline.type.NONE);
	Base_Tab3.setEndBarType(VF.Barline.type.NONE);		Base_Tab3.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {
543行目:		543行目:

	const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);		const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);
	Base_Tab4.~~setEndBegType~~(VF.Barline.type.NONE);		Base_Tab4.setBegBarType(VF.Barline.type.NONE);
	Base_Tab4.setEndBarType(VF.Barline.type.NONE);		Base_Tab4.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {

Yo-net: /* タブ譜 */

2024-04-03T16:41:11Z

タブ譜

← 古い版		2024年4月4日 (木) 01:41時点における版
521行目:		521行目:

	const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);		const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);
			Base_Tab2.setEndBegType(VF.Barline.type.NONE);
	Base_Tab2.setEndBarType(VF.Barline.type.NONE);		Base_Tab2.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {
531行目:		532行目:

	const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);		const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);
			Base_Tab3.setEndBegType(VF.Barline.type.NONE);
	Base_Tab3.setEndBarType(VF.Barline.type.NONE);		Base_Tab3.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {
541行目:		543行目:

	const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);		const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);
			Base_Tab4.setEndBegType(VF.Barline.type.NONE);
	Base_Tab4.setEndBarType(VF.Barline.type.NONE);		Base_Tab4.setEndBarType(VF.Barline.type.NONE);
	for (var i = 0; i < 5; i++) {		for (var i = 0; i < 5; i++) {

Yo-net: /* タブ譜 */

2024-04-03T16:39:23Z

タブ譜

@@ 519行目: / 519行目: @@
 StaveBase1 = Base_Tab1;
 var Base_connect = new VF.StaveConnector(Base_St1, Base_Tab1);
@@ 739行目: / 769行目: @@
 var svgContainer = document.getElementById('yonet202403Mid_Output01');
 var svgElement = svgContainer.querySelector('svg');
 var VocalText_options = {
@@ 818行目: / 846行目: @@
 };
 insertTextToSVG(BaseTab_options);
 var DrumText_options = {

Yo-net: /* タブ譜 */

2024-04-03T16:33:42Z

タブ譜

← 古い版		2024年4月4日 (木) 01:33時点における版
494行目:		494行目:
	Base_St1.addTimeSignature('4/4').setContext(ctx);		Base_St1.addTimeSignature('4/4').setContext(ctx);
	Base_St1.draw();		Base_St1.draw();

			const Base_St2 = new Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);
			Base_St2.draw();

			const Base_St3 = new Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);
			Base_St3.draw();

			const Base_St4 = new Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);
			Base_St4.draw();

	const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);		const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);

Yo-net: /* タブ譜 */

2024-04-03T16:30:15Z

タブ譜

← 古い版		2024年4月4日 (木) 01:30時点における版
449行目:		449行目:

	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_Tab2~~.draw();		Guitar2_Tab3.draw();

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

	var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);		var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);