文字間隔をスライダー化

effects/base.js

@@ -133,6 +133,8 @@ export class BaseEffect {
      */
     calculateCoordinates(ctx, lines, metrics, lineSpacing, padding) {
         this.coordinates = [];
+        console.log(ctx.canvas.dataset.verticalSpacing);
+        const verticalLetterSpacing = parseFloat(ctx.canvas.dataset.verticalSpacing) || 1.3;
         
         if (ctx.canvas.dataset.vertical === 'true') {
             // 右端から開始（文字の右端がここに来るようにする）
@@ -157,10 +159,9 @@ export class BaseEffect {
                 
                 // 行の開始位置を中央揃えに
                 let charY = padding + (ctx.canvas.height - totalLineHeight - padding * 2) / 2;
-                
                 for (const char of line) {
                     const metrics = ctx.measureText(char);
-                    const charHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent * 1.3;
+                    const charHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent * verticalLetterSpacing;
                     const shouldRotate = this.isRotatableCharacter(char);
                     
                     // 文字の配置を調整
@@ -331,8 +332,9 @@ export class BaseEffect {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
         
-        // 縦書きモードの状態を保存
+        // 縦書きモードと文字間隔の状態を保存
         canvas.dataset.vertical = options.vertical;
+        canvas.dataset.verticalSpacing = options.verticalSpacing;
 
         // キャンバスサイズの設定
         const padding = this.getPadding();

index.html

@@ -106,6 +106,14 @@
                             <label class="form-check-label" for="verticalText">縦書き</label>
                         </div>
 
+                        <div class="mb-3" id="verticalSpacingContainer" style="display: none;">
+                            <label for="verticalSpacing" class="form-label">文字間隔</label>
+                            <input type="range" class="form-range" id="verticalSpacing" min="1" max="2" step="0.1" value="1.3">
+                            <div class="text-center">
+                                <span id="verticalSpacingValue">1.3</span>
+                            </div>
+                        </div>
+
                         <div class="effect-grid">
                             <!-- プリセットギャラリーはJavaScriptで動的に追加されます -->
                         </div>

index.js

@@ -43,12 +43,14 @@ async function textToImage(text, fontFamily, fontSize = '48px', effectType = 'si
         await document.fonts.load(`${fontSize} "${fontFamily}"`);
         const fontSizeNum = parseInt(fontSize);
         const verticalText = document.getElementById('verticalText').checked;
+        const verticalSpacing = document.getElementById('verticalSpacing').value;
         
         // エフェクトを適用
         const imageUrl = await applyEffect(effectType, text, {
             font: fontFamily,
             fontSize: fontSizeNum,
-            vertical: verticalText
+            vertical: verticalText,
+            verticalSpacing: verticalSpacing
         });
 
         return imageUrl;
@@ -149,7 +151,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
     
     // テキストとフォントサイズの変更時にすべてのプリセットを再描画
-    [textInput, fontSizeInput, verticalTextInput].forEach(element => {
+    [textInput, fontSizeInput, verticalTextInput, verticalSpacing].forEach(element => {
         element.addEventListener('input', () => {
             debounceRender(renderAllPresets);
         });
@@ -158,3 +160,16 @@ document.addEventListener('DOMContentLoaded', async () => {
     // 初期描画
     await renderAllPresets();
 });
+
+// 縦書きモードの切り替え時の処理
+document.getElementById('verticalText').addEventListener('change', function(e) {
+    const spacingContainer = document.getElementById('verticalSpacingContainer');
+    spacingContainer.style.display = e.target.checked ? 'block' : 'none';
+    // ロゴの再生成処理を呼び出す
+});
+
+// 文字間隔の変更時の処理
+document.getElementById('verticalSpacing').addEventListener('input', function(e) {
+    document.getElementById('verticalSpacingValue').textContent = e.target.value;
+    // ロゴの再生成処理を呼び出す
+});