FlutterFlow × BuildShip 入門：Trigger BuildShip Workflow ライブラリで “ノーコードの裏側” を一瞬でつなぐ方法
この記事は、FlutterFlowの公式YouTubeチャンネルに掲載されている動画をもとに制作しております。
目次
このチュートリアルで作るもの
- FlutterFlow 側からボタンをタップ
- BuildShip で用意したスクレイピング Workflow が走る
- 結果が FlutterFlow に返り、画面に表示
10 分で体験できます（実測）。
1.BuildShip ってそもそも何？
一言で言うと “Zapier みたいな見た目で AWS Lambda 級の処理が書けるノーコードバックエンド”
- ノードを線でつなぐだけで API → AI → DB 連携が可能
- 無料枠あり。処理量に応じた従量課金なので個人開発者でも始めやすい
- FlutterFlow 公式と共同でライブラリを公開（今回使う “Trigger BuildShip Workflow”）
| ツール | 無料枠で OK | 備考 |
|---|---|---|
| FlutterFlow | ◯ | Starter プラン可（要 Google アカウント） |
| BuildShip | ◯ | GitHub / Google どちらでも登録可 |
2.FlutterFlow 側：ライブラリ導入手順
① Marketplace で “BuildShip” を検索 → Add for Free
② Settings → Project Dependencies → Add Library
③ 開いたポップアップで BuildShip configuration に JSON を貼る（後述）
3-1. BuildShip configuration JSON とは？
- BuildShip が自動生成
- 具体例（動画 02:53 付近）
{
"workflow_id": "wf_abc123",
"trigger_path": "/scrape",
"auth_type": "NONE"
}ポイント：FlutterFlow には これ“だけ” 事前登録する。そのほかの入力値は実行時に渡す。
4. BuildShip 側：Workflow と Trigger の作成
① New Workflow → テンプレート「Scrape Website」を選択
② Triggers → Add Trigger → FlutterFlow Trigger
③ パス（例：/scrape）入力 → Connect → JSON コピー
5. FlutterFlow でワークフローを呼び出す
- 画面のボタンを選択 → Action Flow Editor を開く
- 右側の TriggerBuildShipWorkflow ブロックを追加
- Input Values に BuildShip が待っている値を カンマ区切りのリスト で渡す dartコピーする編集する
CodeExpression('[website_url]')- 入力が複数ある場合は
[param1, param2, param3]
- 入力が複数ある場合は
| 重要パラメータ | 意味 |
|---|---|
| inputValues | BuildShip へ送るデータ |
| authOption | NONE / FIREBASE / SUPABASE（Enum） |
| authValue | JWT トークン（認証付きの場合のみ） |
| outputValue | レスポンス保管用変数 |
6. Firebase / Supabase 認証が必要な場合
動画 05:22〜 に詳しいが、要点は 2 つだけ。
| 手順 | ヒント |
|---|---|
① authOption を正しい Enum に変更 | 値を手入力せず Enum で選択 |
② authValue に currentUser.jwt を渡す | Action Flow 内の Authenticated User → JWT |
7. 動作確認
- FlutterFlow の Run Mode でボタンを押す
- BuildShip ダッシュボードで ライブ実行ログ が緑色になれば成功
- デバッグは BuildShip 側の Execution Logs で行う（スタックトレースも見える）
8. よくあるエラーと対処
| 症状 | 原因 | 解決策 |
|---|---|---|
AssertionError: status code must be a number | BuildShip 側で HTTP Response ノード が未設定 | ノードを追加し 200 を返す |
Input が null になる | Input Values の順番ズレ | BuildShip の順序と“完全一致”させる |
| 認証失敗 | JWT が空文字 or 無効 | FlutterFlow 側でログイン済みか確認 |
9. まとめ：なぜ BuildShip 連携が “最適解” なのか
- UI/UX は FlutterFlow、ビジネスロジックは BuildShip ― 役割を分離できる
- フロントに API キーを置かないため セキュリティ◎
- 複雑な処理をサーバーレスでスケールできる（ワークフロー単位で課金）
- 将来 AWS etc. へ移行しても REST/JSON で繋ぎ直せば OK
次のステップ
- BuildShip の AI ノード で自動メール返信を実装
- Supabase Row-Level Security と組み合わせた マルチテナント SaaS も実現可能
