⚠️ 重要なお知らせ

この記事で紹介している機能は「Webflow Users」および「Webflow Logic」は近日中に提供終了されます。

詳しくは以下をご確認ください：

• ユーザーアカウント（会員機能）の提供終了について
• Logicの提供終了について

プロのヒント: Logicは、Make HTTP requestブロックまたは受信ウェブフックトリガーを使用して、AirtableからWebflow CMSにデータを同期することもできます。Logicを使用したHTTPリクエストの詳細をご覧ください。

Airtable APIキーの作成方法

APIキー（一部では「アクセストークン」と呼ばれることもある）は、APIに対するHTTPリクエストを行うサイトまたはアプリケーションを識別するパスワードのようなものです。データをAirtableに送信するためには、Airtable APIキーが必要です。

Airtable APIキーを作成するには：

1. Airtableダッシュボードに移動します
2. プロフィールアイコンをクリックし、Account をクリックします
3. APIセクションまでスクロールし、Create token をクリックします
4. Create new token をクリックします
5. トークンに名前を付けます
6. Add a scope をクリックし、ドロップダウンメニューからこのAPIキーで何を行いたいかを選択します（最低限、data.records:writeを選択してAirtableにデータを送信する必要があります）
7. Add a base をクリックし、データを送信したいAirtableベースを選択します
8. Create tokenをクリックし、APIキーをコピーし、このタブを開いたままにしておきます！

Logicフローの認証の設定方法

1. Webflow Designerでサイトを新しいタブで開きます
2. デザイナーキャンバスでフォームを選択し、Form settingsを開きます
3. Sourceのドロップダウンをクリックし、Logicを選択します
4. Add new flowをクリックします
5. Nameフィールドに新しいフローの名前を入力します（例：「リードをAirtableに送信」）、また必要であればDescriptionフィールドに説明を追加します
6. Make HTTP requestブロックをフローエディターキャンバスにドラッグし、名前を設定します（例：「Airtableに新しいリードレコードを作成」）
7. AuthenticationのドロップダウンからAPIトークンを選択します
8. Add toのドロップダウンからHeaderを選択します
9. Headerフィールドに「Authorization」と入力します
10. Select a credentialをクリックし、 Add new credentialをクリックします
11. NameフィールドにAPIトークンの名前を入力します（例：「Airtable APIトークン」）、また必要であればDescriptionフィールドに説明を追加します
12. Tokenフィールドに「Bearer {APIキー}」と入力します。ここで**{APIキー}**をAirtableからコピーしたAPIキーで置き換えます
13. Createをクリックして新しい資格情報を保存し、このタブを開いたままにしておきます！

プロのヒント: フォームを新しいLogicフローに接続するには、Logicパネル > Flowsタブからも行うことができます。Logicでのフォーム送信トリガーについて詳しく学ぶことができます。

フォーム設定、フォームブロック設定、または Logic panel > Flows tabから、フォームをロジックに接続できます。

ベアラ認証を使用するAPI（Airtableなど）の場合、TokenフィールドのAPIキーの前に "Bearer "を入力する必要があります。

Airtableのドキュメンテーションを見つける方法

1. Airtableベースに戻ります
2. Helpをクリックし、Additional resourcesの下でAPI documentationを選択します
3. レコードを作成したいテーブルを選択します
4. Create recordsをクリックすると、テーブルの例となるAPIリクエストが右側に表示されます

重要: AirtableのAPIドキュメンテーションは各Airtableベースごとに異なりますので、レコードを追加したいベース内にいることを確認してください。

HTTPリクエストの設定方法

これでLogicフローとAirtableの認証情報を作成しましたので、次はWebflowに戻り、フロー内でHTTPリクエストを設定する必要があります。このステップで設定するHTTPリクエストは、サイト訪問者がフォームを送信するたびにAirtableテーブルに新しいレコードを作成します。

注意: ウェブフローサイトが開いていたタブを閉じた場合、Logic panel > Flows タブに移動し、前のステップで設定したフローを選択します。フローエディタキャンバス上のMake HTTP requestブロックを選択してブロックの設定を開き、以下の手順を実行します。

1. Request method ドロップダウンをクリックし、POST を選択します
2. URL フィールドに "https://api.airtable.com/v0**/{id}**/**{name_of_table}" を貼り付けます。ここで、{id}** をテーブルのIDに、{name_of_table} をテーブルの名前に置き換えます
3. Headers の隣にある“plus”アイコンをクリックして新しいヘッダーを作成します
4. Name フィールドに "content-type" を入力し、Value フィールドに "application/json" を入力します
5. AirtableのAPIドキュメンテーションからコードブロックをBody フィールドに貼り付けます。以下のようになりますが、実際にはAirtableの既存のレコードから取得したフィールドが含まれます。

{   "First Name": "XYZ",   "Last Name": "XYZ",   "Email": "[email protected]",    "Status": "New lead" }

その後、HTTPリクエストに動的なデータを追加してフォームの送信情報をキャプチャする必要があります。

1. 既存のAirtableレコードから値を削除し、Body フィールドの空の引用符の間にカーソルを置きます
2. 紫色の「dot」アイコンをクリックし、対応する動的フォームフィールド（例: 名前、メールなど）を選択します。

重要：URLフィールドのテーブル名にスペースや特殊文字がある場合は、必ずエスケープしてください。

Logic の Make HTTP リクエストブロックから Airtable への完全な POST リクエスト。

テストとフローの公開方法

1. Run test to complete setupをクリックします
2. 関連する入力フィールドにサンプル値を入力します
3. Run test をクリックします
4. テストのモーダルウィンドウ を終了するために  Cancel  または Apply data をクリックします
5. Publish をクリックします
6. Stage flow for publish をクリックします
7. サイトを公開します

注意: フローのテスト中にエラーメッセージを受け取った場合は、トラブルシューティング手順 に従ってみてから、上記の手順を再試行してください。HTTPリクエストのテストについて詳しく学ぶ。

フローのトラブルシューティング方法

フローをテストする際にエラーが発生する場合は、次の方法を試してみてください

• 認証情報の設定時にAPIキーの前に「Bearer」（およびスペース）を入力したことを確認してください（例: "Bearer 123456789"）
• リクエストURLに正しいテーブルのIDと名前が含まれていることを確認してください
• JSONLint のような無料のツールを使用して、リクエストボディにエラーがないか確認してください