マイプロジェクトにテンプレートがコピーされます。
赤枠内のタイトルをクリックして設定画面に遷移します。
ステップ3 アプリトリガー「コレクションのアイテムが作成されたら」
プロセスの1つ目をクリックします。Webflowで該当のサイトとの連携と、抽出するアウトプットを設定します。
(1/3)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
- タイトル
- データベースのアプリ
- Webflowと連携するアカウント情報
- 実行アクション
→次へをクリック
(2/3)アプリトリガーのAPI接続設定
サイトIDを設定します。編集欄をクリックするとプルダウンが開き、候補が表示されます。選択すると自動でIDが引用されます。
もしくは、下記の方法で取得できます。
- Webflowのダッシュボードで、対象のサイトを選択します。
- 「Site Settings」に進み、「General」タブを開きます。
- ページをスクロールしていくと、「Site ID」が表示されているので、そこから確認・コピーすることができます。
→テストをクリック →成功
→次へをクリックします
(3/3)アプリトリガーのAPI接続設定
- Webhookイベントとは
- Webflow上でコレクションアイテムが作成される（または更新される）と、発生します。
→テストをクリック →成功 このアウトプット設定では、該当項目を取得できます。
→保存するをクリック
ステップ4 データベースを操作する「レコードを追加する」
ここでは、Google スプレッドシートとの連携と追加する情報の紐付けを行います。
(1/2)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
- タイトル
- データベースのアプリ
- Google スプレッドシートと連携するアカウント情報
- 実行アクション
◆データベースの連携
- スプレッドシートID
- 編集欄をクリックすると、連携したGoogle アカウントから候補のシートがピックアップされます。該当のシートを選択すると、IDが引用されます。
- スプレッドシートのタブ名
- 編集欄をクリックすると連携したGoogle アカウントから候補のタブ名がピックアップされます。該当のタブを選択すると、IDが引用されます。
- テーブル範囲
- 「A1:G30」という形式で設定してください。今回はA〜Lがテーブル範囲のためA1:L1と入力しました。
→次へをクリック！
(2/2)データベース操作の詳細設定
連携したシートのヘッダが抽出されます。1つめと2つめのアウトプットの項目をヘッダーに反映してみました。こちらに、アウトプットを紐づけていきます。
編集欄をクリックすると、プルダウンが開き先ほど抽出したアウトプットが候補として表示されます。選択すると、引用コードが自動で埋め込まれます。
→テストをクリック →成功
→保存するをクリック！
ステップ6 アプリトリガーを【ON】にする
全てのプロセスが設定されると、コンプリート画面がポップアップされます。
トリガーを【ON】にすると、設定完了です。
こちらで連携作業は完了です！<span class="mark-yellow">プログラミングを使わずに短時間で連携が完了しました。</span>今回のテンプレートはこちらです。
.png)
.png)
.png)
.webp)
.webp)
