📚 はじめに
Verbena Flowは、n8nのようなビジュアルワークフローエディタです。
ドラッグ＆ドロップの直感的な操作で、複雑な業務プロセスを自動化できます。
🎨
ビジュアル編集
コードなしでワークフローを作成
🎯 基本操作
1. ノードの配置
1
左側のノードパレットから使いたいノードを選択します
2
ノードをキャンバス（中央の作業エリア）にドラッグ＆ドロップします
3
ノードが配置されたら、クリックして選択できます
ノードをドラッグ中、キャンバスがハイライトされてドロップ可能エリアが分かります
2. ノードの接続
1
ノードの右側にある青い丸（出力ポート）をクリックします
2
マウスをドラッグして接続線を引きます
3
別のノードの左側にある緑の丸（入力ポート）でドロップします
接続中は、接続可能なポートが自動的にハイライトされます
3. ノードの設定
1
設定したいノードをクリックして選択
2
右側のプロパティパネルでパラメータを編集
3
変更は自動的に保存されます
🔧 ノードタイプ
🔗 トリガーノード
ワークフローの開始点となるノードです。
- Webhook: HTTPリクエストを受信してワークフローを開始
- Schedule: 定期的にワークフローを実行
🌐 アクションノード
外部サービスと連携したり、処理を実行します。
- HTTP Request: APIリクエストを送信
- Database: データベース操作（SELECT、INSERT等）
- Email: メール送信
🔀 ロジックノード
データの流れを制御します。
- IF: 条件分岐（True/Falseの2つの出力）
- Switch: 複数の条件で分岐
- Function: JavaScriptでカスタム処理
🔧 データ処理ノード
データを加工・変換します。
- Transform: データをマッピング・変換
- Filter: 条件に合うデータのみ通過
- Merge: 複数のデータを結合
💼 実践例：簡単なワークフローを作る
例：Webhookで受信したデータをAPIに送信
1
Webhookノードを配置（トリガー）
2
Transformノードを配置してデータを整形
3
HTTP Requestノードを配置してAPIに送信
4
各ノードを順番に接続（Webhook → Transform → HTTP Request）
5
各ノードのパラメータを設定
6
上部の▶ 実行ボタンでテスト実行
実行すると、各ノードが順番にハイライトされて処理の流れが視覚化されます
✨ 便利な機能
ワークフローの保存と読み込み
- 💾 保存: 現在のワークフローをJSONファイルとしてダウンロード
- 📂 読み込み: 保存したワークフローファイルを開く
- 自動保存: ブラウザのLocalStorageに自動的に保存されます
表示操作
- 🔍+ 拡大: キャンバスを拡大表示
- 🔍- 縮小: キャンバスを縮小表示
- ⛶ 全体表示: すべてのノードが見える位置に調整
ノード操作
- ドラッグ: ノードのヘッダーをドラッグして移動
- 削除: ノードの右上の×ボタンをクリック
- 複製: (今後実装予定)
接続線の操作
- 削除: 接続線をクリックして確認画面で削除
- ハイライト: 接続線にマウスを乗せると太くなり、接続元と接続先がわかります
📝 テンプレート変数の使い方
ノードのパラメータでは、前のノードから受け取ったデータを参照できます。
基本的な書き方
{{ $json.フィールド名 }}
例：{{ $json.email }} でメールアドレスを参照
使用例
- HTTP RequestのURL: https://api.example.com/user/{{ $json.userId }}
- IF条件: {{ $json.status === "active" }}
- Email本文: こんにちは、{{ $json.name }}さん
🔍 トラブルシューティング
Q: ワークフローが実行されない
A: 以下を確認してください：
- トリガーノード（Webhook、Schedule）が配置されているか
- すべてのノードが正しく接続されているか
- 各ノードのパラメータが正しく設定されているか
Q: ノードが接続できない
A:
- 出力ポート（青い丸）から入力ポート（緑の丸）へドラッグしてください
- 同じノード同士は接続できません
Q: 保存したワークフローが開けない
A:
- JSONファイルが正しい形式か確認してください
- ブラウザのコンソール（F12キー）でエラーを確認してください