README.md

---

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.



## 📞 サポート



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