https://wiki.yo-net.jp/api.php?action=feedcontributions&feedformat=atom&user=Yo-net yonewiki - 利用者の投稿記録 [ja] 2026-07-27T05:47:54Z 利用者の投稿記録 MediaWiki 1.38.2 https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13577 STMK ScoreTemplateMaker(ja) 2026-07-26T14:07:03Z <p>Yo-net: </p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース&lt;/span&gt;。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるようになっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるようになっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13576 STMK ScoreTemplateMaker(ja) 2026-07-23T05:17:52Z <p>Yo-net: /* 小節設定ダイアログ */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるようになっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるようになっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13575 STMK ScoreTemplateMaker(ja) 2026-07-23T05:17:23Z <p>Yo-net: /* シンプル五線譜ダイアログ */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるようになっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13574 STMK ScoreTemplateMaker(ja) 2026-07-23T05:14:06Z <p>Yo-net: /* メニュー紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。お気に入りのコードポイントも書き出します。_favorite.svgはよく使うコードポイントが集まっていて便利です。管理人主観のお気に入りです。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13573 STMK ScoreTemplateMaker(ja) 2026-07-23T05:11:55Z <p>Yo-net: /* 小節設定ダイアログ */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。調号位置の設定に従った表記になります。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13572 STMK ScoreTemplateMaker(ja) 2026-07-23T05:10:41Z <p>Yo-net: /* シンプル五線譜ダイアログ */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> <br /> *'''調号位置'''<br /> <br /> :調号の位置も音部記号の種類や位置によって変化させる必要がありますが、実はこの調号の表記は個人の好みによって表記方法が自由に設定できる必要があります。実行ファイルと同じディレクトリにあるKEY_SIGNATURE_LIST.txtに従って、位置が決まる仕組みになっています。選択肢はト音_0、ヘ音_0、ハ音_0、ハ音+2が主な音部記号の利用方法なのでここから選択することになります。ト音_0は調号が＃系の場合はKEY_SIGNATURE_LIST.txtのキー値 TrebleClef.Offset_0.Sharp=[ 4, 1, 5, 2,-1, 3, 0]に、♭系の場合はキー値TrebleClef.Offset_0.Flat =[ 0, 3,-1, 2,-2, 1,-3]に従うことになります。カッコ内の数値は楽譜の第三線(シ)の位置を0としてシの上のドは1、その上のレは2、その上のミは3、その上のファは4、その上のソは5、シの一つ下のラは-1、その下のソは-2、その下のファは-3、その下のミは-4、ソの下のレは-5という具合に設定できます。ト音_0の♯系の規定値の[ 4, 1, 5, 2,-1, 3, 0]は調号がファ、ド、ソ、レ、ラ、ミ、シの順で♯が付きます。よく見る調号のカタチです。♭系の規定値の[ 0, 3,-1, 2,-2, 1,-3]は調号がシ、ミ、ラ、レ、ソ、ド、ファの順で♭が付きます。これもよく見る調号のカタチになっています。このあたりの調号は規定値で問題ないですが、他の表示においては好みが分かれるので、KEY_SIGNATURE_LIST.txtを編集することで好みの調号記号の表記に調整することができるよういなっています。何を言っているかわからない人は触らない方が良いでしょう。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13571 STMK ScoreTemplateMaker(ja) 2026-07-22T09:50:43Z <p>Yo-net: /* アプリケーションの主要な使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。残念ながら現段階では調号の位置を調整する機能はありません。へ音記号、ハ音記号などの調号は縦にずらす必要があります。以降にある小節設定でもこれは同じです。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13570 STMK ScoreTemplateMaker(ja) 2026-07-21T14:20:38Z <p>Yo-net: /* ライセンス認証の手順 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力・PDF出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13569 STMK ScoreTemplateMaker(ja) 2026-07-21T14:10:53Z <p>Yo-net: /* ライセンス認証の手順 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品は保存・SVG出力処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13568 STMK ScoreTemplateMaker(ja) 2026-07-21T14:05:59Z <p>Yo-net: /* ヘッダーフッター設定画面 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 　以下が、サンプルのために作成した楽譜テンプレートです。<br /> <br /> <br /> [[ファイル:STMK 014 SampleStaff.png|400px|thumb|none|エクスポートした楽譜テンプレート]]<br /> <br /> <br /> 　その補助線が以下です。<br /> <br /> <br /> [[ファイル:STMK 015 SampleStaff Guide.png|400px|thumb|none|エクスポートした楽譜補助線]]<br /> <br /> <br /> 　補助線と楽譜テンプレートを重ねた状態が以下です。<br /> <br /> <br /> [[ファイル:STMK 016 SampleStaffAndGuide.png|400px|thumb|none|エクスポートした楽譜テンプレートと補助線を重ねる]]<br /> <br /> <br /> 　これらの素材を組み合わせて冒頭で示したようなサンプルがAdobe Illustratorで作られています。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_016_SampleStaffAndGuide.png&diff=13567 ファイル:STMK 016 SampleStaffAndGuide.png 2026-07-21T14:03:49Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_015_SampleStaff_Guide.png&diff=13566 ファイル:STMK 015 SampleStaff Guide.png 2026-07-21T14:02:43Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_014_SampleStaff.png&diff=13565 ファイル:STMK 014 SampleStaff.png 2026-07-21T14:01:20Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13564 STMK ScoreTemplateMaker(ja) 2026-07-21T13:38:43Z <p>Yo-net: /* ヘッダーフッター設定画面 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 　BravuraフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> 　上記のようなデータ4枚にBravuraの全コードポイントのデータが出力されます。<br /> <br /> <br /> 　yonetMuFLフォントをエクスポートしたSVGデータの例<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 　上記のようなデータがyonetMuFLの全コードポイントのデータです。こちらはタブ譜関連のSVGデータになります。これらのSVGデータと楽譜SVGと補助線SVGを使って、楽譜清書作業が出来るということです。ものすごく時間はかかる作業ですが、やれなくはない作業です。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13563 STMK ScoreTemplateMaker(ja) 2026-07-21T12:47:02Z <p>Yo-net: /* アプリケーションの主要な使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> [[ファイル:STMK 012 Bravura ExportData.png|400px|thumb|none|エクスポートしたBravuraフォント]]<br /> <br /> <br /> [[ファイル:STMK 013 yonetMuFL ExportData.png|400px|thumb|none|エクスポートしたyonetMuFLフォント]]<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_013_yonetMuFL_ExportData.png&diff=13562 ファイル:STMK 013 yonetMuFL ExportData.png 2026-07-21T12:46:40Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_012_Bravura_ExportData.png&diff=13561 ファイル:STMK 012 Bravura ExportData.png 2026-07-21T12:42:51Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13560 STMK ScoreTemplateMaker(ja) 2026-07-21T10:02:19Z <p>Yo-net: /* ヘッダーフッター設定画面 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスは赤色状態がそのテキストボックスがアクティブであることを意味していて、青色は非アクティブです。赤色の状態で、DELETEキーを押すと、アクティブになっていたテキストボックスを消すことが出来ます。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13559 STMK ScoreTemplateMaker(ja) 2026-07-21T09:58:43Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール(ヘッダー表示画面ではヘッダー種類、フッター表示画面ではフッター種類の切り替えになります。)'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13558 STMK ScoreTemplateMaker(ja) 2026-07-21T09:54:19Z <p>Yo-net: /* アプリケーションの主要な使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> 　<br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> 　<br /> <br /> ==== '''メニュー紹介''' ====<br /> '''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 　<br /> <br /> <br /> 　<br /> <br /> ==== '''シンプル五線譜ダイアログ''' ====<br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> 　<br /> <br /> ==== '''五線譜描画後のコントロール発生''' ====<br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> 　<br /> <br /> ==== '''段設定ダイアログ''' ====<br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> 　<br /> <br /> ==== '''小節設定ダイアログ''' ====<br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> 　<br /> <br /> ==== '''ヘッダーフッター設定画面''' ====<br /> 　ヘッダーフッター設定画面では、マウスでテキストを置きたい範囲をマウスでドラッグすることで、テキストボックスが配置されます。完全に見た目を再現するユーザーインタフェースはかなり難しいので簡易なものになっています。パワーポイントなどで表示されるテキストボックスが如何にすごいものなのかを実感して欲しいものですね。プログラマにしかわからない凄さなのかもしれない。<br /> <br /> <br /> 　テキストボックスはあとからリサイズできるようになっているので、サイズを変えたい方向のボックス枠の部分にマウスカーソルを合わせてドラッグすることで、リサイズできます。テキストボックスの左上のマークをダブルクリックすることでテキストボックス編集ダイアログが開きます。<br /> <br /> <br /> [[ファイル:STMK 011 Text Setting Dialog.png|400px|thumb|none|テキスト設定ダイアログ]]<br /> <br /> <br /> *'''位置X[mm]''' '''Y[mm]'''<br /> <br /> :ボックスの左上位置をmmで指定します。高さ自動チェックボックスを入れるとYの指定が自動になってヘッダーなら上にぴたってくっつくし、フッターなら下にぴたってくっつく感じ。余白3mmになります。余白3mmはネットプリントの推奨設定です。<br /> <br /> <br /> *'''横位置'''<br /> <br /> :横位置を、左寄せ/中寄せ/右寄せから選択できます。ボックス全体の配置を紙に対してという観点から横位置を調整できます。<br /> <br /> <br /> *'''フォント'''<br /> <br /> :フォントをWindowsのシステムFontフォルダにインストールされている内容一覧から選択できます。<br /> <br /> <br /> *'''フォントサイズ'''<br /> <br /> :フォントサイズを8pt～72ptで選択できます。手入力で数値指定もできます。<br /> <br /> <br /> *'''幅 X[mm]''' '''高さ Y[mm]'''<br /> <br /> :テキストボックスの幅と高さをmmで指定できます。<br /> <br /> <br /> *'''枠内横位置'''<br /> <br /> :枠内の横位置を、左寄せ/中寄せ/右寄せ、から選べます。<br /> <br /> <br /> *'''枠内縦位置'''<br /> <br /> :枠内の縦位置を、上寄せ/中央寄せ/下寄せ、から選べます。<br /> <br /> <br /> テキストボックス内の文字に#を使うとページ番号$を使うとページ総数に置き換わります。#そのものを表示したいときは\\#とします。$そのものを表示したいときは\\$とします。\そのものを表示したいときは\\とします。\03#とするとページ番号が3桁固定の0埋めになります。\ 3#とするとページ番号が3桁固定の半角スペース埋めになります。ページ番号の全角数字表示には対応していません。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_011_Text_Setting_Dialog.png&diff=13557 ファイル:STMK 011 Text Setting Dialog.png 2026-07-21T09:33:24Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13556 STMK ScoreTemplateMaker(ja) 2026-07-21T09:18:22Z <p>Yo-net: /* アプリケーションの主要な使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *'''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> <br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> 段設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''オフセット位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の左上隅の初期位置を基準にオフセット位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 小節設定ダイアログでは以下の設定ができます。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''オフセット位置X[mm]'''<br /> <br /> :楽譜の末尾の小節線初期位置を基準としてオフセット位置X(横)をmmで指定できます。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節:左余白[mm]'''<br /> <br /> :小節の左余白をmmで指定できます。規定値は1mmです。調号や拍子の表示位置の調整と連動することになります。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> *'''前部小節線の種類'''<br /> <br /> :段の最初の小節だけ前部小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線の種類'''<br /> <br /> :小節の後部の小節線の種類を、無し、小節線、小節二重線、小節二重線(右太)、小節二重線(左太)、小節線(太)、小節二重線(太)、小節線(点線)、リピート開始、リピート終了、リピート開始終了、リピート点のみ、から選択できます。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''後部小節線後の調号'''<br /> <br /> :無し、#1個～7個の取消、b1個～7個の取消、から選択できます。主に段末尾における次の段での調号変更を予告するために使う機能です。<br /> <br /> <br /> *'''補助線'''<br /> <br /> :チェックボックスをOnにすると補助線が引かれ、Offにすると補助線が引かれなくなります。<br /> <br /> <br /> *'''分割数'''<br /> <br /> :補助線の分割数を、拍/裏拍(1拍2分割)/細分(1拍12分割)、から選択することができます。1拍12分割なら16分音符は3分割づつ配置すればいい、32分音符は1.5分割だね。6連符は2分割、3連符は4分割づつということで12分割はあらゆる音符配置に有効な分割数なのです。<br /> <br /> <br /> *'''拍数'''<br /> <br /> :補助線の拍数を指定します。<br /> <br /> <br /> *'''補助線:左余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号や拍子記号などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> *'''補助線:右余白[mm]'''<br /> <br /> :補助線の余白を設定します。調号の取消などに使われている必要な余白量の把握が難しいので別で設定するようになっています。あまり多く設定するものではないので、手動で設定するのがよいと判断しています。<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13555 STMK ScoreTemplateMaker(ja) 2026-07-21T08:37:46Z <p>Yo-net: /* アプリケーションの主要な使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *'''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> <br /> *'''シンプル五線譜ダイアログ'''<br /> 　メニューの[楽譜]-[シンプル五線譜ダイアログ]を選択すると以下のようなダイアログが表示されます。<br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> 　ダイアログの各設定値の意味について解説します。<br /> <br /> <br /> *'''( )詳細設定を維持する ( )リセットして再描画'''<br /> <br /> <br /> 　上記は一度、シンプル五線譜ダイアログ確定した後に再表示したときに表示されるラジオボタンコントロールです。<br /> <br /> 　詳細設定を維持するを選択すると、音部記号/音部記号位置/★五線譜長さ/★小節数/調号の詳細な設定を維持するように動きます。このあとで説明する小節設定・段設定による詳細な設定を維持するようにして、再度、シンプル五線譜を描画しようとするものです。主に変更できる設定は、段数/縦配置/上揃え指定時間隔/開始位置/五線間隔/拍子/補助線OnOFF/グリッドOnOff/グリッド種類mm Or pixelです。音部記号の左側にあるチェックボックスをOnにすると音部記号と音部記号位置を強制的に段の最初だけに適用することができます。調号記号の左側にあるチェックボックスをOnにすると調号記号を段の最初だけに適用することができます。<br /> <br /> <br /> 　リセットして再描画を選択すると、詳細な設定をまったく維持せず、シンプル五線譜を描画する動きになります。<br /> <br /> <br /> *'''音部記号'''<br /> <br /> :音部記号は、無し/ト音記号/へ音記号/ハ音記号から選べます。段の最初だけに適用されます。<br /> <br /> <br /> *'''音部記号位置'''<br /> <br /> :音部記号位置は、ト音記号/へ音記号/ハ音記号のときに変更できます。<br /> <br /> <br /> :*ト音記号は規定値では渦巻きの真ん中の部分がト音(ソ/G)の位置に合わせられますが、音部記号位置を+6から-2の半音まで変更できます。渦巻きの真ん中の部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ヘ音記号は規定値ではコロンに挟まれた部分がニ音(レ/D)の位置に合わせられ(この位置をへ音に変更するのがヘ音記号の意味)ますが、音部記号位置を+2から-6の半音まで変更できます。コロンに挟まれた部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> :*ハ音記号は規定値では記号の中心部分がロ音(シ/B)の位置に合わせられ(この位置をハ音に変更するのがハ音記号の意味)ますが、音部記号位置を+4から-4の半音まで変更できます。記号の中心部分が一番上の線の第五線のヘ音(ファ/F)の位置から一番下の線の第一線のホ音(ミ/E)の位置にまで変更できます。<br /> <br /> <br /> *'''段数'''<br /> <br /> :段数は、上の上のド音から下の下のミ音までが描ける範囲が一段として必要な余白として、保持していて、その余白が確保できる範囲で任意の値が指定できます。譜間設定にもよりますが、A4縦だとおよそ13段が上限の目安になります。段数の右にあるラジオボタンで手動にしているときに段数設定はエディットボックスにかかれた数字に従って、設定される値になります。自動にすると上限の値を自動で算出するので、エディットボックスには何も指定する必要がなくなります。ラジオボタンの自動を使うのがおススメです。上限より少ない値のときは次の縦配置という項目によって余白の使い方が変わります。<br /> <br /> <br /> *'''縦配置'''<br /> <br /> :段数設定が最大より少ない場合に効いてくる設定で、上寄せ/均等間隔から選択できます。上寄せにして、開始位置設定を下の方にすることで下寄せに似た配置になりますし、均等間隔にすると、指定した段数における最大限の上下余白をそれぞれの段で確保できるようになります。<br /> <br /> <br /> *'''上揃え指定時間隔[mm]'''<br /> <br /> :楽譜の段ごとの余白(下の下のミ/上の上のドを確保するのは必須)をmmで指定できます。<br /> <br /> <br /> *'''五線譜長さ[mm]'''<br /> <br /> :A4縦なら170mmが推奨値となります。五線譜の段の長さをmmで指定できます。<br /> <br /> <br /> *'''開始位置X[mm]''' '''開始位置Y[mm]'''<br /> <br /> :楽譜の段の一番上の段の左上隅の位置を開始位置としてX(横)方向、Y(縦)方向をmmで指定できます。<br /> <br /> <br /> *'''五線譜間隔[mm]'''<br /> <br /> :五線譜間隔をmmで指定できます。推奨値は1.08mm、既定値は1.35mmです。手書きのみで作業する場合はこれより大きい値が使いやすいかもしれません。<br /> <br /> <br /> *'''拍子'''<br /> <br /> :拍子を、無し/4分の4/4分の2/数値で指定、から指定できます。数値で指定を選択した場合は分子と分母のエディットボックスに数値を入力します。分子エディットボックスには数字or半角の+記号が利用できます。楽譜の一番最初の段にだけ拍子記号が表示されます。<br /> <br /> <br /> *'''小節数'''<br /> <br /> :小節数は、補助線の分割数が拍のときは4mm、裏拍のときは8mm、細分のときは48mm＋補助線余白(規定値5mm)を確保できる数だけ一段辺りの小節数として指定できます。つまり170mm÷9mm=18小節から20小節程度が限度になります。小節数を0にすると1小節確保されますが、末尾の小節線は無しのものが作られます。マイナスの値は指定できません。<br /> <br /> <br /> *'''調号'''<br /> <br /> :記号0個、#1個～7個、b1個～7個から選択できます。各段の音部記号の後ろ拍子記号の前に描画されます。<br /> <br /> <br /> 　OKボタンでシンプル五線譜ダイアログを確定させると、各段の左上に青四角、各小節の末尾の小節線の上に赤丸(小節線無しの場合は仮想小節線の上)が表示されます。青四角、赤丸は一度クリックすると選択状態になり、それ以外の場所をクリックすると選択が解除された状態になります。選択されると青四角は濃い青色に赤丸は濃い赤に変わります。選択された状態で矢印キーを押すとオフセットが調整できます。Shift＋矢印キーで粗動、Ctrl＋矢印キーで1px移動の微動が出来ます。矢印キーだけだと粗動と微動の中間の動きになります。青四角は上下左右にオフセットが加わり、赤丸は左右だけのオフセットが効きます。オフセット余白の限界の範囲で動作させることができます。<br /> <br /> <br /> 　青四角をダブルクリックすると段設定ダイアログが開きます。<br /> <br /> 　赤丸をダブルクリックすると小節設定ダイアログが開きます。<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13554 STMK ScoreTemplateMaker(ja) 2026-07-20T15:30:13Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *'''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13553 STMK ScoreTemplateMaker(ja) 2026-07-20T15:25:23Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *'''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> *'''楽譜'''<br /> :*'''用紙設定'''<br /> ::A3/A4/B4/B5 縦/横 300dpi/600dpi/1200dpiから設定を選べます。<br /> :*'''シンプル五線譜ダイアログ'''<br /> ::シンプル五線譜テンプレートを描画するためのダイアログです。<br /> :*'''設定'''<br /> ::補助線の分割数、拍数、左余白、右余白の規定値を設定ができます。<br /> <br /> <br /> *'''ページ'''<br /> :*'''ページ種類追加'''<br /> ::ページ種類を追加できます。<br /> :*'''ページ種類削除'''<br /> ::現在表示しているページ種類を削除します。ただし、のこり1つしかないページ種類は削除できません。<br /> :*'''ページ指定'''<br /> ::ページ種類が担当するページ番号を設定します。1種類目に1ページの役割を設定するときは1。2種類目に2ページから10ページの役割を設定するときは、2-10。3種類目に11ページと12ページの役割を設定するときは11,12のように指定します。<br /> :*'''前のページと交換'''<br /> ::前のページ種類と表示する順序を交換したい場合に使う機能です。唯一のページ種類ソートのための機能です。<br /> :*'''ヘッダー設定画面'''<br /> ::ヘッダー設定画面になります。テキストボックスが配置できます。<br /> :*'''ヘッダー追加'''<br /> ::ヘッダー種類を追加できます。<br /> :*'''ヘッダー削除'''<br /> ::現在選択しているヘッダー種類を削除できます。<br /> :*'''ヘッダー設定画面解除'''<br /> ::ヘッダー設定画面を終了させます。<br /> :*'''フッター設定画面'''<br /> ::フッター設定画面になります。テキストボックスが配置できます。<br /> :*'''フッター追加'''<br /> ::フッター種類を追加できます。<br /> :*'''フッター削除'''<br /> ::現在選択しているフッター種類を削除できます。<br /> :*'''フッター設定画面解除'''<br /> ::フッター設定画面を終了させます。<br /> :*'''ヘッダー指定'''<br /> ::現在表示しているページ種類に割り当てるヘッダーを指定できます。<br /> :*'''フッター指定'''<br /> ::現在表示しているページ種類に割り当てるフッターを指定できます。<br /> <br /> <br /> *'''表示'''<br /> :*'''補助線View'''<br /> ::補助線を見ることができます。<br /> :*'''グリッドView'''<br /> ::グリッドを見ることができます。<br /> <br /> <br /> *'''ヘルプ'''<br /> :*'''ライセンス認証'''<br /> ::ライセンス認証画面を表示します。<br /> :*'''バージョン情報'''<br /> ::バージョン情報画面を表示します。<br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13552 STMK ScoreTemplateMaker(ja) 2026-07-20T15:03:04Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *'''①楽譜テンプレート描画エリア'''<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *'''②表示倍率指定コンボボックス'''<br /> :表示倍率を選べます。<br /> <br /> <br /> *'''③ページ指定コントロール'''<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *'''ファイル'''<br /> :*'''開く'''<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*'''保存'''<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*'''名前をつけて保存'''<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*'''閉じる'''<br /> ::現在編集中のファイルを閉じることができます。<br /> :*'''エクスポート'''<br /> ::*'''楽譜SVG'''<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*'''楽譜記号素材SVG(補助線付)'''<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*'''補助線SVG'''<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*'''グリッドSVG'''<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*'''楽譜PDF'''<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*'''終了する'''<br /> ::アプリケーションを終了します。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13551 STMK ScoreTemplateMaker(ja) 2026-07-20T15:01:24Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *①楽譜テンプレート描画エリア<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *②表示倍率指定コンボボックス<br /> :表示倍率を選べます。<br /> <br /> <br /> *③ページ指定コントロール<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *ファイル<br /> :*開く<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*保存<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*名前をつけて保存<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*閉じる<br /> ::現在編集中のファイルを閉じることができます。<br /> :*エクスポート<br /> ::*楽譜SVG<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*楽譜記号素材SVG<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*楽譜記号素材SVG(補助線付)<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*補助線SVG<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*グリッドSVG<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*楽譜PDF<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*終了する。<br /> ::アプリケーションを終了します。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13550 STMK ScoreTemplateMaker(ja) 2026-07-20T15:00:17Z <p>Yo-net: /* インターフェイス紹介 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> [[ファイル:STMK 010 Screen Description.png|400px|thumb|none|インターフェイス紹介]]<br /> <br /> <br /> *①楽譜テンプレート描画エリア<br /> :マウスホイールで上下スクロール<br /> :Alt+マウスホイールで左右スクロール<br /> :Ctrl+マウスホイールで表示倍率変化(1%刻み)<br /> <br /> <br /> :Shift+マウスホイールで上下スクロール(粗動)<br /> :Shift+Alt+マウスホイールで左右スクロール(粗動)<br /> :Shift+Ctrl+マウスホイールで表示倍率変化(10%刻み)<br /> <br /> <br /> *②表示倍率指定コンボボックス<br /> :表示倍率を選べます。<br /> <br /> <br /> *③ページ指定コントロール<br /> :|◀：一番最初のページ種類に移動<br /> :◀：一つ手前のページ種類に移動<br /> :エディットボックス：指定した数字のページ種類に移動<br /> :▶：次のページ種類に移動<br /> :▶|：一番最後のページ種類に移動<br /> <br /> <br /> ■メニューについて<br /> *ファイル<br /> :*開く<br /> ::(*.stmk)のファイルを開くことができます。<br /> :*保存<br /> ::(*.stmk)のファイルを上書き保存することができます。初回は名前を付けて保存と同じ。<br /> :*名前をつけて保存<br /> ::(*.stmk)のファイルの名前をつけて保存処理をすることができます。<br /> :*閉じる<br /> ::現在編集中のファイルを閉じることができます。<br /> :*エクスポート<br /> ::*楽譜SVG<br /> :::楽譜テンプレートのSVGファイルを書き出す処理です。<br /> ::*楽譜記号素材SVG<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線無しでSVGファイルを書き出す処理です。<br /> ::*楽譜記号素材SVG(補助線付)<br /> :::楽譜フォントBravura.otfとyonetMuFL.ttfの全てのコードポイントを補助線付きでSVGファイルを書き出す処理です。<br /> ::*補助線SVG<br /> :::楽譜の小節線を分割の種類に応じた状態で分割した補助線をSVGで出力する処理です。<br /> ::*グリッドSVG<br /> :::方眼紙を書き出す処理です。どのファイルでも同じものが出力されます。<br /> ::*楽譜PDF<br /> :::楽譜テンプレートのPDFファイルを書き出す処理です。ネットプリントサービスの利用や自前のプリンタでの印刷を行うときに利用するファイルでもあります。<br /> :*終了する。<br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_010_Screen_Description.png&diff=13549 ファイル:STMK 010 Screen Description.png 2026-07-20T14:38:02Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13548 VexFlow 2026-07-20T14:22:40Z <p>Yo-net: </p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。<br /> <br /> 　<br /> <br /> == '''結局''' ==<br /> 　結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> *[[STMK ScoreTemplateMaker(ja)]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13547 VexFlow 2026-07-20T14:21:36Z <p>Yo-net: </p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> *[[STMK ScoreTemplateMaker(ja)]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13546 VexFlow 2026-07-20T14:20:34Z <p>Yo-net: </p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;<br /> <br /> 　<br /> <br /> == '''関連記事''' ==<br /> *[[STMK ScoreTemplateMaker(ja)]]<br /> <br /> 　</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow_%E5%85%A5%E9%96%80%E3%81%9D%E3%81%AE1&diff=13545 VexFlow 入門その1 2026-07-20T14:18:44Z <p>Yo-net: /* 概要 */</p> <hr /> <div>&lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script src=&quot;https://wiki.yo-net.jp/vexflow/build/cjs/vexflow@4.2.2.0001.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> &lt;/yjavascript&gt;<br /> [[VexFlow 使い方]]へ戻る。<br /> == '''概要''' ==<br /> 　ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。公式サイトにもあるものと同じです。このサイトでは'''[[VexFlow 使い方|使い方]]'''を最後まで学習すると以下のようなスコアブックのような描画もできるようになります。<br /> <br /> <br /> 　※結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> &lt;div id=&quot;yonet202403Mid_Output01&quot;&gt;&lt;/div&gt;<br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> ///////////////////////<br /> (function(){<br /> class Position {<br /> constructor(x = 0, y = 0) {<br /> this.x = x;<br /> this.y = y;<br /> }<br /> }<br /> var VF = Vex.Flow;<br /> const Vocal = new Position();<br /> const Guitar1Inst = new Position();<br /> const Guitar2Inst = new Position();<br /> const Guitar2Tab1 = new Position();<br /> const BaseInst = new Position();<br /> const BaseTab1 = new Position();<br /> const DrumInst = new Position();<br /> const PercInst = new Position();<br /> const Stave9Pos = new Position();<br /> <br /> var StaveBase1;<br /> var StaveBase2;<br /> var StaveBase3;<br /> var StaveBase4;<br /> <br /> const Perc_note1_1_0 = new Position();<br /> <br /> var shiftGuitar1_1;<br /> var shiftGuitar1_tab4_tr;<br /> <br /> var shiftGuitar1_tab1;<br /> var shiftGuitar1_tab2;<br /> var shiftGuitar1_tab3;<br /> var shiftGuitar1_tab4;<br /> var shiftDrum1;<br /> var shiftPerc1;<br /> <br /> function insertBaseEndBarPathToSVG(Stave) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 50) +<br /> ' L ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 80);<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'black');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'none');<br /> newGroup.appendChild(path);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> function insertTiePathToSVG(StartPos, EndPos, Direction = 1, Depth = 10) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M' + (StartPos.x) + ' ' + (StartPos.y) + 'Q' + (StartPos.x + (EndPos.x - StartPos.x)/2) + ' ' + ((StartPos.y + EndPos.y)/2 + Direction * (Depth - 2)) + <br /> ',' + (EndPos.x) + ' ' + (EndPos.y) + 'Q' + ((StartPos.x + EndPos.x)/2) + ' ' + (StartPos.y + (EndPos.y - StartPos.y)/2 + Direction * (Depth + 2)) + <br /> ',' + (StartPos.x) + ' ' + (StartPos.y) + 'Z';<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'none');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'black');<br /> newGroup.appendChild(path);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> function insertTrilPathToSVG(Shift, Direction = 1) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var DirectionOffset = 0;<br /> if (Direction == -1) DirectionOffset = 60;<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset);<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'none');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'black');<br /> var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr2 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7);<br /> path2.setAttribute('d', pathStr2);<br /> path2.setAttribute('stroke', 'none');<br /> path2.setAttribute('stroke-width', '1');<br /> path2.setAttribute('fill', 'black');<br /> var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr3 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14);<br /> path3.setAttribute('d', pathStr3);<br /> path3.setAttribute('stroke', 'none');<br /> path3.setAttribute('stroke-width', '1');<br /> path3.setAttribute('fill', 'black');<br /> newGroup.appendChild(path);<br /> newGroup.appendChild(path2);<br /> newGroup.appendChild(path3);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> <br /> function insertTextToSVG(options) {<br /> var textContent = options.textContent;<br /> var strID = options.strID;<br /> var Stave_x = options.Stave_x || 0;<br /> var Stave_y = options.Stave_y || 0;<br /> var isOffset_x_abs = options.IsOffset_x_Abs || false;<br /> var Stave_x_Offset = options.Stave_x_Offset || 0;<br /> var Stave_y_Offset = options.Stave_y_Offset || 0;<br /> var StaveWidth = options.StaveWidth || 0;<br /> var StaveHeight = options.StaveHeight || 0;<br /> var StaveVerticalScale = options.StaveVerticalScale || 0;<br /> var fontSize = options.fontSize || 40;<br /> var fontFamily = options.fontFamily || &quot;Bravura, Arial&quot;;<br /> var shift_x = options.shift_x || [0];<br /> var Rotate = options.Rotate || 0;<br /> var offset_sum = 0;<br /> var Stave_x_Offset_Value = 0;<br /> var Stave_y_Offset_Value = 0;<br /> var last_Stave_x_Offset = 0;<br /> var last_Stave_y_Offset = 0;<br /> var last_textContent = &quot;&quot;;<br /> shift_x.forEach(function(offset, index) {<br /> offset_sum = offset_sum + offset;<br /> var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');<br /> newText.setAttribute('id', strID + '_' + index); // テキスト要素にIDを付ける<br /> newText.setAttribute('x', 0);<br /> newText.setAttribute('y', 0);<br /> newText.setAttribute('font-family', fontFamily);<br /> newText.setAttribute('font-size', fontSize);<br /> newText.setAttribute('fill', 'black');<br /> <br /> if(typeof textContent === &quot;string&quot;){<br /> newText.textContent = textContent;<br /> }<br /> else{<br /> if(textContent.length - 1 &lt; index){<br /> newText.textContent = last_textContent;<br /> }<br /> else{<br /> newText.textContent = textContent[index];<br /> last_textContent = textContent[index];<br /> }<br /> }<br /> <br /> if(Stave_x_Offset.length - 1 &lt; index){<br /> Stave_x_Offset_Value = last_Stave_x_Offset;<br /> }<br /> else{<br /> if(Stave_x_Offset.length &gt;= 2){<br /> Stave_x_Offset_Value = Stave_x_Offset[index];<br /> last_Stave_x_Offset = Stave_x_Offset[index];<br /> }<br /> else{<br /> Stave_x_Offset_Value = Stave_x_Offset;<br /> }<br /> }<br /> <br /> if(Stave_y_Offset.length - 1 &lt; index){<br /> Stave_y_Offset_Value = last_Stave_y_Offset;<br /> }<br /> else{<br /> if(Stave_y_Offset.length &gt;= 2){<br /> Stave_y_Offset_Value = Stave_y_Offset[index];<br /> last_Stave_y_Offset = Stave_y_Offset[index];<br /> }<br /> else{<br /> Stave_y_Offset_Value = Stave_y_Offset;<br /> }<br /> }<br /> var textGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> if(Rotate != 0){<br /> textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + 0 + ' ' + 0 + ')');<br /> textGroup.appendChild(newText);<br /> svgElement.appendChild(textGroup);<br /> }<br /> else{<br /> svgElement.appendChild(newText);<br /> }<br /> (function() {<br /> var textWidth = newText.getBBox().width;<br /> var textHeight = newText.getBBox().height;<br /> var horizontalScale;<br /> if (typeof StaveWidth === 'undefined' || StaveWidth == 0) {<br /> horizontalScale = 1;<br /> } <br /> else {<br /> horizontalScale = StaveWidth / textWidth;<br /> }<br /> var verticalScale;<br /> if (typeof StaveHeight === 'undefined' || StaveHeight == 0) {<br /> verticalScale = 1;<br /> } <br /> else if (StaveVerticalScale != 0) {<br /> verticalScale = StaveVerticalScale;<br /> } <br /> else {<br /> verticalScale = StaveHeight / textHeight;<br /> }<br /> if(isOffset_x_abs){<br /> var StavePos_x = offset.x + Stave_x_Offset_Value;<br /> var StavePos_y = offset.y + Stave_y_Offset_Value;<br /> }<br /> else{<br /> var StavePos_x = Stave_x + Stave_x_Offset + offset_sum;<br /> var StavePos_y = Stave_y + Stave_y_Offset;<br /> }<br /> <br /> newText.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');<br /> <br /> if(Rotate != 0){<br /> textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + StavePos_x + ' ' + StavePos_y + ')');<br /> }<br /> })();<br /> <br /> if(Rotate != 0){<br /> textGroup.appendChild(newText);<br /> svgElement.appendChild(textGroup);<br /> }<br /> else{<br /> svgElement.appendChild(newText);<br /> }<br /> });<br /> }<br /> <br /> var allUniqueIds = [];<br /> var allFlagUniqueIds = [];<br /> (function(){<br /> function addShift(notes, arrx = [], arry = []) {<br /> <br /> let tempnote;<br /> let retShift = [];<br /> <br /> for(let i = 0; i &lt; arrx.length || i == 0; i++){<br /> const pos = new Position();<br /> //notesのchildrenの各要素について処理<br /> if(arrx.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arrx[i]];<br /> temp_y = arry[i];<br /> }<br /> pos.x = tempnote.getAbsoluteX();<br /> pos.y = tempnote.getStave().getYForLine(temp_y);<br /> <br /> retShift.push(pos);<br /> }<br /> return retShift;<br /> }<br /> <br /> var UniqueIds;<br /> function getUniqueNoteheadIds(notes, arr = []) {<br /> //すべてのidを格納するためのセットを作成<br /> let tempnote;<br /> uniqueIds = new Set();<br /> for(let i = 0; i &lt; arr.length || i == 0; i++){<br /> //notesのchildrenの各要素について処理<br /> if(arr.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arr[i]];<br /> }<br /> tempnote.children.forEach(child =&gt; {<br /> //typeが&quot;notehead&quot;であるかチェックし、idを取得<br /> if (child.attrs){<br /> if(child.attrs.type === &quot;NoteHead&quot;) {<br /> uniqueIds.add(child.attrs.id);<br /> }<br /> }<br /> });<br /> }<br /> // セットを配列に変換して戻り値として返す<br /> return Array.from(uniqueIds);<br /> }<br /> <br /> function updateAllUniqueIds(UniqueIds) {<br /> // allUniqueIdsにUniqueIdsを追加または結合<br /> if (allUniqueIds.length === 0) {//allUniqueIdsはグローバルな変数<br /> // allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br /> allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。<br /> } else {<br /> UniqueIds.forEach(id =&gt; {<br /> if (!allUniqueIds.includes(id)) {<br /> allUniqueIds.push(id);<br /> }<br /> });<br /> }<br /> // 更新されたallUniqueIdsを戻り値として返す<br /> return allUniqueIds;<br /> }<br /> <br /> var SteveNoteUniqueIds;<br /> function getUniqueStaveNotesIds(notes, arr = []) {<br /> //すべてのidを格納するためのセットを作成<br /> let tempnote;<br /> uniqueIds = new Set();<br /> for(let i = 0; i &lt; arr.length || i == 0; i++){<br /> //notesのchildrenの各要素について処理<br /> if(arr.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arr[i]];<br /> }<br /> if (tempnote.attrs){<br /> if(tempnote.attrs.type === &quot;StaveNote&quot;) {<br /> uniqueIds.add(tempnote.attrs.id);<br /> }<br /> }<br /> }<br /> // セットを配列に変換して戻り値として返す<br /> return Array.from(uniqueIds);<br /> }<br /> <br /> function updateAllFlagUniqueIds(FlagUniqueIds) {<br /> // allUniqueIdsにUniqueIdsを追加または結合<br /> if (allFlagUniqueIds.length === 0) {<br /> // allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br /> allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。<br /> } else {<br /> FlagUniqueIds.forEach(id =&gt; {<br /> if (!allFlagUniqueIds.includes(id)) {<br /> allFlagUniqueIds.push(id);<br /> }<br /> });<br /> }<br /> // 更新されたallUniqueIdsを戻り値として返す<br /> return allFlagUniqueIds;<br /> }<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } <br /> else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> <br /> const {<br /> Factory,<br /> Stave,<br /> StaveNote,<br /> Formatter,<br /> Voice,<br /> StaveTie,<br /> BarLine,<br /> Beam,<br /> Dot,<br /> StaveConnector,<br /> Modifier,<br /> RenderContext,<br /> TextDynamics,<br /> Articulation,<br /> TextNote,<br /> Crescendo,<br /> Renderer<br /> } = Vex.Flow;<br /> <br /> let nscale = 0.64;<br /> let nwidth = 1040;<br /> let nheight = 1120;<br /> <br /> let nHeadMargin = 70;<br /> let nStaveWidth = 350;<br /> <br /> const f = new Factory({ <br /> renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }<br /> });<br /> const ctx = f.getContext();<br /> ctx.scale(nscale, nscale);<br /> <br /> const defaultStyle = {<br /> lineWidth: ctx.lineWidth,<br /> strokeStyle: ctx.strokeStyle,<br /> };<br /> <br /> for (let i = 0; i &lt;= nwidth * (1 / nscale); i += 10) {<br /> ctx.beginPath();<br /> ctx.moveTo(0 + i, 0);<br /> ctx.lineTo(0 + i, nheight);<br /> if (i % 100 === 0){<br /> ctx.setLineWidth(1);<br /> ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br /> }<br /> else{<br /> ctx.setLineWidth(0.5);<br /> ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br /> }<br /> ctx.stroke();<br /> }<br /> <br /> for (let i = 0; i &lt;= nheight; i += 10) {<br /> ctx.beginPath();<br /> ctx.moveTo(0, i);<br /> ctx.lineTo(nwidth * (1 / nscale), i);<br /> if (i % 100 === 0){<br /> ctx.setLineWidth(1);<br /> ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br /> }<br /> else{<br /> ctx.setLineWidth(0.5);<br /> ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br /> }<br /> ctx.stroke();<br /> }<br /> <br /> ctx.lineWidth = defaultStyle.lineWidth;<br /> ctx.strokeStyle = defaultStyle.strokeStyle;<br /> <br /> const VocalSt1 = new Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);<br /> VocalSt1.setClef(&quot;treble&quot;).setContext(ctx);<br /> VocalSt1.setTimeSignature('4/4').setContext(ctx);<br /> VocalSt1.addKeySignature('D').setContext(ctx);<br /> VocalSt1.setMeasure(1);<br /> VocalSt1.draw();<br /> <br /> Vocal.x = VocalSt1.x - 30;<br /> Vocal.y = VocalSt1.y + 90; <br /> <br /> const VocalSt2 = f.Stave({ x: VocalSt1.width + VocalSt1.x, y: VocalSt1.y, width: nStaveWidth });<br /> VocalSt2.setMeasure(2);<br /> VocalSt2.setContext(ctx).draw();<br /> <br /> const VocalSt3 = new Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);<br /> VocalSt3.setMeasure(3);<br /> VocalSt3.draw();<br /> <br /> const VocalSt4 = new Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx);<br /> VocalSt4.setMeasure(4);<br /> VocalSt4.draw();<br /> <br /> const Guitar1St1 = new Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar1St1.addClef(&quot;treble&quot;).setContext(ctx);<br /> Guitar1St1.addTimeSignature('4/4').setContext(ctx);<br /> Guitar1St1.addKeySignature('D').setContext(ctx);<br /> Guitar1St1.draw();<br /> <br /> const Guitar1_notes1_1 = [<br /> new VF.StaveNote({ keys: [&quot;a/3&quot;, &quot;e/4&quot;, &quot;a/4&quot;, &quot;c/5&quot;], duration: &quot;2&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> dotted(new VF.StaveNote({ keys: [&quot;c/6&quot;], duration: &quot;4d&quot;, stem_direction: -1 })),<br /> ];<br /> const Guitar1_notes1_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> var Guitar1_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St1_1Voice.setStrict(true);<br /> Guitar1_St1_1Voice.addTickables(Guitar1_notes1_1);<br /> <br /> var Guitar1_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St1_2Voice.setStrict(true);<br /> Guitar1_St1_2Voice.addTickables(Guitar1_notes1_2);<br /> <br /> var formatterGuitar1_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St1_2Voice, Guitar1_St1_1Voice]);<br /> formatterGuitar1_St1_1.format([Guitar1_St1_2Voice, Guitar1_St1_1Voice], nStaveWidth - 20 - 10);<br /> Guitar1_St1_1Voice.draw(ctx, Guitar1St1);<br /> Guitar1_St1_2Voice.draw(ctx, Guitar1St1);<br /> <br /> const Guitar1St2 = new Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St2.draw();<br /> <br /> const Guitar1_gracenotes2 = [<br /> new VF.GraceNote({ keys: ['e/5', 'g/5'], duration: '8', slash: true })<br /> .addModifier(new VF.Accidental('#'), 1)<br /> ];<br /> <br /> const Guitar1_notes2_1 = [<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;, &quot;a/5&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> .addModifier(new VF.Accidental('n'), 0),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;, &quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;, &quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;8&quot; }),<br /> ];<br /> const Guitar1_notes2_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_notes2_1[0].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[1].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[2].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[3].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[4].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[5].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[6].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[7].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes2, true), 0);<br /> <br /> const Guitar1_beam1_1 = new VF.Beam([Guitar1_notes2_1[0], Guitar1_notes2_1[1], Guitar1_notes2_1[2], Guitar1_notes2_1[3]]);<br /> const Guitar1_beam1_2 = new VF.Beam([Guitar1_notes2_1[4], Guitar1_notes2_1[5], Guitar1_notes2_1[6], Guitar1_notes2_1[7]]);<br /> <br /> var Guitar1_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St2_1Voice.setStrict(true);<br /> Guitar1_St2_1Voice.addTickables(Guitar1_notes2_1);<br /> <br /> var Guitar1_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St2_2Voice.setStrict(true);<br /> Guitar1_St2_2Voice.addTickables(Guitar1_notes2_2);<br /> <br /> var formatterGuitar1_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St2_2Voice, Guitar1_St2_1Voice]);<br /> formatterGuitar1_St2_1.format([Guitar1_St2_2Voice, Guitar1_St2_1Voice], nStaveWidth - 30);<br /> Guitar1_St2_1Voice.draw(ctx, Guitar1St2);<br /> Guitar1_St2_2Voice.draw(ctx, Guitar1St2);<br /> <br /> Guitar1_beam1_1.setContext(ctx).draw();<br /> Guitar1_beam1_2.setContext(ctx).draw();<br /> <br /> const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St3.draw();<br /> <br /> const Guitar1_notes3_1 = [<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;2&quot; }),<br /> ];<br /> const Guitar1_notes3_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> const Guitar1_beam3_1 = new VF.Beam([Guitar1_notes3_1[0], Guitar1_notes3_1[1], Guitar1_notes3_1[2], Guitar1_notes3_1[3]]);<br /> const Guitar1_beam3_2 = new VF.Beam([Guitar1_notes3_1[4], Guitar1_notes3_1[5], Guitar1_notes3_1[6]]);<br /> <br /> var Guitar1_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St3_1Voice.setStrict(true);<br /> Guitar1_St3_1Voice.addTickables(Guitar1_notes3_1);<br /> <br /> var Guitar1_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St3_2Voice.setStrict(true);<br /> Guitar1_St3_2Voice.addTickables(Guitar1_notes3_2);<br /> <br /> var formatterGuitar1_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St3_2Voice, Guitar1_St3_1Voice]);<br /> formatterGuitar1_St3_1.format([Guitar1_St3_2Voice, Guitar1_St3_1Voice], nStaveWidth - 30);<br /> Guitar1_St3_1Voice.draw(ctx, Guitar1St3);<br /> Guitar1_St3_2Voice.draw(ctx, Guitar1St3);<br /> <br /> Guitar1_beam3_1.setContext(ctx).draw();<br /> Guitar1_beam3_2.setContext(ctx).draw();<br /> <br /> const Guitar1_ties3 = [<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[0],<br /> last_note: Guitar1_notes3_1[1],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[1],<br /> last_note: Guitar1_notes3_1[2],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[2],<br /> last_note: Guitar1_notes3_1[3],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[3],<br /> last_note: Guitar1_notes3_1[4],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[6],<br /> last_note: Guitar1_notes3_1[7],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> ];<br /> <br /> Guitar1_ties3.forEach((t) =&gt; {<br /> t.setContext(ctx).draw();<br /> });<br /> <br /> var Guitar1_vibrato3 = new VF.VibratoBracket({<br /> start: Guitar1_notes3_1[7],<br /> stop: null,<br /> });<br /> Guitar1_vibrato3.setLine(0);<br /> Guitar1_vibrato3.setHarsh(true);<br /> Guitar1_vibrato3.setContext(ctx).draw();<br /> <br /> const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St4.draw();<br /> <br /> const Guitar1_gracenotes4 = [<br /> new VF.GraceNote({ keys: ['a/4'], duration: '8', slash: true })<br /> ];<br /> <br /> const Guitar1_notes4_1 = [<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;4&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> ];<br /> const Guitar1_notes4_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_notes4_1[7].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes4, true), 0);<br /> <br /> SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_notes4_1, [0, 1]);<br /> allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);<br /> <br /> const Guitar1_beam4_1 = new VF.Beam([Guitar1_notes4_1[2], Guitar1_notes4_1[3]]);<br /> const Guitar1_beam4_2 = new VF.Beam([Guitar1_notes4_1[5], Guitar1_notes4_1[6], Guitar1_notes4_1[7]]);<br /> <br /> var Guitar1_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St4_1Voice.setStrict(true);<br /> Guitar1_St4_1Voice.addTickables(Guitar1_notes4_1);<br /> <br /> var Guitar1_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St4_2Voice.setStrict(true);<br /> Guitar1_St4_2Voice.addTickables(Guitar1_notes4_2);<br /> <br /> var formatterGuitar1_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St4_2Voice, Guitar1_St4_1Voice]);<br /> formatterGuitar1_St4_1.format([Guitar1_St4_2Voice, Guitar1_St4_1Voice], nStaveWidth - 30);<br /> Guitar1_St4_1Voice.draw(ctx, Guitar1St4);<br /> Guitar1_St4_2Voice.draw(ctx, Guitar1St4);<br /> <br /> Guitar1_beam4_1.setContext(ctx).draw();<br /> Guitar1_beam4_2.setContext(ctx).draw();<br /> <br /> shiftGuitar1_1 = addShift(<br /> Guitar1_notes4_1, <br /> [0, 1],<br /> [4, 3.5]<br /> );<br /> <br /> const Guitar1_ties4 = [<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[0],<br /> last_note: Guitar1_notes4_1[1],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[1],<br /> last_note: Guitar1_notes4_1[2],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[3],<br /> last_note: Guitar1_notes4_1[4],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[5],<br /> last_note: Guitar1_notes4_1[6],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> ];<br /> <br /> Guitar1_ties4.forEach((t) =&gt; {<br /> t.setContext(ctx).draw();<br /> });<br /> <br /> <br /> const Guitar1_tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab1.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab1.draw();<br /> <br /> const Guitar1_tab2 = new Stave(Guitar1_tab1.width + Guitar1_tab1.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab2.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab2.draw();<br /> <br /> const Guitar1_tab3 = new Stave(Guitar1_tab2.width + Guitar1_tab2.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab3.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab3.draw();<br /> <br /> const Guitar1_tab4 = new Stave(Guitar1_tab3.width + Guitar1_tab3.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab4.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab4.draw();<br /> <br /> <br /> <br /> const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar1_Tab1.draw();<br /> <br /> Stave9Pos.x = Guitar1_Tab1.x;<br /> Stave9Pos.y = Guitar1_Tab1.y;<br /> <br /> var connector9_2 = new VF.StaveConnector(Guitar1St1, Guitar1_Tab1);<br /> connector9_2.setType(VF.StaveConnector.type.BRACKET);<br /> connector9_2.setContext(ctx);<br /> connector9_2.draw();<br /> <br /> Guitar1Inst.x = VocalSt1.x - 30;<br /> Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90; <br /> <br /> <br /> const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx);<br /> Guitar1_Tab1_1.setBegBarType(VF.Barline.type.NONE);<br /> Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE);<br /> Guitar1_Tab1_1.draw();<br /> <br /> const Guitar1_tab_notes1_1 = [<br /> new VF.GhostNote({ keys: [&quot;a/3&quot;, &quot;e/4&quot;, &quot;a/4&quot;, &quot;c/5&quot;], duration: &quot;2&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> dotted(new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;4d&quot;, stem_direction: -1 })),<br /> ];<br /> const Guitar1_tab_notes1_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes1_1, [1, 2]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> var Guitar1_tab_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St1_1Voice.setStrict(true);<br /> Guitar1_tab_St1_1Voice.addTickables(Guitar1_tab_notes1_1);<br /> <br /> var Guitar1_tab_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St1_2Voice.setStrict(true);<br /> Guitar1_tab_St1_2Voice.addTickables(Guitar1_tab_notes1_2);<br /> <br /> var formatterGuitar1_tab_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice]);<br /> formatterGuitar1_tab_St1_1.format([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice], nStaveWidth - 20 - 10);<br /> Guitar1_tab_St1_1Voice.draw(ctx, Guitar1_Tab1_1);<br /> Guitar1_tab_St1_2Voice.draw(ctx, Guitar1_Tab1_1);<br /> <br /> shiftGuitar1_tab1 = addShift(<br /> Guitar1_tab_notes1_1, <br /> [0, 0, 0, 0, 1, 2],<br /> [3, 2, 1, 0, 1, -1]<br /> );<br /> <br /> <br /> <br /> const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab2.draw();<br /> <br /> const Guitar1_tab_gracenotes2 = [<br /> new VF.GraceNote({ keys: ['a/5'], duration: '8', slash: true })<br /> .addModifier(new VF.Accidental('#'), 0)<br /> ];<br /> <br /> const Guitar1_tab_notes2_1 = [<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> .addModifier(new VF.Accidental('n'), 0),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }),<br /> ];<br /> const Guitar1_tab_notes2_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_tab_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes2, false), 0);<br /> <br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes2_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam2_1 = new VF.Beam([Guitar1_tab_notes2_1[0], Guitar1_tab_notes2_1[1], Guitar1_tab_notes2_1[2], Guitar1_tab_notes2_1[3]]);<br /> const Guitar1_tab_beam2_2 = new VF.Beam([Guitar1_tab_notes2_1[4], Guitar1_tab_notes2_1[5], Guitar1_tab_notes2_1[6], Guitar1_tab_notes2_1[7]]);<br /> <br /> var Guitar1_tab_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St2_1Voice.setStrict(true);<br /> Guitar1_tab_St2_1Voice.addTickables(Guitar1_tab_notes2_1);<br /> <br /> var Guitar1_tab_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St2_2Voice.setStrict(true);<br /> Guitar1_tab_St2_2Voice.addTickables(Guitar1_tab_notes2_2);<br /> <br /> var formatterGuitar1_tab_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice]);<br /> formatterGuitar1_tab_St2_1.format([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St2_1Voice.draw(ctx, Guitar1_Tab2);<br /> Guitar1_tab_St2_2Voice.draw(ctx, Guitar1_Tab2);<br /> <br /> shiftGuitar1_tab2 = addShift(<br /> Guitar1_tab_notes2_1, <br /> [0, 0, 0, 0, 1, 1, 2, 3, 4, 4, 5, 6, 7],<br /> [1, 0, 1, 0, 1, 0, 0, 1, 2, 1, 2, 2, 3]<br /> );<br /> <br /> Guitar1_tab_beam2_1.setContext(ctx).draw();<br /> Guitar1_tab_beam2_2.setContext(ctx).draw();<br /> <br /> const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab3.draw();<br /> <br /> const Guitar1_tab_notes3_1 = [<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.GhostNote({ keys: [&quot;b/4&quot;], duration: &quot;2&quot; }),<br /> ];<br /> const Guitar1_tab_notes3_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes3_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam3_1 = new VF.Beam([Guitar1_tab_notes3_1[0], Guitar1_tab_notes3_1[1], Guitar1_tab_notes3_1[2], Guitar1_tab_notes3_1[3]]);<br /> const Guitar1_tab_beam3_2 = new VF.Beam([Guitar1_tab_notes3_1[4], Guitar1_tab_notes3_1[5], Guitar1_tab_notes3_1[6]]);<br /> <br /> var Guitar1_tab_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St3_1Voice.setStrict(true);<br /> Guitar1_tab_St3_1Voice.addTickables(Guitar1_tab_notes3_1);<br /> <br /> var Guitar1_tab_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St3_2Voice.setStrict(true);<br /> Guitar1_tab_St3_2Voice.addTickables(Guitar1_tab_notes3_2);<br /> <br /> var formatterGuitar1_tab_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice]);<br /> formatterGuitar1_tab_St3_1.format([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St3_1Voice.draw(ctx, Guitar1_Tab3);<br /> Guitar1_tab_St3_2Voice.draw(ctx, Guitar1_Tab3);<br /> <br /> shiftGuitar1_tab3 = addShift(<br /> Guitar1_tab_notes3_1, <br /> [0, 1, 2, 3, 4, 5, 6, 7],<br /> [2, 2, 2, 2, 2, 4, 4, 4]<br /> );<br /> <br /> Guitar1_tab_beam3_1.setContext(ctx).draw();<br /> Guitar1_tab_beam3_2.setContext(ctx).draw();<br /> <br /> var Guitar1_tab_vibrato3 = new VF.VibratoBracket({<br /> start: Guitar1_tab_notes3_1[7],<br /> stop: null,<br /> });<br /> Guitar1_tab_vibrato3.setLine(1);<br /> Guitar1_tab_vibrato3.setHarsh(true);<br /> Guitar1_tab_vibrato3.setContext(ctx).draw();<br /> <br /> <br /> <br /> const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab4.draw();<br /> <br /> const Guitar1_tab_gracenotes4 = [<br /> new VF.GraceNote({ keys: ['d/5'], duration: '8', slash: true })<br /> ];<br /> <br /> const Guitar1_tab_notes4_1 = [<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;4&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> ];<br /> const Guitar1_tab_notes4_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_tab_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes4, false), 0);<br /> <br /> SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_tab_notes4_1, [0, 1]);<br /> allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);<br /> <br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes4_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam4_1 = new VF.Beam([Guitar1_tab_notes4_1[2], Guitar1_tab_notes4_1[3]]);<br /> const Guitar1_tab_beam4_2 = new VF.Beam([Guitar1_tab_notes4_1[5], Guitar1_tab_notes4_1[6], Guitar1_tab_notes4_1[7]]);<br /> <br /> var Guitar1_tab_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St4_1Voice.setStrict(true);<br /> Guitar1_tab_St4_1Voice.addTickables(Guitar1_tab_notes4_1);<br /> <br /> var Guitar1_tab_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St4_2Voice.setStrict(true);<br /> Guitar1_tab_St4_2Voice.addTickables(Guitar1_tab_notes4_2);<br /> <br /> var formatterGuitar1_tab_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice]);<br /> formatterGuitar1_tab_St4_1.format([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St4_1Voice.draw(ctx, Guitar1_Tab4);<br /> Guitar1_tab_St4_2Voice.draw(ctx, Guitar1_Tab4);<br /> <br /> shiftGuitar1_tab4 = addShift(<br /> Guitar1_tab_notes4_1, <br /> [0, 1, 2, 3, 3, 4, 5, 6, 7, 7],<br /> [2, 2, 2, 2, 2, 2, 1, 1, 1, 1]<br /> );<br /> <br /> shiftGuitar1_tab4_tr = addShift(<br /> Guitar1_tab_notes4_1, <br /> [0, 1],<br /> [3, 2.5]<br /> );<br /> <br /> Guitar1_tab_beam4_1.setContext(ctx).draw();<br /> Guitar1_tab_beam4_2.setContext(ctx).draw();<br /> <br /> <br /> const Guitar2_St1 = new Stave(Guitar1_Tab1.x, Guitar1_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar2_St1.addClef(&quot;treble&quot;).setContext(ctx);<br /> Guitar2_St1.addTimeSignature('4/4').setContext(ctx);<br /> Guitar2_St1.addKeySignature('D').setContext(ctx);<br /> Guitar2_St1.draw();<br /> <br /> const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St2.draw();<br /> <br /> const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St3.draw();<br /> <br /> const Guitar2_St4 = new Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St4.draw();<br /> <br /> const Guitar2_Tab1 = new Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar2_Tab1.draw();<br /> <br /> Guitar2Tab1.x = Guitar2_Tab1.x;<br /> Guitar2Tab1.y = Guitar2_Tab1.y;<br /> <br /> const Guitar2_Tab2 = new Stave(Guitar2_Tab1.width + Guitar2_Tab1.x, Guitar2_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab2.draw();<br /> <br /> const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab3.draw();<br /> <br /> const Guitar2_Tab4 = new Stave(Guitar2_Tab3.width + Guitar2_Tab3.x, Guitar2_Tab3.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab4.draw();<br /> <br /> var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);<br /> Guitar2_connect.setType(VF.StaveConnector.type.BRACKET);<br /> Guitar2_connect.setContext(ctx);<br /> Guitar2_connect.draw();<br /> <br /> const Guitar2_Tab1_tab = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab1_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab1_tab.draw();<br /> <br /> const Guitar2_Tab2_tab = new Stave(Guitar2_Tab1_tab.width + Guitar2_Tab1_tab.x, Guitar2_Tab1_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab2_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab2_tab.draw();<br /> <br /> const Guitar2_Tab3_tab = new Stave(Guitar2_Tab2_tab.width + Guitar2_Tab2_tab.x, Guitar2_Tab2_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab3_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab3_tab.draw();<br /> <br /> const Guitar2_Tab4_tab = new Stave(Guitar2_Tab3_tab.width + Guitar2_Tab3_tab.x, Guitar2_Tab3_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab4_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab4_tab.draw();<br /> <br /> Guitar2Inst.x = Guitar2_St1.x - 30;<br /> Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab1.y - Guitar2_St1.y) / 2) + 90; <br /> <br /> const Base_St1 = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Base_St1.addClef(&quot;bass&quot;).setContext(ctx);<br /> Base_St1.addTimeSignature('4/4').setContext(ctx);<br /> Base_St1.addKeySignature('D').setContext(ctx);<br /> Base_St1.draw();<br /> <br /> const Base_St2 = new Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);<br /> Base_St2.draw();<br /> <br /> const Base_St3 = new Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);<br /> Base_St3.draw();<br /> <br /> const Base_St4 = new Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);<br /> Base_St4.draw();<br /> <br /> const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Base_Tab1.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab1.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab1.draw();<br /> <br /> BaseTab1.x = Base_Tab1.x;<br /> BaseTab1.y = Base_Tab1.y;<br /> <br /> BaseInst.x = Base_St1.x - 30;<br /> BaseInst.y = Base_St1.y + ((Base_Tab1.y - Base_St1.y) / 2) + 90; <br /> <br /> StaveBase1 = Base_Tab1;<br /> <br /> const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);<br /> Base_Tab2.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab2.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab2.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab2.draw();<br /> <br /> StaveBase2 = Base_Tab2;<br /> <br /> const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);<br /> Base_Tab3.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab3.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab3.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab3.draw();<br /> <br /> StaveBase3 = Base_Tab3;<br /> <br /> const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);<br /> Base_Tab4.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab4.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab4.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab4.draw();<br /> <br /> StaveBase4 = Base_Tab4;<br /> <br /> var Base_connect = new VF.StaveConnector(Base_St1, Base_Tab1);<br /> Base_connect.setType(VF.StaveConnector.type.BRACKET);<br /> Base_connect.setContext(ctx);<br /> Base_connect.draw();<br /> <br /> const Drum_St1 = new Stave(Base_Tab1.x, Base_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Drum_St1.addClef(&quot;bass&quot;).setContext(ctx);<br /> Drum_St1.addTimeSignature('4/4').setContext(ctx);<br /> Drum_St1.draw();<br /> <br /> DrumInst.x = Drum_St1.x - 30;<br /> DrumInst.y = Drum_St1.y + 90; <br /> <br /> const Drum_St1_1 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);<br /> Drum_St1_1.setBegBarType(VF.Barline.type.NONE);<br /> Drum_St1_1.setEndBarType(VF.Barline.type.NONE);<br /> Drum_St1_1.draw();<br /> <br /> const Drum_notes1_1 = [<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;4&quot;, stem_direction: -1 }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;4r&quot; }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8r&quot; }),<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8r&quot; }),<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> ];<br /> const Drum_beam1_1 = new VF.Beam([Drum_notes1_1[3],Drum_notes1_1[5]]);<br /> <br /> var Drum_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_1Voice.setStrict(true);<br /> Drum_St1_1Voice.addTickables(Drum_notes1_1);<br /> <br /> const Drum_St1_2 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);<br /> Drum_St1_2.setBegBarType(VF.Barline.type.NONE);<br /> Drum_St1_2.setEndBarType(VF.Barline.type.NONE);<br /> Drum_St1_2.draw();<br /> <br /> const Drum_notes1_2 = [<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 })<br /> ];<br /> <br /> const Drum_notes1_3 = [<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 })<br /> ];<br /> <br /> UniqueIds = getUniqueNoteheadIds(Drum_notes1_2, [0, 1, 3, 5, 6, 8]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Drum_beam1_2_1 = new VF.Beam([Drum_notes1_2[0], Drum_notes1_2[1]]);<br /> const Drum_beam1_2_2 = new VF.Beam([Drum_notes1_2[2], Drum_notes1_2[3], Drum_notes1_2[4]]);<br /> const Drum_beam1_2_3 = new VF.Beam([Drum_notes1_2[5], Drum_notes1_2[6], Drum_notes1_2[7], Drum_notes1_2[8]]);<br /> <br /> var Drum_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_2Voice.setStrict(true);<br /> Drum_St1_2Voice.addTickables(Drum_notes1_2);<br /> <br /> var Drum_St1_3Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_3Voice.setStrict(true);<br /> Drum_St1_3Voice.addTickables(Drum_notes1_3);<br /> <br /> var formatterDrum_St1_2 = new Vex.Flow.Formatter().joinVoices([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice]);<br /> //formatter13_2.formatToStave([stave13_3Voice, stave13_1Voice, stave13_2Voice], stave13_2);<br /> formatterDrum_St1_2.format([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice], nStaveWidth - 30);<br /> Drum_St1_1Voice.draw(ctx, Drum_St1_2);<br /> Drum_St1_2Voice.draw(ctx, Drum_St1_2);<br /> <br /> Drum_beam1_1.setContext(ctx).draw();<br /> <br /> Drum_beam1_2_1.setContext(ctx).draw();<br /> Drum_beam1_2_2.setContext(ctx).draw();<br /> Drum_beam1_2_3.setContext(ctx).draw();<br /> <br /> shiftDrum1 = addShift(<br /> Drum_notes1_2, <br /> [0, 1, 2, 3, 5, 5, 6, 6, 7, 7, 8, 8],<br /> [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]<br /> );<br /> <br /> <br /> const Drum_St2 = new Stave(Drum_St1.width + Drum_St1.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St2.draw();<br /> <br /> <br /> const Drum_St3 = new Stave(Drum_St2.width + Drum_St2.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St3.draw();<br /> <br /> <br /> const Drum_St4 = new Stave(Drum_St3.width + Drum_St3.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St4.draw();<br /> <br /> <br /> const Perc_St1 = new Stave(Drum_St1.x, Drum_St1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Perc_St1.addTimeSignature('4/4').setContext(ctx);<br /> <br /> const Perc_St1_1 = new Stave(nHeadMargin + Drum_St1.x, Drum_St1.y + 100, 0).setContext(ctx);<br /> Perc_St1_1.setBegBarType(VF.Barline.type.NONE);<br /> Perc_St1_1.setEndBarType(VF.Barline.type.NONE);<br /> Perc_St1_1.draw();<br /> <br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St1.setConfigForLine(i, {visible: false} );<br /> }<br /> <br /> Perc_St1.draw();<br /> <br /> PercInst.x = Perc_St1.x - 30;<br /> PercInst.y = Perc_St1.y + 90; <br /> <br /> var AllConnector = new VF.StaveConnector(VocalSt1, Perc_St1);<br /> AllConnector.setType(VF.StaveConnector.type.SINGLE);<br /> AllConnector.setContext(ctx);<br /> AllConnector.draw();<br /> <br /> const Perc_notes1_1 = [<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 })<br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Perc_notes1_1, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Perc_beam1_1_1 = new VF.Beam([Perc_notes1_1[0], Perc_notes1_1[1], Perc_notes1_1[2], Perc_notes1_1[3]]);<br /> const Perc_beam1_1_2 = new VF.Beam([Perc_notes1_1[4], Perc_notes1_1[5], Perc_notes1_1[6], Perc_notes1_1[7]]);<br /> const Perc_beam1_1_3 = new VF.Beam([Perc_notes1_1[8], Perc_notes1_1[9], Perc_notes1_1[10], Perc_notes1_1[11]]);<br /> const Perc_beam1_1_4 = new VF.Beam([Perc_notes1_1[12], Perc_notes1_1[13], Perc_notes1_1[14], Perc_notes1_1[15]]);<br /> <br /> var Perc_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Perc_St1_1Voice.setStrict(true);<br /> Perc_St1_1Voice.addTickables(Perc_notes1_1);<br /> <br /> var formatterPerc_St1_1 = new Vex.Flow.Formatter().joinVoices([Perc_St1_1Voice]);<br /> //formatterPerc_St1_1.formatToStave([stave17_1Voice], Perc_St1_1);<br /> formatterPerc_St1_1.format([Perc_St1_1Voice], nStaveWidth - 30);<br /> Perc_St1_1Voice.draw(ctx, Perc_St1_1);<br /> <br /> Perc_beam1_1_1.setContext(ctx).draw();<br /> Perc_beam1_1_2.setContext(ctx).draw();<br /> Perc_beam1_1_3.setContext(ctx).draw();<br /> Perc_beam1_1_4.setContext(ctx).draw();<br /> <br /> Perc_note1_1_0.x = Perc_notes1_1[0].getAbsoluteX();<br /> Perc_note1_1_0.y = Perc_notes1_1[0].getStave().getYForLine(1);<br /> <br /> shiftPerc1 = addShift(<br /> Perc_notes1_1, <br /> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],<br /> [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]<br /> );<br /> <br /> const Perc_St2 = new Stave(Perc_St1.width + Perc_St1.x, Perc_St1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St2.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St2.draw();<br /> <br /> const Perc_St3 = new Stave(Perc_St2.width + Perc_St2.x, Perc_St2.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St3.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St3.draw();<br /> <br /> const Perc_St4 = new Stave(Perc_St3.width + Perc_St3.x, Perc_St3.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St4.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St4.draw();<br /> <br /> })();<br /> <br /> const svgElement2 = document.querySelector('#yonet202403Mid_Output01 svg');<br /> svgElement2.style.backgroundColor = '#F5F5F5';<br /> var svgContainer = document.getElementById('yonet202403Mid_Output01');<br /> var svgElement = svgContainer.querySelector('svg');<br /> <br /> var VocalText_options = {<br /> textContent: [&quot;Vocal&quot;], // 必須文字列<br /> strID: &quot;VocalText&quot;, // 必須<br /> Stave_x: Vocal.x,<br /> Stave_y: Vocal.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(VocalText_options);<br /> <br /> var EGuitarText_options = {<br /> textContent: [&quot;E.Guitar1&quot;], // 必須文字列<br /> strID: &quot;EGuitarText&quot;, // 必須<br /> Stave_x: Guitar1Inst.x,<br /> Stave_y: Guitar1Inst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(EGuitarText_options);<br /> <br /> var EGuitarTab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;EGuitarTab&quot;, // 必須<br /> Stave_x: Stave9Pos.x,<br /> Stave_y: Stave9Pos.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 80,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(EGuitarTab_options);<br /> <br /> insertTrilPathToSVG(shiftGuitar1_1);<br /> <br /> var Guitar1_notes4_tr_option = {<br /> textContent: [&quot;ｔｒ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes4_tr&quot;, // 必須<br /> Stave_x: shiftGuitar1_1[0].x,<br /> Stave_y: shiftGuitar1_1[0].y,<br /> Stave_x_Offset: 25,<br /> Stave_y_Offset: -50,<br /> fontSize: 40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Guitar1_notes4_tr_option);<br /> <br /> var Guitar1_notes1_option = {<br /> textContent: [&quot;０&quot;, &quot;２&quot;, &quot;２&quot;, &quot;２&quot;, &quot;９&quot;, &quot;９&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: [10, 0, 10, 0, 0, 0],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30 - 110}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y - 110});<br /> <br /> var Guitar1_notes1_g_option = {<br /> textContent: [&quot;ｇ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: -30,<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_g_option);<br /> <br /> var Guitar1_st1_notes1_g_option = {<br /> textContent: [&quot;ｇ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: -30,<br /> Stave_y_Offset: 0 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes1_g_option);<br /> <br /> <br /> var Guitar1_notes1_Arpeggio_option = {<br /> textContent: [&quot;┌ Ａｒｐｅｇｇｉｏ ──────┐&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 40,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_Arpeggio_option);<br /> <br /> var Guitar1_st1_notes1_Arpeggio_option = {<br /> textContent: [&quot;┌ Ａｒｐｅｇｇｉｏ ──────┐&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40 - 110 - 20,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 40,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes1_Arpeggio_option);<br /> <br /> var Guitar1_notes1_0_option = {<br /> textContent: [&quot;\uFF7C&quot;], // 必須文字列 4和音コード2分音符<br /> strID: &quot;Guitar1_notes1_ele0&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab1[0].x,<br /> Stave_y: shiftGuitar1_tab1[0].y,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> };<br /> insertTextToSVG(Guitar1_notes1_0_option);<br /> <br /> var Guitar1_notes2_option = {<br /> textContent: [&quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;７&quot;, &quot;９&quot;, &quot;７&quot;, &quot;７&quot;, &quot;５&quot;, &quot;４&quot;, &quot;７&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: [-30, -40, 0, -10, 0, -10, 0, 0, 10, 0, 0, 0, 0],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab2, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_option);<br /> <br /> var Guitar1_notes2_c_option = {<br /> textContent: [&quot;Ｈ．Ｃ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_c_option);<br /> <br /> var Guitar1_st1_notes2_c_option = {<br /> textContent: [&quot;Ｈ．Ｃ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes2_c_option);<br /> <br /> var Guitar1_notes2_a_option = {<br /> textContent: [&quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes2&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 0],<br /> Stave_y_Offset: [-15, -15, -15, -15, 15, 15, 15, 15],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[3].x, y:shiftGuitar1_tab2[3].y},<br /> {x:shiftGuitar1_tab2[5].x, y:shiftGuitar1_tab2[5].y}, <br /> {x:shiftGuitar1_tab2[6].x, y:shiftGuitar1_tab2[6].y}, <br /> {x:shiftGuitar1_tab2[7].x, y:shiftGuitar1_tab2[7].y}, <br /> {x:shiftGuitar1_tab2[8].x, y:shiftGuitar1_tab2[8].y}, <br /> {x:shiftGuitar1_tab2[10].x, y:shiftGuitar1_tab2[10].y}, <br /> {x:shiftGuitar1_tab2[11].x, y:shiftGuitar1_tab2[11].y}, <br /> {x:shiftGuitar1_tab2[12].x, y:shiftGuitar1_tab2[12].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_a_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y + 10}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y - 40}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y - 40}, -1);<br /> <br /> var Guitar1_notes3_option = {<br /> textContent: [&quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;７&quot;, &quot;７&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes3&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 5],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab3, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes3_option);<br /> <br /> var Guitar1_notes3_H_P_H_P_option = {<br /> textContent: [&quot;Ｈ&quot;, &quot;Ｐ&quot;, &quot;Ｈ&quot;, &quot;Ｐ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},<br /> {x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},<br /> {x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},<br /> {x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes3_H_P_H_P_option);<br /> <br /> var Guitar1_st1_notes3_H_P_H_P_option = {<br /> textContent: [&quot;Ｈ&quot;, &quot;Ｐ&quot;, &quot;Ｈ&quot;, &quot;Ｐ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},<br /> {x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},<br /> {x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},<br /> {x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes3_H_P_H_P_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y + 10}, {x:shiftGuitar1_tab3[1].x + 5, y:shiftGuitar1_tab3[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y + 10}, {x:shiftGuitar1_tab3[2].x + 5, y:shiftGuitar1_tab3[1].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y + 10}, {x:shiftGuitar1_tab3[3].x + 5, y:shiftGuitar1_tab3[2].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y + 10}, {x:shiftGuitar1_tab3[4].x + 5, y:shiftGuitar1_tab3[3].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[6].x , y:shiftGuitar1_tab3[6].y + 15}, {x:shiftGuitar1_tab3[6].x + 35, y:shiftGuitar1_tab3[6].y + 15});<br /> <br /> <br /> var Guitar1_notes3_7_option = {<br /> textContent: [&quot;\uFF7F&quot;], // 必須文字列 1音2分音符<br /> strID: &quot;Guitar1_notes3_ele7&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab3[7].x - 7,<br /> Stave_y: shiftGuitar1_tab3[7].y,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> };<br /> insertTextToSVG(Guitar1_notes3_7_option);<br /> <br /> var Guitar1_notes4_option = {<br /> textContent: [&quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;７&quot;, &quot;７&quot;, &quot;４&quot;, &quot;６&quot;, &quot;４&quot;, &quot;．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes3&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, -20, 0, 0, 0, 0, 0, 0],<br /> Stave_y_Offset: [0, 0, 0, 0, 0, 0, 0, 0, 0, -15],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab4, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes4_option);<br /> <br /> var Guitar1_notes4_P_C_H_option = {<br /> textContent: [&quot;Ｐ&quot;, &quot;Ｃ&quot;, &quot;Ｈ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},<br /> {x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},<br /> {x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes4_P_C_H_option);<br /> <br /> var Guitar1_st1_notes4_P_C_H_option = {<br /> textContent: [&quot;Ｐ&quot;, &quot;Ｃ&quot;, &quot;Ｈ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},<br /> {x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},<br /> {x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes4_P_C_H_option);<br /> <br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[0].x, y:shiftGuitar1_tab4[0].y + 10}, {x:shiftGuitar1_tab4[1].x + 2, y:shiftGuitar1_tab4[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[1].x, y:shiftGuitar1_tab4[1].y + 10}, {x:shiftGuitar1_tab4[2].x + 2, y:shiftGuitar1_tab4[1].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[4].x - 15, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[4].x + 2, y:shiftGuitar1_tab4[4].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[4].x, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[5].x + 2, y:shiftGuitar1_tab4[4].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[6].x, y:shiftGuitar1_tab4[6].y - 10}, {x:shiftGuitar1_tab4[7].x + 2, y:shiftGuitar1_tab4[6].y - 10}, -1);<br /> <br /> <br /> insertTrilPathToSVG(shiftGuitar1_tab4_tr);<br /> <br /> var Guitar1_tab_notes4_tr_option = {<br /> textContent: [&quot;ｔｒ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_tab_notes4_tr&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab4_tr[0].x,<br /> Stave_y: shiftGuitar1_tab4_tr[0].y,<br /> Stave_x_Offset: 25,<br /> Stave_y_Offset: -50,<br /> fontSize: 40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Guitar1_tab_notes4_tr_option);<br /> <br /> var EGuitar2Text_options = {<br /> textContent: [&quot;E.Guitar2&quot;], // 必須文字列<br /> strID: &quot;EGuitar2Text&quot;, // 必須<br /> Stave_x: Guitar2Inst.x,<br /> Stave_y: Guitar2Inst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(EGuitar2Text_options);<br /> <br /> var EGuitar2Tab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;EGuitar2Tab&quot;, // 必須<br /> Stave_x: Guitar2Tab1.x,<br /> Stave_y: Guitar2Tab1.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 80,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(EGuitar2Tab_options);<br /> <br /> var BaseText_options = {<br /> textContent: [&quot;Base&quot;], // 必須文字列<br /> strID: &quot;BaseText&quot;, // 必須<br /> Stave_x: BaseInst.x,<br /> Stave_y: BaseInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(BaseText_options);<br /> <br /> var BaseTab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;BaseTab&quot;, // 必須<br /> Stave_x: BaseTab1.x,<br /> Stave_y: BaseTab1.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 90,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(BaseTab_options);<br /> insertBaseEndBarPathToSVG(StaveBase1);<br /> insertBaseEndBarPathToSVG(StaveBase2);<br /> insertBaseEndBarPathToSVG(StaveBase3);<br /> insertBaseEndBarPathToSVG(StaveBase4);<br /> <br /> var DrumText_options = {<br /> textContent: [&quot;Drum&quot;], // 必須文字列<br /> strID: &quot;DrumText&quot;, // 必須<br /> Stave_x: DrumInst.x,<br /> Stave_y: DrumInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(DrumText_options);<br /> <br /> var PercText_options = {<br /> textContent: [&quot;Perc.&quot;], // 必須文字列<br /> strID: &quot;PercText&quot;, // 必須<br /> Stave_x: PercInst.x,<br /> Stave_y: PercInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(PercText_options);<br /> <br /> var note13_2_0_option = {<br /> textContent: [&quot;\uFF65&quot;, &quot;\uFF65&quot;, &quot;\uFF65&quot;, &quot;\uFF65&quot;, <br /> &quot;\uFF65&quot;, &quot;\uFF68&quot;, &quot;\uFF66&quot;, &quot;\uFF67&quot;, &quot;\uFF65&quot;, &quot;\uFF0B&quot;, &quot;\uFF65&quot;, &quot;\uFF0F&quot;], // 必須文字列<br /> //x , half_o, , &gt;, , + , , o<br /> strID: &quot;note13_2_0&quot;, // 必須<br /> Stave_y_Offset: [ -5, -5, -5, -5,<br /> -5, -60, -5, -60, -5, -60, -5, -60],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: shiftDrum1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(note13_2_0_option);<br /> <br /> var Perc_notes1_1_0_Shaker_option = {<br /> textContent: [&quot;＜ Ｓｈａｋｅｒ ＞&quot;], // 必須文字列<br /> strID: &quot;Perc_notes1_1_0_shaker&quot;, // 必須<br /> Stave_x: Perc_note1_1_0.x,<br /> Stave_y: Perc_note1_1_0.y,<br /> Stave_x_Offset: -20,<br /> Stave_y_Offset: 0,<br /> fontSize: 60,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Perc_notes1_1_0_Shaker_option);<br /> <br /> var Perc_notes1_1_0_option = {<br /> textContent: [&quot;\uFF69&quot;], // 必須文字列<br /> strID: &quot;Perc_notes1_1_0&quot;, // 必須<br /> Stave_y_Offset: -5,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: shiftPerc1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Perc_notes1_1_0_option);<br /> <br /> if(allUniqueIds !== &quot;undefined&quot;){<br /> // 透明にするIDの配列<br /> // 例としてここでIDを指定<br /> let autoUniqueIds = allUniqueIds.map(id =&gt; &quot;vf-&quot; + id);<br /> <br /> // 各IDに対して処理<br /> autoUniqueIds.forEach(id =&gt; {<br /> // 該当するIDの要素を取得<br /> let element = svgElement.getElementById(id);<br /> if (element) {<br /> // 該当する要素があれば、描画内容を透明にする<br /> let paths = element.querySelectorAll(&quot;path&quot;);<br /> paths.forEach(path =&gt; {<br /> var dAttribute = path.getAttribute('d');<br /> // カンマで区切られた数値の数を数えます<br /> var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数<br /> <br /> if (numberOfValues === 9) {<br /> var firstCoord = dAttribute.split(',')[0];<br /> if (dAttribute.startsWith('M')) {<br /> var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数<br /> var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br /> // 座標の差を計算します<br /> if(CnumberOfValues &gt; 0){<br /> var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br /> var xdiff = coords[0] - coords[2]; // xの差を計算<br /> var ydiff = coords[1] - coords[3]; // yの差を計算<br /> <br /> // xが0でyが0より大きい場合、描画内容を透明にします<br /> if (xdiff &lt;= -3.590) {<br /> if (xdiff &gt;= -3.599) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> if (xdiff &lt;= -2.369) {<br /> if (xdiff &gt;= -2.374) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> if (xdiff &lt;= 1.000) {<br /> if (xdiff &gt;= -1.000) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> else {<br /> if(ydiff === 1.123){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> }<br /> }<br /> else if (numberOfValues === 1) {<br /> var firstCoord = dAttribute;<br /> if (dAttribute.startsWith('M')) {<br /> var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br /> // 座標の差を計算します<br /> if(LnumberOfValues &gt; 0){<br /> var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br /> var xdiff = coords[0] - coords[2]; // xの差を計算<br /> var ydiff = coords[1] - coords[3]; // yの差を計算<br /> <br /> // xが0でyが0より大きい場合、描画内容を透明にします<br /> if (xdiff &lt; -10) {<br /> if (xdiff &gt; -18) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> else if (numberOfValues === 21 || numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) {<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> });<br /> }<br /> });<br /> }<br /> <br /> if(allFlagUniqueIds !== &quot;undefined&quot;){<br /> let autoFlagUniqueIds = allFlagUniqueIds.map(id =&gt; &quot;vf-&quot; + id);<br /> autoFlagUniqueIds.forEach(id =&gt; {<br /> // 該当するIDの要素を取得<br /> let element = svgElement.getElementById(id);<br /> if (element) {<br /> // 該当する要素があれば、描画内容を透明にする<br /> let flagpaths = element.querySelectorAll('path');<br /> flagpaths.forEach(path =&gt; {<br /> var dAttribute = path.getAttribute('d');<br /> // カンマで区切られた数値の数を数えます<br /> var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数<br /> <br /> // 数値の数が23であれば、このpath要素は求めるものです<br /> if (numberOfValues === 23) {<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> });<br /> }<br /> });<br /> }<br /> })();<br /> &lt;/yjavascript&gt;<br /> <br /> 　<br /> <br /> === '''五線譜''' ===<br /> 　五線譜を描いてみます。目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(410, 100)→(10, 40)という線です。<br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のとおり。<br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> //2023-09Mid:&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> //2024-03Mid:Version<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave<br /> } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div = document.getElementById('output');<br /> const renderer = new Renderer(div, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer.resize(500, 200);<br /> const context = renderer.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave.addClef('treble').addTimeSignature('C');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave.setContext(context).draw();<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　最初に、div に 出力するタグを取得する。ここでは &amp;lt;div id=&quot;output&quot;&amp;gt;&amp;lt;/div&amp;gt; のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); でSVGでの描画処理をしてくれるようになります。他にもRenderer.Backends.CANVASという指定もできます。自分はSVGバージョンが好みです。なんか問題報告が少ない。CANVASはスケールサイズ表示がおかしいとか言ってる人もいます。renderer.resize(500, 200); は描画エリアのサイズを指定しています。そして、この描画エリアに五線譜のオブジェクトとして構築した stave を配置します。<br /> <br /> <br /> 　New Stave(10, 40, 400)で、描画エリアの x = 10, y = 40の位置に幅 400 の五線譜を描きます。(410, 100)の頂点位置をみればわかりますが、きっちり 10+400 の大きさになっています。五線譜の真ん中の第三線が中央になっており縦 200 が 1 行にちょうど良いようです。楽譜部分の表示スケールを変更して小さくする予定なので、その時にまた、描画領域について考えてみたいと思います。<br /> <br /> <br /> 　stave.addClef('treble').addTimeSignature('4/4'); で treble ト音記号 4/4 つまり4分の4拍子という五線譜になります。<br /> <br /> <br /> 　自分は、持っているPCが12型で1920x1280を使っていますので、表示倍率を150%にしています。その関係で、実質は横サイズが1920の66%で、横は1280pxと変わらない表示領域です。したがって、Wikiの横幅も最大にして、1000pxくらいがちょうどいい限界の大きさです。しかし、そのサイズでは、4小節くらいを1行にするには楽譜が大きすぎるので、もうちょっと小さくしないといけないなとは思っていますが、その処理も、もうちょっと後でやるとします。続けて、実際の音符を配置してみます。<br /> <br /> <br /> 　拍子記号は以下のようなものが使えます。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;C&lt;/td&gt;<br /> &lt;td&gt;Cを表示（4/4拍子）&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;C|&lt;/td&gt;<br /> &lt;td&gt;Cの横中央に縦棒を表示（2/2拍子）&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;n1/n2&lt;/td&gt;<br /> &lt;td&gt;n2 分の n1 拍子&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置''' ===<br /> 　目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(360, 100)です。<br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> スクリプトは以下のようなものです。<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Formatter<br /> } = Vex.Flow;<br /> <br /> const div2 = document.getElementById('output2');<br /> const renderer2 = new Renderer(div2, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer2.resize(500, 200);<br /> const context2 = renderer2.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave2 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave2.addClef('treble').addTimeSignature('C|');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave2.setContext(context2).draw();<br /> <br /> // Create the notes<br /> const notes2 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voice2 = new Voice({ num_beats: 4, beat_value: 4 });<br /> voice2.addTickables(notes2);<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices([voice2]).format([voice2], 350);<br /> <br /> // Render voice<br /> voice2.draw(context2, stave2);<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　変数名が最初の楽譜とダブるところは数字を付けました。一番最初の StaveNote, Voice, Formatterの部分は最初のと共通なので書き換えが必要です。あとの部分で2重で定義してもダメです。最初のがエラーになって、致命的エラーで何も描画処理がされなくなります。コード全体としては、音符を付ける部分は、五線譜に付け足すので、すべて、最初のコードより後ろに付け足す感じです。const notes2 以降が付け足した部分です。ここまで書いて言えるのは VexFlow はプログラミングに近いです。音楽や楽譜しか知らない人が、この方式で楽譜を描くのは難しいと感じると思います。ABC記述方式のモノが好まれる理由が少しわかります。ただVexflowの方が複雑な記述であるゆえに、複雑な楽譜が書ける言えるのかもしれない。まるで配列の中にひとつづつの音符を生成している感じで、ひとつの音符ごとに区切って new StaveNote() 関数に引数としてオブジェクト値(自分はこれをPerlの連想配列と似ているので連想配列とちょくちょく呼んでいます)を指定しています。プロパティ名にkeys: とduration: が指定されます。プロパティ名であることがわかりやすいように:までつけていますが名前自体は keys と duration です。keys プロパティ名に対応するものとして、配列が指定されるようです。値が一つしかなくてもです。そこに音の高さ相当する値、音階名と段階番号を付けます。実音記号のA(ラ), B(シ), C(ド), D(レ), E(ミ), F(ファ), G(ソ)に対応していて、/ で区切って段階の番号を付与します。<br /> <br /> <br /> 　ピアノと同じで88音の下から1, 2, … , 10, 11 まであります。ピアノ譜のト音記号の五線譜に下に一つ補助線を付けたドが C/4 に相当します。通常、ト音記号の五線譜には E/3 が最低音、 最高の音しても G/6 までくらいを使います。C/6 から 上の音での演奏が続くときは オクターブ記号を使って、その下に描くことがあります。ギターも同じです。ギターは4オクターブしかありません。が一番上の音付近を使うときは、オクターブ記号を置いて、一段階下げて表記します。どの楽器もピアノの88鍵盤には負けます。ギターの一番低い音でもE/3です。クラリネットの音域もギターに似ていますが、最高音はギターよりも狭い範囲が一般的です。最高音のあたりはかなりうまい人だと出せなくはない音ですが狙うのはスゴイ難しいです。ベースとピアノの最低音あたりはヘ音記号の五線譜に書かれることが普通です。ピアノはト音記号とヘ音記号の二つ同時に使うこともあります。音域やばいっす。バイオリンあたりはテノール記号(ハ音記号)というト音記号でもヘ音記号でもないものを使う場合があります。この3種類しかないと思います。あとは変則の五線譜として、通常の位置とは異なる部分に、記号を配置する手法があります。<br /> <br /> <br /> 　durationの値には文字列が設定されて、 q が四分音符、h が2分音符、w が全音符を表します。8, 16, 32, 64 がそれぞれ8分音符、 16分音符、 32分音符、64分音符に対応しますが、連符もありますので、ひとことで言えるほど簡単ではないです。後ろに r をつけると休符になります。rest の r だそうです。 voice2.draw(context2, stave2);<br /> <br /> <br /> 　このようにして作った notes2 を Voiceという単位に格納するため new Voice({ num_beats: 4, beat_value: 4 }); でプロパティ名 num_beats と beat_value を持ったオブジェクトを引数にしています。ともに 4 拍子の中に 4つの拍子をもった音だと定義されていて、その中に、notes2 を取り込むべく、voice2.addTickables(notes2); としています。<br /> <br /> <br /> 　そして、これらを400pxの五線譜の中に納まるように、new Formatter().joinVoices([voice2]).format([voice2], 350); としています。x = 350のところに最後の音符が収まっていることも確認できます。このように処理した voice2 を context2 の描画領域に stave2 の 五線譜に描画します。<br /> <br /> <br /> 　duration に設定できる値は以下のようなものです。<br /> &lt;table style=&quot;width: 400px; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;w&lt;/td&gt;<br /> &lt;td&gt;全音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;h&lt;/td&gt;<br /> &lt;td&gt;2分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;q&lt;/td&gt;<br /> &lt;td&gt;4分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;8&lt;/td&gt;<br /> &lt;td&gt;8分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;16&lt;/td&gt;<br /> &lt;td&gt;16分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;32&lt;/td&gt;<br /> &lt;td&gt;32分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 2Voices''' ===<br /> &lt;div id=&quot;output3&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output3&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Formatter<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div3 = document.getElementById('output3');<br /> const renderer3 = new Renderer(div3, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer3.resize(500, 200);<br /> const context3 = renderer3.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave3 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave3.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave3.setContext(context3).draw();<br /> <br /> // Create the notes<br /> const notes3 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> const notes32 = [new StaveNote({<br /> keys: ['c/4'],<br /> duration: 'w'<br /> })];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voices3 = [<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes3),<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes32),<br /> ];<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices(voices3).format(voices3, 350);<br /> <br /> // Render voices.<br /> voices3.forEach(function(v) {<br /> v.draw(context3, stave3);<br /> });<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　和音を除いて、通常、一人では演奏できないような記譜法を2Voicesと呼んでいます。和音を引けない楽器ならそれだけで2Voices 3Voicesとも言えますが、この例のように1小節の中を休符と音符とで分かち合うのを1Voiceとした考え方を保有する記譜の場合は、特別な記述が必要です。別の音という意味付けになります。スコア譜なんかではよく2Voiceや3Voiceの記述が入ります。アレンジするうえで、音を足していくことはよくあるためです。ただしスコア譜では、一小節を短くして |1Voice(2Voice)|のように記譜している方式もよくあります。パートを増やせばいいじゃんと思いますが、限られたスペースにちょっとした音のためだけにパートを増やすことは通常は、実施しません。<br /> <br /> <br /> 　const notes32の部分の定義のように、音符の定義を別で実施します。Voiceを生成するときに、2つの音符をまとめるときに配列に個別のオブジェクトとして定義します。そして作られた配列2の大きさのVoiceをFormatter関数を呼び出して、そのメンバ関数 joinVoices で結合します。joinVoices 関数は返り値が formatter 形式で .format も Formatter のメンバ関数です。そして 350px の中に描画するようになります。そして、2要素の配列の Voices それぞれを繰り返し処理によって、引数の描画エリア context3 五線譜 stave3 に音符を配置して描画します。<br /> <br /> <br /> === '''五線譜に音符を配置 付点臨時記号''' ===<br /> &lt;div id=&quot;output4&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output4&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div4 = document.getElementById('output4');<br /> const renderer4 = new Renderer(div4, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer4.resize(500, 200);<br /> const context4 = renderer4.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave4 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave4.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave4.setContext(context4).draw();<br /> <br /> // Create the notes<br /> const notes4 = [<br /> dotted(new StaveNote({<br /> keys: ['c##/5'],<br /> duration: '8d'<br /> }).addModifier(new Accidental('##'))),<br /> new StaveNote({<br /> keys: ['db/4'],<br /> duration: '16'<br /> }).addModifier(new Accidental('b')),<br /> dotted(new StaveNote({<br /> keys: ['b/4', 'd/5', 'f/5'],<br /> duration: 'h'<br /> }).addModifier(new Accidental('#'),0),[0, 2]),<br /> dotted(new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: '8'<br /> })),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context4, stave4, notes4);<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　付点を付けるにはDot.buildAndAttach([ staveNoteオブジェクト ], { index: 数値 }) といった関数を実行する必要があります。例では何度も呼び出すのが面倒なので、ユーザ関数を定義しています。公式では、特定のひとつの音符にしか、付点をつけることができないユーザ関数になっていたので、引数に数値単独の値を付与するところに、数値配列に、何番目の音符に付点をつけるかを指定するようなものに変更しています。Formatter.FormatAndDraw(context4, stave4, notes4); だけでも五線譜に音符を描画できるという便利な一面も紹介してくれています。<br /> <br /> <br /> 　臨時記号をつける処理をしているが、keys: ['c##/5']のように指定しても描画には反映されない。描画に影響しているのは、.addModifier(new Accidental('#'), 0) という部分です。一つ目の引数で Accidental オブジェクトのコンストラクタ引数に臨時記号の種類を与えています。##が二重シャープ。#がシャープ。bがフラット。bbが二重フラットです。今回は使いませんでしたが、ナチュラルはnです。.addModifier の2つめの引数はコードになっているときの、何番目の音に適用するかを指定しています。<br /> <br /> <br /> 　改めてまとめると、臨時記号の種類は以下のようになっています。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;n&lt;/td&gt;<br /> &lt;td&gt;ナチュラル&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;#&lt;/td&gt;<br /> &lt;td&gt;シャープ(半音上げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;##&lt;/td&gt;<br /> &lt;td&gt;ダブルシャープ(半音2回上げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;b&lt;/td&gt;<br /> &lt;td&gt;フラット(半音下げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;bb&lt;/td&gt;<br /> &lt;td&gt;ダブルフラット(半音2回下げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> <br /> <br /> 　Dot.…によって付点をつけるだけで、長さに不整合が起こっても記譜に問題は起こりません。どちらかというと一小節の中に納まるように配置されるかは、durationの組み合わせのほうが重要です。<br /> <br /> <br /> 　今回はト音記号 treble からヘ音記号 bass に変えました。他にも以下のような記号があります。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;treble&lt;/td&gt;<br /> &lt;td&gt;ト音記号 &amp;#x1D11E;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;bass&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号 &amp;#x1D122;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;alto&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(アルト) &amp;#x1D121;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;percussion&lt;/td&gt;<br /> &lt;td&gt;打楽器記号&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;tenor&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(テナー) &amp;#x1D121;一つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;soprano&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(ソプラノ) &amp;#x1D121;二つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;mezzo-soprano&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(メゾソプラノ) &amp;#x1D121;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;baritone-c&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(バリトン) &amp;#x1D121;二つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;baritone-f&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号(バリトン) &amp;#x1D122;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;subbass&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号(サブバス) &amp;#x1D122;一つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;french&lt;/td&gt;<br /> &lt;td&gt;ト音記号(フレンチ) &amp;#x1D11E;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁 new Beam()による方法''' ===<br /> &lt;div id=&quot;output5&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output5&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div5 = document.getElementById('output5');<br /> const renderer5 = new Renderer(div5, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer5.resize(500, 200);<br /> const context5 = renderer5.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave5 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave5.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave5.setContext(context5).draw();<br /> <br /> // Create the notes<br /> const notes51 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes52 = [<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes53 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;a/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> ];<br /> <br /> const notes54 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);<br /> <br /> // Create the beams for the first three groups.<br /> // This hides the normal stems and flags.<br /> const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];<br /> <br /> Formatter.FormatAndDraw(context5, stave5, allNotes5);<br /> <br /> // Draw the beams and stems.<br /> beams5.forEach((b) =&gt; {<br /> b.setContext(context5).draw();<br /> });<br /> <br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　音符の旗を描画せずにつなぐのを連桁といいます。表紙のひと固まりを繋ぎ演奏しやすいような表記にしています。8分音符の場合4つをつないで、2分音符のかたまりにしたりもします。例の楽譜では3拍目が16分音符で四分音符1つ分のひとかたまりになっています。16分音符の3つ目が32分なっています。キッチリ演奏しようとすると32分はめちゃくちゃ短いのでアタックからの立ち上がりが早い楽器でかつ技術力が要求される奏法になってきます。そんな演奏面の話はどうでもよいでしょうか。<br /> <br /> <br /> 　連桁は、Beam というシーケンスによって描画されます。Notesを連桁にしたい塊でひとつになるように作ると、const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];という記法によって、連桁のかたまりごとに配列にすることができます。このそれぞれの要素について関数、new Beam(notes51).setContext(context5).draw();のような操作によって蓮桁の描画準備がされます。小節の全体は const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54); のように結合されたものを.FormatAndDraw(context5, stave5, allNotes5);のようにして描画されます。<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁 Beam.generateBeams()による方法''' ===<br /> &lt;div id=&quot;output6&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output6&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div6 = document.getElementById(&quot;output6&quot;);<br /> const renderer6 = new Renderer(div6, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer6.resize(500, 500);<br /> const context6 = renderer6.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave6 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave6.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave6.setContext(context6).draw();<br /> <br /> const notes6 = [<br /> dotted(new StaveNote({ keys: [&quot;e##/5&quot;], duration: &quot;8d&quot; }).addModifier(new Accidental(&quot;##&quot;))),<br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }),<br /> ];<br /> <br /> const beams6 = Beam.generateBeams(notes6);<br /> Formatter.FormatAndDraw(context6, stave6, notes6);<br /> beams6.forEach((b) =&gt; {<br /> b.setContext(context6).draw();<br /> });<br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　notesで一小節分をまとめて定義した後、const beams6 = Beam.generateBeams(notes6); とするだけです。自動なので、思い通りになっていない可能性もありますが、8分音符4つは最大で二分音符にそれ以下は四分音符単位で連桁してくれるようです。連桁に含まれるので、ここまでの知識では連符には対応できないです。3連とか5/6/7/9/10/11/12…連とかは違う表記が必要です。また別の項目で確認するつもりなので、それまでは我慢です。自分もまだ知らないし。知らんけどじゃないし。本当に知らないし。本当に知らんけど。なんだけど。<br /> <br /> <br /> 　連符って演奏上においては最難関だね。3連でも、2分三連はさらにムズイ。2分三連くらいの長さになると、適当だとさすがにだめだし、あってないことを多い。ビート分割して、感じないとね。2分三連の中抜きみたいに1個あるいは2個だけ鳴らすとか、ありえないくらいむずかしい。心で刻むのつらいな。演奏家としては向いてないんだろうな。<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 タイ''' ===<br /> &lt;div id=&quot;output7&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output7&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div7 = document.getElementById(&quot;output7&quot;);<br /> const renderer7 = new Renderer(div7, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer7.resize(500, 200);<br /> const context7 = renderer7.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave7 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave7.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave7.setContext(context7).draw();<br /> <br /> const notes7 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const beams7 = Beam.generateBeams(notes7);<br /> Formatter.FormatAndDraw(context7, stave7, notes7);<br /> beams7.forEach(function (b) {<br /> b.setContext(context7).draw();<br /> });<br /> <br /> const ties7 = [<br /> new StaveTie({<br /> first_note: notes7[4],<br /> last_note: notes7[5],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: notes7[5],<br /> last_note: notes7[6],<br /> first_indices: [1],<br /> last_indices: [1],<br /> }),<br /> ];<br /> <br /> ties7.forEach((t) =&gt; {<br /> t.setContext(context7).draw();<br /> });<br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　タイは、notes に対してconst ties7 = [ new StaveTie({ first_note: notes7[4], last_note: notes7[5], first_indices: [0], last_indices: [0],}) ] という具合に StaveTie() の引数にオブジェクトを定義していて、主に4つのプロパティを設定します。first_noteがタイの始まり、last_noteがタイの終わりの音符です。和音を構成していない場合は必ず 0 ですが、first_indicesとlast_indicesにどの和音に対してタイを描画するかを指定しています。高さの異なる音に対して指定した場合はスラーになりそうですが、本当にそうなるかどうか確かめてみました。そしたら、やっぱりスラーと同じ役割になりそうでした。ついでに和音に2番目の音、配列番号1番に対してタイを描画する例は最後のA/3に対しての描画が参考になるでしょう。スラーについて言及したドキュメントもありそうなので、はっきりしたことはそれを確かめてみてからですね。何か不都合があるかもしれないし。タイでスラーを描画するのはね。どうなんだろうね。<br /> <br /> <br /> 　あー。いっけん大丈夫そうだけど、駄目だ。スラーは旗の根元からとか自由に描くこともありました。タイは音符で接続するだけで大丈夫な法則があったんですね。なるほど。気が付かなかった。やるなVexFlow。楽譜をじっくり眺めないと気付かないことだな。どうやらslurというキーワードではなく、その柔軟さを必要とするため、curveという名前で実現しているっぽい。またその時がきたら説明できると思います。VexFlow作者も大変だな。かなり完璧だけど、できないこともあるんだろうね。ここまで網羅されていると、できないことがあってもしゃーねぇな。<br /> <br /> <br /> 　ここまで書いて思ったんだけど、(function(){ コード記述部 })();の中に書けば、変数を名前空間で分け隔てることができるんじゃねと思えてきた。変数に番号とかつけてるのってカッコ悪いのかな。次の記事で試してみよう。<br /> <br /> 　<br /> <br /> === '''タブ譜''' ===<br /> &lt;div id=&quot;output8&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output8&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie,<br /> TabStave, <br /> TabNote, <br /> Bend, <br /> Vibrato<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div8 = document.getElementById(&quot;output8&quot;);<br /> const renderer8 = new Renderer(div8, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer8.resize(500, 300);<br /> const context8 = renderer8.getContext();<br /> <br /> // Create a tab stave of width 400 at position 10, 40 on the canvas.<br /> const stave8 = new TabStave(10, 40, 400);<br /> stave8.addClef(&quot;tab&quot;).setContext(context8).draw();<br /> <br /> const notes8 = [<br /> // A single note<br /> new TabNote({<br /> positions: [{ str: 3, fret: 7 }],<br /> duration: &quot;q&quot;,<br /> }),<br /> <br /> // A chord with the note on the 3rd string bent<br /> new TabNote({<br /> positions: [<br /> { str: 2, fret: 10 },<br /> { str: 3, fret: 9 },<br /> ],<br /> duration: &quot;q&quot;,<br /> }).addModifier(new Bend(&quot;Full&quot;), 1),<br /> <br /> // A single note with a harsh vibrato<br /> new TabNote({<br /> positions: [{ str: 2, fret: 5 }],<br /> duration: &quot;h&quot;,<br /> }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context8, stave8, notes8);<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　タブの文字フォントが公式の例と違うな。淋しい。どれが何音符かわからないダサい。2分音符には〇と棒が、全音符には〇が、四分音符いかにも旗は必要だと思う。あとタブは指番号だけでなくフレットの一部抜粋でコードの図が記入できた方がいいんじゃね。あとこんな大げさなFullとかいうチョーキングってダサくない。W.C と Cho. または C やH.Cでいいよ。あと数字は手書きフォントのがいいね。総じていえばシンコーミュージックがやっぱさえてると思う。シンコーミュージックのは綺麗なスコアだけど内容がダメダメっていうね。何かしらデメリットあるわ。どの立場から言ってるのかとお思いでしょうけど。なんでスコア譜ってあんなにダメダメなんだろうね。お金出して買ってる人もいるのに。ここに。耳コピができないというややる気もない子がここにいるのに。スコア譜命なんだけど。Youtubeのスコア出してる神レベルの人だけが最強だとおもう。あれは弾いていて本当に楽だし、現実的な運指になってるし、弾き心地最高。ロックを感じれる。時代が味方してくれている。あとは市販のスコア譜がもっと魂のはいったものになってほしい。弾きにくいとこをちょっと考えるくらいは自分でできるけど、なんか違うんだよなが解決できない。何が違うんだろうな。差分を埋め合わせる技術力が付かない。悲しい。という愚痴。あと音作りもよくわからないんだよな。でかい音出して練習できないからな。あと、ずっとヘッドフォンでやってると耳おかしくなるから生音だけで練習する時間も結構あって、あれはあれで淋しい。運指の練習にはなるけど、最後の弾き方の練習はやっぱヘッドフォンでやるしかなくて、結局、いい音作りできなくて、折れるということを繰り返してる。悔しいな。小さい才能の引き出し方がまったくわからないから、全く開花しないのな。もんくばっかりしか思いつかないもん。やだよな。こんな志向の奴の音楽なんて聴きたくないよな。わかるよ。だから、部屋にこもってめいわくかけないくらいのことしか思いつかない。つまんない。結局そこに落ち着く。つまんない。でも音楽もクラリネットもギターも大好き！これだけは譲れない。でも、どうすんのコレって感じだね。ハハハ。<br /> <br /> <br /> 　何が変わったかっていうと、Stave が TabStaveに変わった。Notes が TabNote に、Keysが positions になって、[{ str: 3, fret: 7 }] っていう指定に変わった。str が弦番号ね。1弦が細い方、6弦が太い方。なので、弦番号の数字の小ささ大きさが弦の幅に'''&lt;span style=&quot;color: darkred;&quot;&gt;比例&lt;/span&gt;'''していると覚えておきましょう。そしたら、どっちが1弦だっけ問題はなくなるね。fret がタブ譜に書かれる数字そのもの、あとでこれを手書き調のフォントに変える方法を考えてみたいと思います。あとは数字を〇で囲ったりできるんかな。無理かな。旗つけたり。やえもするとフレット図いれたり。<br /> <br /> <br /> 　音符の装飾は、addModifier()で同じなんだけど、臨時記号の#のようなAccidentalではなく、new Bend(&quot;Full&quot;), 1のような指定でチョーキング。new Vibrato().setHarsh(true).setVibratoWidth(70) で、長さ70のビブラート。setHarsh(true)でカクカクのビブラート。falseなら丸みを帯びた波線です。falseのほうが好きだな。Harshはヒドイとかっていう意味だそうで荒々しくをON OFFみたいな感じですね。その他についてはまた後ほどですね。ビブラートは通常の楽譜でも描画できるべきなので、五線譜の方でもできるかためしておきますか。いや、試してみたら簡単にはいかないな。同じではないのだな。五線譜上に表示させるのはまた考えないとだめですね。なんか方法はありそう。<br /> <br /> 　<br /> <br /> === '''小節線''' ===<br /> &lt;div id=&quot;output9&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output9&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Stave, <br /> StaveNote, <br /> Beam, <br /> Formatter, <br /> Renderer<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div9 = document.getElementById(&quot;output9&quot;);<br /> const renderer9 = new Renderer(div9, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer9.resize(890, 130);<br /> const context9 = renderer9.getContext();<br /> <br /> // Measure 1<br /> const staveMeasure91 = new Stave(10, 0, 470);<br /> //staveMeasure91.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;).setContext(context9).draw();<br /> staveMeasure91.addClef(&quot;treble&quot;);<br /> staveMeasure91.addTimeSignature(&quot;4/4&quot;);<br /> staveMeasure91.setContext(context9).draw();<br /> <br /> const notesMeasure91 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;qr&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;q&quot; })<br /> ];<br /> <br /> // Helper function to justify and draw a 4/4 voice<br /> Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);<br /> <br /> // Measure 2 - second measure is placed adjacent to first measure.<br /> const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);<br /> <br /> const notesMeasure92_part1 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> const notesMeasure92_part2 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> // Create the beams for 8th notes in second measure.<br /> const beam91 = new Beam(notesMeasure92_part1);<br /> const beam92 = new Beam(notesMeasure92_part2);<br /> <br /> const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);<br /> <br /> staveMeasure92.setContext(context9).draw();<br /> Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);<br /> <br /> // Render beams<br /> beam91.setContext(context9).draw();<br /> beam92.setContext(context9).draw();<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　2小節の楽譜にしました。まずは描画エリアを広くしないといけないので、横890にしました。1小節目は470。2小節目を400としてみました。記譜する内容はもっとも短い部分で8分音符なので、1小節あたり400は余裕があります。1小節目にはト音記号と拍子記号をおくので70ほど大きくします。<br /> <br /> <br /> 　したがって、const staveMeasure91 = new Stave(10, 0, 470); が1小節目。2小節目の始まりは10ではないので、staveMeasure91.width + staveMeasure91.xとして、const staveMeasure92 = new Stave(470 + 10, 0, 400); という内容で作られます。staveMeasure91.width が 470 で、staveMeasure91.width が 10 です。細かい計算があっていないと乱れるってことだな。abcjsとかはこんなこと気にしなくても自動で小節線が引かれますそのかわり、今回のように余裕を持っていひくとかバランスよくするとか、細かい指示は自動ではできません。結局、VexFlowくらい細かい指示をしないと思い通りにはならないですね。描く人の気持ちを込めれるのがVexFlowだな。AI？まだまだ無理だな。はやくAIに楽譜を描かせればいいのに。MIDI情報だけで完璧に描けるようになるんじゃね。シンコーミュージックファンなので、シンコーの楽譜で学習した奴がいいな。シンコーミュージックに潜入してどうやって描画してるのか見てみたいくらいだよ。入社したいわー。1年くらいかな。コピー譜つくる才能が無くて放り出されそうだけど。編集作業の一員くらいならやれるでしょ。コピする人の下で働くみたいなね。そんな奴いらんか。しかも1年とかなめたこといってるやつ採用するわけねぇな。シンコーミュージックは好きなんだけどな。間違ってますねコレとか偉そうにギター弾きながらコピしているひとにグサグサいってみたりね。すぐ解雇だな。どんだけシンコー好きやねんって感じだね。<br /> <br /> <br /> 　２小節目は8分音符四つを繰り返すので、notesMeasure92_part1とpart2を作ってますね。全く同じだから、notesMeasure92_part1.concat(notesMeasure92_part1);で繰り返せないのかな。だめか無限ループみたいになるわな。手前でコピーだから const notesMeasure92_part2 = notesMeasure92_part1;ってすれば、省略できんのかもな。やってみるか。はい。ダメでしたー。意味わからん。できそうなのにできない。なんか違うんだな。8分音符を4つのやつどうしを繋ぐときは、const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2); とします。これは前までにやった 4つのNotesを繋ぐときに使ったときと同じことです。自動でやる方法なら notesMeasure92_part1 とか2つ作らず1つに8音まとめてから、const beam9 = Beam.generateBeams(notesMeasure92)とかだな。そんな感じで2小節は足し算が必要になるという地味な方法でした。横には4小節くらいを描くのがせいぜいなので普通はそれほど複雑にはならないでしょうね。ページとか縦という概念を覚えないといけないのでしょう。ページは描画領域を分けるのでしょう。タブレット端末とかを楽譜にして演奏する目的なら横に8小節くらいとかで、縦にふやしていく感じのパート譜を作れば便利そうだね。改行部分を柔軟に設定するのはできないな。柔軟にしようとしたら、これまたJavaScriptで自力で制御するんでしょう。そこまでやれる人いたら、使いこなしが凄そうだな。<br /> <br /> 　<br /> <br /> [[VexFlow 使い方]]へ戻る。<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie<br /> } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div = document.getElementById('output');<br /> const renderer = new Renderer(div, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer.resize(500, 200);<br /> const context = renderer.getContext();<br /> <br /> context.beginPath(); // start recording our pen's moves.<br /> context.moveTo(0, 0);<br /> context.lineTo(499, 0);<br /> context.lineTo(499, 199);<br /> context.lineTo(410, 100);<br /> context.lineTo(10, 40);<br /> context.closePath();<br /> context.stroke();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave.addClef('treble').addTimeSignature('C');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave.setContext(context).draw();<br /> <br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div2 = document.getElementById('output2');<br /> const renderer2 = new Renderer(div2, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer2.resize(500, 200);<br /> const context2 = renderer2.getContext();<br /> <br /> context2.beginPath(); // start recording our pen's moves.<br /> context2.moveTo(0, 0);<br /> context2.lineTo(499, 0);<br /> context2.lineTo(499, 199);<br /> context2.lineTo(360, 100);<br /> context2.closePath();<br /> context2.stroke();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave2 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave2.addClef('treble').addTimeSignature('C|');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave2.setContext(context2).draw();<br /> <br /> // Create the notes<br /> const notes2 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voice2 = new Voice({ num_beats: 4, beat_value: 4 });<br /> voice2.addTickables(notes2);<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices([voice2]).format([voice2], 350);<br /> <br /> // Render voice<br /> voice2.draw(context2, stave2);<br /> &lt;/yjavascript&gt;<br /> <br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div3 = document.getElementById('output3');<br /> const renderer3 = new Renderer(div3, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer3.resize(500, 200);<br /> const context3 = renderer3.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave3 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave3.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave3.setContext(context3).draw();<br /> <br /> // Create the notes<br /> const notes3 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> const notes32 = [<br /> new StaveNote({<br /> keys: ['c/4'],<br /> duration: 'w'<br /> })<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voices3 = [<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes3),<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes32),<br /> ];<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices(voices3).format(voices3, 350);<br /> <br /> // Render voices.<br /> voices3.forEach(function(v) {<br /> v.draw(context3, stave3);<br /> });<br /> &lt;/script&gt;<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div4 = document.getElementById('output4');<br /> const renderer4 = new Renderer(div4, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer4.resize(500, 200);<br /> const context4 = renderer4.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave4 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave4.addClef('bass').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave4.setContext(context4).draw();<br /> <br /> // Create the notes<br /> const notes4 = [<br /> dotted(new StaveNote({<br /> keys: ['c##/5'],<br /> duration: '8d'<br /> }).addModifier(new Accidental('##'))),<br /> new StaveNote({<br /> keys: ['db/4'],<br /> duration: '16'<br /> }).addModifier(new Accidental('b')),<br /> dotted(new StaveNote({<br /> keys: ['b/4', 'd/5', 'f/5'],<br /> duration: 'h'<br /> }).addModifier(new Accidental('#'),0),[0, 2]),<br /> dotted(new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: '8'<br /> })),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context4, stave4, notes4);<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> &lt;/script&gt;<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div5 = document.getElementById('output5');<br /> const renderer5 = new Renderer(div5, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer5.resize(500, 200);<br /> const context5 = renderer5.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave5 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave5.addClef('bass').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave5.setContext(context5).draw();<br /> <br /> // Create the notes<br /> const notes51 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes52 = [<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes53 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;a/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> ];<br /> <br /> const notes54 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);<br /> <br /> // Create the beams for the first three groups.<br /> // This hides the normal stems and flags.<br /> const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];<br /> <br /> Formatter.FormatAndDraw(context5, stave5, allNotes5);<br /> <br /> // Draw the beams and stems.<br /> beams5.forEach((b) =&gt; {<br /> b.setContext(context5).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div6 = document.getElementById(&quot;output6&quot;);<br /> const renderer6 = new Renderer(div6, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer6.resize(500, 200);<br /> const context6 = renderer6.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave6 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave6.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave6.setContext(context6).draw();<br /> <br /> const notes6 = [<br /> dotted(new StaveNote({ keys: [&quot;e##/5&quot;], duration: &quot;8d&quot; }).addModifier(new Accidental(&quot;##&quot;))),<br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }),<br /> ];<br /> <br /> const beams6 = Beam.generateBeams(notes6);<br /> Formatter.FormatAndDraw(context6, stave6, notes6);<br /> beams6.forEach((b) =&gt; {<br /> b.setContext(context6).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div7 = document.getElementById(&quot;output7&quot;);<br /> const renderer7 = new Renderer(div7, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer7.resize(500, 200);<br /> const context7 = renderer7.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave7 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave7.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave7.setContext(context7).draw();<br /> <br /> const notes7 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;B/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const beams7 = Beam.generateBeams(notes7);<br /> Formatter.FormatAndDraw(context7, stave7, notes7);<br /> beams7.forEach(function (b) {<br /> b.setContext(context7).draw();<br /> });<br /> <br /> const ties7 = [<br /> new StaveTie({<br /> first_note: notes7[4],<br /> last_note: notes7[5],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: notes7[5],<br /> last_note: notes7[6],<br /> first_indices: [1],<br /> last_indices: [1],<br /> }),<br /> ];<br /> <br /> ties7.forEach((t) =&gt; {<br /> t.setContext(context7).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { TabStave, TabNote, Bend, Vibrato } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div8 = document.getElementById(&quot;output8&quot;);<br /> const renderer8 = new Renderer(div8, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer8.resize(500, 300);<br /> const context8 = renderer8.getContext();<br /> <br /> // Create a tab stave of width 400 at position 10, 40 on the canvas.<br /> const stave8 = new TabStave(10, 40, 400);<br /> stave8.addClef(&quot;tab&quot;).setContext(context8).draw();<br /> <br /> const notes8 = [<br /> // A single note<br /> new TabNote({<br /> positions: [{ str: 3, fret: 7 }],<br /> duration: &quot;q&quot;,<br /> }),<br /> <br /> // A chord with the note on the 3rd string bent<br /> new TabNote({<br /> positions: [<br /> { str: 2, fret: 10 },<br /> { str: 3, fret: 9 },<br /> ],<br /> duration: &quot;q&quot;,<br /> }).addModifier(new Bend(&quot;Full&quot;), 1),<br /> <br /> // A single note with a harsh vibrato<br /> new TabNote({<br /> positions: [{ str: 2, fret: 5 }],<br /> duration: &quot;h&quot;,<br /> }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context8, stave8, notes8);<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div9 = document.getElementById(&quot;output9&quot;);<br /> const renderer9 = new Renderer(div9, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer9.resize(890, 130);<br /> const context9 = renderer9.getContext();<br /> <br /> // Measure 1<br /> const staveMeasure91 = new Stave(10, 0, 470);<br /> //staveMeasure91.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;).setContext(context9).draw();<br /> staveMeasure91.addClef(&quot;treble&quot;);<br /> staveMeasure91.addTimeSignature(&quot;4/4&quot;);<br /> staveMeasure91.setContext(context9).draw();<br /> <br /> const notesMeasure91 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;qr&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;q&quot; })<br /> ];<br /> <br /> // Helper function to justify and draw a 4/4 voice<br /> Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);<br /> <br /> // Measure 2 - second measure is placed adjacent to first measure.<br /> const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);<br /> <br /> const notesMeasure92_part1 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> const notesMeasure92_part2 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> // Create the beams for 8th notes in second measure.<br /> const beam91 = new Beam(notesMeasure92_part1);<br /> const beam92 = new Beam(notesMeasure92_part2);<br /> <br /> const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);<br /> <br /> staveMeasure92.setContext(context9).draw();<br /> Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);<br /> <br /> // Render beams<br /> beam91.setContext(context9).draw();<br /> beam92.setContext(context9).draw();<br /> &lt;/yjavascript&gt;<br /> <br /> 　<br /> <br /> == '''関連記事''' ==<br /> *[[STMK ScoreTemplateMaker(ja)]]</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow_%E4%BD%BF%E3%81%84%E6%96%B9&diff=13544 VexFlow 使い方 2026-07-20T14:17:59Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[VexFlow]]に戻る。<br /> == '''概要''' ==<br /> 　名曲のソロ部分とか有名な部分を引用しながら、使い方をまとめていきたいと思います。著作権との闘いだな。引用の範囲を超えないように頑張ろう。権利団体にすべてを還元すればいいんでしょ。やってやるよ。っていう感じの意気込みです。この項目の目的は日本のWebsiteに楽譜を描画しているページを増やすということだな。難しすぎるよな楽譜描画。一か所でも間違ったら、そこから先、何も描画されません！恐るべしなんだよVexFlow。&lt;s&gt;絶賛挫折中&lt;/s&gt;。2024年3月中旬再始動中。ほんとか？<br /> <br /> <br /> 　結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> *[[VexFlow 入門その1]]<br /> *[[VexFlow 連符]]<br /> *[[VexFlow 描画エリアと5線譜と小節]]<br /> *[[VexFlow 音部記号]]<br /> *[[VexFlow 拍子記号]]<br /> *[[VexFlow 調号]]<br /> *[[VexFlow 音符]]<br /> *[[VexFlow 連桁]]<br /> *[[VexFlow 休符]]<br /> *[[VexFlow 連符]]<br /> *[[VexFlow タイ]]<br /> *[[VexFlow スラー]]<br /> *[[VexFlow 小節開始終了線]]<br /> *[[VexFlow 演奏順序記号]]<br /> *[[VexFlow セクション記号]]<br /> *[[VexFlow 小節番号]]<br /> *[[VexFlow 小節の上下の接続]]<br /> *[[VexFlow 楽器名記載]]<br /> *[[VexFlow 楽曲タイトルの挿入]]<br /> *[[VexFlow テキスト挿入]]<br /> *[[VexFlow テンポ]]<br /> *[[VexFlow 強弱表示]]<br /> *[[VexFlow アクセント・テヌート・スタッカート]]<br /> *[[VexFlow クレシェンド・デクレシェンド]]<br /> *[[VexFlow アルペジオ]]<br /> *[[VexFlow ビブラート]]<br /> *[[VexFlow オクターブ]]<br /> *[[VexFlow 和音表示省略のスラッシュノート]]<br /> *[[VexFlow 装飾音符]]<br /> *[[VexFlow 複数小節にわたる長い休符]]<br /> *[[VexFlow 小節の繰り返し]]<br /> *[[VexFlow 打楽器譜]]<br /> *[[VexFlow タブ譜]]<br /> *[[VexFlow タブ譜 フレット番号と旗表示]]<br /> *[[VexFlow タブ譜 プリングオフ・ハンマリング・スライド・チョーキング・グリッサンド]]<br /> *[[VexFlow タブ譜 カッティング]]<br /> *[[VexFlow タブ譜 同一コード連続弾き]]<br /> *[[VexFlow タブ譜 コードフォーム]]<br /> *[[VexFlow タブ譜 ミュート]]<br /> *[[VexFlow タブ譜 ハーモニクス]]<br /> *[[VexFlow タブ譜 アームダウン・アームアップ]] '''ここで力尽きました。管理人には無理です。&lt;span style=&quot;color: darkred;&quot;&gt;簡易楽譜CADのためのアプリ作ります。&lt;/span&gt;'''<br /> <br /> <br /> *[[VexFlow テンプレート Vocal Guitar1 2 Base Drum Perc]]<br /> <br /> <br /> 説明が不足していると感じている記事<br /> *トレモロ、ロール<br /> *トリル<br /> *ベースタブ譜の演奏順序記号<br /> *VexFlowでは不完全な描画になったコーダやダルセーニョといった演奏順序記号のBravuraフォントでの描画<br /> *ボーカル、歌詞<br /> *コード記号<br /> *2xや3x、D.S.1xやD.S.2xのときだけ違う演奏をするカッコつき楽譜<br /> *スコア・楽譜テンプレート数種類をPDFで提供。<br /> *楽曲サンプル譜の作成<br /> *YonetMuFL自作楽譜描画補助フォントの整備と公開とコードポイント表の作成。<br /> *ピアノ譜用のペダル操作記号<br /> *ピアノ譜のための上下連結の連桁描画。<br /> <br /> <br /> *[[VexFlow test content]]<br /> *[[VexFlow test content2]]<br /> *[[VexFlow ベースヘ音記号練習]]<br /> <br /> 　<br /> <br /> == '''関連記事''' ==<br /> *[[STMK ScoreTemplateMaker(ja)]]<br /> <br /> 　<br /> <br /> [[VexFlow]]に戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow_%E5%85%A5%E9%96%80%E3%81%9D%E3%81%AE1&diff=13543 VexFlow 入門その1 2026-07-20T14:16:24Z <p>Yo-net: </p> <hr /> <div>&lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script src=&quot;https://wiki.yo-net.jp/vexflow/build/cjs/vexflow@4.2.2.0001.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> &lt;/yjavascript&gt;<br /> [[VexFlow 使い方]]へ戻る。<br /> == '''概要''' ==<br /> 　ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。公式サイトにもあるものと同じです。このサイトでは'''[[VexFlow 使い方|使い方]]'''を最後まで学習すると以下のようなスコアブックのような描画もできるようになります。<br /> <br /> <br /> 　※結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> &lt;div id=&quot;yonet202403Mid_Output01&quot;&gt;&lt;/div&gt;<br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> ///////////////////////<br /> (function(){<br /> class Position {<br /> constructor(x = 0, y = 0) {<br /> this.x = x;<br /> this.y = y;<br /> }<br /> }<br /> var VF = Vex.Flow;<br /> const Vocal = new Position();<br /> const Guitar1Inst = new Position();<br /> const Guitar2Inst = new Position();<br /> const Guitar2Tab1 = new Position();<br /> const BaseInst = new Position();<br /> const BaseTab1 = new Position();<br /> const DrumInst = new Position();<br /> const PercInst = new Position();<br /> const Stave9Pos = new Position();<br /> <br /> var StaveBase1;<br /> var StaveBase2;<br /> var StaveBase3;<br /> var StaveBase4;<br /> <br /> const Perc_note1_1_0 = new Position();<br /> <br /> var shiftGuitar1_1;<br /> var shiftGuitar1_tab4_tr;<br /> <br /> var shiftGuitar1_tab1;<br /> var shiftGuitar1_tab2;<br /> var shiftGuitar1_tab3;<br /> var shiftGuitar1_tab4;<br /> var shiftDrum1;<br /> var shiftPerc1;<br /> <br /> function insertBaseEndBarPathToSVG(Stave) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 50) +<br /> ' L ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 80);<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'black');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'none');<br /> newGroup.appendChild(path);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> function insertTiePathToSVG(StartPos, EndPos, Direction = 1, Depth = 10) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M' + (StartPos.x) + ' ' + (StartPos.y) + 'Q' + (StartPos.x + (EndPos.x - StartPos.x)/2) + ' ' + ((StartPos.y + EndPos.y)/2 + Direction * (Depth - 2)) + <br /> ',' + (EndPos.x) + ' ' + (EndPos.y) + 'Q' + ((StartPos.x + EndPos.x)/2) + ' ' + (StartPos.y + (EndPos.y - StartPos.y)/2 + Direction * (Depth + 2)) + <br /> ',' + (StartPos.x) + ' ' + (StartPos.y) + 'Z';<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'none');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'black');<br /> newGroup.appendChild(path);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> function insertTrilPathToSVG(Shift, Direction = 1) {<br /> var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> newGroup.setAttribute('transform', 'translate(0, 0)');<br /> var DirectionOffset = 0;<br /> if (Direction == -1) DirectionOffset = 60;<br /> var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset);<br /> path.setAttribute('d', pathStr);<br /> path.setAttribute('stroke', 'none');<br /> path.setAttribute('stroke-width', '1');<br /> path.setAttribute('fill', 'black');<br /> var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr2 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 7) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7);<br /> path2.setAttribute('d', pathStr2);<br /> path2.setAttribute('stroke', 'none');<br /> path2.setAttribute('stroke-width', '1');<br /> path2.setAttribute('fill', 'black');<br /> var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');<br /> var pathStr3 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 14) +<br /> ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14);<br /> path3.setAttribute('d', pathStr3);<br /> path3.setAttribute('stroke', 'none');<br /> path3.setAttribute('stroke-width', '1');<br /> path3.setAttribute('fill', 'black');<br /> newGroup.appendChild(path);<br /> newGroup.appendChild(path2);<br /> newGroup.appendChild(path3);<br /> svgElement.appendChild(newGroup);<br /> }<br /> <br /> <br /> function insertTextToSVG(options) {<br /> var textContent = options.textContent;<br /> var strID = options.strID;<br /> var Stave_x = options.Stave_x || 0;<br /> var Stave_y = options.Stave_y || 0;<br /> var isOffset_x_abs = options.IsOffset_x_Abs || false;<br /> var Stave_x_Offset = options.Stave_x_Offset || 0;<br /> var Stave_y_Offset = options.Stave_y_Offset || 0;<br /> var StaveWidth = options.StaveWidth || 0;<br /> var StaveHeight = options.StaveHeight || 0;<br /> var StaveVerticalScale = options.StaveVerticalScale || 0;<br /> var fontSize = options.fontSize || 40;<br /> var fontFamily = options.fontFamily || &quot;Bravura, Arial&quot;;<br /> var shift_x = options.shift_x || [0];<br /> var Rotate = options.Rotate || 0;<br /> var offset_sum = 0;<br /> var Stave_x_Offset_Value = 0;<br /> var Stave_y_Offset_Value = 0;<br /> var last_Stave_x_Offset = 0;<br /> var last_Stave_y_Offset = 0;<br /> var last_textContent = &quot;&quot;;<br /> shift_x.forEach(function(offset, index) {<br /> offset_sum = offset_sum + offset;<br /> var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');<br /> newText.setAttribute('id', strID + '_' + index); // テキスト要素にIDを付ける<br /> newText.setAttribute('x', 0);<br /> newText.setAttribute('y', 0);<br /> newText.setAttribute('font-family', fontFamily);<br /> newText.setAttribute('font-size', fontSize);<br /> newText.setAttribute('fill', 'black');<br /> <br /> if(typeof textContent === &quot;string&quot;){<br /> newText.textContent = textContent;<br /> }<br /> else{<br /> if(textContent.length - 1 &lt; index){<br /> newText.textContent = last_textContent;<br /> }<br /> else{<br /> newText.textContent = textContent[index];<br /> last_textContent = textContent[index];<br /> }<br /> }<br /> <br /> if(Stave_x_Offset.length - 1 &lt; index){<br /> Stave_x_Offset_Value = last_Stave_x_Offset;<br /> }<br /> else{<br /> if(Stave_x_Offset.length &gt;= 2){<br /> Stave_x_Offset_Value = Stave_x_Offset[index];<br /> last_Stave_x_Offset = Stave_x_Offset[index];<br /> }<br /> else{<br /> Stave_x_Offset_Value = Stave_x_Offset;<br /> }<br /> }<br /> <br /> if(Stave_y_Offset.length - 1 &lt; index){<br /> Stave_y_Offset_Value = last_Stave_y_Offset;<br /> }<br /> else{<br /> if(Stave_y_Offset.length &gt;= 2){<br /> Stave_y_Offset_Value = Stave_y_Offset[index];<br /> last_Stave_y_Offset = Stave_y_Offset[index];<br /> }<br /> else{<br /> Stave_y_Offset_Value = Stave_y_Offset;<br /> }<br /> }<br /> var textGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');<br /> if(Rotate != 0){<br /> textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + 0 + ' ' + 0 + ')');<br /> textGroup.appendChild(newText);<br /> svgElement.appendChild(textGroup);<br /> }<br /> else{<br /> svgElement.appendChild(newText);<br /> }<br /> (function() {<br /> var textWidth = newText.getBBox().width;<br /> var textHeight = newText.getBBox().height;<br /> var horizontalScale;<br /> if (typeof StaveWidth === 'undefined' || StaveWidth == 0) {<br /> horizontalScale = 1;<br /> } <br /> else {<br /> horizontalScale = StaveWidth / textWidth;<br /> }<br /> var verticalScale;<br /> if (typeof StaveHeight === 'undefined' || StaveHeight == 0) {<br /> verticalScale = 1;<br /> } <br /> else if (StaveVerticalScale != 0) {<br /> verticalScale = StaveVerticalScale;<br /> } <br /> else {<br /> verticalScale = StaveHeight / textHeight;<br /> }<br /> if(isOffset_x_abs){<br /> var StavePos_x = offset.x + Stave_x_Offset_Value;<br /> var StavePos_y = offset.y + Stave_y_Offset_Value;<br /> }<br /> else{<br /> var StavePos_x = Stave_x + Stave_x_Offset + offset_sum;<br /> var StavePos_y = Stave_y + Stave_y_Offset;<br /> }<br /> <br /> newText.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');<br /> <br /> if(Rotate != 0){<br /> textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + StavePos_x + ' ' + StavePos_y + ')');<br /> }<br /> })();<br /> <br /> if(Rotate != 0){<br /> textGroup.appendChild(newText);<br /> svgElement.appendChild(textGroup);<br /> }<br /> else{<br /> svgElement.appendChild(newText);<br /> }<br /> });<br /> }<br /> <br /> var allUniqueIds = [];<br /> var allFlagUniqueIds = [];<br /> (function(){<br /> function addShift(notes, arrx = [], arry = []) {<br /> <br /> let tempnote;<br /> let retShift = [];<br /> <br /> for(let i = 0; i &lt; arrx.length || i == 0; i++){<br /> const pos = new Position();<br /> //notesのchildrenの各要素について処理<br /> if(arrx.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arrx[i]];<br /> temp_y = arry[i];<br /> }<br /> pos.x = tempnote.getAbsoluteX();<br /> pos.y = tempnote.getStave().getYForLine(temp_y);<br /> <br /> retShift.push(pos);<br /> }<br /> return retShift;<br /> }<br /> <br /> var UniqueIds;<br /> function getUniqueNoteheadIds(notes, arr = []) {<br /> //すべてのidを格納するためのセットを作成<br /> let tempnote;<br /> uniqueIds = new Set();<br /> for(let i = 0; i &lt; arr.length || i == 0; i++){<br /> //notesのchildrenの各要素について処理<br /> if(arr.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arr[i]];<br /> }<br /> tempnote.children.forEach(child =&gt; {<br /> //typeが&quot;notehead&quot;であるかチェックし、idを取得<br /> if (child.attrs){<br /> if(child.attrs.type === &quot;NoteHead&quot;) {<br /> uniqueIds.add(child.attrs.id);<br /> }<br /> }<br /> });<br /> }<br /> // セットを配列に変換して戻り値として返す<br /> return Array.from(uniqueIds);<br /> }<br /> <br /> function updateAllUniqueIds(UniqueIds) {<br /> // allUniqueIdsにUniqueIdsを追加または結合<br /> if (allUniqueIds.length === 0) {//allUniqueIdsはグローバルな変数<br /> // allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br /> allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。<br /> } else {<br /> UniqueIds.forEach(id =&gt; {<br /> if (!allUniqueIds.includes(id)) {<br /> allUniqueIds.push(id);<br /> }<br /> });<br /> }<br /> // 更新されたallUniqueIdsを戻り値として返す<br /> return allUniqueIds;<br /> }<br /> <br /> var SteveNoteUniqueIds;<br /> function getUniqueStaveNotesIds(notes, arr = []) {<br /> //すべてのidを格納するためのセットを作成<br /> let tempnote;<br /> uniqueIds = new Set();<br /> for(let i = 0; i &lt; arr.length || i == 0; i++){<br /> //notesのchildrenの各要素について処理<br /> if(arr.length === 0){<br /> tempnote = notes;<br /> }<br /> else{<br /> tempnote = notes[arr[i]];<br /> }<br /> if (tempnote.attrs){<br /> if(tempnote.attrs.type === &quot;StaveNote&quot;) {<br /> uniqueIds.add(tempnote.attrs.id);<br /> }<br /> }<br /> }<br /> // セットを配列に変換して戻り値として返す<br /> return Array.from(uniqueIds);<br /> }<br /> <br /> function updateAllFlagUniqueIds(FlagUniqueIds) {<br /> // allUniqueIdsにUniqueIdsを追加または結合<br /> if (allFlagUniqueIds.length === 0) {<br /> // allUniqueIdsが空の場合、UniqueIdsをそのままコピー<br /> allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。<br /> } else {<br /> FlagUniqueIds.forEach(id =&gt; {<br /> if (!allFlagUniqueIds.includes(id)) {<br /> allFlagUniqueIds.push(id);<br /> }<br /> });<br /> }<br /> // 更新されたallUniqueIdsを戻り値として返す<br /> return allFlagUniqueIds;<br /> }<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } <br /> else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> <br /> const {<br /> Factory,<br /> Stave,<br /> StaveNote,<br /> Formatter,<br /> Voice,<br /> StaveTie,<br /> BarLine,<br /> Beam,<br /> Dot,<br /> StaveConnector,<br /> Modifier,<br /> RenderContext,<br /> TextDynamics,<br /> Articulation,<br /> TextNote,<br /> Crescendo,<br /> Renderer<br /> } = Vex.Flow;<br /> <br /> let nscale = 0.64;<br /> let nwidth = 1040;<br /> let nheight = 1120;<br /> <br /> let nHeadMargin = 70;<br /> let nStaveWidth = 350;<br /> <br /> const f = new Factory({ <br /> renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }<br /> });<br /> const ctx = f.getContext();<br /> ctx.scale(nscale, nscale);<br /> <br /> const defaultStyle = {<br /> lineWidth: ctx.lineWidth,<br /> strokeStyle: ctx.strokeStyle,<br /> };<br /> <br /> for (let i = 0; i &lt;= nwidth * (1 / nscale); i += 10) {<br /> ctx.beginPath();<br /> ctx.moveTo(0 + i, 0);<br /> ctx.lineTo(0 + i, nheight);<br /> if (i % 100 === 0){<br /> ctx.setLineWidth(1);<br /> ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br /> }<br /> else{<br /> ctx.setLineWidth(0.5);<br /> ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br /> }<br /> ctx.stroke();<br /> }<br /> <br /> for (let i = 0; i &lt;= nheight; i += 10) {<br /> ctx.beginPath();<br /> ctx.moveTo(0, i);<br /> ctx.lineTo(nwidth * (1 / nscale), i);<br /> if (i % 100 === 0){<br /> ctx.setLineWidth(1);<br /> ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');<br /> }<br /> else{<br /> ctx.setLineWidth(0.5);<br /> ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');<br /> }<br /> ctx.stroke();<br /> }<br /> <br /> ctx.lineWidth = defaultStyle.lineWidth;<br /> ctx.strokeStyle = defaultStyle.strokeStyle;<br /> <br /> const VocalSt1 = new Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);<br /> VocalSt1.setClef(&quot;treble&quot;).setContext(ctx);<br /> VocalSt1.setTimeSignature('4/4').setContext(ctx);<br /> VocalSt1.addKeySignature('D').setContext(ctx);<br /> VocalSt1.setMeasure(1);<br /> VocalSt1.draw();<br /> <br /> Vocal.x = VocalSt1.x - 30;<br /> Vocal.y = VocalSt1.y + 90; <br /> <br /> const VocalSt2 = f.Stave({ x: VocalSt1.width + VocalSt1.x, y: VocalSt1.y, width: nStaveWidth });<br /> VocalSt2.setMeasure(2);<br /> VocalSt2.setContext(ctx).draw();<br /> <br /> const VocalSt3 = new Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);<br /> VocalSt3.setMeasure(3);<br /> VocalSt3.draw();<br /> <br /> const VocalSt4 = new Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx);<br /> VocalSt4.setMeasure(4);<br /> VocalSt4.draw();<br /> <br /> const Guitar1St1 = new Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar1St1.addClef(&quot;treble&quot;).setContext(ctx);<br /> Guitar1St1.addTimeSignature('4/4').setContext(ctx);<br /> Guitar1St1.addKeySignature('D').setContext(ctx);<br /> Guitar1St1.draw();<br /> <br /> const Guitar1_notes1_1 = [<br /> new VF.StaveNote({ keys: [&quot;a/3&quot;, &quot;e/4&quot;, &quot;a/4&quot;, &quot;c/5&quot;], duration: &quot;2&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> dotted(new VF.StaveNote({ keys: [&quot;c/6&quot;], duration: &quot;4d&quot;, stem_direction: -1 })),<br /> ];<br /> const Guitar1_notes1_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> var Guitar1_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St1_1Voice.setStrict(true);<br /> Guitar1_St1_1Voice.addTickables(Guitar1_notes1_1);<br /> <br /> var Guitar1_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St1_2Voice.setStrict(true);<br /> Guitar1_St1_2Voice.addTickables(Guitar1_notes1_2);<br /> <br /> var formatterGuitar1_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St1_2Voice, Guitar1_St1_1Voice]);<br /> formatterGuitar1_St1_1.format([Guitar1_St1_2Voice, Guitar1_St1_1Voice], nStaveWidth - 20 - 10);<br /> Guitar1_St1_1Voice.draw(ctx, Guitar1St1);<br /> Guitar1_St1_2Voice.draw(ctx, Guitar1St1);<br /> <br /> const Guitar1St2 = new Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St2.draw();<br /> <br /> const Guitar1_gracenotes2 = [<br /> new VF.GraceNote({ keys: ['e/5', 'g/5'], duration: '8', slash: true })<br /> .addModifier(new VF.Accidental('#'), 1)<br /> ];<br /> <br /> const Guitar1_notes2_1 = [<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;, &quot;a/5&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> .addModifier(new VF.Accidental('n'), 0),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;, &quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;e/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;, &quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;8&quot; }),<br /> ];<br /> const Guitar1_notes2_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_notes2_1[0].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[1].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[2].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[3].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes2_1[4].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[5].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[6].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[7].addModifier(new VF.Articulation('a.').setPosition(4));<br /> Guitar1_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes2, true), 0);<br /> <br /> const Guitar1_beam1_1 = new VF.Beam([Guitar1_notes2_1[0], Guitar1_notes2_1[1], Guitar1_notes2_1[2], Guitar1_notes2_1[3]]);<br /> const Guitar1_beam1_2 = new VF.Beam([Guitar1_notes2_1[4], Guitar1_notes2_1[5], Guitar1_notes2_1[6], Guitar1_notes2_1[7]]);<br /> <br /> var Guitar1_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St2_1Voice.setStrict(true);<br /> Guitar1_St2_1Voice.addTickables(Guitar1_notes2_1);<br /> <br /> var Guitar1_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St2_2Voice.setStrict(true);<br /> Guitar1_St2_2Voice.addTickables(Guitar1_notes2_2);<br /> <br /> var formatterGuitar1_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St2_2Voice, Guitar1_St2_1Voice]);<br /> formatterGuitar1_St2_1.format([Guitar1_St2_2Voice, Guitar1_St2_1Voice], nStaveWidth - 30);<br /> Guitar1_St2_1Voice.draw(ctx, Guitar1St2);<br /> Guitar1_St2_2Voice.draw(ctx, Guitar1St2);<br /> <br /> Guitar1_beam1_1.setContext(ctx).draw();<br /> Guitar1_beam1_2.setContext(ctx).draw();<br /> <br /> const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St3.draw();<br /> <br /> const Guitar1_notes3_1 = [<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;2&quot; }),<br /> ];<br /> const Guitar1_notes3_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> const Guitar1_beam3_1 = new VF.Beam([Guitar1_notes3_1[0], Guitar1_notes3_1[1], Guitar1_notes3_1[2], Guitar1_notes3_1[3]]);<br /> const Guitar1_beam3_2 = new VF.Beam([Guitar1_notes3_1[4], Guitar1_notes3_1[5], Guitar1_notes3_1[6]]);<br /> <br /> var Guitar1_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St3_1Voice.setStrict(true);<br /> Guitar1_St3_1Voice.addTickables(Guitar1_notes3_1);<br /> <br /> var Guitar1_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St3_2Voice.setStrict(true);<br /> Guitar1_St3_2Voice.addTickables(Guitar1_notes3_2);<br /> <br /> var formatterGuitar1_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St3_2Voice, Guitar1_St3_1Voice]);<br /> formatterGuitar1_St3_1.format([Guitar1_St3_2Voice, Guitar1_St3_1Voice], nStaveWidth - 30);<br /> Guitar1_St3_1Voice.draw(ctx, Guitar1St3);<br /> Guitar1_St3_2Voice.draw(ctx, Guitar1St3);<br /> <br /> Guitar1_beam3_1.setContext(ctx).draw();<br /> Guitar1_beam3_2.setContext(ctx).draw();<br /> <br /> const Guitar1_ties3 = [<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[0],<br /> last_note: Guitar1_notes3_1[1],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[1],<br /> last_note: Guitar1_notes3_1[2],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[2],<br /> last_note: Guitar1_notes3_1[3],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[3],<br /> last_note: Guitar1_notes3_1[4],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes3_1[6],<br /> last_note: Guitar1_notes3_1[7],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> ];<br /> <br /> Guitar1_ties3.forEach((t) =&gt; {<br /> t.setContext(ctx).draw();<br /> });<br /> <br /> var Guitar1_vibrato3 = new VF.VibratoBracket({<br /> start: Guitar1_notes3_1[7],<br /> stop: null,<br /> });<br /> Guitar1_vibrato3.setLine(0);<br /> Guitar1_vibrato3.setHarsh(true);<br /> Guitar1_vibrato3.setContext(ctx).draw();<br /> <br /> const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);<br /> Guitar1St4.draw();<br /> <br /> const Guitar1_gracenotes4 = [<br /> new VF.GraceNote({ keys: ['a/4'], duration: '8', slash: true })<br /> ];<br /> <br /> const Guitar1_notes4_1 = [<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;4&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> ];<br /> const Guitar1_notes4_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_notes4_1[7].addModifier(new VF.Articulation('a.').setPosition(3));<br /> Guitar1_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes4, true), 0);<br /> <br /> SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_notes4_1, [0, 1]);<br /> allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);<br /> <br /> const Guitar1_beam4_1 = new VF.Beam([Guitar1_notes4_1[2], Guitar1_notes4_1[3]]);<br /> const Guitar1_beam4_2 = new VF.Beam([Guitar1_notes4_1[5], Guitar1_notes4_1[6], Guitar1_notes4_1[7]]);<br /> <br /> var Guitar1_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St4_1Voice.setStrict(true);<br /> Guitar1_St4_1Voice.addTickables(Guitar1_notes4_1);<br /> <br /> var Guitar1_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_St4_2Voice.setStrict(true);<br /> Guitar1_St4_2Voice.addTickables(Guitar1_notes4_2);<br /> <br /> var formatterGuitar1_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St4_2Voice, Guitar1_St4_1Voice]);<br /> formatterGuitar1_St4_1.format([Guitar1_St4_2Voice, Guitar1_St4_1Voice], nStaveWidth - 30);<br /> Guitar1_St4_1Voice.draw(ctx, Guitar1St4);<br /> Guitar1_St4_2Voice.draw(ctx, Guitar1St4);<br /> <br /> Guitar1_beam4_1.setContext(ctx).draw();<br /> Guitar1_beam4_2.setContext(ctx).draw();<br /> <br /> shiftGuitar1_1 = addShift(<br /> Guitar1_notes4_1, <br /> [0, 1],<br /> [4, 3.5]<br /> );<br /> <br /> const Guitar1_ties4 = [<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[0],<br /> last_note: Guitar1_notes4_1[1],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[1],<br /> last_note: Guitar1_notes4_1[2],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[3],<br /> last_note: Guitar1_notes4_1[4],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: Guitar1_notes4_1[5],<br /> last_note: Guitar1_notes4_1[6],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> ];<br /> <br /> Guitar1_ties4.forEach((t) =&gt; {<br /> t.setContext(ctx).draw();<br /> });<br /> <br /> <br /> const Guitar1_tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab1.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab1.draw();<br /> <br /> const Guitar1_tab2 = new Stave(Guitar1_tab1.width + Guitar1_tab1.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab2.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab2.draw();<br /> <br /> const Guitar1_tab3 = new Stave(Guitar1_tab2.width + Guitar1_tab2.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab3.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab3.draw();<br /> <br /> const Guitar1_tab4 = new Stave(Guitar1_tab3.width + Guitar1_tab3.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar1_tab4.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar1_tab4.draw();<br /> <br /> <br /> <br /> const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar1_Tab1.draw();<br /> <br /> Stave9Pos.x = Guitar1_Tab1.x;<br /> Stave9Pos.y = Guitar1_Tab1.y;<br /> <br /> var connector9_2 = new VF.StaveConnector(Guitar1St1, Guitar1_Tab1);<br /> connector9_2.setType(VF.StaveConnector.type.BRACKET);<br /> connector9_2.setContext(ctx);<br /> connector9_2.draw();<br /> <br /> Guitar1Inst.x = VocalSt1.x - 30;<br /> Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90; <br /> <br /> <br /> const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx);<br /> Guitar1_Tab1_1.setBegBarType(VF.Barline.type.NONE);<br /> Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE);<br /> Guitar1_Tab1_1.draw();<br /> <br /> const Guitar1_tab_notes1_1 = [<br /> new VF.GhostNote({ keys: [&quot;a/3&quot;, &quot;e/4&quot;, &quot;a/4&quot;, &quot;c/5&quot;], duration: &quot;2&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> dotted(new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;4d&quot;, stem_direction: -1 })),<br /> ];<br /> const Guitar1_tab_notes1_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes1_1, [1, 2]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> var Guitar1_tab_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St1_1Voice.setStrict(true);<br /> Guitar1_tab_St1_1Voice.addTickables(Guitar1_tab_notes1_1);<br /> <br /> var Guitar1_tab_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St1_2Voice.setStrict(true);<br /> Guitar1_tab_St1_2Voice.addTickables(Guitar1_tab_notes1_2);<br /> <br /> var formatterGuitar1_tab_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice]);<br /> formatterGuitar1_tab_St1_1.format([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice], nStaveWidth - 20 - 10);<br /> Guitar1_tab_St1_1Voice.draw(ctx, Guitar1_Tab1_1);<br /> Guitar1_tab_St1_2Voice.draw(ctx, Guitar1_Tab1_1);<br /> <br /> shiftGuitar1_tab1 = addShift(<br /> Guitar1_tab_notes1_1, <br /> [0, 0, 0, 0, 1, 2],<br /> [3, 2, 1, 0, 1, -1]<br /> );<br /> <br /> <br /> <br /> const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab2.draw();<br /> <br /> const Guitar1_tab_gracenotes2 = [<br /> new VF.GraceNote({ keys: ['a/5'], duration: '8', slash: true })<br /> .addModifier(new VF.Accidental('#'), 0)<br /> ];<br /> <br /> const Guitar1_tab_notes2_1 = [<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> .addModifier(new VF.Accidental('n'), 0),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;f/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }),<br /> ];<br /> const Guitar1_tab_notes2_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_tab_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes2, false), 0);<br /> <br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes2_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam2_1 = new VF.Beam([Guitar1_tab_notes2_1[0], Guitar1_tab_notes2_1[1], Guitar1_tab_notes2_1[2], Guitar1_tab_notes2_1[3]]);<br /> const Guitar1_tab_beam2_2 = new VF.Beam([Guitar1_tab_notes2_1[4], Guitar1_tab_notes2_1[5], Guitar1_tab_notes2_1[6], Guitar1_tab_notes2_1[7]]);<br /> <br /> var Guitar1_tab_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St2_1Voice.setStrict(true);<br /> Guitar1_tab_St2_1Voice.addTickables(Guitar1_tab_notes2_1);<br /> <br /> var Guitar1_tab_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St2_2Voice.setStrict(true);<br /> Guitar1_tab_St2_2Voice.addTickables(Guitar1_tab_notes2_2);<br /> <br /> var formatterGuitar1_tab_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice]);<br /> formatterGuitar1_tab_St2_1.format([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St2_1Voice.draw(ctx, Guitar1_Tab2);<br /> Guitar1_tab_St2_2Voice.draw(ctx, Guitar1_Tab2);<br /> <br /> shiftGuitar1_tab2 = addShift(<br /> Guitar1_tab_notes2_1, <br /> [0, 0, 0, 0, 1, 1, 2, 3, 4, 4, 5, 6, 7],<br /> [1, 0, 1, 0, 1, 0, 0, 1, 2, 1, 2, 2, 3]<br /> );<br /> <br /> Guitar1_tab_beam2_1.setContext(ctx).draw();<br /> Guitar1_tab_beam2_2.setContext(ctx).draw();<br /> <br /> const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab3.draw();<br /> <br /> const Guitar1_tab_notes3_1 = [<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new VF.GhostNote({ keys: [&quot;b/4&quot;], duration: &quot;2&quot; }),<br /> ];<br /> const Guitar1_tab_notes3_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes3_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam3_1 = new VF.Beam([Guitar1_tab_notes3_1[0], Guitar1_tab_notes3_1[1], Guitar1_tab_notes3_1[2], Guitar1_tab_notes3_1[3]]);<br /> const Guitar1_tab_beam3_2 = new VF.Beam([Guitar1_tab_notes3_1[4], Guitar1_tab_notes3_1[5], Guitar1_tab_notes3_1[6]]);<br /> <br /> var Guitar1_tab_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St3_1Voice.setStrict(true);<br /> Guitar1_tab_St3_1Voice.addTickables(Guitar1_tab_notes3_1);<br /> <br /> var Guitar1_tab_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St3_2Voice.setStrict(true);<br /> Guitar1_tab_St3_2Voice.addTickables(Guitar1_tab_notes3_2);<br /> <br /> var formatterGuitar1_tab_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice]);<br /> formatterGuitar1_tab_St3_1.format([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St3_1Voice.draw(ctx, Guitar1_Tab3);<br /> Guitar1_tab_St3_2Voice.draw(ctx, Guitar1_Tab3);<br /> <br /> shiftGuitar1_tab3 = addShift(<br /> Guitar1_tab_notes3_1, <br /> [0, 1, 2, 3, 4, 5, 6, 7],<br /> [2, 2, 2, 2, 2, 4, 4, 4]<br /> );<br /> <br /> Guitar1_tab_beam3_1.setContext(ctx).draw();<br /> Guitar1_tab_beam3_2.setContext(ctx).draw();<br /> <br /> var Guitar1_tab_vibrato3 = new VF.VibratoBracket({<br /> start: Guitar1_tab_notes3_1[7],<br /> stop: null,<br /> });<br /> Guitar1_tab_vibrato3.setLine(1);<br /> Guitar1_tab_vibrato3.setHarsh(true);<br /> Guitar1_tab_vibrato3.setContext(ctx).draw();<br /> <br /> <br /> <br /> const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar1_Tab4.draw();<br /> <br /> const Guitar1_tab_gracenotes4 = [<br /> new VF.GraceNote({ keys: ['d/5'], duration: '8', slash: true })<br /> ];<br /> <br /> const Guitar1_tab_notes4_1 = [<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;8&quot; }),<br /> new VF.StaveNote({ keys: [&quot;d/5&quot;], duration: &quot;4&quot; }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> ];<br /> const Guitar1_tab_notes4_2 = [<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> new VF.GhostNote({ keys: [&quot;f/4&quot;], duration: &quot;16&quot;}),<br /> <br /> ];<br /> Guitar1_tab_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes4, false), 0);<br /> <br /> SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_tab_notes4_1, [0, 1]);<br /> allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);<br /> <br /> UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes4_1, [0, 1, 2, 3, 4, 5, 6, 7]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Guitar1_tab_beam4_1 = new VF.Beam([Guitar1_tab_notes4_1[2], Guitar1_tab_notes4_1[3]]);<br /> const Guitar1_tab_beam4_2 = new VF.Beam([Guitar1_tab_notes4_1[5], Guitar1_tab_notes4_1[6], Guitar1_tab_notes4_1[7]]);<br /> <br /> var Guitar1_tab_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St4_1Voice.setStrict(true);<br /> Guitar1_tab_St4_1Voice.addTickables(Guitar1_tab_notes4_1);<br /> <br /> var Guitar1_tab_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Guitar1_tab_St4_2Voice.setStrict(true);<br /> Guitar1_tab_St4_2Voice.addTickables(Guitar1_tab_notes4_2);<br /> <br /> var formatterGuitar1_tab_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice]);<br /> formatterGuitar1_tab_St4_1.format([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice], nStaveWidth - 20);<br /> Guitar1_tab_St4_1Voice.draw(ctx, Guitar1_Tab4);<br /> Guitar1_tab_St4_2Voice.draw(ctx, Guitar1_Tab4);<br /> <br /> shiftGuitar1_tab4 = addShift(<br /> Guitar1_tab_notes4_1, <br /> [0, 1, 2, 3, 3, 4, 5, 6, 7, 7],<br /> [2, 2, 2, 2, 2, 2, 1, 1, 1, 1]<br /> );<br /> <br /> shiftGuitar1_tab4_tr = addShift(<br /> Guitar1_tab_notes4_1, <br /> [0, 1],<br /> [3, 2.5]<br /> );<br /> <br /> Guitar1_tab_beam4_1.setContext(ctx).draw();<br /> Guitar1_tab_beam4_2.setContext(ctx).draw();<br /> <br /> <br /> const Guitar2_St1 = new Stave(Guitar1_Tab1.x, Guitar1_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar2_St1.addClef(&quot;treble&quot;).setContext(ctx);<br /> Guitar2_St1.addTimeSignature('4/4').setContext(ctx);<br /> Guitar2_St1.addKeySignature('D').setContext(ctx);<br /> Guitar2_St1.draw();<br /> <br /> const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St2.draw();<br /> <br /> const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St3.draw();<br /> <br /> const Guitar2_St4 = new Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx);<br /> Guitar2_St4.draw();<br /> <br /> const Guitar2_Tab1 = new Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Guitar2_Tab1.draw();<br /> <br /> Guitar2Tab1.x = Guitar2_Tab1.x;<br /> Guitar2Tab1.y = Guitar2_Tab1.y;<br /> <br /> const Guitar2_Tab2 = new Stave(Guitar2_Tab1.width + Guitar2_Tab1.x, Guitar2_Tab1.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab2.draw();<br /> <br /> const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab3.draw();<br /> <br /> const Guitar2_Tab4 = new Stave(Guitar2_Tab3.width + Guitar2_Tab3.x, Guitar2_Tab3.y, nStaveWidth).setContext(ctx);<br /> Guitar2_Tab4.draw();<br /> <br /> var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);<br /> Guitar2_connect.setType(VF.StaveConnector.type.BRACKET);<br /> Guitar2_connect.setContext(ctx);<br /> Guitar2_connect.draw();<br /> <br /> const Guitar2_Tab1_tab = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab1_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab1_tab.draw();<br /> <br /> const Guitar2_Tab2_tab = new Stave(Guitar2_Tab1_tab.width + Guitar2_Tab1_tab.x, Guitar2_Tab1_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab2_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab2_tab.draw();<br /> <br /> const Guitar2_Tab3_tab = new Stave(Guitar2_Tab2_tab.width + Guitar2_Tab2_tab.x, Guitar2_Tab2_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab3_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab3_tab.draw();<br /> <br /> const Guitar2_Tab4_tab = new Stave(Guitar2_Tab3_tab.width + Guitar2_Tab3_tab.x, Guitar2_Tab3_tab.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 0) continue;<br /> Guitar2_Tab4_tab.setConfigForLine(i, {visible: false} );<br /> }<br /> Guitar2_Tab4_tab.draw();<br /> <br /> Guitar2Inst.x = Guitar2_St1.x - 30;<br /> Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab1.y - Guitar2_St1.y) / 2) + 90; <br /> <br /> const Base_St1 = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Base_St1.addClef(&quot;bass&quot;).setContext(ctx);<br /> Base_St1.addTimeSignature('4/4').setContext(ctx);<br /> Base_St1.addKeySignature('D').setContext(ctx);<br /> Base_St1.draw();<br /> <br /> const Base_St2 = new Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);<br /> Base_St2.draw();<br /> <br /> const Base_St3 = new Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);<br /> Base_St3.draw();<br /> <br /> const Base_St4 = new Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);<br /> Base_St4.draw();<br /> <br /> const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Base_Tab1.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab1.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab1.draw();<br /> <br /> BaseTab1.x = Base_Tab1.x;<br /> BaseTab1.y = Base_Tab1.y;<br /> <br /> BaseInst.x = Base_St1.x - 30;<br /> BaseInst.y = Base_St1.y + ((Base_Tab1.y - Base_St1.y) / 2) + 90; <br /> <br /> StaveBase1 = Base_Tab1;<br /> <br /> const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);<br /> Base_Tab2.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab2.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab2.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab2.draw();<br /> <br /> StaveBase2 = Base_Tab2;<br /> <br /> const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);<br /> Base_Tab3.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab3.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab3.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab3.draw();<br /> <br /> StaveBase3 = Base_Tab3;<br /> <br /> const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);<br /> Base_Tab4.setBegBarType(VF.Barline.type.NONE);<br /> Base_Tab4.setEndBarType(VF.Barline.type.NONE);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i != 0) continue;<br /> Base_Tab4.setConfigForLine(i, {visible: false} );<br /> }<br /> Base_Tab4.draw();<br /> <br /> StaveBase4 = Base_Tab4;<br /> <br /> var Base_connect = new VF.StaveConnector(Base_St1, Base_Tab1);<br /> Base_connect.setType(VF.StaveConnector.type.BRACKET);<br /> Base_connect.setContext(ctx);<br /> Base_connect.draw();<br /> <br /> const Drum_St1 = new Stave(Base_Tab1.x, Base_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Drum_St1.addClef(&quot;bass&quot;).setContext(ctx);<br /> Drum_St1.addTimeSignature('4/4').setContext(ctx);<br /> Drum_St1.draw();<br /> <br /> DrumInst.x = Drum_St1.x - 30;<br /> DrumInst.y = Drum_St1.y + 90; <br /> <br /> const Drum_St1_1 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);<br /> Drum_St1_1.setBegBarType(VF.Barline.type.NONE);<br /> Drum_St1_1.setEndBarType(VF.Barline.type.NONE);<br /> Drum_St1_1.draw();<br /> <br /> const Drum_notes1_1 = [<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;4&quot;, stem_direction: -1 }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;4r&quot; }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8r&quot; }),<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot;, stem_direction: -1 }),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8r&quot; }),<br /> new StaveNote({ keys: [&quot;f/4&quot;], duration: &quot;8&quot;, stem_direction: -1 })<br /> ];<br /> const Drum_beam1_1 = new VF.Beam([Drum_notes1_1[3],Drum_notes1_1[5]]);<br /> <br /> var Drum_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_1Voice.setStrict(true);<br /> Drum_St1_1Voice.addTickables(Drum_notes1_1);<br /> <br /> const Drum_St1_2 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);<br /> Drum_St1_2.setBegBarType(VF.Barline.type.NONE);<br /> Drum_St1_2.setEndBarType(VF.Barline.type.NONE);<br /> Drum_St1_2.draw();<br /> <br /> const Drum_notes1_2 = [<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;c/5&quot;], duration: &quot;8&quot;, stem_direction: 1 }),<br /> new VF.StaveNote({ keys: [&quot;g/5&quot;], duration: &quot;8&quot;, stem_direction: 1 })<br /> ];<br /> <br /> const Drum_notes1_3 = [<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> <br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 }),<br /> new VF.GhostNote({ keys: [&quot;a/5&quot;], duration: &quot;16&quot;, stem_direction: 1 })<br /> ];<br /> <br /> UniqueIds = getUniqueNoteheadIds(Drum_notes1_2, [0, 1, 3, 5, 6, 8]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Drum_beam1_2_1 = new VF.Beam([Drum_notes1_2[0], Drum_notes1_2[1]]);<br /> const Drum_beam1_2_2 = new VF.Beam([Drum_notes1_2[2], Drum_notes1_2[3], Drum_notes1_2[4]]);<br /> const Drum_beam1_2_3 = new VF.Beam([Drum_notes1_2[5], Drum_notes1_2[6], Drum_notes1_2[7], Drum_notes1_2[8]]);<br /> <br /> var Drum_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_2Voice.setStrict(true);<br /> Drum_St1_2Voice.addTickables(Drum_notes1_2);<br /> <br /> var Drum_St1_3Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Drum_St1_3Voice.setStrict(true);<br /> Drum_St1_3Voice.addTickables(Drum_notes1_3);<br /> <br /> var formatterDrum_St1_2 = new Vex.Flow.Formatter().joinVoices([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice]);<br /> //formatter13_2.formatToStave([stave13_3Voice, stave13_1Voice, stave13_2Voice], stave13_2);<br /> formatterDrum_St1_2.format([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice], nStaveWidth - 30);<br /> Drum_St1_1Voice.draw(ctx, Drum_St1_2);<br /> Drum_St1_2Voice.draw(ctx, Drum_St1_2);<br /> <br /> Drum_beam1_1.setContext(ctx).draw();<br /> <br /> Drum_beam1_2_1.setContext(ctx).draw();<br /> Drum_beam1_2_2.setContext(ctx).draw();<br /> Drum_beam1_2_3.setContext(ctx).draw();<br /> <br /> shiftDrum1 = addShift(<br /> Drum_notes1_2, <br /> [0, 1, 2, 3, 5, 5, 6, 6, 7, 7, 8, 8],<br /> [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]<br /> );<br /> <br /> <br /> const Drum_St2 = new Stave(Drum_St1.width + Drum_St1.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St2.draw();<br /> <br /> <br /> const Drum_St3 = new Stave(Drum_St2.width + Drum_St2.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St3.draw();<br /> <br /> <br /> const Drum_St4 = new Stave(Drum_St3.width + Drum_St3.x, Drum_St1.y, nStaveWidth).setContext(ctx);<br /> Drum_St4.draw();<br /> <br /> <br /> const Perc_St1 = new Stave(Drum_St1.x, Drum_St1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx);<br /> Perc_St1.addTimeSignature('4/4').setContext(ctx);<br /> <br /> const Perc_St1_1 = new Stave(nHeadMargin + Drum_St1.x, Drum_St1.y + 100, 0).setContext(ctx);<br /> Perc_St1_1.setBegBarType(VF.Barline.type.NONE);<br /> Perc_St1_1.setEndBarType(VF.Barline.type.NONE);<br /> Perc_St1_1.draw();<br /> <br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St1.setConfigForLine(i, {visible: false} );<br /> }<br /> <br /> Perc_St1.draw();<br /> <br /> PercInst.x = Perc_St1.x - 30;<br /> PercInst.y = Perc_St1.y + 90; <br /> <br /> var AllConnector = new VF.StaveConnector(VocalSt1, Perc_St1);<br /> AllConnector.setType(VF.StaveConnector.type.SINGLE);<br /> AllConnector.setContext(ctx);<br /> AllConnector.draw();<br /> <br /> const Perc_notes1_1 = [<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> <br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 }),<br /> new VF.StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;16&quot;, stem_direction: -1 })<br /> ];<br /> UniqueIds = getUniqueNoteheadIds(Perc_notes1_1, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);<br /> allUniqueIds = updateAllUniqueIds(UniqueIds);<br /> <br /> const Perc_beam1_1_1 = new VF.Beam([Perc_notes1_1[0], Perc_notes1_1[1], Perc_notes1_1[2], Perc_notes1_1[3]]);<br /> const Perc_beam1_1_2 = new VF.Beam([Perc_notes1_1[4], Perc_notes1_1[5], Perc_notes1_1[6], Perc_notes1_1[7]]);<br /> const Perc_beam1_1_3 = new VF.Beam([Perc_notes1_1[8], Perc_notes1_1[9], Perc_notes1_1[10], Perc_notes1_1[11]]);<br /> const Perc_beam1_1_4 = new VF.Beam([Perc_notes1_1[12], Perc_notes1_1[13], Perc_notes1_1[14], Perc_notes1_1[15]]);<br /> <br /> var Perc_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });<br /> Perc_St1_1Voice.setStrict(true);<br /> Perc_St1_1Voice.addTickables(Perc_notes1_1);<br /> <br /> var formatterPerc_St1_1 = new Vex.Flow.Formatter().joinVoices([Perc_St1_1Voice]);<br /> //formatterPerc_St1_1.formatToStave([stave17_1Voice], Perc_St1_1);<br /> formatterPerc_St1_1.format([Perc_St1_1Voice], nStaveWidth - 30);<br /> Perc_St1_1Voice.draw(ctx, Perc_St1_1);<br /> <br /> Perc_beam1_1_1.setContext(ctx).draw();<br /> Perc_beam1_1_2.setContext(ctx).draw();<br /> Perc_beam1_1_3.setContext(ctx).draw();<br /> Perc_beam1_1_4.setContext(ctx).draw();<br /> <br /> Perc_note1_1_0.x = Perc_notes1_1[0].getAbsoluteX();<br /> Perc_note1_1_0.y = Perc_notes1_1[0].getStave().getYForLine(1);<br /> <br /> shiftPerc1 = addShift(<br /> Perc_notes1_1, <br /> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],<br /> [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]<br /> );<br /> <br /> const Perc_St2 = new Stave(Perc_St1.width + Perc_St1.x, Perc_St1.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St2.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St2.draw();<br /> <br /> const Perc_St3 = new Stave(Perc_St2.width + Perc_St2.x, Perc_St2.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St3.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St3.draw();<br /> <br /> const Perc_St4 = new Stave(Perc_St3.width + Perc_St3.x, Perc_St3.y, nStaveWidth).setContext(ctx);<br /> for (var i = 0; i &lt; 5; i++) {<br /> if (i == 2) continue;<br /> Perc_St4.setConfigForLine(i, {visible: false} );<br /> }<br /> Perc_St4.draw();<br /> <br /> })();<br /> <br /> const svgElement2 = document.querySelector('#yonet202403Mid_Output01 svg');<br /> svgElement2.style.backgroundColor = '#F5F5F5';<br /> var svgContainer = document.getElementById('yonet202403Mid_Output01');<br /> var svgElement = svgContainer.querySelector('svg');<br /> <br /> var VocalText_options = {<br /> textContent: [&quot;Vocal&quot;], // 必須文字列<br /> strID: &quot;VocalText&quot;, // 必須<br /> Stave_x: Vocal.x,<br /> Stave_y: Vocal.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(VocalText_options);<br /> <br /> var EGuitarText_options = {<br /> textContent: [&quot;E.Guitar1&quot;], // 必須文字列<br /> strID: &quot;EGuitarText&quot;, // 必須<br /> Stave_x: Guitar1Inst.x,<br /> Stave_y: Guitar1Inst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(EGuitarText_options);<br /> <br /> var EGuitarTab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;EGuitarTab&quot;, // 必須<br /> Stave_x: Stave9Pos.x,<br /> Stave_y: Stave9Pos.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 80,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(EGuitarTab_options);<br /> <br /> insertTrilPathToSVG(shiftGuitar1_1);<br /> <br /> var Guitar1_notes4_tr_option = {<br /> textContent: [&quot;ｔｒ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes4_tr&quot;, // 必須<br /> Stave_x: shiftGuitar1_1[0].x,<br /> Stave_y: shiftGuitar1_1[0].y,<br /> Stave_x_Offset: 25,<br /> Stave_y_Offset: -50,<br /> fontSize: 40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Guitar1_notes4_tr_option);<br /> <br /> var Guitar1_notes1_option = {<br /> textContent: [&quot;０&quot;, &quot;２&quot;, &quot;２&quot;, &quot;２&quot;, &quot;９&quot;, &quot;９&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: [10, 0, 10, 0, 0, 0],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30 - 110}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y - 110});<br /> <br /> var Guitar1_notes1_g_option = {<br /> textContent: [&quot;ｇ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: -30,<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_g_option);<br /> <br /> var Guitar1_st1_notes1_g_option = {<br /> textContent: [&quot;ｇ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: -30,<br /> Stave_y_Offset: 0 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes1_g_option);<br /> <br /> <br /> var Guitar1_notes1_Arpeggio_option = {<br /> textContent: [&quot;┌ Ａｒｐｅｇｇｉｏ ──────┐&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 40,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes1_Arpeggio_option);<br /> <br /> var Guitar1_st1_notes1_Arpeggio_option = {<br /> textContent: [&quot;┌ Ａｒｐｅｇｇｉｏ ──────┐&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1_g&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40 - 110 - 20,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 40,<br /> shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes1_Arpeggio_option);<br /> <br /> var Guitar1_notes1_0_option = {<br /> textContent: [&quot;\uFF7C&quot;], // 必須文字列 4和音コード2分音符<br /> strID: &quot;Guitar1_notes1_ele0&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab1[0].x,<br /> Stave_y: shiftGuitar1_tab1[0].y,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> };<br /> insertTextToSVG(Guitar1_notes1_0_option);<br /> <br /> var Guitar1_notes2_option = {<br /> textContent: [&quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;９&quot;, &quot;７&quot;, &quot;９&quot;, &quot;７&quot;, &quot;７&quot;, &quot;５&quot;, &quot;４&quot;, &quot;７&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: [-30, -40, 0, -10, 0, -10, 0, 0, 10, 0, 0, 0, 0],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab2, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_option);<br /> <br /> var Guitar1_notes2_c_option = {<br /> textContent: [&quot;Ｈ．Ｃ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_c_option);<br /> <br /> var Guitar1_st1_notes2_c_option = {<br /> textContent: [&quot;Ｈ．Ｃ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 0,<br /> Stave_y_Offset: -40 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes2_c_option);<br /> <br /> var Guitar1_notes2_a_option = {<br /> textContent: [&quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;, &quot;．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes2&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 0],<br /> Stave_y_Offset: [-15, -15, -15, -15, 15, 15, 15, 15],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab2[3].x, y:shiftGuitar1_tab2[3].y},<br /> {x:shiftGuitar1_tab2[5].x, y:shiftGuitar1_tab2[5].y}, <br /> {x:shiftGuitar1_tab2[6].x, y:shiftGuitar1_tab2[6].y}, <br /> {x:shiftGuitar1_tab2[7].x, y:shiftGuitar1_tab2[7].y}, <br /> {x:shiftGuitar1_tab2[8].x, y:shiftGuitar1_tab2[8].y}, <br /> {x:shiftGuitar1_tab2[10].x, y:shiftGuitar1_tab2[10].y}, <br /> {x:shiftGuitar1_tab2[11].x, y:shiftGuitar1_tab2[11].y}, <br /> {x:shiftGuitar1_tab2[12].x, y:shiftGuitar1_tab2[12].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes2_a_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y + 10}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y - 40}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y - 40}, -1);<br /> <br /> var Guitar1_notes3_option = {<br /> textContent: [&quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;７&quot;, &quot;７&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes3&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 5],<br /> Stave_y_Offset: 0,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab3, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes3_option);<br /> <br /> var Guitar1_notes3_H_P_H_P_option = {<br /> textContent: [&quot;Ｈ&quot;, &quot;Ｐ&quot;, &quot;Ｈ&quot;, &quot;Ｐ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},<br /> {x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},<br /> {x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},<br /> {x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes3_H_P_H_P_option);<br /> <br /> var Guitar1_st1_notes3_H_P_H_P_option = {<br /> textContent: [&quot;Ｈ&quot;, &quot;Ｐ&quot;, &quot;Ｈ&quot;, &quot;Ｐ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},<br /> {x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},<br /> {x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},<br /> {x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes3_H_P_H_P_option);<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y + 10}, {x:shiftGuitar1_tab3[1].x + 5, y:shiftGuitar1_tab3[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y + 10}, {x:shiftGuitar1_tab3[2].x + 5, y:shiftGuitar1_tab3[1].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y + 10}, {x:shiftGuitar1_tab3[3].x + 5, y:shiftGuitar1_tab3[2].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y + 10}, {x:shiftGuitar1_tab3[4].x + 5, y:shiftGuitar1_tab3[3].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab3[6].x , y:shiftGuitar1_tab3[6].y + 15}, {x:shiftGuitar1_tab3[6].x + 35, y:shiftGuitar1_tab3[6].y + 15});<br /> <br /> <br /> var Guitar1_notes3_7_option = {<br /> textContent: [&quot;\uFF7F&quot;], // 必須文字列 1音2分音符<br /> strID: &quot;Guitar1_notes3_ele7&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab3[7].x - 7,<br /> Stave_y: shiftGuitar1_tab3[7].y,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> };<br /> insertTextToSVG(Guitar1_notes3_7_option);<br /> <br /> var Guitar1_notes4_option = {<br /> textContent: [&quot;５&quot;, &quot;７&quot;, &quot;５&quot;, &quot;７&quot;, &quot;７&quot;, &quot;７&quot;, &quot;４&quot;, &quot;６&quot;, &quot;４&quot;, &quot;．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes3&quot;, // 必須<br /> Stave_x_Offset: [0, 0, 0, -20, 0, 0, 0, 0, 0, 0],<br /> Stave_y_Offset: [0, 0, 0, 0, 0, 0, 0, 0, 0, -15],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: shiftGuitar1_tab4, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes4_option);<br /> <br /> var Guitar1_notes4_P_C_H_option = {<br /> textContent: [&quot;Ｐ&quot;, &quot;Ｃ&quot;, &quot;Ｈ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},<br /> {x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},<br /> {x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_notes4_P_C_H_option);<br /> <br /> var Guitar1_st1_notes4_P_C_H_option = {<br /> textContent: [&quot;Ｐ&quot;, &quot;Ｃ&quot;, &quot;Ｈ&quot;], // 必須文字列<br /> strID: &quot;Guitar1_st1_notes1&quot;, // 必須<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 35 - 110,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> fontSize: 50,<br /> shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},<br /> {x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},<br /> {x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Guitar1_st1_notes4_P_C_H_option);<br /> <br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[0].x, y:shiftGuitar1_tab4[0].y + 10}, {x:shiftGuitar1_tab4[1].x + 2, y:shiftGuitar1_tab4[0].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[1].x, y:shiftGuitar1_tab4[1].y + 10}, {x:shiftGuitar1_tab4[2].x + 2, y:shiftGuitar1_tab4[1].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[4].x - 15, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[4].x + 2, y:shiftGuitar1_tab4[4].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[4].x, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[5].x + 2, y:shiftGuitar1_tab4[4].y + 10});<br /> <br /> insertTiePathToSVG({x:shiftGuitar1_tab4[6].x, y:shiftGuitar1_tab4[6].y - 10}, {x:shiftGuitar1_tab4[7].x + 2, y:shiftGuitar1_tab4[6].y - 10}, -1);<br /> <br /> <br /> insertTrilPathToSVG(shiftGuitar1_tab4_tr);<br /> <br /> var Guitar1_tab_notes4_tr_option = {<br /> textContent: [&quot;ｔｒ．&quot;], // 必須文字列<br /> strID: &quot;Guitar1_tab_notes4_tr&quot;, // 必須<br /> Stave_x: shiftGuitar1_tab4_tr[0].x,<br /> Stave_y: shiftGuitar1_tab4_tr[0].y,<br /> Stave_x_Offset: 25,<br /> Stave_y_Offset: -50,<br /> fontSize: 40,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Guitar1_tab_notes4_tr_option);<br /> <br /> var EGuitar2Text_options = {<br /> textContent: [&quot;E.Guitar2&quot;], // 必須文字列<br /> strID: &quot;EGuitar2Text&quot;, // 必須<br /> Stave_x: Guitar2Inst.x,<br /> Stave_y: Guitar2Inst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(EGuitar2Text_options);<br /> <br /> var EGuitar2Tab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;EGuitar2Tab&quot;, // 必須<br /> Stave_x: Guitar2Tab1.x,<br /> Stave_y: Guitar2Tab1.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 80,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(EGuitar2Tab_options);<br /> <br /> var BaseText_options = {<br /> textContent: [&quot;Base&quot;], // 必須文字列<br /> strID: &quot;BaseText&quot;, // 必須<br /> Stave_x: BaseInst.x,<br /> Stave_y: BaseInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(BaseText_options);<br /> <br /> var BaseTab_options = {<br /> textContent: [&quot;＠&quot;], // 必須文字列<br /> strID: &quot;BaseTab&quot;, // 必須<br /> Stave_x: BaseTab1.x,<br /> Stave_y: BaseTab1.y,<br /> Stave_x_Offset: 10,<br /> Stave_y_Offset: 90,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;,<br /> };<br /> insertTextToSVG(BaseTab_options);<br /> insertBaseEndBarPathToSVG(StaveBase1);<br /> insertBaseEndBarPathToSVG(StaveBase2);<br /> insertBaseEndBarPathToSVG(StaveBase3);<br /> insertBaseEndBarPathToSVG(StaveBase4);<br /> <br /> var DrumText_options = {<br /> textContent: [&quot;Drum&quot;], // 必須文字列<br /> strID: &quot;DrumText&quot;, // 必須<br /> Stave_x: DrumInst.x,<br /> Stave_y: DrumInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(DrumText_options);<br /> <br /> var PercText_options = {<br /> textContent: [&quot;Perc.&quot;], // 必須文字列<br /> strID: &quot;PercText&quot;, // 必須<br /> Stave_x: PercInst.x,<br /> Stave_y: PercInst.y,<br /> fontFamily: &quot;Arial, sans-serif&quot;,<br /> fontSize: &quot;20pt&quot;,<br /> Rotate: -90<br /> };<br /> insertTextToSVG(PercText_options);<br /> <br /> var note13_2_0_option = {<br /> textContent: [&quot;\uFF65&quot;, &quot;\uFF65&quot;, &quot;\uFF65&quot;, &quot;\uFF65&quot;, <br /> &quot;\uFF65&quot;, &quot;\uFF68&quot;, &quot;\uFF66&quot;, &quot;\uFF67&quot;, &quot;\uFF65&quot;, &quot;\uFF0B&quot;, &quot;\uFF65&quot;, &quot;\uFF0F&quot;], // 必須文字列<br /> //x , half_o, , &gt;, , + , , o<br /> strID: &quot;note13_2_0&quot;, // 必須<br /> Stave_y_Offset: [ -5, -5, -5, -5,<br /> -5, -60, -5, -60, -5, -60, -5, -60],<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: shiftDrum1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(note13_2_0_option);<br /> <br /> var Perc_notes1_1_0_Shaker_option = {<br /> textContent: [&quot;＜ Ｓｈａｋｅｒ ＞&quot;], // 必須文字列<br /> strID: &quot;Perc_notes1_1_0_shaker&quot;, // 必須<br /> Stave_x: Perc_note1_1_0.x,<br /> Stave_y: Perc_note1_1_0.y,<br /> Stave_x_Offset: -20,<br /> Stave_y_Offset: 0,<br /> fontSize: 60,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: [0] // xのオフセット値配列<br /> };<br /> insertTextToSVG(Perc_notes1_1_0_Shaker_option);<br /> <br /> var Perc_notes1_1_0_option = {<br /> textContent: [&quot;\uFF69&quot;], // 必須文字列<br /> strID: &quot;Perc_notes1_1_0&quot;, // 必須<br /> Stave_y_Offset: -5,<br /> fontFamily: &quot;YonetMuFL, Arial&quot;, // オプション、デフォルトは&quot;Bravura, Arial&quot;<br /> shift_x: shiftPerc1, // xのオフセット値配列<br /> IsOffset_x_Abs: true<br /> };<br /> insertTextToSVG(Perc_notes1_1_0_option);<br /> <br /> if(allUniqueIds !== &quot;undefined&quot;){<br /> // 透明にするIDの配列<br /> // 例としてここでIDを指定<br /> let autoUniqueIds = allUniqueIds.map(id =&gt; &quot;vf-&quot; + id);<br /> <br /> // 各IDに対して処理<br /> autoUniqueIds.forEach(id =&gt; {<br /> // 該当するIDの要素を取得<br /> let element = svgElement.getElementById(id);<br /> if (element) {<br /> // 該当する要素があれば、描画内容を透明にする<br /> let paths = element.querySelectorAll(&quot;path&quot;);<br /> paths.forEach(path =&gt; {<br /> var dAttribute = path.getAttribute('d');<br /> // カンマで区切られた数値の数を数えます<br /> var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数<br /> <br /> if (numberOfValues === 9) {<br /> var firstCoord = dAttribute.split(',')[0];<br /> if (dAttribute.startsWith('M')) {<br /> var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数<br /> var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br /> // 座標の差を計算します<br /> if(CnumberOfValues &gt; 0){<br /> var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br /> var xdiff = coords[0] - coords[2]; // xの差を計算<br /> var ydiff = coords[1] - coords[3]; // yの差を計算<br /> <br /> // xが0でyが0より大きい場合、描画内容を透明にします<br /> if (xdiff &lt;= -3.590) {<br /> if (xdiff &gt;= -3.599) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> if (xdiff &lt;= -2.369) {<br /> if (xdiff &gt;= -2.374) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> if (xdiff &lt;= 1.000) {<br /> if (xdiff &gt;= -1.000) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> else {<br /> if(ydiff === 1.123){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> }<br /> }<br /> else if (numberOfValues === 1) {<br /> var firstCoord = dAttribute;<br /> if (dAttribute.startsWith('M')) {<br /> var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数<br /> // 座標の差を計算します<br /> if(LnumberOfValues &gt; 0){<br /> var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);<br /> var xdiff = coords[0] - coords[2]; // xの差を計算<br /> var ydiff = coords[1] - coords[3]; // yの差を計算<br /> <br /> // xが0でyが0より大きい場合、描画内容を透明にします<br /> if (xdiff &lt; -10) {<br /> if (xdiff &gt; -18) {<br /> if(ydiff === 0){<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> else if (numberOfValues === 21 || numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) {<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> });<br /> }<br /> });<br /> }<br /> <br /> if(allFlagUniqueIds !== &quot;undefined&quot;){<br /> let autoFlagUniqueIds = allFlagUniqueIds.map(id =&gt; &quot;vf-&quot; + id);<br /> autoFlagUniqueIds.forEach(id =&gt; {<br /> // 該当するIDの要素を取得<br /> let element = svgElement.getElementById(id);<br /> if (element) {<br /> // 該当する要素があれば、描画内容を透明にする<br /> let flagpaths = element.querySelectorAll('path');<br /> flagpaths.forEach(path =&gt; {<br /> var dAttribute = path.getAttribute('d');<br /> // カンマで区切られた数値の数を数えます<br /> var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数<br /> <br /> // 数値の数が23であれば、このpath要素は求めるものです<br /> if (numberOfValues === 23) {<br /> path.setAttribute(&quot;fill&quot;, &quot;none&quot;);<br /> path.setAttribute(&quot;stroke&quot;, &quot;none&quot;);<br /> }<br /> });<br /> }<br /> });<br /> }<br /> })();<br /> &lt;/yjavascript&gt;<br /> <br /> 　<br /> <br /> === '''五線譜''' ===<br /> 　五線譜を描いてみます。目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(410, 100)→(10, 40)という線です。<br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のとおり。<br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> //2023-09Mid:&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> //2024-03Mid:Version<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave<br /> } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div = document.getElementById('output');<br /> const renderer = new Renderer(div, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer.resize(500, 200);<br /> const context = renderer.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave.addClef('treble').addTimeSignature('C');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave.setContext(context).draw();<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　最初に、div に 出力するタグを取得する。ここでは &amp;lt;div id=&quot;output&quot;&amp;gt;&amp;lt;/div&amp;gt; のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); でSVGでの描画処理をしてくれるようになります。他にもRenderer.Backends.CANVASという指定もできます。自分はSVGバージョンが好みです。なんか問題報告が少ない。CANVASはスケールサイズ表示がおかしいとか言ってる人もいます。renderer.resize(500, 200); は描画エリアのサイズを指定しています。そして、この描画エリアに五線譜のオブジェクトとして構築した stave を配置します。<br /> <br /> <br /> 　New Stave(10, 40, 400)で、描画エリアの x = 10, y = 40の位置に幅 400 の五線譜を描きます。(410, 100)の頂点位置をみればわかりますが、きっちり 10+400 の大きさになっています。五線譜の真ん中の第三線が中央になっており縦 200 が 1 行にちょうど良いようです。楽譜部分の表示スケールを変更して小さくする予定なので、その時にまた、描画領域について考えてみたいと思います。<br /> <br /> <br /> 　stave.addClef('treble').addTimeSignature('4/4'); で treble ト音記号 4/4 つまり4分の4拍子という五線譜になります。<br /> <br /> <br /> 　自分は、持っているPCが12型で1920x1280を使っていますので、表示倍率を150%にしています。その関係で、実質は横サイズが1920の66%で、横は1280pxと変わらない表示領域です。したがって、Wikiの横幅も最大にして、1000pxくらいがちょうどいい限界の大きさです。しかし、そのサイズでは、4小節くらいを1行にするには楽譜が大きすぎるので、もうちょっと小さくしないといけないなとは思っていますが、その処理も、もうちょっと後でやるとします。続けて、実際の音符を配置してみます。<br /> <br /> <br /> 　拍子記号は以下のようなものが使えます。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;C&lt;/td&gt;<br /> &lt;td&gt;Cを表示（4/4拍子）&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;C|&lt;/td&gt;<br /> &lt;td&gt;Cの横中央に縦棒を表示（2/2拍子）&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;n1/n2&lt;/td&gt;<br /> &lt;td&gt;n2 分の n1 拍子&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置''' ===<br /> 　目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(360, 100)です。<br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> スクリプトは以下のようなものです。<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Formatter<br /> } = Vex.Flow;<br /> <br /> const div2 = document.getElementById('output2');<br /> const renderer2 = new Renderer(div2, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer2.resize(500, 200);<br /> const context2 = renderer2.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave2 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave2.addClef('treble').addTimeSignature('C|');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave2.setContext(context2).draw();<br /> <br /> // Create the notes<br /> const notes2 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voice2 = new Voice({ num_beats: 4, beat_value: 4 });<br /> voice2.addTickables(notes2);<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices([voice2]).format([voice2], 350);<br /> <br /> // Render voice<br /> voice2.draw(context2, stave2);<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　変数名が最初の楽譜とダブるところは数字を付けました。一番最初の StaveNote, Voice, Formatterの部分は最初のと共通なので書き換えが必要です。あとの部分で2重で定義してもダメです。最初のがエラーになって、致命的エラーで何も描画処理がされなくなります。コード全体としては、音符を付ける部分は、五線譜に付け足すので、すべて、最初のコードより後ろに付け足す感じです。const notes2 以降が付け足した部分です。ここまで書いて言えるのは VexFlow はプログラミングに近いです。音楽や楽譜しか知らない人が、この方式で楽譜を描くのは難しいと感じると思います。ABC記述方式のモノが好まれる理由が少しわかります。ただVexflowの方が複雑な記述であるゆえに、複雑な楽譜が書ける言えるのかもしれない。まるで配列の中にひとつづつの音符を生成している感じで、ひとつの音符ごとに区切って new StaveNote() 関数に引数としてオブジェクト値(自分はこれをPerlの連想配列と似ているので連想配列とちょくちょく呼んでいます)を指定しています。プロパティ名にkeys: とduration: が指定されます。プロパティ名であることがわかりやすいように:までつけていますが名前自体は keys と duration です。keys プロパティ名に対応するものとして、配列が指定されるようです。値が一つしかなくてもです。そこに音の高さ相当する値、音階名と段階番号を付けます。実音記号のA(ラ), B(シ), C(ド), D(レ), E(ミ), F(ファ), G(ソ)に対応していて、/ で区切って段階の番号を付与します。<br /> <br /> <br /> 　ピアノと同じで88音の下から1, 2, … , 10, 11 まであります。ピアノ譜のト音記号の五線譜に下に一つ補助線を付けたドが C/4 に相当します。通常、ト音記号の五線譜には E/3 が最低音、 最高の音しても G/6 までくらいを使います。C/6 から 上の音での演奏が続くときは オクターブ記号を使って、その下に描くことがあります。ギターも同じです。ギターは4オクターブしかありません。が一番上の音付近を使うときは、オクターブ記号を置いて、一段階下げて表記します。どの楽器もピアノの88鍵盤には負けます。ギターの一番低い音でもE/3です。クラリネットの音域もギターに似ていますが、最高音はギターよりも狭い範囲が一般的です。最高音のあたりはかなりうまい人だと出せなくはない音ですが狙うのはスゴイ難しいです。ベースとピアノの最低音あたりはヘ音記号の五線譜に書かれることが普通です。ピアノはト音記号とヘ音記号の二つ同時に使うこともあります。音域やばいっす。バイオリンあたりはテノール記号(ハ音記号)というト音記号でもヘ音記号でもないものを使う場合があります。この3種類しかないと思います。あとは変則の五線譜として、通常の位置とは異なる部分に、記号を配置する手法があります。<br /> <br /> <br /> 　durationの値には文字列が設定されて、 q が四分音符、h が2分音符、w が全音符を表します。8, 16, 32, 64 がそれぞれ8分音符、 16分音符、 32分音符、64分音符に対応しますが、連符もありますので、ひとことで言えるほど簡単ではないです。後ろに r をつけると休符になります。rest の r だそうです。 voice2.draw(context2, stave2);<br /> <br /> <br /> 　このようにして作った notes2 を Voiceという単位に格納するため new Voice({ num_beats: 4, beat_value: 4 }); でプロパティ名 num_beats と beat_value を持ったオブジェクトを引数にしています。ともに 4 拍子の中に 4つの拍子をもった音だと定義されていて、その中に、notes2 を取り込むべく、voice2.addTickables(notes2); としています。<br /> <br /> <br /> 　そして、これらを400pxの五線譜の中に納まるように、new Formatter().joinVoices([voice2]).format([voice2], 350); としています。x = 350のところに最後の音符が収まっていることも確認できます。このように処理した voice2 を context2 の描画領域に stave2 の 五線譜に描画します。<br /> <br /> <br /> 　duration に設定できる値は以下のようなものです。<br /> &lt;table style=&quot;width: 400px; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;w&lt;/td&gt;<br /> &lt;td&gt;全音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;h&lt;/td&gt;<br /> &lt;td&gt;2分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;q&lt;/td&gt;<br /> &lt;td&gt;4分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;8&lt;/td&gt;<br /> &lt;td&gt;8分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;16&lt;/td&gt;<br /> &lt;td&gt;16分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;32&lt;/td&gt;<br /> &lt;td&gt;32分音符&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 2Voices''' ===<br /> &lt;div id=&quot;output3&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output3&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Formatter<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div3 = document.getElementById('output3');<br /> const renderer3 = new Renderer(div3, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer3.resize(500, 200);<br /> const context3 = renderer3.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave3 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave3.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave3.setContext(context3).draw();<br /> <br /> // Create the notes<br /> const notes3 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> const notes32 = [new StaveNote({<br /> keys: ['c/4'],<br /> duration: 'w'<br /> })];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voices3 = [<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes3),<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes32),<br /> ];<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices(voices3).format(voices3, 350);<br /> <br /> // Render voices.<br /> voices3.forEach(function(v) {<br /> v.draw(context3, stave3);<br /> });<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　和音を除いて、通常、一人では演奏できないような記譜法を2Voicesと呼んでいます。和音を引けない楽器ならそれだけで2Voices 3Voicesとも言えますが、この例のように1小節の中を休符と音符とで分かち合うのを1Voiceとした考え方を保有する記譜の場合は、特別な記述が必要です。別の音という意味付けになります。スコア譜なんかではよく2Voiceや3Voiceの記述が入ります。アレンジするうえで、音を足していくことはよくあるためです。ただしスコア譜では、一小節を短くして |1Voice(2Voice)|のように記譜している方式もよくあります。パートを増やせばいいじゃんと思いますが、限られたスペースにちょっとした音のためだけにパートを増やすことは通常は、実施しません。<br /> <br /> <br /> 　const notes32の部分の定義のように、音符の定義を別で実施します。Voiceを生成するときに、2つの音符をまとめるときに配列に個別のオブジェクトとして定義します。そして作られた配列2の大きさのVoiceをFormatter関数を呼び出して、そのメンバ関数 joinVoices で結合します。joinVoices 関数は返り値が formatter 形式で .format も Formatter のメンバ関数です。そして 350px の中に描画するようになります。そして、2要素の配列の Voices それぞれを繰り返し処理によって、引数の描画エリア context3 五線譜 stave3 に音符を配置して描画します。<br /> <br /> <br /> === '''五線譜に音符を配置 付点臨時記号''' ===<br /> &lt;div id=&quot;output4&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output4&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div4 = document.getElementById('output4');<br /> const renderer4 = new Renderer(div4, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer4.resize(500, 200);<br /> const context4 = renderer4.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave4 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave4.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave4.setContext(context4).draw();<br /> <br /> // Create the notes<br /> const notes4 = [<br /> dotted(new StaveNote({<br /> keys: ['c##/5'],<br /> duration: '8d'<br /> }).addModifier(new Accidental('##'))),<br /> new StaveNote({<br /> keys: ['db/4'],<br /> duration: '16'<br /> }).addModifier(new Accidental('b')),<br /> dotted(new StaveNote({<br /> keys: ['b/4', 'd/5', 'f/5'],<br /> duration: 'h'<br /> }).addModifier(new Accidental('#'),0),[0, 2]),<br /> dotted(new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: '8'<br /> })),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context4, stave4, notes4);<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　付点を付けるにはDot.buildAndAttach([ staveNoteオブジェクト ], { index: 数値 }) といった関数を実行する必要があります。例では何度も呼び出すのが面倒なので、ユーザ関数を定義しています。公式では、特定のひとつの音符にしか、付点をつけることができないユーザ関数になっていたので、引数に数値単独の値を付与するところに、数値配列に、何番目の音符に付点をつけるかを指定するようなものに変更しています。Formatter.FormatAndDraw(context4, stave4, notes4); だけでも五線譜に音符を描画できるという便利な一面も紹介してくれています。<br /> <br /> <br /> 　臨時記号をつける処理をしているが、keys: ['c##/5']のように指定しても描画には反映されない。描画に影響しているのは、.addModifier(new Accidental('#'), 0) という部分です。一つ目の引数で Accidental オブジェクトのコンストラクタ引数に臨時記号の種類を与えています。##が二重シャープ。#がシャープ。bがフラット。bbが二重フラットです。今回は使いませんでしたが、ナチュラルはnです。.addModifier の2つめの引数はコードになっているときの、何番目の音に適用するかを指定しています。<br /> <br /> <br /> 　改めてまとめると、臨時記号の種類は以下のようになっています。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;n&lt;/td&gt;<br /> &lt;td&gt;ナチュラル&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;#&lt;/td&gt;<br /> &lt;td&gt;シャープ(半音上げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;##&lt;/td&gt;<br /> &lt;td&gt;ダブルシャープ(半音2回上げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;b&lt;/td&gt;<br /> &lt;td&gt;フラット(半音下げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;bb&lt;/td&gt;<br /> &lt;td&gt;ダブルフラット(半音2回下げる)&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> <br /> <br /> 　Dot.…によって付点をつけるだけで、長さに不整合が起こっても記譜に問題は起こりません。どちらかというと一小節の中に納まるように配置されるかは、durationの組み合わせのほうが重要です。<br /> <br /> <br /> 　今回はト音記号 treble からヘ音記号 bass に変えました。他にも以下のような記号があります。<br /> &lt;table style=&quot;width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;&quot;&gt;<br /> &lt;tr style=&quot; background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;&quot;&gt;<br /> &lt;th style=&quot;width: 200px;&quot;&gt;シーケンス&lt;/th&gt;<br /> &lt;th&gt;意味&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;treble&lt;/td&gt;<br /> &lt;td&gt;ト音記号 &amp;#x1D11E;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;bass&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号 &amp;#x1D122;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;alto&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(アルト) &amp;#x1D121;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;percussion&lt;/td&gt;<br /> &lt;td&gt;打楽器記号&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;tenor&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(テナー) &amp;#x1D121;一つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;soprano&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(ソプラノ) &amp;#x1D121;二つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;mezzo-soprano&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(メゾソプラノ) &amp;#x1D121;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;baritone-c&lt;/td&gt;<br /> &lt;td&gt;ハ音記号(バリトン) &amp;#x1D121;二つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;baritone-f&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号(バリトン) &amp;#x1D122;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr style=&quot; background: #dddddd;&quot;&gt;<br /> &lt;td&gt;subbass&lt;/td&gt;<br /> &lt;td&gt;ヘ音記号(サブバス) &amp;#x1D122;一つ上にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;french&lt;/td&gt;<br /> &lt;td&gt;ト音記号(フレンチ) &amp;#x1D11E;一つ下にシフト&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁 new Beam()による方法''' ===<br /> &lt;div id=&quot;output5&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output5&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div5 = document.getElementById('output5');<br /> const renderer5 = new Renderer(div5, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer5.resize(500, 200);<br /> const context5 = renderer5.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave5 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave5.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave5.setContext(context5).draw();<br /> <br /> // Create the notes<br /> const notes51 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes52 = [<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes53 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;a/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> ];<br /> <br /> const notes54 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);<br /> <br /> // Create the beams for the first three groups.<br /> // This hides the normal stems and flags.<br /> const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];<br /> <br /> Formatter.FormatAndDraw(context5, stave5, allNotes5);<br /> <br /> // Draw the beams and stems.<br /> beams5.forEach((b) =&gt; {<br /> b.setContext(context5).draw();<br /> });<br /> <br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　音符の旗を描画せずにつなぐのを連桁といいます。表紙のひと固まりを繋ぎ演奏しやすいような表記にしています。8分音符の場合4つをつないで、2分音符のかたまりにしたりもします。例の楽譜では3拍目が16分音符で四分音符1つ分のひとかたまりになっています。16分音符の3つ目が32分なっています。キッチリ演奏しようとすると32分はめちゃくちゃ短いのでアタックからの立ち上がりが早い楽器でかつ技術力が要求される奏法になってきます。そんな演奏面の話はどうでもよいでしょうか。<br /> <br /> <br /> 　連桁は、Beam というシーケンスによって描画されます。Notesを連桁にしたい塊でひとつになるように作ると、const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];という記法によって、連桁のかたまりごとに配列にすることができます。このそれぞれの要素について関数、new Beam(notes51).setContext(context5).draw();のような操作によって蓮桁の描画準備がされます。小節の全体は const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54); のように結合されたものを.FormatAndDraw(context5, stave5, allNotes5);のようにして描画されます。<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁 Beam.generateBeams()による方法''' ===<br /> &lt;div id=&quot;output6&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output6&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div6 = document.getElementById(&quot;output6&quot;);<br /> const renderer6 = new Renderer(div6, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer6.resize(500, 500);<br /> const context6 = renderer6.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave6 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave6.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave6.setContext(context6).draw();<br /> <br /> const notes6 = [<br /> dotted(new StaveNote({ keys: [&quot;e##/5&quot;], duration: &quot;8d&quot; }).addModifier(new Accidental(&quot;##&quot;))),<br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }),<br /> ];<br /> <br /> const beams6 = Beam.generateBeams(notes6);<br /> Formatter.FormatAndDraw(context6, stave6, notes6);<br /> beams6.forEach((b) =&gt; {<br /> b.setContext(context6).draw();<br /> });<br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　notesで一小節分をまとめて定義した後、const beams6 = Beam.generateBeams(notes6); とするだけです。自動なので、思い通りになっていない可能性もありますが、8分音符4つは最大で二分音符にそれ以下は四分音符単位で連桁してくれるようです。連桁に含まれるので、ここまでの知識では連符には対応できないです。3連とか5/6/7/9/10/11/12…連とかは違う表記が必要です。また別の項目で確認するつもりなので、それまでは我慢です。自分もまだ知らないし。知らんけどじゃないし。本当に知らないし。本当に知らんけど。なんだけど。<br /> <br /> <br /> 　連符って演奏上においては最難関だね。3連でも、2分三連はさらにムズイ。2分三連くらいの長さになると、適当だとさすがにだめだし、あってないことを多い。ビート分割して、感じないとね。2分三連の中抜きみたいに1個あるいは2個だけ鳴らすとか、ありえないくらいむずかしい。心で刻むのつらいな。演奏家としては向いてないんだろうな。<br /> <br /> 　<br /> <br /> === '''五線譜に音符を配置 タイ''' ===<br /> &lt;div id=&quot;output7&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output7&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div7 = document.getElementById(&quot;output7&quot;);<br /> const renderer7 = new Renderer(div7, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer7.resize(500, 200);<br /> const context7 = renderer7.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave7 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave7.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave7.setContext(context7).draw();<br /> <br /> const notes7 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const beams7 = Beam.generateBeams(notes7);<br /> Formatter.FormatAndDraw(context7, stave7, notes7);<br /> beams7.forEach(function (b) {<br /> b.setContext(context7).draw();<br /> });<br /> <br /> const ties7 = [<br /> new StaveTie({<br /> first_note: notes7[4],<br /> last_note: notes7[5],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: notes7[5],<br /> last_note: notes7[6],<br /> first_indices: [1],<br /> last_indices: [1],<br /> }),<br /> ];<br /> <br /> ties7.forEach((t) =&gt; {<br /> t.setContext(context7).draw();<br /> });<br /> //********前の記譜と共通の関数です。2重定義しないように注意******<br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> //********ここまで<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　タイは、notes に対してconst ties7 = [ new StaveTie({ first_note: notes7[4], last_note: notes7[5], first_indices: [0], last_indices: [0],}) ] という具合に StaveTie() の引数にオブジェクトを定義していて、主に4つのプロパティを設定します。first_noteがタイの始まり、last_noteがタイの終わりの音符です。和音を構成していない場合は必ず 0 ですが、first_indicesとlast_indicesにどの和音に対してタイを描画するかを指定しています。高さの異なる音に対して指定した場合はスラーになりそうですが、本当にそうなるかどうか確かめてみました。そしたら、やっぱりスラーと同じ役割になりそうでした。ついでに和音に2番目の音、配列番号1番に対してタイを描画する例は最後のA/3に対しての描画が参考になるでしょう。スラーについて言及したドキュメントもありそうなので、はっきりしたことはそれを確かめてみてからですね。何か不都合があるかもしれないし。タイでスラーを描画するのはね。どうなんだろうね。<br /> <br /> <br /> 　あー。いっけん大丈夫そうだけど、駄目だ。スラーは旗の根元からとか自由に描くこともありました。タイは音符で接続するだけで大丈夫な法則があったんですね。なるほど。気が付かなかった。やるなVexFlow。楽譜をじっくり眺めないと気付かないことだな。どうやらslurというキーワードではなく、その柔軟さを必要とするため、curveという名前で実現しているっぽい。またその時がきたら説明できると思います。VexFlow作者も大変だな。かなり完璧だけど、できないこともあるんだろうね。ここまで網羅されていると、できないことがあってもしゃーねぇな。<br /> <br /> <br /> 　ここまで書いて思ったんだけど、(function(){ コード記述部 })();の中に書けば、変数を名前空間で分け隔てることができるんじゃねと思えてきた。変数に番号とかつけてるのってカッコ悪いのかな。次の記事で試してみよう。<br /> <br /> 　<br /> <br /> === '''タブ譜''' ===<br /> &lt;div id=&quot;output8&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output8&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie,<br /> TabStave, <br /> TabNote, <br /> Bend, <br /> Vibrato<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div8 = document.getElementById(&quot;output8&quot;);<br /> const renderer8 = new Renderer(div8, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer8.resize(500, 300);<br /> const context8 = renderer8.getContext();<br /> <br /> // Create a tab stave of width 400 at position 10, 40 on the canvas.<br /> const stave8 = new TabStave(10, 40, 400);<br /> stave8.addClef(&quot;tab&quot;).setContext(context8).draw();<br /> <br /> const notes8 = [<br /> // A single note<br /> new TabNote({<br /> positions: [{ str: 3, fret: 7 }],<br /> duration: &quot;q&quot;,<br /> }),<br /> <br /> // A chord with the note on the 3rd string bent<br /> new TabNote({<br /> positions: [<br /> { str: 2, fret: 10 },<br /> { str: 3, fret: 9 },<br /> ],<br /> duration: &quot;q&quot;,<br /> }).addModifier(new Bend(&quot;Full&quot;), 1),<br /> <br /> // A single note with a harsh vibrato<br /> new TabNote({<br /> positions: [{ str: 2, fret: 5 }],<br /> duration: &quot;h&quot;,<br /> }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context8, stave8, notes8);<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　タブの文字フォントが公式の例と違うな。淋しい。どれが何音符かわからないダサい。2分音符には〇と棒が、全音符には〇が、四分音符いかにも旗は必要だと思う。あとタブは指番号だけでなくフレットの一部抜粋でコードの図が記入できた方がいいんじゃね。あとこんな大げさなFullとかいうチョーキングってダサくない。W.C と Cho. または C やH.Cでいいよ。あと数字は手書きフォントのがいいね。総じていえばシンコーミュージックがやっぱさえてると思う。シンコーミュージックのは綺麗なスコアだけど内容がダメダメっていうね。何かしらデメリットあるわ。どの立場から言ってるのかとお思いでしょうけど。なんでスコア譜ってあんなにダメダメなんだろうね。お金出して買ってる人もいるのに。ここに。耳コピができないというややる気もない子がここにいるのに。スコア譜命なんだけど。Youtubeのスコア出してる神レベルの人だけが最強だとおもう。あれは弾いていて本当に楽だし、現実的な運指になってるし、弾き心地最高。ロックを感じれる。時代が味方してくれている。あとは市販のスコア譜がもっと魂のはいったものになってほしい。弾きにくいとこをちょっと考えるくらいは自分でできるけど、なんか違うんだよなが解決できない。何が違うんだろうな。差分を埋め合わせる技術力が付かない。悲しい。という愚痴。あと音作りもよくわからないんだよな。でかい音出して練習できないからな。あと、ずっとヘッドフォンでやってると耳おかしくなるから生音だけで練習する時間も結構あって、あれはあれで淋しい。運指の練習にはなるけど、最後の弾き方の練習はやっぱヘッドフォンでやるしかなくて、結局、いい音作りできなくて、折れるということを繰り返してる。悔しいな。小さい才能の引き出し方がまったくわからないから、全く開花しないのな。もんくばっかりしか思いつかないもん。やだよな。こんな志向の奴の音楽なんて聴きたくないよな。わかるよ。だから、部屋にこもってめいわくかけないくらいのことしか思いつかない。つまんない。結局そこに落ち着く。つまんない。でも音楽もクラリネットもギターも大好き！これだけは譲れない。でも、どうすんのコレって感じだね。ハハハ。<br /> <br /> <br /> 　何が変わったかっていうと、Stave が TabStaveに変わった。Notes が TabNote に、Keysが positions になって、[{ str: 3, fret: 7 }] っていう指定に変わった。str が弦番号ね。1弦が細い方、6弦が太い方。なので、弦番号の数字の小ささ大きさが弦の幅に'''&lt;span style=&quot;color: darkred;&quot;&gt;比例&lt;/span&gt;'''していると覚えておきましょう。そしたら、どっちが1弦だっけ問題はなくなるね。fret がタブ譜に書かれる数字そのもの、あとでこれを手書き調のフォントに変える方法を考えてみたいと思います。あとは数字を〇で囲ったりできるんかな。無理かな。旗つけたり。やえもするとフレット図いれたり。<br /> <br /> <br /> 　音符の装飾は、addModifier()で同じなんだけど、臨時記号の#のようなAccidentalではなく、new Bend(&quot;Full&quot;), 1のような指定でチョーキング。new Vibrato().setHarsh(true).setVibratoWidth(70) で、長さ70のビブラート。setHarsh(true)でカクカクのビブラート。falseなら丸みを帯びた波線です。falseのほうが好きだな。Harshはヒドイとかっていう意味だそうで荒々しくをON OFFみたいな感じですね。その他についてはまた後ほどですね。ビブラートは通常の楽譜でも描画できるべきなので、五線譜の方でもできるかためしておきますか。いや、試してみたら簡単にはいかないな。同じではないのだな。五線譜上に表示させるのはまた考えないとだめですね。なんか方法はありそう。<br /> <br /> 　<br /> <br /> === '''小節線''' ===<br /> &lt;div id=&quot;output9&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　スクリプトは以下のようなものです。<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output9&quot;&gt;&lt;/div&gt;<br /> //******************ここから複数の楽譜表示における共通のスクリプト**<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Stave, <br /> StaveNote, <br /> Beam, <br /> Formatter, <br /> Renderer<br /> } = Vex.Flow;<br /> //******************ここまで共通**<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div9 = document.getElementById(&quot;output9&quot;);<br /> const renderer9 = new Renderer(div9, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer9.resize(890, 130);<br /> const context9 = renderer9.getContext();<br /> <br /> // Measure 1<br /> const staveMeasure91 = new Stave(10, 0, 470);<br /> //staveMeasure91.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;).setContext(context9).draw();<br /> staveMeasure91.addClef(&quot;treble&quot;);<br /> staveMeasure91.addTimeSignature(&quot;4/4&quot;);<br /> staveMeasure91.setContext(context9).draw();<br /> <br /> const notesMeasure91 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;qr&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;q&quot; })<br /> ];<br /> <br /> // Helper function to justify and draw a 4/4 voice<br /> Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);<br /> <br /> // Measure 2 - second measure is placed adjacent to first measure.<br /> const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);<br /> <br /> const notesMeasure92_part1 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> const notesMeasure92_part2 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> // Create the beams for 8th notes in second measure.<br /> const beam91 = new Beam(notesMeasure92_part1);<br /> const beam92 = new Beam(notesMeasure92_part2);<br /> <br /> const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);<br /> <br /> staveMeasure92.setContext(context9).draw();<br /> Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);<br /> <br /> // Render beams<br /> beam91.setContext(context9).draw();<br /> beam92.setContext(context9).draw();<br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 　2小節の楽譜にしました。まずは描画エリアを広くしないといけないので、横890にしました。1小節目は470。2小節目を400としてみました。記譜する内容はもっとも短い部分で8分音符なので、1小節あたり400は余裕があります。1小節目にはト音記号と拍子記号をおくので70ほど大きくします。<br /> <br /> <br /> 　したがって、const staveMeasure91 = new Stave(10, 0, 470); が1小節目。2小節目の始まりは10ではないので、staveMeasure91.width + staveMeasure91.xとして、const staveMeasure92 = new Stave(470 + 10, 0, 400); という内容で作られます。staveMeasure91.width が 470 で、staveMeasure91.width が 10 です。細かい計算があっていないと乱れるってことだな。abcjsとかはこんなこと気にしなくても自動で小節線が引かれますそのかわり、今回のように余裕を持っていひくとかバランスよくするとか、細かい指示は自動ではできません。結局、VexFlowくらい細かい指示をしないと思い通りにはならないですね。描く人の気持ちを込めれるのがVexFlowだな。AI？まだまだ無理だな。はやくAIに楽譜を描かせればいいのに。MIDI情報だけで完璧に描けるようになるんじゃね。シンコーミュージックファンなので、シンコーの楽譜で学習した奴がいいな。シンコーミュージックに潜入してどうやって描画してるのか見てみたいくらいだよ。入社したいわー。1年くらいかな。コピー譜つくる才能が無くて放り出されそうだけど。編集作業の一員くらいならやれるでしょ。コピする人の下で働くみたいなね。そんな奴いらんか。しかも1年とかなめたこといってるやつ採用するわけねぇな。シンコーミュージックは好きなんだけどな。間違ってますねコレとか偉そうにギター弾きながらコピしているひとにグサグサいってみたりね。すぐ解雇だな。どんだけシンコー好きやねんって感じだね。<br /> <br /> <br /> 　２小節目は8分音符四つを繰り返すので、notesMeasure92_part1とpart2を作ってますね。全く同じだから、notesMeasure92_part1.concat(notesMeasure92_part1);で繰り返せないのかな。だめか無限ループみたいになるわな。手前でコピーだから const notesMeasure92_part2 = notesMeasure92_part1;ってすれば、省略できんのかもな。やってみるか。はい。ダメでしたー。意味わからん。できそうなのにできない。なんか違うんだな。8分音符を4つのやつどうしを繋ぐときは、const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2); とします。これは前までにやった 4つのNotesを繋ぐときに使ったときと同じことです。自動でやる方法なら notesMeasure92_part1 とか2つ作らず1つに8音まとめてから、const beam9 = Beam.generateBeams(notesMeasure92)とかだな。そんな感じで2小節は足し算が必要になるという地味な方法でした。横には4小節くらいを描くのがせいぜいなので普通はそれほど複雑にはならないでしょうね。ページとか縦という概念を覚えないといけないのでしょう。ページは描画領域を分けるのでしょう。タブレット端末とかを楽譜にして演奏する目的なら横に8小節くらいとかで、縦にふやしていく感じのパート譜を作れば便利そうだね。改行部分を柔軟に設定するのはできないな。柔軟にしようとしたら、これまたJavaScriptで自力で制御するんでしょう。そこまでやれる人いたら、使いこなしが凄そうだな。<br /> <br /> 　<br /> <br /> [[VexFlow 使い方]]へ戻る。<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const {<br /> Renderer,<br /> Stave,<br /> StaveNote,<br /> Voice,<br /> Accidental,<br /> Beam,<br /> Formatter,<br /> Dot,<br /> StaveTie<br /> } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div = document.getElementById('output');<br /> const renderer = new Renderer(div, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer.resize(500, 200);<br /> const context = renderer.getContext();<br /> <br /> context.beginPath(); // start recording our pen's moves.<br /> context.moveTo(0, 0);<br /> context.lineTo(499, 0);<br /> context.lineTo(499, 199);<br /> context.lineTo(410, 100);<br /> context.lineTo(10, 40);<br /> context.closePath();<br /> context.stroke();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave.addClef('treble').addTimeSignature('C');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave.setContext(context).draw();<br /> <br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> <br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div2 = document.getElementById('output2');<br /> const renderer2 = new Renderer(div2, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer2.resize(500, 200);<br /> const context2 = renderer2.getContext();<br /> <br /> context2.beginPath(); // start recording our pen's moves.<br /> context2.moveTo(0, 0);<br /> context2.lineTo(499, 0);<br /> context2.lineTo(499, 199);<br /> context2.lineTo(360, 100);<br /> context2.closePath();<br /> context2.stroke();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave2 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave2.addClef('treble').addTimeSignature('C|');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave2.setContext(context2).draw();<br /> <br /> // Create the notes<br /> const notes2 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voice2 = new Voice({ num_beats: 4, beat_value: 4 });<br /> voice2.addTickables(notes2);<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices([voice2]).format([voice2], 350);<br /> <br /> // Render voice<br /> voice2.draw(context2, stave2);<br /> &lt;/yjavascript&gt;<br /> <br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div3 = document.getElementById('output3');<br /> const renderer3 = new Renderer(div3, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer3.resize(500, 200);<br /> const context3 = renderer3.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave3 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave3.addClef('treble').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave3.setContext(context3).draw();<br /> <br /> // Create the notes<br /> const notes3 = [<br /> new StaveNote({<br /> keys: ['c/5'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['d/4'],<br /> duration: 'q'<br /> }),<br /> new StaveNote({<br /> keys: ['b/4'],<br /> duration: 'qr'<br /> }),<br /> new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: 'q'<br /> }),<br /> ];<br /> <br /> const notes32 = [<br /> new StaveNote({<br /> keys: ['c/4'],<br /> duration: 'w'<br /> })<br /> ];<br /> <br /> // Create a voice in 4/4 and add above notes<br /> const voices3 = [<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes3),<br /> new Voice({<br /> num_beats: 4,<br /> beat_value: 4<br /> }).addTickables(notes32),<br /> ];<br /> <br /> // Format and justify the notes to 400 pixels.<br /> new Formatter().joinVoices(voices3).format(voices3, 350);<br /> <br /> // Render voices.<br /> voices3.forEach(function(v) {<br /> v.draw(context3, stave3);<br /> });<br /> &lt;/script&gt;<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div4 = document.getElementById('output4');<br /> const renderer4 = new Renderer(div4, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer4.resize(500, 200);<br /> const context4 = renderer4.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave4 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave4.addClef('bass').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave4.setContext(context4).draw();<br /> <br /> // Create the notes<br /> const notes4 = [<br /> dotted(new StaveNote({<br /> keys: ['c##/5'],<br /> duration: '8d'<br /> }).addModifier(new Accidental('##'))),<br /> new StaveNote({<br /> keys: ['db/4'],<br /> duration: '16'<br /> }).addModifier(new Accidental('b')),<br /> dotted(new StaveNote({<br /> keys: ['b/4', 'd/5', 'f/5'],<br /> duration: 'h'<br /> }).addModifier(new Accidental('#'),0),[0, 2]),<br /> dotted(new StaveNote({<br /> keys: ['c/4', 'e/4', 'g/4'],<br /> duration: '8'<br /> })),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context4, stave4, notes4);<br /> <br /> function dotted(staveNote, noteIndex = -1) {<br /> if (noteIndex &lt; 0) {<br /> Dot.buildAndAttach([staveNote], {<br /> all: true<br /> });<br /> } else {<br /> for(noteIndexValue of noteIndex){<br /> Dot.buildAndAttach([staveNote], {<br /> index: noteIndexValue<br /> });<br /> }<br /> }<br /> return staveNote;<br /> }<br /> &lt;/script&gt;<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div5 = document.getElementById('output5');<br /> const renderer5 = new Renderer(div5, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer5.resize(500, 200);<br /> const context5 = renderer5.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave5 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave5.addClef('bass').addTimeSignature('4/4');<br /> <br /> // Connect it to the rendering context and draw!<br /> stave5.setContext(context5).draw();<br /> <br /> // Create the notes<br /> const notes51 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes52 = [<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> ];<br /> <br /> const notes53 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;e/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;a/4&quot;],<br /> duration: &quot;32&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;g/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> ];<br /> <br /> const notes54 = [<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);<br /> <br /> // Create the beams for the first three groups.<br /> // This hides the normal stems and flags.<br /> const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];<br /> <br /> Formatter.FormatAndDraw(context5, stave5, allNotes5);<br /> <br /> // Draw the beams and stems.<br /> beams5.forEach((b) =&gt; {<br /> b.setContext(context5).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div6 = document.getElementById(&quot;output6&quot;);<br /> const renderer6 = new Renderer(div6, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer6.resize(500, 200);<br /> const context6 = renderer6.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave6 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave6.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave6.setContext(context6).draw();<br /> <br /> const notes6 = [<br /> dotted(new StaveNote({ keys: [&quot;e##/5&quot;], duration: &quot;8d&quot; }).addModifier(new Accidental(&quot;##&quot;))),<br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;e/4&quot;], duration: &quot;16&quot; }).addModifier(new Accidental(&quot;#&quot;)),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;a/4&quot;], duration: &quot;32&quot; }),<br /> new StaveNote({ keys: [&quot;g/4&quot;], duration: &quot;16&quot; }),<br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }),<br /> ];<br /> <br /> const beams6 = Beam.generateBeams(notes6);<br /> Formatter.FormatAndDraw(context6, stave6, notes6);<br /> beams6.forEach((b) =&gt; {<br /> b.setContext(context6).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element named &quot;boo&quot;.<br /> const div7 = document.getElementById(&quot;output7&quot;);<br /> const renderer7 = new Renderer(div7, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer7.resize(500, 200);<br /> const context7 = renderer7.getContext();<br /> <br /> // Create a stave of width 400 at position 10, 40 on the canvas.<br /> const stave7 = new Stave(10, 40, 400);<br /> <br /> // Add a clef and time signature.<br /> stave7.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;);<br /> <br /> // Connect it to the rendering context and draw!<br /> stave7.setContext(context7).draw();<br /> <br /> const notes7 = [<br /> dotted(<br /> new StaveNote({<br /> keys: [&quot;e##/5&quot;],<br /> duration: &quot;8d&quot;,<br /> }).addModifier(new Accidental(&quot;##&quot;))<br /> ),<br /> new StaveNote({<br /> keys: [&quot;b/4&quot;],<br /> duration: &quot;16&quot;,<br /> }).addModifier(new Accidental(&quot;b&quot;)),<br /> new StaveNote({<br /> keys: [&quot;c/4&quot;],<br /> duration: &quot;8&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;],<br /> duration: &quot;16&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;A/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> new StaveNote({<br /> keys: [&quot;d/4&quot;, &quot;B/3&quot;],<br /> duration: &quot;q&quot;,<br /> }),<br /> ];<br /> <br /> const beams7 = Beam.generateBeams(notes7);<br /> Formatter.FormatAndDraw(context7, stave7, notes7);<br /> beams7.forEach(function (b) {<br /> b.setContext(context7).draw();<br /> });<br /> <br /> const ties7 = [<br /> new StaveTie({<br /> first_note: notes7[4],<br /> last_note: notes7[5],<br /> first_indices: [0],<br /> last_indices: [0],<br /> }),<br /> new StaveTie({<br /> first_note: notes7[5],<br /> last_note: notes7[6],<br /> first_indices: [1],<br /> last_indices: [1],<br /> }),<br /> ];<br /> <br /> ties7.forEach((t) =&gt; {<br /> t.setContext(context7).draw();<br /> });<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { TabStave, TabNote, Bend, Vibrato } = Vex.Flow;<br /> <br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div8 = document.getElementById(&quot;output8&quot;);<br /> const renderer8 = new Renderer(div8, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer8.resize(500, 300);<br /> const context8 = renderer8.getContext();<br /> <br /> // Create a tab stave of width 400 at position 10, 40 on the canvas.<br /> const stave8 = new TabStave(10, 40, 400);<br /> stave8.addClef(&quot;tab&quot;).setContext(context8).draw();<br /> <br /> const notes8 = [<br /> // A single note<br /> new TabNote({<br /> positions: [{ str: 3, fret: 7 }],<br /> duration: &quot;q&quot;,<br /> }),<br /> <br /> // A chord with the note on the 3rd string bent<br /> new TabNote({<br /> positions: [<br /> { str: 2, fret: 10 },<br /> { str: 3, fret: 9 },<br /> ],<br /> duration: &quot;q&quot;,<br /> }).addModifier(new Bend(&quot;Full&quot;), 1),<br /> <br /> // A single note with a harsh vibrato<br /> new TabNote({<br /> positions: [{ str: 2, fret: 5 }],<br /> duration: &quot;h&quot;,<br /> }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),<br /> ];<br /> <br /> Formatter.FormatAndDraw(context8, stave8, notes8);<br /> &lt;/yjavascript&gt;<br /> <br /> &lt;yjavascript&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Create an SVG renderer and attach it to the DIV element with id=&quot;output&quot;.<br /> const div9 = document.getElementById(&quot;output9&quot;);<br /> const renderer9 = new Renderer(div9, Renderer.Backends.SVG);<br /> <br /> // Configure the rendering context.<br /> renderer9.resize(890, 130);<br /> const context9 = renderer9.getContext();<br /> <br /> // Measure 1<br /> const staveMeasure91 = new Stave(10, 0, 470);<br /> //staveMeasure91.addClef(&quot;treble&quot;).addTimeSignature(&quot;4/4&quot;).setContext(context9).draw();<br /> staveMeasure91.addClef(&quot;treble&quot;);<br /> staveMeasure91.addTimeSignature(&quot;4/4&quot;);<br /> staveMeasure91.setContext(context9).draw();<br /> <br /> const notesMeasure91 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;q&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;qr&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;q&quot; })<br /> ];<br /> <br /> // Helper function to justify and draw a 4/4 voice<br /> Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);<br /> <br /> // Measure 2 - second measure is placed adjacent to first measure.<br /> const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);<br /> <br /> const notesMeasure92_part1 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> const notesMeasure92_part2 = [<br /> new StaveNote({ keys: [&quot;c/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;d/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;b/4&quot;], duration: &quot;8&quot; }), <br /> new StaveNote({ keys: [&quot;c/4&quot;, &quot;e/4&quot;, &quot;g/4&quot;], duration: &quot;8&quot; })<br /> ];<br /> <br /> // Create the beams for 8th notes in second measure.<br /> const beam91 = new Beam(notesMeasure92_part1);<br /> const beam92 = new Beam(notesMeasure92_part2);<br /> <br /> const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);<br /> <br /> staveMeasure92.setContext(context9).draw();<br /> Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);<br /> <br /> // Render beams<br /> beam91.setContext(context9).draw();<br /> beam92.setContext(context9).draw();<br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow_%E4%BD%BF%E3%81%84%E6%96%B9&diff=13542 VexFlow 使い方 2026-07-20T14:15:40Z <p>Yo-net: </p> <hr /> <div>[[VexFlow]]に戻る。<br /> == '''概要''' ==<br /> 　名曲のソロ部分とか有名な部分を引用しながら、使い方をまとめていきたいと思います。著作権との闘いだな。引用の範囲を超えないように頑張ろう。権利団体にすべてを還元すればいいんでしょ。やってやるよ。っていう感じの意気込みです。この項目の目的は日本のWebsiteに楽譜を描画しているページを増やすということだな。難しすぎるよな楽譜描画。一か所でも間違ったら、そこから先、何も描画されません！恐るべしなんだよVexFlow。&lt;s&gt;絶賛挫折中&lt;/s&gt;。2024年3月中旬再始動中。ほんとか？<br /> <br /> <br /> 　結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> *[[VexFlow 入門その1]]<br /> *[[VexFlow 連符]]<br /> *[[VexFlow 描画エリアと5線譜と小節]]<br /> *[[VexFlow 音部記号]]<br /> *[[VexFlow 拍子記号]]<br /> *[[VexFlow 調号]]<br /> *[[VexFlow 音符]]<br /> *[[VexFlow 連桁]]<br /> *[[VexFlow 休符]]<br /> *[[VexFlow 連符]]<br /> *[[VexFlow タイ]]<br /> *[[VexFlow スラー]]<br /> *[[VexFlow 小節開始終了線]]<br /> *[[VexFlow 演奏順序記号]]<br /> *[[VexFlow セクション記号]]<br /> *[[VexFlow 小節番号]]<br /> *[[VexFlow 小節の上下の接続]]<br /> *[[VexFlow 楽器名記載]]<br /> *[[VexFlow 楽曲タイトルの挿入]]<br /> *[[VexFlow テキスト挿入]]<br /> *[[VexFlow テンポ]]<br /> *[[VexFlow 強弱表示]]<br /> *[[VexFlow アクセント・テヌート・スタッカート]]<br /> *[[VexFlow クレシェンド・デクレシェンド]]<br /> *[[VexFlow アルペジオ]]<br /> *[[VexFlow ビブラート]]<br /> *[[VexFlow オクターブ]]<br /> *[[VexFlow 和音表示省略のスラッシュノート]]<br /> *[[VexFlow 装飾音符]]<br /> *[[VexFlow 複数小節にわたる長い休符]]<br /> *[[VexFlow 小節の繰り返し]]<br /> *[[VexFlow 打楽器譜]]<br /> *[[VexFlow タブ譜]]<br /> *[[VexFlow タブ譜 フレット番号と旗表示]]<br /> *[[VexFlow タブ譜 プリングオフ・ハンマリング・スライド・チョーキング・グリッサンド]]<br /> *[[VexFlow タブ譜 カッティング]]<br /> *[[VexFlow タブ譜 同一コード連続弾き]]<br /> *[[VexFlow タブ譜 コードフォーム]]<br /> *[[VexFlow タブ譜 ミュート]]<br /> *[[VexFlow タブ譜 ハーモニクス]]<br /> *[[VexFlow タブ譜 アームダウン・アームアップ]] '''ここで力尽きました。管理人には無理です。&lt;span style=&quot;color: darkred;&quot;&gt;簡易楽譜CADのためのアプリ作ります。&lt;/span&gt;'''<br /> <br /> <br /> *[[VexFlow テンプレート Vocal Guitar1 2 Base Drum Perc]]<br /> <br /> <br /> 説明が不足していると感じている記事<br /> *トレモロ、ロール<br /> *トリル<br /> *ベースタブ譜の演奏順序記号<br /> *VexFlowでは不完全な描画になったコーダやダルセーニョといった演奏順序記号のBravuraフォントでの描画<br /> *ボーカル、歌詞<br /> *コード記号<br /> *2xや3x、D.S.1xやD.S.2xのときだけ違う演奏をするカッコつき楽譜<br /> *スコア・楽譜テンプレート数種類をPDFで提供。<br /> *楽曲サンプル譜の作成<br /> *YonetMuFL自作楽譜描画補助フォントの整備と公開とコードポイント表の作成。<br /> *ピアノ譜用のペダル操作記号<br /> *ピアノ譜のための上下連結の連桁描画。<br /> <br /> <br /> *[[VexFlow test content]]<br /> *[[VexFlow test content2]]<br /> *[[VexFlow ベースヘ音記号練習]]<br /> <br /> <br /> 　<br /> <br /> [[VexFlow]]に戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13541 VexFlow 2026-07-20T14:15:01Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは'''[[STMK ScoreTemplateMaker(ja)]]'''からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13540 VexFlow 2026-07-20T14:14:32Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。結局、納得いくものを作るために、'''&lt;span style=&quot;color: darkred;&quot;&gt;自分でSVG出力テンプレートアプリを作りました。&lt;/span&gt;'''詳しくは[[STMK ScoreTemplateMaker(ja)]]からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=VexFlow&diff=13539 VexFlow 2026-07-20T14:13:23Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> == '''概要''' ==<br /> 　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。結局、納得いくものを作るために、自分でSVG出力テンプレートアプリを作りました。詳しくは[[STMK ScoreTemplateMaker(ja)]]からどうぞ。VexFlowで苦労するよりはIllustratorでポチポチ楽譜記号をペタペタする方が柔軟性が高くて美しいものがつくれるということに気づきましたね。VexFlowを極めたい人は極めていただければと思います。<br /> <br /> <br /> 　詳しい使い方は'''[[VexFlow 使い方|VexFlow使い方]]'''の記事を参照して下さい。<br /> <br /> 　<br /> <br /> == '''簡単な使い方''' ==<br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // ここにあなたのコードを書く。<br /> <br /> …<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> …<br /> <br /> &lt;/script&gt;<br /> &lt;/syntaxhighlight&gt;<br /> <br /> <br /> 例えば<br /> <br /> <br /> &lt;syntaxhighlight lang=&quot;javascript&quot;&gt;<br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> &lt;/syntaxhighlight&gt;<br /> <br /> 　とすると結果として以下のように<br /> <br /> <br /> &lt;div id=&quot;output&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　が得られます。肝心なのは出力するためのタグを与えなければならないことです。&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;&lt;div id=&quot;output&quot;&gt;&lt;div&gt;&lt;/syntaxhighlight&gt;が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、&lt;syntaxhighlight lang=&quot;javascript&quot; inline&gt;renderer: { elementId: 'output'}&lt;/syntaxhighlight&gt;のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。<br /> <br /> <br /> 　2つ目<br /> <br /> <br /> &lt;div id=&quot;output2&quot;&gt;&lt;/div&gt;<br /> <br /> <br /> 　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow &amp;gt; Test &amp;gt; flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。<br /> <br /> <br /> 　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！<br /> <br /> <br /> 　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。<br /> <br /> <br /> 　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){コード})();の中に書くだけです。<br /> <br /> 　<br /> <br /> == '''関連情報''' ==<br /> *[[VexFlow 使い方]]<br /> *[[音楽理論 和音の種類]]<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> &lt;yjavascript&gt;<br /> &lt;/script&gt;<br /> &lt;!-- https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow-debug.js --&gt;<br /> &lt;script id =&quot;vexflow&quot; src=&quot;https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> const { Factory, EasyScore, System } = Vex.Flow;<br /> <br /> const vf = new Factory({<br /> renderer: { elementId: 'output', width: 500, height: 200 },<br /> });<br /> const vf2 = new Factory({<br /> renderer: { elementId: 'output2', width: 700, height: 200 },<br /> });<br /> <br /> const score = vf.EasyScore();<br /> const system = vf.System();<br /> <br /> system<br /> .addStave({<br /> voices: [<br /> score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),<br /> score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),<br /> ],<br /> })<br /> .addClef('treble')<br /> .addTimeSignature('4/4');<br /> <br /> vf.draw();<br /> <br /> <br /> const score2 = vf2.EasyScore();<br /> const system2 = vf2.System();<br /> <br /> system2.addStave({<br /> voices: [<br /> score2.voice(<br /> score2.tuplet(score2.beam(score2.notes('G#5, E5, F#5, C#5, D#5, B4, C5, G#4, F#4, B4, C5, D5')))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> .concat(<br /> score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))<br /> )<br /> ]<br /> }).addClef('treble').addTimeSignature('4/4');<br /> <br /> <br /> vf2.draw();<br /> <br /> &lt;/yjavascript&gt;</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13538 STMK ScoreTemplateMaker(ja) 2026-07-20T12:41:21Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりの機能をシンプル五線譜のみのテンプレートで実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13537 STMK ScoreTemplateMaker(ja) 2026-07-20T12:32:38Z <p>Yo-net: /* ライセンス認証の手順 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりのシンプル機能をシンプル五線譜のみのテンプレートでも実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、ScoreTemplateMaker.exeを起動して、立ち上がるアプリケーションのメニュー[ヘルプ]-[ライセンス認証]の項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13536 STMK ScoreTemplateMaker(ja) 2026-07-20T12:27:06Z <p>Yo-net: </p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりのシンプル機能をシンプル五線譜のみのテンプレートでも実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8635263 https://yonetech-studio.booth.pm/items/8635263] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8635291 https://yonetech-studio.booth.pm/items/8635291])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、FTCK_FontStructChecker.exeを起動して、立ち上がるアプリケーションのグリフ上を右クリックして表示されるLicense Authorizeの項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13535 STMK ScoreTemplateMaker(ja) 2026-07-20T12:13:44Z <p>Yo-net: /* 使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりのシンプル機能をシンプル五線譜のみのテンプレートでも実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543586 https://yonetech-studio.booth.pm/items/8543586] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8151586 https://yonetech-studio.booth.pm/items/8151586])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、FTCK_FontStructChecker.exeを起動して、立ち上がるアプリケーションのグリフ上を右クリックして表示されるLicense Authorizeの項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:STMK 009 LicenceAuthorizeStart.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_009_LicenceAuthorizeStart.png&diff=13534 ファイル:STMK 009 LicenceAuthorizeStart.png 2026-07-20T12:13:11Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13533 STMK ScoreTemplateMaker(ja) 2026-07-20T12:10:35Z <p>Yo-net: /* 使い方 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりのシンプル機能をシンプル五線譜のみのテンプレートでも実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543586 https://yonetech-studio.booth.pm/items/8543586] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8151586 https://yonetech-studio.booth.pm/items/8151586])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、FTCK_FontStructChecker.exeを起動して、立ち上がるアプリケーションのグリフ上を右クリックして表示されるLicense Authorizeの項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:FTCK 002 LicenseAuthorize.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:STMK 006 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:STMK 007 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:STMK 008 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_007_OrderNumberResist.png&diff=13532 ファイル:STMK 007 OrderNumberResist.png 2026-07-20T12:10:09Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_008_SuccessAuthorize.png&diff=13531 ファイル:STMK 008 SuccessAuthorize.png 2026-07-20T12:09:20Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:STMK_006_LicenseAuthorizeDialog.png&diff=13530 ファイル:STMK 006 LicenseAuthorizeDialog.png 2026-07-20T12:05:56Z <p>Yo-net: </p> <hr /> <div></div> Yo-net https://wiki.yo-net.jp/index.php?title=STMK_ScoreTemplateMaker(ja)&diff=13529 STMK ScoreTemplateMaker(ja) 2026-07-20T10:20:49Z <p>Yo-net: /* 概要 */</p> <hr /> <div>[[メインページ#言語と開発環境|言語と開発環境]]へ戻る。<br /> <br /> == '''概要''' ==<br /> 　STMK ScoreTemplateMakerは価格154円という値段設定から始まる&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;楽譜テンプレートアプリケーション・楽譜レイアウト生成エンジン(楽譜SVGや清書に興味がある方向け、Illustrator/Inkscapeで楽譜を清書するための補助ツール)&lt;/span&gt;です。&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;2026/7/27にリリース予定&lt;/span&gt;です。無料でも使えます。但し保存機能無し、SVG出力機能無しです。シンプル五線譜テンプレート機能のみのリリース154円から始まって、機能追加して、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)のテンプレートを追加することによって、一つづつ機能追加する耽美に値段が上がっていって最終的に1200円くらいになる予定です。154円で買った人は機能追加されても154円のみで全部の機能が使えるようになる予定です。どれくらいの時間で機能追加されるかは未定ですので、期待しすぎないで下さい。<br /> <br /> <br /> 　ひととおりのシンプル機能をシンプル五線譜のみのテンプレートでも実装できたので、機能拡張はたぶんできると思う。<br /> <br /> <br /> [[ファイル:001 STMK ScreenShot.png|400px|thumb|none|スクリーンショット]]<br /> <br /> <br /> 　ちなみにシンプル五線譜で作ったテンプレートをもとに生成された楽譜記号SVGと五線譜SVGと補助線SVGを活用してIllustrator/Inkspaceで楽譜要素をペタペタ貼っていくと以下のようなものが作れます。<br /> <br /> <br /> [[ファイル:002 SimpleStaff SkechAfter Content.png|400px|thumb|none|完成図]]<br /> <br /> <br /> 　もちろん、楽譜記号要素をSVGで貼り付ける前の、手書き用の五線譜のみのPDFも出力できるので、それを使ってクリエイティブな作業に徹することもできます。<br /> <br /> <br /> 　楽譜の段数や小節線の有無や音部記号(ト音/へ音/ハ音の選択)の表示・非表示も選べますし、譜間の調整や五線全体の横幅長さ、用紙設定(A3/A4/B4/B5 縦配置/横配置)も選べます。上寄せ配置・均等配置も選べますし、描画した五線譜にオフセットをもたせて配置することもできます。なかなかイカス。五線譜テンプレートアプリになっていると思います。欲しかった五線譜を生み出すことができます。そしてたくさん印刷すれば、あなただけの楽譜帳ができあがるわけです。今はシンプルな五線譜しか作れないので154円です。<br /> <br /> <br /> [[ファイル:003 SimpleStaff Dialog.png|400px|thumb|none|シンプル五線譜ダイアログ]]<br /> <br /> <br /> [[ファイル:004 Staff Settings Dialog.png|400px|thumb|none|段設定ダイアログ]]<br /> <br /> <br /> [[ファイル:005 Measure Settings Dialog.png|400px|thumb|none|小節設定ダイアログ]]<br /> <br /> <br /> 　今、買えば、154円ぽっきりで、あとから機能追加されて、ピアノ譜(高音/低音の2段構成)、ギタータブ譜(タブ6線譜付き)、ベースタブ譜(タブ譜4線譜付き)、ベースタブ譜(タブ譜5線譜付き)、バンドスコア(ボーカル(1)・Other(1)・ギタータブ譜(2)・ベースタブ譜(2)・ドラム譜(1)の計7段構成を2段組)、クラシックスコア譜(各種楽器の計n段を1段組)もつくれるようになるかもしれないという感じです。あとから欲しいと思ってもそのときには1200円くらいになっているので、154円で1200円分の機能が手に入るという計算ですね。たぶんですけどね。今はシンプル五線譜のみですが、たぶん、それほど時間はかからずにのこりの機能は追加できると思っています。アプリケーションの基礎はできあがったので、ちょちょいと頑張れば機能追加できると思っています。信じるか信じないかはあなた次第。先行投資ですね。できあがってから1200円程度で買ってもさほどの出費ではないと思いますけど。<br /> <br /> <br /> 　楽譜出版社がやっているレベルの楽譜作成を自分でもやれなくはないレベルのものを提供するっていうのが、このアプリのミソですね。自分の設定した譜間スケールの楽譜記号要素のSVGも出力できるというね。今までにはなかったよ。まぁねIllustratorやInkspaceでの作業は、なかなか地獄のような作業ではあるので、それをやらせるというアプリはこれからも登場しないだろうね。地獄のような作業を強いるアプリおそろしいよね。でも出来ないより出来た方がいい。アイデア次第で出来上がる楽譜は無限大になっていく。吹奏楽部部員がInkspaceを使って、ペタペタする可能性もあるよね。ちなみにサンプルで提示した楽譜は作業時間12時間くらいかかってる。はじめてのIllustratorレベルの知識だったので、仕方ないよね。得意な人はもっと早くやれる可能性もある。<br /> <br /> <br /> BOOTH商品ページ<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543586 https://yonetech-studio.booth.pm/items/8543586] (無料版)<br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> 　<br /> <br /> == '''使い方''' ==<br /> === '''購入手順''' ===<br /> ●まずBOOTHにログインします。<br /> <br /> *https://booth.pm/users/sign_in<br /> <br /> <br /> ●BOOTH IDを保有していない場合<br /> <br /> <br /> 　１．PIXIVに登録してない場合はこちらの下の「PIXIVアカウントを作ってログイン」ボタンを押下(押し)ます<br /> <br /> <br /> [[ファイル:BoothIDGene01pxiveIDGeneStartBtn.png|400px|thumb|none|PIXIVアカウント作成開始]]<br /> <br /> <br /> 　２．PIXIVアカウントを作るには「メールアドレスでアカウントを作成」ボタンを押します<br /> <br /> <br /> [[ファイル:BoothIDGene02pixiveacountselect.png|400px|thumb|none|PIXIVアカウント作成選択]]<br /> <br /> <br /> 　３．メールアドレスを入力して、ロボットでないことを証明するチェックを手動で入れて「次へ」ボタンを押す。<br /> <br /> <br /> [[ファイル:BoothIDGene03InputMail.png|400px|thumb|none|メールアドレス入力]]<br /> <br /> <br /> 　４．先の画面で入力したメールアドレス宛に以下のような認証コードが記載されたメールが届いているので確認します。<br /> <br /> <br /> [[ファイル:BoothIDGene04CheckAuthCode.png|400px|thumb|none|認証コードの確認]]<br /> <br /> <br /> 　５．認証コードを入力して、「次へ」へボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene05AuthCode.png|400px|thumb|none|認証コード入力]]<br /> <br /> <br /> 　６．ニックネーム、性別、生年月日を入力し、規約の同意チェックを入れ、「アカウントを作成」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene06NicknameRegist.png|400px|thumb|none|ニックネーム性別生年月日登録]]<br /> <br /> <br /> 　７．ログインされた状態でBOOTHの画面が開きますが、まだアカウントにパスワードが設定されていないので、パスワードを設定するためにアカウント設定を開きます。画面の右上のニックネームの部分をクリックして展開されるメニューから「アカウント設定」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene07acountsetting.png|400px|thumb|none|アカウント設定を開く]]<br /> <br /> <br /> 　８．「パスワードの変更」を選択します。<br /> <br /> <br /> [[ファイル:BoothIDGene08ChangePass.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　９．新しいパスワード情報を入力し「パスワードの変更」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothIDGene09ChangePassInput.png|400px|thumb|none|パスワードの変更]]<br /> <br /> <br /> 　以上でID・パスワードの作成ができたことになります。<br /> <br /> <br /> 　154円以上の買い物が可能なクレジットカードなどを準備して商品ページにアクセスします。<br /> <br /> <br /> [https://yonetech-studio.booth.pm/items/8543665 https://yonetech-studio.booth.pm/items/8543665] (有料版154円)<br /> <br /> <br /> 　１．商品ページから「カートに入れる」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy01BuyBtn.png|400px|thumb|none|購入のためカートに入れる]]<br /> <br /> <br /> 　２．カートの中身を見ている状態の画面に遷移するので、この「ショップのレジに進む」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy02Kert.png|400px|thumb|none|カート画面]]<br /> <br /> <br /> 　３．支払方法の選択画面になるので「クレジットカード」ラジオボタンを選択した状態にして、「クレジットカードの登録」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy03CreditResist.png|400px|thumb|none|クレジットカード登録]]<br /> <br /> <br /> 　４．クレジットカード情報を入力する画面になるので番号()、名義(TARO YAMADA)、期限(月/年)、セキュリティコードを入力して「登録して使用」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy04CreditInfoResist.png|400px|thumb|none|クレジットカード情報登録]]<br /> <br /> <br /> 　５．「ご注文の確認」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy05OrderComfarm.png|400px|thumb|none|注文の確認]]<br /> <br /> <br /> 　６．「ご注文の確定」ボタンを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy06BuyDecision.png|400px|thumb|none|注文の確定]]<br /> <br /> <br /> 　７．これで製品のページ([https://yonetech-studio.booth.pm/items/8151586 https://yonetech-studio.booth.pm/items/8151586])に戻ると「購入済み」ボタンがあるので、これを押します。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy07Bought.png|400px|thumb|none|購入済みへ]]<br /> <br /> <br /> 　８．遷移したページで「ダウンロード」ボタンがあるのでここからダウンロードできます。<br /> <br /> <br /> [[ファイル:BoothHowtoBuy08Download.png|400px|thumb|none|ダウンロード]]<br /> <br /> <br /> 　BOOTHからダウンロードしたら任意のフォルダーに配布zipファイルを解凍してできるファイル一式を、よくつかうアプリケーションとして適切なディレクトリに対して、同一のディレクトリの中で展開します。<br /> <br /> 　<br /> <br /> === '''ライセンス認証の手順''' ===<br /> 　本製品はコピー処理をするためにライセンスが必要で、FTCK_FontStructChecker.exeを起動して、立ち上がるアプリケーションのグリフ上を右クリックして表示されるLicense Authorizeの項目から操作をします。BOOTHから発番される注文番号を知っている人に対して、ライセンス認証ができる仕組みを提供していて、今後は発番されたライセンスIDを知っていることこそが購入者であることの証明になります。注文番号はBOOTHが発番する連番ですので、第三者が予測することは難しいですが、ずっと数か月ほど放置していれば乗っ取られる可能性のある番号となります。購入後は速やかにライセンス認証をすることをお勧めします。乗っ取られた場合はBOOTHにメッセージ投稿することで、購入時に届いたメールの情報を伝達するなどで、購入者であることを証明していただければ、ライセンス発行依頼に応じます。購入者のライセンスを有効にし、悪意ある第三者が手にした乗っ取られた番号は判明次第、Ban(禁止・取り除き)します。<br /> <br /> <br /> 　つまり、初回利用時はBOOTH注文番号によってライセンス認証処理が必要になるということになります。<br /> <br /> <br /> 　以下に手順を示します。<br /> <br /> <br /> ●まず、ScoreTemplateMaker.exeを起動します。<br /> <br /> <br /> ●起動したらメニューから「ヘルプ-ライセンス認証」の項目を選択します。<br /> <br /> <br /> [[ファイル:FTCK 002 LicenseAuthorize.png|400px|thumb|none|認証開始]]<br /> <br /> <br /> ●以下のようなライセンス認証用のダイアログが起動します。<br /> <br /> <br /> [[ファイル:FTCK 003 LicenseAuthorizeDialog.png|400px|thumb|none|ライセンス認証ダイアログ]]<br /> <br /> <br /> ●注文番号欄に購入時BOOTHより届いたメールに記載されている注文番号を記載し、「Regist」ボタンを押します。<br /> <br /> <br /> [[ファイル:FTCK 004 OrderNumberResist.png|400px|thumb|none|注文番号による登録]]<br /> <br /> <br /> ●正常にLicense認証が終了すると下のLicensID番号欄に発番されたLicense番号が表示されます。このとき、PCにもlicense.datが保存されます。<br /> <br /> <br /> [[ファイル:FTCK 005 SuccessAuthorize.png|400px|thumb|none|認証結果]]<br /> <br /> <br /> <br /> 　以上でLicense認証は完了です。1台目は注文番号の一致によってライセンス発行がされ、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　1回目のRegist後、ReAuthorizeボタンが押せるようになるので、押してしまいたくなりますが、同一PCで認証する分には新しいlicense.datが生成されるだけで、押してしまっても問題ないですが、必要のない行為です。<br /> <br /> <br /> 　また、1回目のRegistが終わった後、注文番号でResistはもうできません。エラーになります。つまり、BOOTHで入手したアプリケーションが何らかの方法で第三者の手に渡って、さらに他の人が注文番号を知りえたとしても何も起こらないことを意味しています。これは&lt;span style=&quot;color:darkred; font-weight:bold;&quot;&gt;購入した人の権利を守るための仕組み&lt;/span&gt;です。買った人だけが使えるようにしています。ただし、154円という価格に似合わない高度な解析によって改変されたプログラムが<br /> 出回る可能性を完全に排除することはできません。<br /> <br /> <br /> 　2台目以降はライセンスIDを入力して、ReAuthorizeしたときにコードが一致することによって、プログラムが利用可能な状態になります。×ボタンでライセンス認証ダイアログを閉じて、アプリケーションの利用を開始できます。<br /> <br /> <br /> 　ちなみに存在しない注文番号やライセンス番号で続けて認証すると24時間ライセンス認証ができなくなるので注意して下さい。<br /> <br /> <br /> ■ライセンス仕様<br /> <br /> *BOOTH注文番号で初回認証<br /> <br /> *同時使用：3台<br /> <br /> *登録可能PC：最大15台<br /> <br /> <br /> 　違うPCを含めて3台まで同時に使えますが、認証可能台数は15台までです。連絡なしには15台以上の登録はできません。連絡をもらってから何日後に対応になるかわかりませんが、BOOTHメッセージより注文番号とLicense番号を連絡してもらえれば認証可能台数をリセットする対応は実施します。3カ月もたたないのに15台使うような異常な頻度、日本各地にIPアドレスの分散が見受けられるライセンス番号でのリセットは受け付けません。そのような行為が見受けられた場合は対象のライセンスIDについてBanします。消費された認証PC数はライセンス番号の横に表示されます。全てのPCで消費された認証PC数を一致させたい場合はReAuthorizeすると認証PC数を取得することができます。同時利用可能台数は3台なので、4台以降の認証では、一番古い認証処理へのアクセスのPCが弾き出されます。弾き出されたくないPCに対してReAuthorizeしてから、新しいPCでの認証をすると弾き出されずに済みます。<br /> <br /> <br /> 　オフラインで使うソフトウェアですので、認証して弾き出されてもlicense.datを保持していれば、使うには使えますが、license.datが消えたら、再認証しないと使えないので、弾き出されたPCを再認証すると消費認証PC数は増えます。<br /> <br /> <br /> 　同時に使えるのは3台。弾き出されたくない2台はReAutorize処理してから、新しいPCのReAuthorizeをすると良いでしょう。<br /> 新しいPCでも同じLicenseIDを使うからReAuthorizeと呼んでいます。Authorizeボタンが無いことに戸惑わないでください。<br /> <br /> <br /> 　発番されたライセンス番号を他人に漏らしたり共有することは、認証可能台数が消費されるだけで、権利を棄損することになりますので、漏洩には注意して各自でしっかり管理して下さい。PCで認証や再認証が成功した時、新しいPCで再認証するときに発番されたライセンス番号の内容を使って、再認証すると実行ファイルのクリップボード変換プログラムが使えるようになります。<br /> <br /> <br /> 　ライセンスシステムの運営の継続が困難になった場合はフリーソフト化される可能性があります。ご承知おきください。<br /> <br /> 　<br /> <br /> === '''アプリケーションの主要な使い方''' ===<br /> ==== '''アプリケーションの起動''' ====<br /> 　ダウンロードしたファイルを解凍するとScoreTemplateMaker.exeがあるので、これを起動するとアプリケーションが起動します。<br /> <br /> <br /> ==== '''インターフェイス紹介''' ====<br /> <br /> <br /> <br /> 使い方は以上です。<br /> <br /> 　<br /> <br /> [[メインページ#言語と開発環境|言語と開発環境]]へ戻る。</div> Yo-net https://wiki.yo-net.jp/index.php?title=%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:005_Measure_Settings_Dialog.png&diff=13528 ファイル:005 Measure Settings Dialog.png 2026-07-20T10:19:35Z <p>Yo-net: </p> <hr /> <div></div> Yo-net