マイプロジェクトにテンプレートがコピーされます。

赤枠内のタイトルをクリックすると、設定画面に遷移します。
ステップ3 アプリトリガー「コレクションのアイテムが作成されたら」

プロセスの1つ目をクリックします。Webflowで該当のサイトとの連携と、抽出するアウトプットを設定します。
(1/3)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
- タイトル
- データベースのアプリ
- Webflowと連携するアカウント情報
- 実行アクション
→次へをクリック
(2/3)アプリトリガーのAPI 接続設定

サイトIDの編集欄をクリックするとプルダウンが開き、候補が表示され、候補から選択すると自動でIDが引用されます。または、下記の方法でも取得できます。
- Webflowのダッシュボードで、対象のサイトを選択します。
- 「Site Settings」に進み、「General」タブを開きます。
- ページをスクロールしていくと、「Site ID」が表示されているので、そこから確認・コピーすることができます。
→テストをクリック →成功
→次へをクリックします
(3/3)アプリトリガーのAPI接続設定

- Webhookイベントとは
- Webflow上でコレクションアイテムが作成または更新されると発生します。
→テストをクリック →成功 アウトプットではこちらの項目は取得できます。次のプロセスでMicrosoft Excelの表に紐付けます。

→保存するをクリック
ステップ4 データベースを操作する「レコードを追加する」

プロセスの2つ目をクリックします。ここでは、Microsoft Excelのデータベース連携と追加する情報の紐付けを行います。
(1/2)連携アカウントとアクションを選択
以下はあらかじめ設定済みのため操作は不要です。
- タイトル
- データベースのアプリ
- Microsoft Excelと連携するアカウント情報
- 実行アクション
同画面下にあるデータベースの連携に進みます。

デフォルトでは、ファイルの保存場所がOneDriveになっています。今回はMicrosoft SharePointを使うため、プルダウンから切り替えると、項目が表示されます。
- サイトID
- 編集欄をクリックすると、候補のサイトがピックアップされます。該当のサイトを選択すると、IDが引用されます。

- ファイル名(任意)
- 任意のファイル名を入力します。
- アイテムID
- 編集欄をクリックすると、候補のアイテム名がピックアップされます。該当のアイテムを選択すると、IDが引用されます。

- シート名
- 編集欄をクリックすると、候補のシート名がピックアップされます。該当のシート名を選択すると、IDが引用されます。
- テーブル範囲
- 「A1:G30」という形式で設定してください。今回はA〜Hがテーブル範囲のためA1:Hと入力しました。
→次へをクリック
(2/2)API接続設定

連携したデータベースのヘッダが項目として抽出されました。

編集欄をクリックするとプルダウンが開き、Webflowから取得したアウトプットが表示されます。
>もっと詳しく:【Excel】データベースを操作するオペレーションの設定に関して

選択すると引用コードが埋め込まれます。全て埋め込んだら、
→テストをクリック →成功
→保存するをクリック!
ステップ5 アプリトリガーを【ON】にする
全てのプロセスが設定済みになると、コンプリート画面がポップアップされます。

トリガーを【ON】にすると、設定完了です。

こちらで連携作業は完了です!<span class="mark-yellow">プログラミングを使わず、短時間で連携ができました。</span>今回のテンプレートはこちらです。