Init

README.md

@@ -1,8 +1,8 @@
 ---
 title: LogoMaker
-emoji: 👀
+emoji: 🏃
 colorFrom: yellow
-colorTo: blue
+colorTo: red
 sdk: static
 pinned: false
 license: other

effects.js

@@ -0,0 +1,67 @@
+import { SimpleEffect } from './effects/simple.js';
+import { NeonEffect } from './effects/neon.js';
+import { GoldEffect } from './effects/gold.js';
+import { MultilineNeonEffect } from './effects/multiline-neon.js';
+import { GradientEffect } from './effects/gradient.js';
+import { MetallicEffect } from './effects/metallic.js';
+
+// エフェクトのインスタンスを作成
+const effects = {
+    simple: new SimpleEffect(),
+    neon: new NeonEffect(),
+    gold: new GoldEffect(),
+    multilineNeon: new MultilineNeonEffect(),
+    gradient: new GradientEffect(),
+    metallic: new MetallicEffect(),
+};
+
+/**
+ * 利用可能なエフェクトのリストを返す
+ * @returns {Array<{name: string, description: string}>}
+ */
+export function getAvailableEffects() {
+    return [
+        {
+            name: 'simple',
+            description: 'シンプルなテキストレンダリング'
+        },
+        {
+            name: 'neon',
+            description: 'ネオングローエフェクト'
+        },
+        {
+            name: 'gold',
+            description: 'ゴールドエフェクト'
+        },
+        {
+            name: 'multilineNeon',
+            description: 'マルチラインネオンエフェクト'
+        },
+        {
+            name: 'gradient',
+            description: 'グラデーションエフェクト'
+        },
+        {
+            name: 'metallic',
+            description: 'メタリック調エフェクト'
+        }
+    ];
+}
+
+/**
+ * テキストにエフェクトを適用して画像URLを生成
+ * @param {string} effectType - エフェクトの種類
+ * @param {string} text - レンダリングするテキスト
+ * @param {Object} options - オプション
+ * @param {string} options.font - フォントファミリー
+ * @param {number} options.fontSize - フォントサイズ
+ * @returns {Promise<string>} - 生成された画像のData URL
+ */
+export async function applyEffect(effectType, text, options) {
+    const effect = effects[effectType];
+    if (!effect) {
+        throw new Error(`Unknown effect type: ${effectType}`);
+    }
+    
+    return effect.apply(text, options);
+}

effects/base.js

@@ -0,0 +1,387 @@
+/**
+ * エフェクト開発規約
+ * ================
+ * 
+ * 1. 基本方針
+ * -----------
+ * - BaseEffectクラスは全てのエフェクトの基底クラスとして機能します
+ * - 文字の配置や描画に関する基本ロジックは全てBaseEffectクラスで管理します
+ * - 継承先のエフェクトクラスでは、見た目に関する設定のみを行います
+ * 
+ * 2. 継承時のルール
+ * ----------------
+ * - getPaddingメソッドは継承先でオーバーライドしないでください
+ * - renderText, renderGlow, renderMainText, renderStrokeメソッドは継承先でオーバーライドしないでください
+ * - calculateSize, calculateCoordinatesメソッドは継承先でオーバーライドしないでください
+ * 
+ * 3. 継承先での実装
+ * ----------------
+ * 以下のメソッドのみを実装/カスタマイズしてください：
+ * 
+ * a) constructor
+ *    - グローエフェクト（this.glowOptions）の設定
+ *    - 縁取り（this.strokeOptions）の設定
+ * 
+ * b) setupContext
+ *    - フォントの基本設定（必須）
+ *    - グラデーションなどの塗りつぶしスタイルの設定
+ * 
+ * c) applySpecialEffect
+ *    - 追加の特殊効果が必要な場合のみ実装
+ *    - 基本的な描画が完了した後に呼び出されます
+ * 
+ * 4. オプション設定
+ * ----------------
+ * glowOptions = {
+ *   color: string,    // グローの色（16進カラーコード）
+ *   blur: number,     // ぼかしの強さ
+ *   iterations: number // 重ねがけの回数
+ * }
+ * 
+ * strokeOptions = {
+ *   color: string,    // 縁取りの色（16進カラーコード）
+ *   width: number     // 縁取りの太さ
+ * }
+ * 
+ * 5. 縦書き対応
+ * ------------
+ * - 縦書きの処理は全てBaseEffectクラスで管理されています
+ * - 継承先で縦書き用の特別な処理は実装しないでください
+ */
+
+/**
+ * 基本的なエフェクトクラス
+ */
+export class BaseEffect {
+    constructor() {
+        this.coordinates = [];
+    }
+
+    /**
+     * @param {CanvasRenderingContext2D} ctx - キャンバスコンテキスト
+     * @param {string} text - レンダリングするテキスト
+     * @param {Object} options - オプション
+     * @param {string} options.font - フォントファミリー
+     * @param {number} options.fontSize - フォントサイズ
+     * @param {boolean} options.vertical - 縦書きモード
+     * @returns {Object} - キャンバスのサイズ情報
+     */
+    calculateSize(ctx, text, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        
+        // テキストを行に分割
+        const lines = text.split('\n');
+        let maxWidth = 0;
+        let totalHeight = 0;
+        const lineMetrics = [];
+
+        // 各行のメトリクスを計算
+        for (const line of lines) {
+            const metrics = ctx.measureText(line);
+            const lineHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+            maxWidth = Math.max(maxWidth, metrics.width);
+            totalHeight += lineHeight;
+            lineMetrics.push({ metrics, lineHeight });
+        }
+
+        // 行間を追加（行数 - 1）* 行間スペース
+        const lineSpacing = options.fontSize * 0.2;
+        totalHeight += (lines.length - 1) * lineSpacing;
+        
+        // 縦書きモードの場合、幅と高さを入れ替え
+        if (options.vertical) {
+            // 縦書きの場合、最大幅は各文字の高さの最大値を使用
+            const maxCharHeight = Math.max(...lines.map(line => {
+                return Math.max(...[...line].map(char => {
+                    const metrics = ctx.measureText(char);
+                    return metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+                }));
+            }));
+            
+            return {
+                width: totalHeight,
+                height: maxWidth * 1.5,
+                metrics: lineMetrics,
+                lineSpacing,
+                lines,
+                maxCharHeight
+            };
+        }
+        
+        return {
+            width: maxWidth,
+            height: totalHeight,
+            metrics: lineMetrics,
+            lineSpacing,
+            lines
+        };
+    }
+
+    /**
+     * 特殊文字（縦書き時に回転が必要な文字）かどうかを判定
+     * @private
+     */
+    isRotatableCharacter(char) {
+        // 長音記号、ハイフン、チルダ、マイナス記号など
+        const rotatableChars = ['ー', '-', '～', '―', '‐', '−', '─', 'ｰ'];
+        return rotatableChars.includes(char);
+    }
+
+    /**
+     * 文字の座標を計算
+     * @private
+     */
+    calculateCoordinates(ctx, lines, metrics, lineSpacing, padding) {
+        this.coordinates = [];
+        
+        if (ctx.canvas.dataset.vertical === 'true') {
+            // 右端から開始（文字の右端がここに来るようにする）
+            let currentX = ctx.canvas.width - padding/2;  // パディングを半分にして右に寄せる
+            
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const { lineHeight } = metrics[i];
+                const lineCoords = [];
+                
+                // 各行の高さを計算
+                let totalLineHeight = 0;
+                for (const char of line) {
+                    const metrics = ctx.measureText(char);
+                    const charHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+                    const shouldRotate = this.isRotatableCharacter(char);
+                    totalLineHeight += shouldRotate ? metrics.width : charHeight;
+                    if (char !== line[line.length - 1]) {
+                        totalLineHeight += lineSpacing;
+                    }
+                }
+                
+                // 行の開始位置を中央揃えに
+                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 shouldRotate = this.isRotatableCharacter(char);
+                    
+                    // 文字の配置を調整
+                    if (shouldRotate) {
+                        lineCoords.push({
+                            char,
+                            x: currentX - charHeight,
+                            y: charY + metrics.width/2,
+                            width: metrics.width,
+                            height: charHeight,
+                            rotate: true
+                        });
+                        charY += metrics.width + lineSpacing;
+                    } else {
+                        lineCoords.push({
+                            char,
+                            x: currentX - metrics.width - metrics.width/4,  // 通常文字を少し左に寄せる
+                            y: charY - metrics.width/8,
+                            width: metrics.width,
+                            height: charHeight,
+                            rotate: false
+                        });
+                        charY += charHeight + lineSpacing;
+                    }
+                }
+                
+                this.coordinates.push(lineCoords);
+                currentX -= lineHeight + lineSpacing;
+            }
+        } else {
+            let currentY = padding;
+            
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const { lineHeight } = metrics[i];
+                const lineWidth = ctx.measureText(line).width;
+                
+                // 水平方向の中央揃え
+                const x = (ctx.canvas.width - lineWidth) / 2;
+                
+                this.coordinates.push([{
+                    char: line,
+                    x: x,
+                    y: currentY,
+                    width: lineWidth,
+                    height: lineHeight,
+                    rotate: false
+                }]);
+                
+                currentY += lineHeight + lineSpacing;
+            }
+        }
+    }
+
+    /**
+     * テキストの描画
+     */
+    async renderText(ctx, lines, metrics, lineSpacing, padding) {
+        // 座標を計算
+        this.calculateCoordinates(ctx, lines, metrics, lineSpacing, padding);
+        
+        // グローエフェクトを描画（設定されている場合）
+        await this.renderGlow(ctx);
+        
+        // メインのテキストを描画
+        await this.renderMainText(ctx);
+        
+        // 縁取りを描画（設定されている場合）
+        await this.renderStroke(ctx);
+    }
+
+    /**
+     * グローエフェクトの描画
+     */
+    async renderGlow(ctx) {
+        if (!this.glowOptions) return;
+
+        const { color, blur, iterations } = this.glowOptions;
+        ctx.shadowColor = color;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+
+        for (let j = 0; j < iterations; j++) {
+            ctx.shadowBlur = blur - (blur * j / iterations);
+            ctx.fillStyle = `rgba(${this.hexToRgb(color)}, ${1/iterations})`;
+            
+            for (const lineCoords of this.coordinates) {
+                for (const coord of lineCoords) {
+                    ctx.save();
+                    if (coord.rotate) {
+                        ctx.translate(coord.x, coord.y);
+                        ctx.rotate(Math.PI/2);
+                        ctx.fillText(coord.char, -coord.width/2, 0);
+                    } else {
+                        ctx.fillText(coord.char, coord.x, coord.y);
+                    }
+                    ctx.restore();
+                }
+            }
+        }
+        
+        // シャドウをリセット
+        ctx.shadowBlur = 0;
+        ctx.shadowColor = 'transparent';
+    }
+
+    /**
+     * メインテキストの描画
+     */
+    async renderMainText(ctx) {
+        for (const lineCoords of this.coordinates) {
+            for (const coord of lineCoords) {
+                ctx.save();
+                if (coord.rotate) {
+                    ctx.translate(coord.x, coord.y);
+                    ctx.rotate(Math.PI/2);
+                    ctx.fillText(coord.char, -coord.width/2, 0);
+                } else {
+                    ctx.fillText(coord.char, coord.x, coord.y);
+                }
+                ctx.restore();
+            }
+        }
+    }
+
+    /**
+     * 縁取りの描画
+     */
+    async renderStroke(ctx) {
+        if (!this.strokeOptions) return;
+
+        const { color, width } = this.strokeOptions;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+
+        for (const lineCoords of this.coordinates) {
+            for (const coord of lineCoords) {
+                ctx.save();
+                if (coord.rotate) {
+                    ctx.translate(coord.x, coord.y);
+                    ctx.rotate(Math.PI/2);
+                    ctx.strokeText(coord.char, -coord.width/2, 0);
+                } else {
+                    ctx.strokeText(coord.char, coord.x, coord.y);
+                }
+                ctx.restore();
+            }
+        }
+    }
+
+    /**
+     * 16進カラーコードをRGB形式に変換
+     */
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? 
+            `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : 
+            '0, 0, 0';
+    }
+
+    /**
+     * エフェクトを適用する
+     * @param {string} text - レンダリングするテキスト
+     * @param {Object} options - オプション
+     * @returns {Promise<string>} - 生成された画像のData URL
+     */
+    async apply(text, options) {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 縦書きモードの状態を保存
+        canvas.dataset.vertical = options.vertical;
+
+        // キャンバスサイズの設定
+        const padding = this.getPadding();
+        const { width, height, metrics, lineSpacing, lines } = this.calculateSize(ctx, text, options);
+        
+        canvas.width = width + padding * 2;
+        canvas.height = height + padding * 2;
+
+        // 背景を透明に
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // テキストの基本設定
+        await this.setupContext(ctx, options);
+
+        // テキストの描画
+        await this.renderText(ctx, lines, metrics, lineSpacing, padding);
+
+        // エフェクト固有の処理
+        await this.applySpecialEffect(ctx, canvas, options);
+
+        return canvas.toDataURL('image/png');
+    }
+
+    /**
+     * パディング値を取得
+     * @returns {number} パディング値
+     */
+    getPadding() {
+        return 60;
+    }
+
+    /**
+     * コンテキストの基本設定
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {Object} options 
+     */
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.fillStyle = '#000000';
+        ctx.textBaseline = 'top';
+    }
+
+    /**
+     * エフェクト固有の処理
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {HTMLCanvasElement} canvas 
+     * @param {Object} options 
+     */
+    async applySpecialEffect(ctx, canvas, options) {
+        // デフォルトでは何もしない
+    }
+} 

effects/gold.js

@@ -0,0 +1,28 @@
+import { BaseEffect } from './base.js';
+
+export class GoldEffect extends BaseEffect {
+    constructor() {
+        super();
+        this.glowOptions = {
+            color: '#ffd700',
+            blur: 15,
+            iterations: 10
+        };
+        this.strokeOptions = {
+            color: '#b8860b',
+            width: 2
+        };
+    }
+
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.textBaseline = 'top';
+        
+        // ゴールドグラデーションの作成
+        const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+        gradient.addColorStop(0, '#ffd700');
+        gradient.addColorStop(0.5, '#ffb700');
+        gradient.addColorStop(1, '#ffd700');
+        ctx.fillStyle = gradient;
+    }
+} 

effects/gradient.js

@@ -0,0 +1,19 @@
+import { BaseEffect } from './base.js';
+
+export class GradientEffect extends BaseEffect {
+    constructor() {
+        super();
+    }
+
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.textBaseline = 'top';
+        
+        // グラデーションの作成
+        const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
+        gradient.addColorStop(0, '#ff0000');
+        gradient.addColorStop(0.5, '#00ff00');
+        gradient.addColorStop(1, '#0000ff');
+        ctx.fillStyle = gradient;
+    }
+} 

effects/metallic.js

@@ -0,0 +1,28 @@
+import { BaseEffect } from './base.js';
+
+export class MetallicEffect extends BaseEffect {
+    constructor() {
+        super();
+        this.glowOptions = {
+            color: '#c0c0c0',
+            blur: 15,
+            iterations: 10
+        };
+        this.strokeOptions = {
+            color: '#808080',
+            width: 1.5
+        };
+    }
+
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.textBaseline = 'top';
+        
+        // メタリックグラデーションの作成
+        const gradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+        gradient.addColorStop(0, '#e8e8e8');
+        gradient.addColorStop(0.5, '#a0a0a0');
+        gradient.addColorStop(1, '#c0c0c0');
+        ctx.fillStyle = gradient;
+    }
+} 

effects/multiline-neon.js

@@ -0,0 +1,38 @@
+import { BaseEffect } from './base.js';
+
+export class MultilineNeonEffect extends BaseEffect {
+    constructor() {
+        super();
+        this.glowOptions = {
+            color: '#00ffff',
+            blur: 25,
+            iterations: 25
+        };
+        this.strokeOptions = {
+            color: '#ffffff',
+            width: 0.5
+        };
+    }
+
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.textBaseline = 'top';
+        ctx.fillStyle = '#00ffff'; // シアン色のメインカラー
+    }
+
+    async applySpecialEffect(ctx, canvas, options) {
+        // 追加のネオン効果（オプション）
+        ctx.globalCompositeOperation = 'lighter';
+        ctx.shadowBlur = 10;
+        ctx.shadowColor = '#00ffff';
+        ctx.globalAlpha = 0.3;
+        
+        // 既に描画されたテキストの上に薄く重ねて光る効果を追加
+        await this.renderMainText(ctx);
+        
+        // 設定を元に戻す
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.shadowBlur = 0;
+        ctx.globalAlpha = 1.0;
+    }
+} 

effects/neon.js

@@ -0,0 +1,24 @@
+import { BaseEffect } from './base.js';
+
+export class NeonEffect extends BaseEffect {
+    constructor() {
+        super();
+        // グローエフェクトの設定
+        this.glowOptions = {
+            color: '#ff69b4',
+            blur: 20,
+            iterations: 20
+        };
+        // 縁取りの設定
+        this.strokeOptions = {
+            color: '#ffffff',
+            width: 0.5
+        };
+    }
+
+    async setupContext(ctx, options) {
+        ctx.font = `${options.fontSize}px "${options.font}"`;
+        ctx.textBaseline = 'top';
+        ctx.fillStyle = '#ff69b4'; // メインのテキストカラー
+    }
+} 

effects/simple.js

@@ -0,0 +1,6 @@
+import { BaseEffect } from './base.js';
+
+export class SimpleEffect extends BaseEffect {
+    // シンプルエフェクトは基本実装をそのまま使用するため、
+    // オーバーライドする必要がありません
+} 

index.html

@@ -1,19 +1,119 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ロゴジェネレーター</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+    <script type="module" src="effects.js"></script>
+    <script type="module" src="index.js"></script>
+</head>
+
+<body>
+    <div class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="h4 mb-0">ロゴジェネレーター</h2>
+                    </div>
+                    <div class="card-body">
+                        <div class="mb-3">
+                            <label for="textInput" class="form-label">テキスト</label>
+                            <textarea class="form-control" id="textInput" rows="3" placeholder="テキストを入力してください">プレビュー</textarea>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="googleFontInput" class="form-label">フォント</label>
+                            <select name="googleFontInput" class="form-select" id="googleFontInput">
+                                <option>Aoboshi One</option>
+                                <option>BIZ UDGothic</option>
+                                <option>BIZ UDMincho</option>
+                                <option>BIZ UDPGothic</option>
+                                <option>BIZ UDPMincho</option>
+                                <option>Cherry Bomb One</option>
+                                <option>Chokokutai</option>
+                                <option>Darumadrop One</option>
+                                <option>Dela Gothic One</option>
+                                <option>DotGothic16</option>
+                                <option>Hachi Maru Pop</option>
+                                <option>Hina Mincho</option>
+                                <option>IBM Plex Sans JP</option>
+                                <option>Kaisei Decol</option>
+                                <option>Kaisei HarunoUmi</option>
+                                <option>Kaisei Opti</option>
+                                <option>Kaisei Tokumin</option>
+                                <option>Kiwi Maru</option>
+                                <option>Klee One</option>
+                                <option>Kosugi</option>
+                                <option>Kosugi Maru</option>
+                                <option>M PLUS 1</option>
+                                <option>M PLUS 1 Code</option>
+                                <option>M PLUS 1p</option>
+                                <option>M PLUS 2</option>
+                                <option>M PLUS Rounded 1c</option>
+                                <option selected="selected">Mochiy Pop One</option>
+                                <option>Mochiy Pop P One</option>
+                                <option>Monomaniac One</option>
+                                <option>Murecho</option>
+                                <option>New Tegomin</option>
+                                <option>Noto Sans JP</option>
+                                <option>Noto Serif JP</option>
+                                <option>Palette Mosaic</option>
+                                <option>Potta One</option>
+                                <option>Rampart One</option>
+                                <option>Reggae One</option>
+                                <option>Rock 3D</option>
+                                <option>RocknRoll One</option>
+                                <option>Sawarabi Gothic</option>
+                                <option>Sawarabi Mincho</option>
+                                <option>Shippori Antique</option>
+                                <option>Shippori Antique B1</option>
+                                <option>Shippori Mincho</option>
+                                <option>Shippori Mincho B1</option>
+                                <option>Shizuru</option>
+                                <option>Slackside One</option>
+                                <option>Stick</option>
+                                <option>Train One</option>
+                                <option>Tsukimi Rounded</option>
+                                <option>Yomogi</option>
+                                <option>Yuji Boku</option>
+                                <option>Yuji Hentaigana Akari</option>
+                                <option>Yuji Hentaigana Akebono</option>
+                                <option>Yuji Mai</option>
+                                <option>Yuji Syuku</option>
+                                <option>Yusei Magic</option>
+                                <option>Zen Antique</option>
+                                <option>Zen Antique Soft</option>
+                                <option>Zen Kaku Gothic Antique</option>
+                                <option>Zen Kaku Gothic New</option>
+                                <option>Zen Kurenaido</option>
+                                <option>Zen Maru Gothic</option>
+                                <option>Zen Old Mincho</option>
+                            </select>
+                        </div>
+
+                        <div class="mb-3 d-none">
+                            <label for="fontSize" class="form-label">フォントサイズ</label>
+                            <input type="number" class="form-control" id="fontSize" value="128" min="8" max="128">
+                        </div>
+
+                        <div class="mb-3 form-switch">
+                            <input type="checkbox" class="form-check-input" id="verticalText" role="switch">
+                            <label class="form-check-label" for="verticalText">縦書き</label>
+                        </div>
+
+                        <div class="effect-grid">
+                            <!-- プリセットギャラリーはJavaScriptで動的に追加されます -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

index.js

@@ -0,0 +1,160 @@
+import { applyEffect, getAvailableEffects } from './effects.js';
+
+// フォントの読み込みを管理する関数
+async function loadGoogleFont(fontFamily) {
+    // フォントファミリー名を正しく整形
+    const formattedFamily = fontFamily.replace(/ /g, '+');
+    
+    // Google Fonts APIのURLを構築
+    const url = `https://fonts.googleapis.com/css2?family=${formattedFamily}&display=swap`;
+    
+    // 既存のリンクタグがあれば削除
+    const existingLink = document.querySelector(`link[href*="${formattedFamily}"]`);
+    if (existingLink) {
+        existingLink.remove();
+    }
+
+    // 新しいリンクタグを追加
+    const link = document.createElement('link');
+    link.href = url;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+
+    // フォントの読み込みを待つ
+    await new Promise((resolve, reject) => {
+        link.onload = async () => {
+            try {
+                // フォントの読み込みを確認
+                await document.fonts.load(`16px "${fontFamily}"`);
+                // 少し待機して確実にフォントを利用可能にする
+                setTimeout(resolve, 100);
+            } catch (error) {
+                reject(error);
+            }
+        };
+        link.onerror = reject;
+    });
+}
+
+// テキストを画像に変換する関数を更新
+async function textToImage(text, fontFamily, fontSize = '48px', effectType = 'simple') {
+    console.debug(`テキスト描画開始: ${effectType}`, { text, fontFamily, fontSize });
+    try {
+        await document.fonts.load(`${fontSize} "${fontFamily}"`);
+        const fontSizeNum = parseInt(fontSize);
+        const verticalText = document.getElementById('verticalText').checked;
+        
+        // エフェクトを適用
+        const imageUrl = await applyEffect(effectType, text, {
+            font: fontFamily,
+            fontSize: fontSizeNum,
+            vertical: verticalText
+        });
+
+        return imageUrl;
+    } catch (error) {
+        console.error('フォント描画エラー:', error);
+        throw error;
+    }
+}
+
+// デバウンス関数の実装
+let renderTimeout = null;
+let isRendering = false;
+
+function debounceRender(callback, delay = 200) {
+    if (renderTimeout) {
+        clearTimeout(renderTimeout);
+    }
+    
+    if (isRendering) {
+        return;
+    }
+    
+    renderTimeout = setTimeout(async () => {
+        isRendering = true;
+        try {
+            await callback();
+        } finally {
+            isRendering = false;
+        }
+    }, delay);
+}
+
+// イベントリスナーの設定を更新
+document.addEventListener('DOMContentLoaded', async () => {
+    const fontSelect = document.getElementById('googleFontInput');
+    const textInput = document.getElementById('textInput');
+    const fontSizeInput = document.getElementById('fontSize');
+    const verticalTextInput = document.getElementById('verticalText');
+    const effectGrid = document.querySelector('.effect-grid');
+    
+    await loadGoogleFont(fontSelect.value);
+
+    // 縦書きモードの状態をグリッドに反映
+    verticalTextInput.addEventListener('change', (e) => {
+        effectGrid.dataset.vertical = e.target.checked;
+        renderAllPresets();
+    });
+
+    // すべてのプリセットを描画する関数
+    async function renderAllPresets() {
+        effectGrid.innerHTML = '';
+        const text = textInput.value || 'プレビュー';
+        const fontFamily = fontSelect.value;
+        const fontSize = fontSizeInput.value + 'px';
+
+        const effects = getAvailableEffects();
+        for (const effect of effects) {
+            try {
+                const imageUrl = await textToImage(text, fontFamily, fontSize, effect.name);
+                
+                const presetCard = document.createElement('div');
+                presetCard.className = 'effect-item';
+                presetCard.innerHTML = `
+                    <div class="effect-name">${effect.name}</div>
+                    <div class="preview-container">
+                        <img src="${imageUrl}" alt="${effect.name}">
+                    </div>
+                `;
+                
+                effectGrid.appendChild(presetCard);
+            } catch (error) {
+                console.error(`プリセット ${effect.name} の描画エラー:`, error);
+                
+                const errorCard = document.createElement('div');
+                errorCard.className = 'effect-item error';
+                errorCard.innerHTML = `
+                    <div class="effect-name text-danger">${effect.name}</div>
+                    <div class="preview-container">
+                        <div class="text-danger">
+                            <small>エラー: ${error.message}</small>
+                        </div>
+                    </div>
+                `;
+                effectGrid.appendChild(errorCard);
+            }
+        }
+    }
+
+    // フォント変更時の処理
+    fontSelect.addEventListener('change', async (e) => {
+        try {
+            const fontFamily = e.target.value;
+            await loadGoogleFont(fontFamily);
+            await renderAllPresets();
+        } catch (error) {
+            console.error('フォント読み込みエラー:', error);
+        }
+    });
+    
+    // テキストとフォントサイズの変更時にすべてのプリセットを再描画
+    [textInput, fontSizeInput, verticalTextInput].forEach(element => {
+        element.addEventListener('input', () => {
+            debounceRender(renderAllPresets);
+        });
+    });
+
+    // 初期描画
+    await renderAllPresets();
+});

styles.css

@@ -0,0 +1,117 @@
+.preview-container {
+    position: relative;
+    padding: 1rem;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: repeating-conic-gradient(#80808010 0% 25%, transparent 0% 50%) 50% / 20px 20px;
+}
+
+.preview-container img {
+    max-width: 100%;
+    max-height: 300px;
+    height: auto;
+    object-fit: contain;
+}
+
+.effect-grid {
+    display: grid;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+/* 横書き時のグリッドレイアウト */
+.effect-grid:not([data-vertical="true"]) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* 縦書き時のグリッドレイアウト */
+.effect-grid[data-vertical="true"] {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+.effect-item {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.effect-name {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    font-weight: 500;
+}
+
+.effect-item.error {
+    background: #fff3f3;
+    border-color: #ffcdd2;
+}
+
+.text-danger {
+    color: #dc3545;
+}
+
+/* エフェクトレンダリング用のスタイル */
+.effect-renderer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.effect-renderer canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* パーティクルエフェクト用のスタイル */
+.particle-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* 3Dエフェクト用のスタイル */
+.three-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
+/* アニメーションエフェクト用のスタイル */
+@keyframes sparkle {
+    0%, 100% { opacity: 0; }
+    50% { opacity: 1; }
+}
+
+@keyframes fire {
+    0% { transform: translateY(0) scale(1); }
+    100% { transform: translateY(-20px) scale(0.8); opacity: 0; }
+}
+
+@keyframes electric {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+@keyframes underwater {
+    0% { transform: translateY(0) translateX(0); }
+    50% { transform: translateY(-10px) translateX(5px); }
+    100% { transform: translateY(0) translateX(0); }
+}