---
title: API Workflow Builder
emoji: 🚀
colorFrom: purple
colorTo: blue
sdk: gradio
sdk_version: "5.9.1"
app_file: app.py
pinned: false
license: mit
---

# 🚀 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.

## 📞 サポート

問題が発生した場合は、ブラウザのコンソールログを確認してください。