色反転の実装に成功

index.html

@@ -69,6 +69,12 @@
                                         ダミー
                                     </label>
                                 </div>
+                                <div class="btn-check-wrapper">
+                                    <input type="checkbox" class="btn-check" name="postProcess" id="postProcessInvert" value="invert">
+                                    <label class="btn btn-outline-success" for="postProcessInvert">
+                                        色反転
+                                    </label>
+                                </div>
                             </div>
                         </div>
 

index.js

@@ -1,5 +1,6 @@
 import { applyEffect, getAvailableEffects } from './effects.js';
 import { DummyPostProcess } from './postprocess/dummy.js';
+import { InvertPostProcess } from './postprocess/invert.js';
 import { BasePostProcess } from './postprocess/base.js';
 
 const tagDisplayNames = {
@@ -227,7 +228,8 @@ function debounceRender(callback, delay = 200) {
 
 // ポストプロセス処理のインスタンスを作成
 const postProcessors = {
-    dummy: new DummyPostProcess()
+    dummy: new DummyPostProcess(),
+    invert: new InvertPostProcess()
 };
 
 /**
@@ -289,9 +291,56 @@ async function updatePreview(effectType) {
     }
 }
 
-// イベントリスナーを追加（ポストプロセスの変更時には何もしない）
+// すべてのプリセットを描画する関数
+async function renderAllPresets() {
+    const effectGrid = document.querySelector('.effect-grid');
+    const textInput = document.getElementById('textInput');
+    const fontSelect = document.getElementById('googleFontInput');
+    const fontSizeInput = document.getElementById('fontSize');
+
+    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.dataset.effect = effect.name;
+            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.dataset.effect = effect.name;
+            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);
+        }
+    }
+}
+
+// イベントリスナーを追加（ポストプロセスの変更時にすべてのプレビューを更新）
 document.getElementById('postProcessContainer').addEventListener('change', () => {
-    // 現時点では何もしない
+    renderAllPresets();
 });
 
 // イベントリスナーの設定を更新
@@ -503,48 +552,6 @@ document.addEventListener('DOMContentLoaded', async () => {
         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.dataset.effect = effect.name;
-                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.dataset.effect = effect.name;
-                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 {