ChordWiki Bar Formatter

ChordPro形式のコード譜へ、小節線と音の長さを表す記号を自動で追加するブラウザーツールです。 コード譜を貼り付けると、小節の区切りを補い、行ごとの調整結果を譜面として確認できます。

ツールを使う： ChordWiki Bar Formatter

• インストール不要
• 入力内容を外部サーバーへ送信しない
• 変換、行修正、移調、譜面プレビューまでブラウザー内で完結

ChordWiki公式サイト　非公式ツールです。

目次

• どんなことができる？
• 画面で見る
• 基本的な使い方
• 主な機能
• データの扱い
• 対応環境
• 開発とテスト
• 管理IDとレイアウト基準
• 公開情報

どんなことができる？

たとえば、コードと歌詞だけのテキストを貼り付けると、小節線と音の長さを表す記号を補います。

変換前： [C]コード譜を[G]貼り付けます
変換後： [|][C][----]コード譜を[G][----]貼り付けます[|]

曲に合わない箇所は、行修正欄の数字や記号を上書きして調整できます。

画面で見る

1. コード譜を貼り付ける

「02. 変換前」へChordPro形式のテキストを貼り付けます。入力内容はリアルタイムで変換されます。

2. 行ごとに長さを修正する

「04. 行修正」でコードごとの長さを上書きすると、「05. 変換後」へ反映されます。

3. 譜面として確認する

「06. 譜面プレビュー」で小節、コード、歌詞の見え方を確認できます。移調やシャープ・フラット表記も変更できます。

基本的な使い方

1. index.htmlをブラウザーで開きます。
2. 「02. 変換前」へChordPro形式のコード譜を貼り付けます。
3. 必要に応じて「03. 初期設定」を曲の拍子に合わせます。
4. 曲と合わない箇所を「04. 行修正」で調整します。
5. 「06. 譜面プレビュー」で表示を確認します。
6. 「譜面プレビューを確定」を押し、「07. 確定譜面テキスト」からコピーします。

迷った場合は、画面右上の「ヘルプ・使い方」で具体例を確認できます。

主な機能

• コード譜への小節線と長さ記号の追加
• 行単位の長さ修正と小節位置の調整
• コード譜のプレビュー
• 移調とシャープ・フラット表記の切り替え
• 変換前の小節幅と初期設定が異なる場合の警告
• 歌詞行のハイフン省略方法の選択
• 編集履歴とクラッシュ復元
• ライトテーマとダークテーマ
• 画面幅に応じたレイアウト

データの扱い

変換処理はブラウザー内で完結します。このアプリ自身は、入力したコード譜や設定を外部サーバーへ送信しません。

作業を復元するため、次の情報をブラウザーのlocalStorageへ保存します。

• 初期設定と表示設定
• 変換前テキスト
• 行修正テキストと行ごとの採用状態
• 確定譜面テキスト
• 編集履歴とクラッシュ復元データ

保存内容は同じブラウザーと同じ公開元で利用されます。ブラウザーのサイトデータを削除すると、保存内容も削除されます。

コード譜や歌詞を公開または共有するときは、利用者が権利関係を確認してください。

対応環境

最新版のFirefox、Google Chrome、Microsoft Edgeを推奨します。 クリップボード操作は、ブラウザーの権限設定や公開方法によって制限される場合があります。

ローカルファイルとして開くだけで動作します。静的Webサーバーへ配置した場合も同じ機能を利用できます。

開発とテスト

Node.js 18以上を用意し、リポジトリのルートで次を実行します。

npm test

テストはtests内の全ファイルと、主要JavaScriptの構文を検査します。外部パッケージのインストールは不要です。

Python版との共通回帰ケースはtests/fixtures/v45-regressions.jsonで管理します。

管理IDとレイアウト基準

修正箇所と確認項目は管理ID台帳で管理します。 チャットやGitコミットで同じIDを使うため、変更の対象を追跡できます。

譜面プレビューの基準はレイアウト設定書とPREVIEW-001に記録しています。 保存済みの状態はlayout-snapshots/2026-07-22-good/にあります。

公開情報

公開チェックリストを参照してください。 公開先はGitHub Pagesです。 更新履歴と配布情報はReleasesで公開します。 このソフトウェアはMIT Licenseで公開しています。