コンテンツにスキップ

Airtableでフォームの送信を処理する

Last reviewed: over 1 year ago

このチュートリアルでは、Cloudflare WorkersとAirtable ↗を使用して、フロントエンドのユーザーインターフェースからのフォーム送信を永続化します。Airtableは、開発者にとって使いやすいAPIを持つ無料のスプレッドシートソリューションです。Workersは、受信したフォーム送信を処理し、AirtableのREST API ↗を使用して、データを非同期的にAirtableベース（Airtableのスプレッドシートに対する用語）に永続化します。

完全なAirtableとサーバーレス機能の統合のGIF

Before you start

All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.

1. フォームを作成する

このチュートリアルでは、連絡先フォームからの入力を処理するWorkers関数を構築します。このチュートリアルで参照するフォームは、名、姓、メールアドレス、電話番号、メッセージの件名、およびメッセージを収集します。

このチュートリアルで使用されるフォームの簡略化された例を確認してください。<form>タグのactionパラメータは、このチュートリアルで構築するデプロイされたWorkersアプリケーションを指す必要があります。

あなたのフロントエンドコード
<form action="https://workers-airtable-form.signalnerve.workers.dev/submit" method="POST">
  <div>
    <label for="first_name">名</label>
    <input type="text" name="first_name" id="first_name" autocomplete="given-name" placeholder="エレン" required />
  </div>


  <div>
    <label for="last_name">姓</label>
    <input type="text" name="last_name" id="last_name" autocomplete="family-name" placeholder="リプリー" required />
  </div>


  <div>
    <label for="email">メール</label>
      <input id="email" name="email" type="email" autocomplete="email" placeholder="eripley@nostromo.com" required />
    </div>
  </div>


  <div>
    <label for="phone">
      電話
      <span>オプション</span>
    </label>
    <input type="text" name="phone" id="phone" autocomplete="tel" placeholder="+1 (123) 456-7890" />
  </div>


  <div>
    <label for="subject">件名</label>
    <input type="text" name="subject" id="subject" placeholder="あなたの例の件名" required />
  </div>


  <div>
    <label for="message">
      メッセージ
      <span>最大500文字</span>
    </label>
    <textarea id="message" name="message" rows="4" placeholder="Tenetur quaerat expedita vero et illo. Tenetur explicabo dolor voluptatem eveniet. Commodi est beatae id voluptatum porro laudantium. Quam placeat accusamus vel officiis vel. Et perferendis dicta ut perspiciatis quos iste. Tempore autem molestias voluptates in sapiente enim doloremque." required></textarea>
  </div>


  <div>
    <button type="submit">
      送信
    </button>
  </div>
</form>

2. Workerプロジェクトを作成する

フォーム送信を処理するために、受信したフォームデータを解析し、Airtableへの送信の準備をするWorkerを作成してデプロイします。

新しいairtable-form-handler Workerプロジェクトを作成します：

Terminal window
npm create cloudflare@latest -- airtable-form-handler

For setup, select the following options:

  • For What would you like to start with?, choose Hello Worldの例.
  • For Which template would you like to use?, choose Hello World Worker.
  • For Which language do you want to use?, choose JavaScript.
  • For Do you want to use git for version control?, choose Yes.
  • For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

次に、新しく作成したディレクトリに移動します：

Terminal window
cd airtable-form-handler

3. Airtableベースを設定する

Workerが完成したら、AirtableのREST APIを介してAirtableベースにデータを送信します。

Airtableアカウントを持っていない場合は、作成してください（無料プランでこのチュートリアルを完了するのに十分です）。Airtableのダッシュボードで、最初から始めるを選択して新しいベースを作成します。

新しいベースを作成したら、フロントエンドフォームで使用するために設定します。既存の列を削除し、次のフィールドタイプで6つの列を作成します：

フィールド名Airtableフィールドタイプ
名”単一行テキスト”
姓”単一行テキスト”
メール”メール”
電話番号”電話番号”
件名”単一行テキスト”
メッセージ”長文”

フィールド名は大文字と小文字を区別します。フィールド名を変更した場合は、後でAirtableに対して行うAPIリクエストで新しいフィールド名と正確に一致させる必要があります。最後に、テーブルの名前をオプションで変更できます — デフォルトでは、テーブルは「Table 1」のような名前になります。以下のコードでは、テーブルがForm Submissionsのようなより説明的な名前に変更されたと仮定しています。

次に、AirtableのAPIページ ↗に移動し、新しいベースを選択します。ベース情報を見るには、Airtableにログインしている必要があります。APIドキュメントページで、AirtableベースIDを見つけます。

また、Airtableベースにアクセスするために使用する個人アクセストークンを作成する必要があります。Airtableのウェブサイトの個人アクセストークン ↗ページにアクセスして、新しいトークンを作成できます。トークンを次のように設定してください：

  • スコープ：data.records:writeスコープをトークンに設定する必要があります
  • アクセス：このチュートリアルで作業しているベースにアクセスを許可する必要があります

結果として得られるアクセストークンは、アプリケーションに設定されるべきです。トークンをコードベースで利用可能にするために、wrangler secretコマンドを使用します。secretコマンドは、関数で使用するための環境変数を暗号化して保存し、ユーザーに公開することなく使用します。

AIRTABLE_ACCESS_TOKENを秘密の名前として渡して、wrangler secret putを実行します：

Terminal window
npx wrangler secret put AIRTABLE_ACCESS_TOKEN
Enter the secret text you would like assigned to the variable AIRTABLE_ACCESS_TOKEN on the script named airtable-form-handler:
******
🌀  Creating the secret for script name airtable-form-handler
✨  Success! Uploaded secret AIRTABLE_ACCESS_TOKEN.

続行する前に、Airtableから取得すべきキーを確認してください：

  1. Airtableテーブル名：Form Submissionsのようなテーブルの名前。
  2. AirtableベースID：ベースのAPIページの上部にある英数字のベースID。
  3. Airtableアクセストークン：新しいAirtableベースに関する情報にアクセスするためにユーザーが作成した個人アクセストークン。

4. Airtableにデータを送信する

Airtableベースが設定され、APIと通信するために必要なキーとIDが準備できたら、Workerを設定してフォームからのデータをAirtableに永続化します。

Workerプロジェクトのindex.jsファイルで、デフォルトのコードをリクエストに応答できるWorkersフェッチハンドラーに置き換えます。リクエストされたURLのパス名が/submitの場合、新しいフォーム送信を処理し、それ以外の場合は404 Not Foundレスポンスを返します。

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname === "/submit") {
      await submitHandler(request, env);
    }
    return new Response("見つかりません", { status: 404 });
  },
};

submitHandlerには2つの機能があります。まず、HTML5フォームから送信されるフォームデータを解析します。データが解析されたら、Airtable APIを使用して新しい行（新しいフォーム送信）をテーブルに永続化します：

async function submitHandler(request, env) {
  if (request.method !== "POST") {
    return new Response("メソッドが許可されていません", {
      status: 405,
    });
  }
  const body = await request.formData();


  const { first_name, last_name, email, phone, subject, message } =
    Object.fromEntries(body);


  // "fields"のキーは大文字と小文字を区別し、
  // Airtableテーブルで設定したフィールド名と正確に一致する必要があります
  const reqBody = {
    fields: {
      "名": first_name,
      "姓": last_name,
      メール: email,
      "電話番号": phone,
      件名: subject,
      メッセージ: message,
    },
  };
  await createAirtableRecord(env, reqBody);
}


// 既存のコード
// export default ...

この関数の大部分はリクエストボディ（リクエストの一部として送信されるデータ）を解析することに関係していますが、2つの重要な点に注意してください。まず、HTTPメソッドがこの関数に送信される場合、POSTでない場合は、405 Method Not Allowed ↗のステータスコードで新しいレスポンスを返します。

変数reqBodyは、Airtableテーブルの各列に対するキーと値のペアのコレクションを表します。reqBodyをフィールドのコレクションを持つオブジェクトとしてフォーマットすることで、各フィールドに値を持つ新しいレコードをテーブルに作成しています。

次に、createAirtableRecord（次に定義する関数）を呼び出します。createAirtableRecord関数は、Airtable APIの要求されるフォーマットに準拠したbodyパラメータを受け取ります。すなわち、fieldsの下にキーと値のペアを含むJavaScriptオブジェクトであり、テーブルに作成される単一のレコードを表します：

async function createAirtableRecord(env, body) {
  try {
    const result = fetch(
      `https://api.airtable.com/v0/${env.AIRTABLE_BASE_ID}/${encodeURIComponent(env.AIRTABLE_TABLE_NAME)}`,
      {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          Authorization: `Bearer ${env.AIRTABLE_ACCESS_TOKEN}`,
          "Content-Type": "application/json",
        },
      },
    );
    return result;
  } catch (error) {
    console.error(error);
  }
}


// 既存のコード
// async function submitHandler
// export default ...

Airtableに認証されたリクエストを行うには、Airtableアカウント、ベース、およびテーブル名に関するデータを表す4つの定数を提供する必要があります。すでにwrangler secretを使用してAIRTABLE_ACCESS_TOKENを設定しましたが、これは暗号化されるべき値です。AirtableベースIDとテーブル名、およびFORM_URLは、GitHubなどの場所で公開共有できる値です。Wranglerのvars機能を使用して、wrangler.tomlファイルから公開環境変数を渡します。

wrangler.tomlファイルの最後にvarsテーブルを追加します：

name = "workers-airtable-form"
main = "src/index.js"
compatibility_date = "2023-06-13"


[vars]
AIRTABLE_BASE_ID = "exampleBaseId"
AIRTABLE_TABLE_NAME = "Form Submissions"

すべてのフィールドが送信されたので、Workersサーバーレス機能をデプロイして、フォームと通信できるようにします。まず、Workerを公開します：

Workerをデプロイする
npx wrangler deploy

あなたのWorkerプロジェクトはユニークなURLにデプロイされます — 例えば、https://workers-airtable-form.cloudflare.workers.dev。これは、フロントエンドフォームのaction属性の最初の部分を表します — 2番目の部分は、フォームハンドラーのパス/submitです。フロントエンドUIで、以下のようにformタグを設定します：

<form
  action="https://workers-airtable-form.cloudflare.workers.dev/submit"
  method="POST"
  class="..."
>
  <!-- あなたのHTMLフォームの残り -->
</form>

新しいフォームをデプロイした後（フォームを作成するのに助けが必要な場合は、HTMLフォームのチュートリアルを参照してください）、新しいフォーム送信を行い、その値がAirtableに即座に表示されることを確認できるはずです：

完全なAirtableとサーバーレス機能の統合の例GIF

結論

このチュートリアルを完了することで、フォーム送信を受け入れ、Airtableに永続化できるWorkerを作成しました。フォームデータを解析し、環境変数を設定し、fetch APIを使用してWorkerの外部サービスにリクエストを行う方法を学びました。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings