postprocessのUIを個別ファイルに分離

index.html

@@ -63,38 +63,7 @@
                         <div class="mb-3">
                             <label class="form-label">ポストプロセス</label>
                             <div class="row g-2" id="postProcessContainer">
-                                <!-- ダミー -->
-                                <div class="col-md-6 col-lg-4">
-                                    <div class="card h-100">
-                                        <div class="card-header d-flex align-items-center">
-                                            <div class="form-check mb-0">
-                                                <input type="checkbox" class="form-check-input" name="postProcess" id="postProcessDummy" value="dummy">
-                                                <label class="form-check-label" for="postProcessDummy">
-                                                    ダミー
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="card-body">
-                                            <p class="text-muted mb-0"><small>設定はありません</small></p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- 色反転 -->
-                                <div class="col-md-6 col-lg-4">
-                                    <div class="card h-100">
-                                        <div class="card-header d-flex align-items-center">
-                                            <div class="form-check mb-0">
-                                                <input type="checkbox" class="form-check-input" name="postProcess" id="postProcessInvert" value="invert">
-                                                <label class="form-check-label" for="postProcessInvert">
-                                                    色反転
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div class="card-body">
-                                            <p class="text-muted mb-0"><small>設定はありません</small></p>
-                                        </div>
-                                    </div>
-                                </div>
+                                <!-- ダストプロセスのカードはJavaScriptで動的に生成されます -->
                             </div>
                         </div>
 

index.js

@@ -232,6 +232,44 @@ const postProcessors = {
     invert: new InvertPostProcess()
 };
 
+/**
+ * ポストプロセスのカードを生成
+ */
+function createPostProcessCard(processor) {
+    const div = document.createElement('div');
+    div.className = 'col-md-6 col-lg-4';
+    div.innerHTML = `
+        <div class="card h-100">
+            <div class="card-header d-flex align-items-center">
+                <div class="form-check mb-0">
+                    <input type="checkbox" class="form-check-input" name="postProcess" id="postProcess${processor.name}" value="${processor.name}">
+                    <label class="form-check-label" for="postProcess${processor.name}">
+                        ${processor.label}
+                    </label>
+                </div>
+            </div>
+            <div class="card-body">
+                ${processor.ui.template}
+            </div>
+        </div>
+    `;
+    return div;
+}
+
+/**
+ * ポストプロセスのUIを初期化
+ */
+function initializePostProcessUI() {
+    const container = document.getElementById('postProcessContainer');
+    container.innerHTML = '';
+
+    // 各プロセッサのカードを生成
+    Object.values(postProcessors).forEach(processor => {
+        const card = createPostProcessCard(processor);
+        container.appendChild(card);
+    });
+}
+
 /**
  * 選択されているポストプロセスを取得
  */
@@ -572,6 +610,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     // 初期描画
     await renderAllPresets();
+
+    // ポストプロセスのUI初期化
+    initializePostProcessUI();
 });
 
 // 縦書きモードの切り替え時の処理