Airtableコネクタ実践ガイド｜スプレッドシート感覚でアプリの裏側を作る

1. これは何？（30秒で）#

Airtableは『Excelの操作感を持ったデータベース』です。Lovableのコネクタを繋ぐと、Airtableに入れたデータがそのままLovableで作ったWebアプリの中身として使えます。商品マスタ、問い合わせ一覧、社内ナレッジ集など『非エンジニアが直接編集したいデータ』をAirtableで管理し、見せ方だけLovableで作る、という分業ができます。

2. 何ができるようになる？#

• 商品マスタをAirtableで管理 → ECサイトの商品一覧/詳細ページに自動反映
• 問い合わせフォームの送信内容をAirtableに自動保存 → 担当者は普段使い慣れた表で対応
• 社内ナレッジをAirtableに書く → きれいな検索付きヘルプサイトとして公開
• イベント参加申込をAirtableに溜める → 受付スタッフ用ダッシュボードを作る
• 案件管理（カンバン）をAirtable + Web表示の二刀流で運用

3. ハマる人 / ハマらない人#

• ✅ プログラミングなしでデータ運用したい人
• ✅ 『編集はチーム、閲覧はお客様』という二層構造が必要なとき
• ✅ 数百〜数千レコード規模の中小サイト
• ⚠️ 10万件超の大規模データ → Lovable Cloud (Postgres) を選ぶ
• ⚠️ ミリ秒単位の応答、リアルタイム同時編集 → Postgres + Realtime に

4. 全体アーキテクチャ#

┌────────────┐   ┌──────────────────┐   ┌──────────────────────┐   ┌──────────┐
│ ブラウザ   │ → │ Lovableフロント  │ → │ サーバーファンクション │ → │ Airtable │
│ ユーザー   │   │ (商品一覧UI)     │   │ (Lovableゲートウェイ) │   │ (Base/Tbl)│
└────────────┘   └──────────────────┘   └──────────────────────┘   └──────────┘
                                                ↑
                              AIRTABLE_API_KEY はここでだけ参照される

• ユーザーが /products を開く
• ページの初期化処理がサーバーファンクション getProducts() を呼ぶ
• サーバーファンクションが Lovable Gateway 経由で Airtable に問い合わせる
• 返ってきた行データをUIで表として描画

5. 接続手順（3分）#

1. Workspace → Connectors → Airtable → Connect
2. Airtableにログインして、Lovableに見せたい Base を選ぶ（複数選択可）
3. Lovableに戻り『Connected ✅』を確認
4. 対象プロジェクトの『Use this connection』にチェック
5. 確認: チャットで『Airtableの接続テストをして』と頼むと疎通確認してくれる

6. コピペで動くプロンプト例#

例1: 商品一覧ページを作る

Airtable Base『EC』のテーブル『Products』(列: Name, Price, ImageUrl, Stock) を読み込んで、
/products にカードグリッドの一覧ページと、/products/$id に詳細ページを作って。
データ取得はサーバーファンクションにして、5分キャッシュ。

例2: 問い合わせをAirtableに溜める

/contact のお問い合わせフォーム送信を、Airtable Base『CS』テーブル『Inquiries』に
1行追加するサーバーファンクションを作って。列は Name / Email / Message / CreatedAt。

例3: 簡易管理画面

Airtable『Inquiries』を /admin/inquiries に表で表示。検索/絞り込み/ステータス更新ボタン付き。
ステータス更新は Airtable の対象行を patch するサーバーファンクションに。

7. 裏で動いているコードの一例#

// src/lib/airtable.functions.ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

const GATEWAY_URL = "https://connector-gateway.lovable.dev/airtable/v0";
const BASE_ID = "appXXXXXXXX";

export const listProducts = createServerFn({ method: "GET" }).handler(async () => {
  const LOVABLE_API_KEY = process.env.LOVABLE_API_KEY!;
  const AIRTABLE_API_KEY = process.env.AIRTABLE_API_KEY!;
  if (!AIRTABLE_API_KEY) throw new Error("Airtable未接続です");

  const res = await fetch(`${GATEWAY_URL}/${BASE_ID}/Products?pageSize=100`, {
    headers: {
      Authorization: `Bearer ${LOVABLE_API_KEY}`,
      "X-Connection-Api-Key": AIRTABLE_API_KEY,
    },
  });
  if (!res.ok) return { products: [], error: `HTTP ${res.status}` };
  const json = await res.json();
  return {
    products: json.records.map((r: any) => ({ id: r.id, ...r.fields })),
    error: null,
  };
});

export const addInquiry = createServerFn({ method: "POST" })
  .inputValidator(z.object({ name: z.string(), email: z.string().email(), message: z.string().max(4000) }).parse)
  .handler(async ({ data }) => {
    const res = await fetch(`${GATEWAY_URL}/${BASE_ID}/Inquiries`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.LOVABLE_API_KEY}`,
        "X-Connection-Api-Key": process.env.AIRTABLE_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ fields: { ...data, CreatedAt: new Date().toISOString() } }),
    });
    return { ok: res.ok };
  });

8. ハマりどころとリカバリ#

9. セキュリティと運用チェック#

• 公開ページに出すフィールドは限定（Cost / Memo など内部列を出さない）
• 書き込み系（addInquiry等）は必ず inputValidator + max() で長さ制限
• 管理画面 /admin/* は認証必須にする（Cloud Auth と組み合わせ）
• 削除APIは安易に作らない。論理削除フラグ列で代替

10. 次の一歩 / 卒業ライン#

Airtableは『初期マスタ管理』として最高ですが、月間数万件の書き込みやリアルタイム性が必要になったら Lovable Cloud (Postgres) への移行を検討してください。同じサーバーファンクションの形のまま、fetch先だけ差し替えれば移行できる構造になっているので、最初からこの構成で書き始めれば後で詰みません。