既存のツールも見つからなかったので、自分でVS Code拡張機能を作ることにしました。
特にデコレーション（Decoration）の配置調整で苦労したので、その解決方法をまとめておきます。
今回は、Claude Codeを使って開発しました。
スポンサーサイト
目次
・作ったもの
・使用した技術
・デコレーションの配置調整で苦労した話
- 問題1：モーラ数の右寄せができない
- 問題2：母音「i」の位置がずれる
・Claude Codeを使った開発について
・モーラ数のカウント方法
・まとめ
作ったもの
Japanese Lyrics Editor (J-Lyrics)という、日本語の歌詞作成を支援するVSCode拡張機能です。
主な機能：
・各行のモーラ数（拍数）をリアルタイム表示
・行末の母音を表示（韻を踏む際の参考に）
・Sunoのメタタグ形式もサポート
元々VSCodeで作詞をしていたので、VSCode拡張機能にしてみました。歌詞の履歴管理もしやすいですし。
GitHubで公開しています：
https://github.com/dokonidemoiruhito/japanese-lyrics-editor
使用した技術
・Claude Code：開発支援ツール
・TypeScript + VSCode Extension API
・Kuroshiro：漢字をひらがなに変換するライブラリ
Claude Codeを使って開発しましたが、細かい仕様は会話しながら詰めていく感じで進めました。詰まった時はGeminiも併用しながら相談していました。
デコレーションの配置調整で苦労した話
VSCode拡張機能で行頭に情報を表示する「デコレーション（Decoration）」の配置調整が、思った以上に厄介でした。
問題1：モーラ数の右寄せができない
モーラ数を行頭に表示するとき、右寄せで一桁と二桁で桁を揃えたかったんです。
しかし、VSCodeのデコレーションには以下の制限がありました：
・右寄せや中央寄せの設定ができない
・フォントを指定できないため、ユーザー環境によってプロポーショナルフォントが使われる
右寄せを設定できなかったため、最初は半角スペースで左埋めを試しましたが、スペース埋めでは桁が揃わず、見た目がバラバラになってしまいました。
解決方法：デコレーションを2つ使う
無理やりですが、デコレーションを2つ用意して解決しました：
(1) 1つ目のデコレーション：透明な「0」で左埋め
(2) 2つ目のデコレーション：実際のモーラ数を表示
例えば：
・モーラ数が5の場合：透明な「0」+「5」を表示
・モーラ数が12の場合：透明文字なし+「12」を表示
こうすることで、見た目上は右寄せになります。
コードとしては、以下のような感じです：
// 1つ目：透明な"0"で左埋め
paddingDecorationType = vscode.window.createTextEditorDecorationType({
before: {
color: 'transparent',
}
});
// 2つ目：モーラ数を表示
moraDecorationType = vscode.window.createTextEditorDecorationType({
before: {
color: new vscode.ThemeColor('editorCodeLens.foreground'),
}
});
実際の配置では、モーラ数が1桁の時は
paddingText = '0'、2桁の時はpaddingText = ''として調整しています。問題2：母音「i」の位置がずれる
当初は母音（a, i, u, e, o）を行頭のデコレーションに表示していました。
しかし、プロポーショナルフォントでは「i」の文字幅が狭いため、他の母音と比べて中央位置がずれて見えてしまいます。
上で書いた通り、中央揃えもできませんので、最初は「i」の時だけ左マージンを調整しようとしましたが、ユーザー環境によってフォントが異なるため、調整量も変わってしまい断念しました。
解決方法：ガター領域にSVG画像で表示
行番号の左側（ガター領域）に、SVGで母音を描画する方法に変更しました。
function createVowelSvg(vowel: string, displayStyle: string = 'katakana'): vscode.Uri {
const color = vowelColors[vowel] || '#808080';
const displayMap = vowelDisplayMaps[displayStyle] || vowelDisplayMaps['katakana'];
const displayText = displayMap[vowel] || vowel;
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect x="0" y="0" width="16" height="16" fill="${color}" />
<text x="8" y="13" text-anchor="middle" font-size="14" font-family="Consolas" fill="black">${displayText}</text>
</svg>`;
const encoded = Buffer.from(svg).toString('base64');
return vscode.Uri.parse(`data:image/svg+xml;base64,${encoded}`);
}
ただ、ガター領域は狭いので視認性が悪く、最初は文字色を変えたりしていましたが、最終的に背景色を付けることにしました。色はGoogleのマテリアルカラーの100番台から選んでいます（柔らかいパステルカラー）。
結果：
・文字位置のずれ問題が解消
・色分けで母音が見やすくなった
・韻を踏む際の参考にしやすい
デコレーションは思っていたより制約が多く、試行錯誤しながらの解決になりました。
Claude Codeを使った開発について
良かった点：
・細かい仕様を最初から決めず、会話しながら詰めていけた
・「こんな感じで」と伝えて、動作確認しながら進められた
向いてない作業：
・表示の微調整（色、サイズ、位置など）
・これらは自分で直接コードを修正した方が早かったです
詰まった時の対応：
・Geminiも併用して相談しながら進めました
特殊なことはしていないと思いますが、最初から完璧な仕様を提示するのではなく、会話しながら仕様を詰めて動作確認する、というのを繰り返しながらなんとなく作っていった感じです。
モーラ数のカウント方法
モーラ数のカウントは、ほぼClaude Codeに任せました。
基本的な流れ：
・Kuroshiroライブラリで漢字をひらがなに変換
・拗音（きゃ、しゅ等）は1モーラとしてカウント
・促音（っ）も1モーラとしてカウント
・Sunoのルビ記法
漢字(よみ) にも対応唯一自分で修正したのは「っ」の扱いだったと記憶しています。細かいロジックはClaude Codeが提案してくれたものをベースにしています。
まとめ
VSCode拡張機能の開発では、デコレーションの配置調整が意外と厄介でした。フォント指定や配置設定ができないため、今回のような工夫が必要になります。
特にデコレーションには以下の制限があります：
・右寄せ、中央寄せができない
・フォントを指定できない
・ユーザー環境に依存する部分が大きい
同じようにVSCode拡張機能でデコレーション周りで苦戦している方の参考になれば幸いです。
拡張機能はGitHubで公開しているので、興味があればぜひ使ってみてください。
https://github.com/dokonidemoiruhito/japanese-lyrics-editor
スポンサーサイト
