Upload folder using huggingface_hub

.htaccess

@@ -0,0 +1,13 @@
+# Disable Laravel routing for this directory
+RewriteEngine Off
+
+# Allow directory browsing (optional)
+Options +Indexes
+
+# Set index file
+DirectoryIndex index.html
+
+# Set MIME types
+AddType text/html .html
+AddType text/css .css
+AddType application/javascript .js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 API Workflow Builder Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,228 @@
----
-title: Api Workflow Builder
-emoji: 🌖
-colorFrom: indigo
-colorTo: pink
-sdk: gradio
-sdk_version: 6.6.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚀 API Workflow Builder
+
+Visual page builder with API integration powered by GrapeJS and Supabase.
+
+## 📋 概要
+
+ドラッグ＆ドロップでAPIワークフロー画面を構築できるビジュアルエディタ。
+Shop11 APIと連携し、商品・顧客・査定データを簡単に操作できます。
+
+## ✨ 機能
+
+### 📦 ページビルダー
+- **ドラッグ＆ドロップ**: GrapeJSベースの直感的なエディタ
+- **リアルタイムプレビュー**: 編集内容をその場で確認
+- **Supabase連携**: ページデータをクラウドに保存
+- **HTML出力**: 作成したページをHTMLファイルとしてダウンロード
+
+### 🔌 APIブロック
+
+#### Shop11 API連携ブロック
+1. **地金チェック削除** (`gold-check-delete`)
+   - エンドポイント: `POST /api/shouhin/gold_check_id_delete`
+   - 商品IDを指定して地金チェックを削除
+
+2. **査定タイトル生成** (`satei-title`)
+   - エンドポイント: `GET /api/satei_func/create_title/{product_id}`
+   - 商品IDから査定タイトルを自動生成
+
+3. **メール送信** (`send-notification`)
+   - エンドポイント: `POST /api/notification/mail`
+   - 宛先・件名・本文を指定してメール送信
+
+4. **商品検索** (`product-search`)
+   - エンドポイント: `GET /api/auto_complete_refasta/ResultSearch`
+   - キーワードで商品を検索
+
+5. **商品データテーブル** (`product-data-table`)
+   - 商品データを検索してテーブル表示
+   - ソート・フィルタリング対応
+
+6. **顧客検索テーブル** (`customer-data-table`)
+   - 顧客名・電話番号で検索
+   - 顧客情報を一覧表示
+
+7. **査定検索テーブル** (`satei-data-table`)
+   - 査定データを検索・表示
+   - ステータス別バッジ表示
+
+8. **商品登録フォーム** (`product-register-form`)
+   - エンドポイント: `POST /api/shouhin/register`
+   - 新規商品をフォームから登録
+
+### 💾 データ永続化
+- **Supabase Tables**:
+  - `page_builder_pages`: ページデータ保存
+  - `api_execution_logs`: API実行履歴ログ
+- **LocalStorage**: エディタの自動保存
+
+## 🚀 使い方
+
+### 1. アクセス
+```
+http://localhost/shop11/public/page-builder/
+```
+
+### 2. ブロックを追加
+1. 左サイドバーから「Shop11 API」カテゴリを選択
+2. 使いたいブロックをキャンバスにドラッグ＆ドロップ
+3. ブロック内の入力フォームに値を入力
+4. ボタンをクリックしてAPI実行
+
+### 3. ページを保存
+1. ヘッダーの「💾 保存」ボタンをクリック
+2. ページ名を入力
+3. Supabaseに保存 + HTMLファイルをダウンロード
+
+### 4. ページを読込
+1. ヘッダーの「📂 読込」ボタンをクリック
+2. 過去に保存したページ一覧から選択
+3. エディタに読み込まれます
+
+### 5. プレビュー
+- 「👁️ プレビュー」ボタンで新しいタブで表示確認
+
+## 📁 ファイル構成
+
+```
+page-builder/
+├── index.html           # メインエディタ画面
+├── supabase-config.js   # Supabase接続設定
+├── api-functions.js     # API呼び出し関数
+├── .htaccess           # Apache設定
+└── README.md           # このファイル
+```
+
+## 🔧 技術スタック
+
+- **フロントエンド**: GrapeJS, Bootstrap 4.5.2, jQuery 3.5.1
+- **バックエンド**: Laravel (Shop11), Supabase
+- **データベース**: PostgreSQL (Supabase)
+- **ストレージ**: Supabase Storage (将来実装予定)
+
+## 🗄️ データベーススキーマ
+
+### page_builder_pages
+```sql
+CREATE TABLE page_builder_pages (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  name text NOT NULL,
+  html_content text,
+  css_content text,
+  components_json jsonb,
+  created_at timestamp with time zone DEFAULT now(),
+  updated_at timestamp with time zone DEFAULT now()
+);
+```
+
+### api_execution_logs
+```sql
+CREATE TABLE api_execution_logs (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  api_name text NOT NULL,
+  endpoint text NOT NULL,
+  request_data jsonb,
+  response_data jsonb,
+  status text CHECK (status IN ('success', 'error')),
+  executed_at timestamp with time zone DEFAULT now()
+);
+```
+
+## 🔐 Supabase設定
+
+### 環境変数
+- **SUPABASE_URL**: `https://rootomzbucovwdqsscqd.supabase.co`
+- **SUPABASE_ANON_KEY**: `eyJhbGci...` (supabase-config.jsに記載)
+
+### RLS (Row Level Security)
+現在はテスト用に全アクセス許可。本番環境では認証を追加してください。
+
+## 🎨 カスタマイズ
+
+### 新しいAPIブロックを追加
+
+1. **index.htmlに登録**:
+```javascript
+blockManager.add('my-custom-block', {
+    label: '新しいブロック',
+    category: 'Shop11 API',
+    content: '<div class="shop11-api-block">...</div>'
+});
+```
+
+2. **api-functions.jsに関数追加**:
+```javascript
+function myCustomFunction(button) {
+    const block = button.closest('.shop11-api-block');
+    // API呼び出し処理
+    fetch('/api/my-endpoint', {...})
+        .then(res => res.json())
+        .then(data => {
+            // Supabaseログ保存
+            if (window.saveApiLogToSupabase) {
+                saveApiLogToSupabase('API名', endpoint, requestData, data, 'success');
+            }
+        });
+}
+```
+
+3. **イベントリスナーに登録**:
+```javascript
+case 'myCustomAction':
+    myCustomFunction(e.target);
+    break;
+```
+
+## 📊 API実行ログの確認
+
+```javascript
+// 直近50件のログを取得
+getApiLogsFromSupabase(50).then(result => {
+    console.log(result.data);
+});
+```
+
+または、Supabase Dashboardで直接確認:
+```sql
+SELECT * FROM api_execution_logs 
+ORDER BY executed_at DESC 
+LIMIT 50;
+```
+
+## 🐛 トラブルシューティング
+
+### ブロックがドラッグできない
+- ブラウザのキャッシュをクリア
+- F5でページをリロード
+
+### APIエラーが発生する
+- CSRF Tokenが正しく設定されているか確認
+- Laravel側のルーティングを確認
+- ネットワークタブでHTTPステータスコードを確認
+
+### Supabaseに保存できない
+- Supabase接続情報が正しいか確認
+- RLSポリシーでアクセスが許可されているか確認
+- ブラウザコンソールでエラーメッセージを確認
+
+## 🚧 今後の拡張予定
+
+- [ ] Supabase Storageへのファイルアップロード
+- [ ] 認証機能の追加
+- [ ] ページバージョン管理
+- [ ] コラボレーション機能
+- [ ] カスタムコンポーネント作成UI
+- [ ] ワークフロー自動化
+- [ ] Hugging Face Spaceへのデプロイ
+
+## 📝 ライセンス
+
+MIT License (予定)
+
+## 👤 作者
+
+Created for API workflow automation and visual page building.
+
+## 📞 サポート
+
+問題が発生した場合は、ブラウザのコンソールログを確認してください。

api-functions.js

@@ -0,0 +1,540 @@
+// Shop11 API Functions
+// ページビルダーで作成したページで使用するAPI呼び出し関数
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('✅ Shop11 API Functions loaded');
+    
+    // すべてのAPIボタンにイベントリスナーを追加
+    document.addEventListener('click', function(e) {
+        const action = e.target.getAttribute('data-action');
+        if (!action) return;
+        
+        switch(action) {
+            case 'goldCheckDelete':
+                goldCheckDelete(e.target);
+                break;
+            case 'createSateiTitle':
+                createSateiTitle(e.target);
+                break;
+            case 'sendNotification':
+                sendNotification(e.target);
+                break;
+            case 'searchProduct':
+                searchProduct(e.target);
+                break;
+            case 'loadProductTable':
+                loadProductTable(e.target);
+                break;
+            case 'clearProductTable':
+                clearProductTable(e.target);
+                break;
+            case 'loadCustomerTable':
+                loadCustomerTable(e.target);
+                break;
+            case 'clearCustomerTable':
+                clearCustomerTable(e.target);
+                break;
+            case 'loadSateiTable':
+                loadSateiTable(e.target);
+                break;
+            case 'clearSateiTable':
+                clearSateiTable(e.target);
+                break;
+            case 'registerProduct':
+                registerProduct(e.target);
+                break;
+        }
+    });
+});
+
+// 地金チェック削除
+function goldCheckDelete(button) {
+    const block = button.closest('.shop11-api-block');
+    const productId = block.querySelector('.gold-product-id').value;
+    const resultDiv = block.querySelector('.gold-check-result');
+    
+    if (!productId) {
+        alert('商品IDを入力してください');
+        return;
+    }
+    
+    resultDiv.style.display = 'block';
+    resultDiv.innerHTML = '処理中...';
+    
+    const requestData = { product_id: productId };
+    
+    fetch('/api/shouhin/gold_check_id_delete', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify(requestData)
+    })
+    .then(res => res.json())
+    .then(data => {
+        resultDiv.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
+        
+        // Supabaseにログ保存
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase(
+                '地金チェック削除',
+                '/api/shouhin/gold_check_id_delete',
+                requestData,
+                data,
+                'success'
+            );
+        }
+    })
+    .catch(err => {
+        resultDiv.innerHTML = '<span style="color:red;">エラー: ' + err.message + '</span>';
+        
+        // Supabaseにエラーログ保存
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase(
+                '地金チェック削除',
+                '/api/shouhin/gold_check_id_delete',
+                requestData,
+                { error: err.message },
+                'error'
+            );
+        }
+    });
+}
+
+// 査定タイトル生成
+function createSateiTitle(button) {
+    const block = button.closest('.shop11-api-block');
+    const productId = block.querySelector('.satei-product-id').value;
+    const resultDiv = block.querySelector('.satei-title-result');
+    
+    if (!productId) {
+        alert('商品IDを入力してください');
+        return;
+    }
+    
+    resultDiv.style.display = 'block';
+    resultDiv.innerHTML = '生成中...';
+    
+    const endpoint = '/api/satei_func/create_title/' + productId;
+    const requestData = { product_id: productId };
+    
+    fetch(endpoint, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        resultDiv.innerHTML = '<strong>タイトル:</strong><br>' + (data.title || JSON.stringify(data, null, 2));
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('査定タイトル生成', endpoint, requestData, data, 'success');
+        }
+    })
+    .catch(err => {
+        resultDiv.innerHTML = '<span style="color:red;">エラー: ' + err.message + '</span>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('査定タイトル生成', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// メール送信
+function sendNotification(button) {
+    const block = button.closest('.shop11-api-block');
+    const to = block.querySelector('.mail-to').value;
+    const subject = block.querySelector('.mail-subject').value;
+    const body = block.querySelector('.mail-body').value;
+    const resultDiv = block.querySelector('.mail-result');
+    
+    if (!to || !subject || !body) {
+        alert('すべての項目を入力してください');
+        return;
+    }
+    
+    resultDiv.style.display = 'block';
+    resultDiv.innerHTML = '送信中...';
+    
+    const endpoint = '/api/notification/mail';
+    const requestData = { to, subject, body };
+    
+    fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify(requestData)
+    })
+    .then(res => res.json())
+    .then(data => {
+        resultDiv.innerHTML = '<span style="color:green;">✅ 送信完了</span><br><pre>' + JSON.stringify(data, null, 2) + '</pre>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('メール送信', endpoint, requestData, data, 'success');
+        }
+    })
+    .catch(err => {
+        resultDiv.innerHTML = '<span style="color:red;">❌ エラー: ' + err.message + '</span>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('メール送信', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// 商品検索
+function searchProduct(button) {
+    const block = button.closest('.shop11-api-block');
+    const keyword = block.querySelector('.search-keyword').value;
+    const resultDiv = block.querySelector('.search-result');
+    
+    if (!keyword) {
+        alert('検索キーワードを入力してください');
+        return;
+    }
+    
+    resultDiv.style.display = 'block';
+    resultDiv.innerHTML = '検索中...';
+    
+    const endpoint = '/api/auto_complete_refasta/ResultSearch?q=' + encodeURIComponent(keyword);
+    const requestData = { keyword };
+    
+    fetch(endpoint, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (Array.isArray(data) && data.length > 0) {
+            let html = '<ul style="list-style:none; padding:0;">';
+            data.forEach(item => {
+                html += '<li style="padding:10px; border-bottom:1px solid #eee;">' + 
+                       (item.label || item.name || JSON.stringify(item)) + '</li>';
+            });
+            html += '</ul>';
+            resultDiv.innerHTML = html;
+        } else {
+            resultDiv.innerHTML = '検索結果なし';
+        }
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('商品検索', endpoint, requestData, data, 'success');
+        }
+    })
+    .catch(err => {
+        resultDiv.innerHTML = '<span style="color:red;">エラー: ' + err.message + '</span>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('商品検索', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// 商品データテーブル読込
+function loadProductTable(button) {
+    const block = button.closest('.shop11-api-block');
+    const keyword = block.querySelector('.product-search-keyword').value;
+    const tableBody = block.querySelector('.product-table-body');
+    const infoDiv = block.querySelector('.product-table-info');
+    
+    if (!keyword) {
+        alert('検索キーワードを入力してください');
+        return;
+    }
+    
+    tableBody.innerHTML = '<tr><td colspan="7" class="text-center">🔍 検索中...</td></tr>';
+    
+    const endpoint = '/api/auto_complete_refasta/ResultSearch?q=' + encodeURIComponent(keyword);
+    const requestData = { keyword };
+    
+    fetch(endpoint, {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(res => res.json())
+    .then(data => {
+        if (Array.isArray(data) && data.length > 0) {
+            let html = '';
+            data.forEach((item, index) => {
+                html += '<tr>';
+                html += '<td>' + (item.product_id || item.id || index + 1) + '</td>';
+                html += '<td>' + (item.label || item.name || item.title || '-') + '</td>';
+                html += '<td>' + (item.brand || item.maker || '-') + '</td>';
+                html += '<td>' + (item.category || item.category_name || '-') + '</td>';
+                html += '<td class="text-right">' + (item.price ? '¥' + parseInt(item.price).toLocaleString() : '-') + '</td>';
+                html += '<td>' + getStatusBadge(item.status) + '</td>';
+                html += '<td>' +
+                       '<button class="btn btn-sm btn-info mr-1" onclick="alert(\'商品ID: ' + (item.product_id || item.id) + '\')">📝 詳細</button>' +
+                       '<button class="btn btn-sm btn-warning" onclick="alert(\'編集機能は準備中です\')">✏️ 編集</button>' +
+                       '</td>';
+                html += '</tr>';
+            });
+            tableBody.innerHTML = html;
+            infoDiv.innerHTML = '<small>✅ ' + data.length + '件の商品が見つかりました</small>';
+            
+            if (window.saveApiLogToSupabase) {
+                saveApiLogToSupabase('商品データテーブル読込', endpoint, requestData, { count: data.length }, 'success');
+            }
+        } else {
+            tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">📭 検索結果なし</td></tr>';
+            infoDiv.innerHTML = '<small>検索結果: 0件</small>';
+            
+            if (window.saveApiLogToSupabase) {
+                saveApiLogToSupabase('商品データテーブル読込', endpoint, requestData, { count: 0 }, 'success');
+            }
+        }
+    })
+    .catch(err => {
+        tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">❌ エラー: ' + err.message + '</td></tr>';
+        infoDiv.innerHTML = '<small class="text-danger">データ読込エラー</small>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('商品データテーブル読込', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// 商品テーブルクリア
+function clearProductTable(button) {
+    const block = button.closest('.shop11-api-block');
+    const keyword = block.querySelector('.product-search-keyword');
+    const tableBody = block.querySelector('.product-table-body');
+    const infoDiv = block.querySelector('.product-table-info');
+    
+    keyword.value = '';
+    tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr>';
+    infoDiv.innerHTML = '';
+}
+
+// ステータスバッジ生成
+function getStatusBadge(status) {
+    if (!status) return '<span class="badge badge-secondary">-</span>';
+    
+    const statusMap = {
+        '1': { label: '在庫あり', color: 'success' },
+        '2': { label: '予約中', color: 'warning' },
+        '3': { label: '売約済', color: 'danger' },
+        '4': { label: '出品中', color: 'info' },
+        '5': { label: '取り下げ', color: 'secondary' }
+    };
+    
+    const statusInfo = statusMap[status] || { label: status, color: 'secondary' };
+    return '<span class="badge badge-' + statusInfo.color + '">' + statusInfo.label + '</span>';
+}
+
+// 顧客データテーブル読込
+function loadCustomerTable(button) {
+    const block = button.closest('.shop11-api-block');
+    const keyword = block.querySelector('.customer-search-keyword').value;
+    const tableBody = block.querySelector('.customer-table-body');
+    const infoDiv = block.querySelector('.customer-table-info');
+    
+    if (!keyword) {
+        alert('検索キーワードを入力してください');
+        return;
+    }
+    
+    tableBody.innerHTML = '<tr><td colspan="7" class="text-center">🔍 検索中...</td></tr>';
+    
+    const endpoint = '/api/Eoc/search?keyword=' + encodeURIComponent(keyword);
+    const requestData = { keyword };
+    
+    fetch(endpoint, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' }
+    })
+    .then(res => res.json())
+    .then(data => {
+        const customers = Array.isArray(data) ? data : (data.data || []);
+        
+        if (customers.length > 0) {
+            let html = '';
+            customers.forEach(customer => {
+                html += '<tr>';
+                html += '<td>' + (customer.ecc_id || customer.id || '-') + '</td>';
+                html += '<td>' + (customer.name1 || customer.name || '-') + '</td>';
+                html += '<td>' + (customer.tel || customer.phone || '-') + '</td>';
+                html += '<td>' + (customer.mail1 || customer.email || '-') + '</td>';
+                html += '<td>' + (customer.zip1 || customer.zip || '-') + '</td>';
+                html += '<td>' + (customer.address1 || customer.address || '-') + '</td>';
+                html += '<td>' +
+                       '<button class="btn btn-sm btn-info mr-1" onclick="alert(\'顧客ID: ' + (customer.ecc_id || customer.id) + '\')">📋 詳細</button>' +
+                       '<button class="btn btn-sm btn-primary" onclick="alert(\'編集機能は準備中です\')">✏️ 編集</button>' +
+                       '</td>';
+                html += '</tr>';
+            });
+            tableBody.innerHTML = html;
+            infoDiv.innerHTML = '<small>✅ ' + customers.length + '件の顧客が見つかりました</small>';
+            
+            if (window.saveApiLogToSupabase) {
+                saveApiLogToSupabase('顧客検索テーブル', endpoint, requestData, { count: customers.length }, 'success');
+            }
+        } else {
+            tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">📭 検索結果なし</td></tr>';
+            infoDiv.innerHTML = '<small>検索結果: 0件</small>';
+        }
+    })
+    .catch(err => {
+        tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">❌ エラー: ' + err.message + '</td></tr>';
+        infoDiv.innerHTML = '<small class="text-danger">データ読込エラー</small>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('顧客検索テーブル', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// 顧客テーブルクリア
+function clearCustomerTable(button) {
+    const block = button.closest('.shop11-api-block');
+    block.querySelector('.customer-search-keyword').value = '';
+    block.querySelector('.customer-table-body').innerHTML = '<tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr>';
+    block.querySelector('.customer-table-info').innerHTML = '';
+}
+
+// 査定データテーブル読込
+function loadSateiTable(button) {
+    const block = button.closest('.shop11-api-block');
+    const keyword = block.querySelector('.satei-search-keyword').value;
+    const tableBody = block.querySelector('.satei-table-body');
+    const infoDiv = block.querySelector('.satei-table-info');
+    
+    if (!keyword) {
+        alert('検索キーワードを入力してください');
+        return;
+    }
+    
+    tableBody.innerHTML = '<tr><td colspan="7" class="text-center">🔍 検索中...</td></tr>';
+    
+    const endpoint = '/api/satei/search?keyword=' + encodeURIComponent(keyword);
+    const requestData = { keyword };
+    
+    fetch(endpoint, {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' }
+    })
+    .then(res => res.json())
+    .then(data => {
+        const sateiList = Array.isArray(data) ? data : (data.data || []);
+        
+        if (sateiList.length > 0) {
+            let html = '';
+            sateiList.forEach(satei => {
+                html += '<tr>';
+                html += '<td>' + (satei.id || '-') + '</td>';
+                html += '<td>' + (satei.product_name || satei.title || '-') + '</td>';
+                html += '<td>' + (satei.customer_name || satei.ecc_name || '-') + '</td>';
+                html += '<td class="text-right">' + (satei.price ? '¥' + parseInt(satei.price).toLocaleString() : '-') + '</td>';
+                html += '<td>' + (satei.satei_date || satei.created_at || '-') + '</td>';
+                html += '<td>' + getSateiStatusBadge(satei.status) + '</td>';
+                html += '<td>' +
+                       '<button class="btn btn-sm btn-info mr-1" onclick="alert(\'査定ID: ' + (satei.id) + '\')">📋 詳細</button>' +
+                       '<button class="btn btn-sm btn-warning" onclick="alert(\'編集機能は準備中です\')">✏️ 編集</button>' +
+                       '</td>';
+                html += '</tr>';
+            });
+            tableBody.innerHTML = html;
+            infoDiv.innerHTML = '<small>✅ ' + sateiList.length + '件の査定が見つかりました</small>';
+            
+            if (window.saveApiLogToSupabase) {
+                saveApiLogToSupabase('査定検索テーブル', endpoint, requestData, { count: sateiList.length }, 'success');
+            }
+        } else {
+            tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">📭 検索結果なし</td></tr>';
+            infoDiv.innerHTML = '<small>検索結果: 0件</small>';
+        }
+    })
+    .catch(err => {
+        tableBody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">❌ エラー: ' + err.message + '</td></tr>';
+        infoDiv.innerHTML = '<small class="text-danger">データ読込エラー</small>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('査定検索テーブル', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}
+
+// 査定テーブルクリア
+function clearSateiTable(button) {
+    const block = button.closest('.shop11-api-block');
+    block.querySelector('.satei-search-keyword').value = '';
+    block.querySelector('.satei-table-body').innerHTML = '<tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr>';
+    block.querySelector('.satei-table-info').innerHTML = '';
+}
+
+// 査定ステータスバッジ
+function getSateiStatusBadge(status) {
+    const statusMap = {
+        '1': { label: '査定中', color: 'info' },
+        '2': { label: '査定完了', color: 'success' },
+        '3': { label: '買取完了', color: 'primary' },
+        '4': { label: 'キ��ンセル', color: 'danger' }
+    };
+    const statusInfo = statusMap[status] || { label: status || '-', color: 'secondary' };
+    return '<span class="badge badge-' + statusInfo.color + '">' + statusInfo.label + '</span>';
+}
+
+// 商品登録
+function registerProduct(button) {
+    const block = button.closest('.shop11-api-block');
+    const form = block.querySelector('.product-register-form');
+    const resultDiv = block.querySelector('.register-result');
+    
+    const name = block.querySelector('.product-name').value;
+    const brand = block.querySelector('.product-brand').value;
+    const category = block.querySelector('.product-category').value;
+    const price = block.querySelector('.product-price').value;
+    const description = block.querySelector('.product-description').value;
+    const status = block.querySelector('.product-status').value;
+    
+    if (!name || !price) {
+        alert('商品名と価格は必須です');
+        return;
+    }
+    
+    resultDiv.style.display = 'block';
+    resultDiv.innerHTML = '💾 登録中...';
+    
+    const endpoint = '/api/shouhin/register';
+    const requestData = {
+        name: name,
+        brand: brand,
+        category: category,
+        price: price,
+        description: description,
+        status: status
+    };
+    
+    fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
+        },
+        body: JSON.stringify(requestData)
+    })
+    .then(res => res.json())
+    .then(data => {
+        resultDiv.innerHTML = '<div class="alert alert-success">✅ 商品を登録しました！<br>商品ID: ' + (data.product_id || data.id || '不明') + '</div>';
+        form.reset();
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('商品登録', endpoint, requestData, data, 'success');
+        }
+    })
+    .catch(err => {
+        resultDiv.innerHTML = '<div class="alert alert-danger">❌ エラー: ' + err.message + '</div>';
+        
+        if (window.saveApiLogToSupabase) {
+            saveApiLogToSupabase('商品登録', endpoint, requestData, { error: err.message }, 'error');
+        }
+    });
+}

app.py

@@ -0,0 +1,323 @@
+import gradio as gr
+import json
+import os
+from datetime import datetime
+
+# Gradio App for API Workflow Builder
+# Visual page builder with drag-and-drop interface
+
+def load_page_builder():
+    """Load the main page builder HTML"""
+    with open('index.html', 'r', encoding='utf-8') as f:
+        return f.read()
+
+def save_workflow(workflow_name, html_content, css_content):
+    """Save workflow to JSON file"""
+    if not workflow_name:
+        return "❌ ワークフロー名を入力してください"
+    
+    workflows_dir = 'workflows'
+    os.makedirs(workflows_dir, exist_ok=True)
+    
+    workflow_data = {
+        'name': workflow_name,
+        'html': html_content,
+        'css': css_content,
+        'created_at': datetime.now().isoformat(),
+        'updated_at': datetime.now().isoformat()
+    }
+    
+    filename = f"{workflows_dir}/{workflow_name}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.json"
+    
+    with open(filename, 'w', encoding='utf-8') as f:
+        json.dump(workflow_data, f, ensure_ascii=False, indent=2)
+    
+    return f"✅ ワークフロー保存完了: {filename}"
+
+def load_workflows():
+    """Load list of saved workflows"""
+    workflows_dir = 'workflows'
+    if not os.path.exists(workflows_dir):
+        return []
+    
+    workflows = []
+    for filename in os.listdir(workflows_dir):
+        if filename.endswith('.json'):
+            with open(f"{workflows_dir}/{filename}", 'r', encoding='utf-8') as f:
+                data = json.load(f)
+                workflows.append({
+                    'filename': filename,
+                    'name': data.get('name', 'Unknown'),
+                    'created_at': data.get('created_at', 'Unknown')
+                })
+    
+    return workflows
+
+def export_html(workflow_name, html_content, css_content):
+    """Export complete HTML file"""
+    full_html = f"""<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{workflow_name}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
+    <style>{css_content}</style>
+</head>
+<body>
+    {html_content}
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+</body>
+</html>"""
+    
+    output_dir = 'exports'
+    os.makedirs(output_dir, exist_ok=True)
+    
+    filename = f"{output_dir}/{workflow_name}_{datetime.now().strftime('%Y%m%d_%H%M%S')}.html"
+    
+    with open(filename, 'w', encoding='utf-8') as f:
+        f.write(full_html)
+    
+    return filename
+
+# Gradio Interface
+with gr.Blocks(title="🚀 API Workflow Builder", theme=gr.themes.Soft()) as app:
+    gr.Markdown("""
+    # 🚀 API Workflow Builder
+    
+    Visual page builder with drag-and-drop interface powered by GrapeJS.
+    Create API workflow screens without coding!
+    
+    ## ✨ Features
+    - 📦 Drag & Drop page builder
+    - 🔌 API integration blocks
+    - 💾 Save workflows to JSON/Supabase
+    - 📥 Export as HTML file
+    - 🎨 Visual styling editor
+    """)
+    
+    with gr.Tab("📝 Page Builder"):
+        gr.Markdown("### Visual Editor")
+        gr.Markdown("Open the editor below to start building your workflow pages.")
+        
+        # Page Builder iframe
+        page_builder_html = gr.HTML(
+            value="""
+            <div style="width: 100%; height: 800px; border: 2px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
+                <iframe 
+                    src="/file=index.html" 
+                    style="width: 100%; height: 100%; border: none;"
+                    sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+                ></iframe>
+            </div>
+            """,
+            label="Page Builder Editor"
+        )
+        
+        gr.Markdown("""
+        ### 使い方
+        1. 左サイドバーから要素をドラッグ＆ドロップ
+        2. 右サイドバーでスタイルをカスタマイズ
+        3. ヘッダーの「保存」ボタンでSupabaseに保存
+        4. 下の「エクスポート」タブからHTMLファイルをダウンロード
+        """)
+    
+    with gr.Tab("💾 Workflows"):
+        gr.Markdown("### 保存されたワークフロー")
+        
+        with gr.Row():
+            workflow_name_input = gr.Textbox(
+                label="ワークフロー名",
+                placeholder="my-workflow"
+            )
+            save_btn = gr.Button("💾 保存", variant="primary")
+        
+        save_status = gr.Textbox(label="保存ステータス", interactive=False)
+        
+        gr.Markdown("### ワークフロー一覧")
+        workflows_list = gr.JSON(label="保存済みワークフロー")
+        
+        refresh_btn = gr.Button("🔄 更新")
+        
+        # Event handlers
+        refresh_btn.click(
+            fn=lambda: load_workflows(),
+            outputs=workflows_list
+        )
+    
+    with gr.Tab("📥 Export"):
+        gr.Markdown("### HTMLエクスポート")
+        
+        with gr.Row():
+            export_name = gr.Textbox(
+                label="ファイル名",
+                placeholder="my-page"
+            )
+            html_input = gr.Textbox(
+                label="HTML Content",
+                placeholder="<div>...</div>",
+                lines=5
+            )
+            css_input = gr.Textbox(
+                label="CSS Content",
+                placeholder=".class { ... }",
+                lines=5
+            )
+        
+        export_btn = gr.Button("📥 HTMLエクスポート", variant="primary")
+        export_result = gr.File(label="ダウンロード")
+        
+        export_btn.click(
+            fn=export_html,
+            inputs=[export_name, html_input, css_input],
+            outputs=export_result
+        )
+    
+    with gr.Tab("⚙️ Settings"):
+        gr.Markdown("### API設定")
+        
+        with gr.Row():
+            with gr.Column():
+                supabase_url = gr.Textbox(
+                    label="Supabase URL",
+                    value="https://rootomzbucovwdqsscqd.supabase.co"
+                )
+                supabase_key = gr.Textbox(
+                    label="Supabase Anon Key",
+                    value="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
+                    type="password"
+                )
+            
+            with gr.Column():
+                api_base_url = gr.Textbox(
+                    label="API Base URL",
+                    value="https://your-api.com",
+                    placeholder="https://api.example.com"
+                )
+                api_auth_type = gr.Dropdown(
+                    label="認証タイプ",
+                    choices=["None", "Bearer Token", "API Key", "Basic Auth"],
+                    value="None"
+                )
+        
+        save_config_btn = gr.Button("💾 設定保存", variant="primary")
+        config_status = gr.Textbox(label="保存ステータス", interactive=False)
+    
+    with gr.Tab("📚 Documentation"):
+        gr.Markdown("""
+        ## 📖 ドキュメント
+        
+        ### 🎯 概要
+        API Workflow Builderは、ドラッグ＆ドロップでAPIワークフロー画面を作成できるノーコードツールです。
+        
+        ### 🚀 クイックスタート
+        
+        1. **Page Builderタブ**を開く
+        2. 左サイドバーから要素をドラッグ
+        3. キャンバスにドロップして配置
+        4. スタイルをカスタマイズ
+        5. 保存またはエクスポート
+        
+        ### 📦 利用可能なブロック
+        
+        #### Shop11 API カテゴリ
+        - **地金チェック削除**: 商品IDで地金チェックを削除
+        - **査定タイトル生成**: 商品IDから査定タイトルを生成
+        - **メール送信**: メール通知を送信
+        - **商品検索**: キーワードで商品を検索
+        - **商品データテーブル**: 商品データを検索・表示
+        - **顧客検索テーブル**: 顧客情報を検索・表示
+        - **査定検索テーブル**: 査定データを検索・表示
+        - **商品登録フォーム**: 新規商品を登録
+        
+        ### 🔌 API連携
+        
+        すべてのAPIブロックは自動的にSupabaseにログを保存します。
+        
+        ```javascript
+        // API呼び出し例
+        fetch('/api/your-endpoint', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        })
+        .then(res => res.json())
+        .then(data => {
+            // Supabaseログ保存
+            saveApiLogToSupabase('API名', endpoint, request, response, 'success');
+        });
+        ```
+        
+        ### 💾 データ保存
+        
+        ページデータは以下の形式でSupabaseに保存されます：
+        
+        ```json
+        {
+            "name": "page-name",
+            "html_content": "<div>...</div>",
+            "css_content": ".class {...}",
+            "components_json": {...},
+            "created_at": "2026-02-23T...",
+            "updated_at": "2026-02-23T..."
+        }
+        ```
+        
+        ### 🎨 カスタマイズ
+        
+        新しいブロックを追加するには：
+        
+        1. `index.html`の`blockManager.add()`に新しいブロックを登録
+        2. `api-functions.js`にAPI呼び出し関数を追加
+        3. イベントリスナーに`data-action`を登録
+        
+        ### 🔐 セキュリティ
+        
+        - Supabase RLSポリシーで行レベルセキュリティを設定
+        - API Keyは環境変数で管理
+        - CSRF Tokenを使用したAPI保護
+        
+        ### 📊 技術スタック
+        
+        - **Frontend**: GrapeJS, Bootstrap, jQuery
+        - **Backend**: Gradio (Python)
+        - **Database**: Supabase (PostgreSQL)
+        - **Hosting**: Hugging Face Spaces
+        
+        ### 🐛 トラブルシューティング
+        
+        **ブロックがドラッグできない**
+        - ブラウザのキャッシュをクリア
+        - ページをリロード
+        
+        **APIエラー**
+        - ネットワークタブでHTTPステータス確認
+        - Supabase接続情報を確認
+        
+        **保存できない**
+        - RLSポリシーを確認
+        - ブラウザコンソールのエラーログをチェック
+        
+        ### 📝 ライセンス
+        
+        MIT License
+        
+        ### 👤 作者
+        
+        Created for visual API workflow automation.
+        
+        ### 🔗 リンク
+        
+        - [GitHub Repository](https://github.com/your-repo)
+        - [Supabase Docs](https://supabase.com/docs)
+        - [GrapeJS Docs](https://grapesjs.com/docs/)
+        """)
+
+# Launch app
+if __name__ == "__main__":
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,
+        show_error=True
+    )

config.json

@@ -0,0 +1,58 @@
+{
+  "app": {
+    "name": "API Workflow Builder",
+    "version": "1.0.0",
+    "description": "Visual page builder for API workflows"
+  },
+  "supabase": {
+    "url": "https://rootomzbucovwdqsscqd.supabase.co",
+    "anonKey": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJvb3RvbXpidWNvdndkcXNzY3FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU4OTE4ODMsImV4cCI6MjA1MTQ2Nzg4M30.fYKOe-HPh4WUdvBhEJxakLWCMQBp4E90EDwARk7ucf8",
+    "tables": {
+      "pages": "page_builder_pages",
+      "logs": "api_execution_logs"
+    }
+  },
+  "api": {
+    "baseUrl": "https://your-api.com",
+    "authType": "none",
+    "authToken": "",
+    "endpoints": {
+      "productSearch": "/api/products/search",
+      "customerSearch": "/api/customers/search",
+      "assessmentSearch": "/api/assessments/search",
+      "productRegister": "/api/products/register",
+      "emailNotification": "/api/notifications/email"
+    }
+  },
+  "blocks": {
+    "categories": [
+      {
+        "id": "api",
+        "label": "API Blocks",
+        "enabled": true
+      },
+      {
+        "id": "ui",
+        "label": "UI Components",
+        "enabled": true
+      },
+      {
+        "id": "custom",
+        "label": "Custom Blocks",
+        "enabled": false
+      }
+    ]
+  },
+  "editor": {
+    "autosave": true,
+    "storageType": "local",
+    "canvas": {
+      "styles": [
+        "https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
+      ],
+      "scripts": [
+        "https://code.jquery.com/jquery-3.5.1.min.js"
+      ]
+    }
+  }
+}

index.html

@@ -0,0 +1,442 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API Workflow Builder - Visual Page Editor</title>
+    
+    <!-- GrapeJS CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/grapesjs-blocks-basic/dist/grapesjs-blocks-basic.min.css">
+    
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        #header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 30px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        #header h1 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 600;
+        }
+        
+        #header-buttons {
+            display: flex;
+            gap: 10px;
+        }
+        
+        #header button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.3s;
+        }
+        
+        .btn-preview {
+            background: #ffffff;
+            color: #667eea;
+        }
+        
+        .btn-save {
+            background: #48bb78;
+            color: white;
+        }
+        
+        .btn-load {
+            background: #4299e1;
+            color: white;
+        }
+        
+        .btn-clear {
+            background: #f56565;
+            color: white;
+        }
+        
+        #header button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+        
+        #gjs {
+            height: calc(100vh - 70px);
+            overflow: hidden;
+        }
+        
+        /* Shop11 API Block カスタムスタイル */
+        .shop11-api-block {
+            padding: 20px;
+            margin: 15px 0;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px;
+            background: #f7fafc;
+        }
+        
+        .shop11-api-block h3 {
+            margin-top: 0;
+            color: #2d3748;
+            border-bottom: 2px solid #667eea;
+            padding-bottom: 10px;
+        }
+        
+        .api-button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: background 0.3s;
+        }
+        
+        .api-button:hover {
+            background: #5a67d8;
+        }
+        
+        .api-result {
+            margin-top: 15px;
+            padding: 15px;
+            background: white;
+            border-radius: 5px;
+            border: 1px solid #e2e8f0;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        
+        /* モーダルスタイル */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 9999;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+        }
+        
+        .modal-content {
+            background-color: #fefefe;
+            margin: 5% auto;
+            padding: 30px;
+            border-radius: 10px;
+            width: 80%;
+            max-width: 600px;
+            max-height: 80vh;
+            overflow-y: auto;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        
+        .close:hover {
+            color: #000;
+        }
+        
+        .page-item {
+            padding: 15px;
+            margin: 10px 0;
+            background: #f7fafc;
+            border-radius: 5px;
+            border: 1px solid #e2e8f0;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .page-item:hover {
+            background: #edf2f7;
+            border-color: #667eea;
+        }
+    </style>
+</head>
+<body>
+    <div id="header">
+        <h1>🚀 API Workflow Builder</h1>
+        <div id="header-buttons">
+            <button class="btn-preview" onclick="previewPage()">👁️ プレビュー</button>
+            <button class="btn-load" onclick="loadPageList()">📂 読込</button>
+            <button class="btn-save" onclick="savePage()">💾 保存</button>
+            <button class="btn-clear" onclick="clearPage()">🗑️ クリア</button>
+        </div>
+    </div>
+    
+    <div id="gjs"></div>
+    
+    <!-- ページ一覧モーダル -->
+    <div id="pageListModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2>📂 保存されたページ</h2>
+            <div id="pageList"></div>
+        </div>
+    </div>
+    
+    <!-- Supabase JS SDK -->
+    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
+    
+    <!-- GrapeJS -->
+    <script src="https://unpkg.com/grapesjs"></script>
+    <script src="https://unpkg.com/grapesjs-blocks-basic"></script>
+    
+    <!-- Supabase Config -->
+    <script src="/shop11/public/page-builder/supabase-config.js"></script>
+    
+    <script>
+        // GrapeJS エディタ初期化
+        const editor = grapesjs.init({
+            container: '#gjs',
+            fromElement: false,
+            height: '100%',
+            width: 'auto',
+            plugins: ['gjs-blocks-basic'],
+            storageManager: {
+                type: 'local',
+                autosave: true,
+                autoload: true,
+                stepsBeforeSave: 1
+            },
+            canvas: {
+                styles: [
+                    'https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css'
+                ],
+                scripts: [
+                    'https://code.jquery.com/jquery-3.5.1.min.js',
+                    '/shop11/public/page-builder/api-functions.js'
+                ]
+            }
+        });
+        
+        // カスタムブロック登録
+        editor.on('load', function() {
+            const blockManager = editor.BlockManager;
+            
+            // 地金チェック削除ブロック
+            blockManager.add('gold-check-delete', {
+                label: '地金チェック削除',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="gold_check"><h3>🥇 地金チェック削除</h3><div class="form-group"><label>商品ID:</label><input type="text" class="form-control gold-product-id" placeholder="商品IDを入力"></div><button class="btn btn-danger" data-action="goldCheckDelete">削除実行</button><div class="api-result gold-check-result" style="display:none;"></div></div>',
+                attributes: { class: 'fa fa-trash' }
+            });
+            
+            // 査定タイトル生成ブロック
+            blockManager.add('satei-title', {
+                label: '査定タイトル生成',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="satei_title"><h3>📝 査定タイトル生成</h3><div class="form-group"><label>商品ID:</label><input type="text" class="form-control satei-product-id" placeholder="商品IDを入力"></div><button class="btn btn-primary" data-action="createSateiTitle">タイトル生成</button><div class="api-result satei-title-result" style="display:none;"></div></div>',
+                attributes: { class: 'fa fa-file-text' }
+            });
+            
+            // メール送信ブロック
+            blockManager.add('send-notification', {
+                label: 'メール送信',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="notification"><h3>📧 メール送信</h3><div class="form-group"><label>宛先:</label><input type="email" class="form-control mail-to" placeholder="email@example.com"></div><div class="form-group"><label>件名:</label><input type="text" class="form-control mail-subject" placeholder="件名を入力"></div><div class="form-group"><label>本文:</label><textarea class="form-control mail-body" rows="4" placeholder="メッセージを入力"></textarea></div><button class="btn btn-success" data-action="sendNotification">送信</button><div class="api-result mail-result" style="display:none;"></div></div>',
+                attributes: { class: 'fa fa-envelope' }
+            });
+            
+            // 商品検索ブロック
+            blockManager.add('product-search', {
+                label: '商品検索',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="product_search"><h3>🔍 商品検索</h3><div class="form-group"><label>検索キーワード:</label><input type="text" class="form-control search-keyword" placeholder="商品名・ブランドで検索"></div><button class="btn btn-info" data-action="searchProduct">検索</button><div class="api-result search-result" style="display:none;"></div></div>',
+                attributes: { class: 'fa fa-search' }
+            });
+            
+            // データテーブルブロック
+            blockManager.add('data-table', {
+                label: 'データテーブル',
+                category: 'Shop11 UI',
+                content: '<div class="container my-4"><h3>データ一覧</h3><table class="table table-striped table-bordered"><thead class="thead-dark"><tr><th>ID</th><th>商品名</th><th>ステータス</th><th>金額</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>サンプル商品A</td><td><span class="badge badge-success">完了</span></td><td>¥10,000</td><td><button class="btn btn-sm btn-primary">編集</button></td></tr><tr><td>2</td><td>サンプル商品B</td><td><span class="badge badge-warning">処理中</span></td><td>¥25,000</td><td><button class="btn btn-sm btn-primary">編集</button></td></tr></tbody></table></div>',
+                attributes: { class: 'fa fa-table' }
+            });
+            
+            // 商品データテーブルブロック
+            blockManager.add('product-data-table', {
+                label: '商品データテーブル',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="product_table"><h3>商品データテーブル</h3><div class="form-group"><label>検索キーワード:</label><div class="input-group"><input type="text" class="form-control product-search-keyword" placeholder="商品名・ブランドで検索"><div class="input-group-append"><button class="btn btn-primary" data-action="loadProductTable">🔍 検索</button><button class="btn btn-secondary ml-2" data-action="clearProductTable">🗑️ クリア</button></div></div></div><div class="product-table-container"><table class="table table-striped table-bordered table-hover"><thead class="thead-dark"><tr><th>商品ID</th><th>商品名</th><th>ブランド</th><th>カテゴリ</th><th>価格</th><th>ステータス</th><th>操作</th></tr></thead><tbody class="product-table-body"><tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr></tbody></table></div><div class="product-table-info mt-2 text-muted"></div></div>',
+                attributes: { class: 'fa fa-database' }
+            });
+            
+            // 顧客検索テーブルブロック
+            blockManager.add('customer-data-table', {
+                label: '顧客検索テーブル',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="customer_table"><h3>👤 顧客検索テーブル</h3><div class="form-group"><label>顧客名・電話番号:</label><div class="input-group"><input type="text" class="form-control customer-search-keyword" placeholder="顧客名・電話番号で検索"><div class="input-group-append"><button class="btn btn-primary" data-action="loadCustomerTable">🔍 検索</button><button class="btn btn-secondary ml-2" data-action="clearCustomerTable">🗑️ クリア</button></div></div></div><div class="customer-table-container"><table class="table table-striped table-bordered table-hover"><thead class="thead-dark"><tr><th>顧客ID</th><th>顧客名</th><th>電話番号</th><th>メール</th><th>郵便番号</th><th>住所</th><th>操作</th></tr></thead><tbody class="customer-table-body"><tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr></tbody></table></div><div class="customer-table-info mt-2 text-muted"></div></div>',
+                attributes: { class: 'fa fa-users' }
+            });
+            
+            // 査定検索テーブルブロック
+            blockManager.add('satei-data-table', {
+                label: '査定検索テーブル',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="satei_table"><h3>📝 査定検索テーブル</h3><div class="form-group"><label>検索条件:</label><div class="input-group"><input type="text" class="form-control satei-search-keyword" placeholder="商品名・顧客名で検索"><div class="input-group-append"><button class="btn btn-primary" data-action="loadSateiTable">🔍 検索</button><button class="btn btn-secondary ml-2" data-action="clearSateiTable">🗑️ クリア</button></div></div></div><div class="satei-table-container"><table class="table table-striped table-bordered table-hover"><thead class="thead-dark"><tr><th>査定ID</th><th>商品名</th><th>顧客名</th><th>査定額</th><th>査定日</th><th>ステータス</th><th>操作</th></tr></thead><tbody class="satei-table-body"><tr><td colspan="7" class="text-center text-muted">検索キーワードを入力して検索してください</td></tr></tbody></table></div><div class="satei-table-info mt-2 text-muted"></div></div>',
+                attributes: { class: 'fa fa-clipboard' }
+            });
+            
+            // 商品登録フォームブロック
+            blockManager.add('product-register-form', {
+                label: '商品登録フォーム',
+                category: 'Shop11 API',
+                content: '<div class="shop11-api-block" data-api="product_register"><h3>✏️ 商品登録フォーム</h3><form class="product-register-form"><div class="row"><div class="col-md-6"><div class="form-group"><label>商品名 <span class="text-danger">*</span></label><input type="text" class="form-control product-name" placeholder="商品名を入力" required></div></div><div class="col-md-6"><div class="form-group"><label>ブランド</label><input type="text" class="form-control product-brand" placeholder="ブランド名"></div></div></div><div class="row"><div class="col-md-6"><div class="form-group"><label>カテゴリ</label><select class="form-control product-category"><option value="">選択してください</option><option value="1">ジュエリー</option><option value="2">時計</option><option value="3">バッグ</option><option value="4">貴金属</option><option value="5">その他</option></select></div></div><div class="col-md-6"><div class="form-group"><label>価格 <span class="text-danger">*</span></label><input type="number" class="form-control product-price" placeholder="価格を入力" required></div></div></div><div class="form-group"><label>商品説明</label><textarea class="form-control product-description" rows="3" placeholder="商品の説明を入力"></textarea></div><div class="form-group"><label>ステータス</label><select class="form-control product-status"><option value="1" selected>在庫あり</option><option value="2">予約中</option><option value="3">売約済</option><option value="4">出品中</option></select></div><div class="text-right"><button type="button" class="btn btn-success btn-lg" data-action="registerProduct">💾 登録する</button><button type="reset" class="btn btn-secondary btn-lg ml-2">🔄 リセット</button></div></form><div class="register-result mt-3" style="display:none;"></div></div>',
+                attributes: { class: 'fa fa-plus-square' }
+            });
+            
+            console.log('✅ API Workflow Builder loaded!');
+            console.log('📦 Total Blocks:', blockManager.getAll().length);
+        });
+        
+        // プレビュー機能
+        function previewPage() {
+            const html = editor.getHtml();
+            const css = '<style>' + editor.getCss() + '</style>';
+            const previewWindow = window.open('', '_blank');
+            previewWindow.document.write(`
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Preview</title>
+                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
+                    ${css}
+                </head>
+                <body>
+                    ${html}
+                    <script src="https://code.jquery.com/jquery-3.5.1.min.js"><\/script>
+                    <script src="/shop11/public/page-builder/api-functions.js"><\/script>
+                </body>
+                </html>
+            `);
+        }
+        
+        // 保存機能
+        function savePage() {
+            const html = editor.getHtml();
+            const css = editor.getCss();
+            const components = editor.getComponents();
+            
+            const pageName = prompt('ページ名を入力してください:', 'page-' + Date.now());
+            if (!pageName) return;
+            
+            savePageToSupabase(pageName, html, css, components).then(result => {
+                if (result.success) {
+                    alert('✅ Supabaseに保存しました！\nページID: ' + result.data[0].id);
+                    downloadHtmlFile(pageName, html, css);
+                } else {
+                    alert('❌ 保存エラー: ' + result.error);
+                }
+            });
+        }
+        
+        // HTMLファイルダウンロード
+        function downloadHtmlFile(pageName, html, css) {
+            const fullHtml = `<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${pageName}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
+    <style>${css}</style>
+</head>
+<body>
+    ${html}
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"><\/script>
+    <script src="/shop11/public/page-builder/api-functions.js"><\/script>
+</body>
+</html>`;
+            
+            const blob = new Blob([fullHtml], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = pageName + '.html';
+            a.click();
+        }
+        
+        // ページ一覧読込
+        function loadPageList() {
+            loadPagesFromSupabase().then(result => {
+                if (result.success && result.data.length > 0) {
+                    const pageListDiv = document.getElementById('pageList');
+                    pageListDiv.innerHTML = '';
+                    
+                    result.data.forEach(page => {
+                        const pageItem = document.createElement('div');
+                        pageItem.className = 'page-item';
+                        pageItem.innerHTML = `
+                            <strong>${page.name}</strong><br>
+                            <small>作成日: ${new Date(page.created_at).toLocaleString('ja-JP')}</small>
+                        `;
+                        pageItem.onclick = () => loadPageFromSupabaseById(page.id);
+                        pageListDiv.appendChild(pageItem);
+                    });
+                    
+                    document.getElementById('pageListModal').style.display = 'block';
+                } else {
+                    alert('保存されたページがありません');
+                }
+            });
+        }
+        
+        // ページ読込
+        function loadPageFromSupabaseById(pageId) {
+            loadPageFromSupabase(pageId).then(result => {
+                if (result.success && result.data) {
+                    const page = result.data;
+                    editor.setComponents(page.html_content);
+                    editor.setStyle(page.css_content);
+                    closeModal();
+                    alert('✅ ページを読み込みました: ' + page.name);
+                } else {
+                    alert('❌ 読込エラー: ' + result.error);
+                }
+            });
+        }
+        
+        // モーダルを閉じる
+        function closeModal() {
+            document.getElementById('pageListModal').style.display = 'none';
+        }
+        
+        // クリア機能
+        function clearPage() {
+            if (confirm('すべてのコンテンツをクリアしますか？')) {
+                editor.setComponents('');
+                editor.setStyle('');
+                alert('✅ クリアしました');
+            }
+        }
+        
+        // モーダル外クリックで閉じる
+        window.onclick = function(event) {
+            const modal = document.getElementById('pageListModal');
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1 @@
+gradio>=4.0.0

supabase-config.js

@@ -0,0 +1,149 @@
+// Supabase Configuration and API Functions
+// API Workflow Builder - Database Integration
+
+const SUPABASE_URL = 'https://rootomzbucovwdqsscqd.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJvb3RvbXpidWNvdndkcXNzY3FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzU4OTE4ODMsImV4cCI6MjA1MTQ2Nzg4M30.fYKOe-HPh4WUdvBhEJxakLWCMQBp4E90EDwARk7ucf8';
+
+// Supabaseクライアント初期化
+const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+console.log('✅ Supabase Client initialized');
+
+/**
+ * ページをSupabaseに保存
+ * @param {string} pageName - ページ名
+ * @param {string} html - HTML内容
+ * @param {string} css - CSS内容
+ * @param {object} components - GrapeJSコンポーネント
+ * @returns {Promise<{success: boolean, data: any, error: string}>}
+ */
+async function savePageToSupabase(pageName, html, css, components) {
+    try {
+        const { data, error } = await supabaseClient
+            .from('page_builder_pages')
+            .insert({
+                name: pageName,
+                html_content: html,
+                css_content: css,
+                components_json: components,
+                created_at: new Date().toISOString(),
+                updated_at: new Date().toISOString()
+            })
+            .select();
+        
+        if (error) throw error;
+        
+        console.log('✅ Page saved to Supabase:', data);
+        return { success: true, data: data, error: null };
+    } catch (error) {
+        console.error('❌ Error saving page:', error);
+        return { success: false, data: null, error: error.message };
+    }
+}
+
+/**
+ * Supabaseから全ページを取得
+ * @returns {Promise<{success: boolean, data: any[], error: string}>}
+ */
+async function loadPagesFromSupabase() {
+    try {
+        const { data, error } = await supabaseClient
+            .from('page_builder_pages')
+            .select('*')
+            .order('updated_at', { ascending: false });
+        
+        if (error) throw error;
+        
+        console.log('✅ Pages loaded from Supabase:', data.length);
+        return { success: true, data: data, error: null };
+    } catch (error) {
+        console.error('❌ Error loading pages:', error);
+        return { success: false, data: [], error: error.message };
+    }
+}
+
+/**
+ * Supabaseから特定のページを取得
+ * @param {string} pageId - ページID
+ * @returns {Promise<{success: boolean, data: any, error: string}>}
+ */
+async function loadPageFromSupabase(pageId) {
+    try {
+        const { data, error } = await supabaseClient
+            .from('page_builder_pages')
+            .select('*')
+            .eq('id', pageId)
+            .single();
+        
+        if (error) throw error;
+        
+        console.log('✅ Page loaded from Supabase:', data.name);
+        return { success: true, data: data, error: null };
+    } catch (error) {
+        console.error('❌ Error loading page:', error);
+        return { success: false, data: null, error: error.message };
+    }
+}
+
+/**
+ * API実行ログをSupabaseに保存
+ * @param {string} apiName - API名
+ * @param {string} endpoint - エンドポイント
+ * @param {object} request - リクエストデータ
+ * @param {object} response - レスポンスデータ
+ * @param {string} status - ステータス ('success' or 'error')
+ * @returns {Promise<{success: boolean, data: any, error: string}>}
+ */
+async function saveApiLogToSupabase(apiName, endpoint, request, response, status) {
+    try {
+        const { data, error } = await supabaseClient
+            .from('api_execution_logs')
+            .insert({
+                api_name: apiName,
+                endpoint: endpoint,
+                request_data: request,
+                response_data: response,
+                status: status,
+                executed_at: new Date().toISOString()
+            })
+            .select();
+        
+        if (error) throw error;
+        
+        console.log('✅ API log saved:', apiName, status);
+        return { success: true, data: data, error: null };
+    } catch (error) {
+        console.error('❌ Error saving API log:', error);
+        return { success: false, data: null, error: error.message };
+    }
+}
+
+/**
+ * Supabaseから API実行ログを取得
+ * @param {number} limit - 取得件数
+ * @returns {Promise<{success: boolean, data: any[], error: string}>}
+ */
+async function getApiLogsFromSupabase(limit = 50) {
+    try {
+        const { data, error } = await supabaseClient
+            .from('api_execution_logs')
+            .select('*')
+            .order('executed_at', { ascending: false })
+            .limit(limit);
+        
+        if (error) throw error;
+        
+        console.log('✅ API logs loaded:', data.length);
+        return { success: true, data: data, error: null };
+    } catch (error) {
+        console.error('❌ Error loading API logs:', error);
+        return { success: false, data: [], error: error.message };
+    }
+}
+
+// グローバルに公開
+window.savePageToSupabase = savePageToSupabase;
+window.loadPagesFromSupabase = loadPagesFromSupabase;
+window.loadPageFromSupabase = loadPageFromSupabase;
+window.saveApiLogToSupabase = saveApiLogToSupabase;
+window.getApiLogsFromSupabase = getApiLogsFromSupabase;