Webflow のアプリケーション プログラミング インターフェイスの概要

アプリケーション プログラミング インターフェイス (API) は、さまざまなソフトウェア アプリケーション間のやり取りを容易にします。Webflow の API は、外部サービスへのリンク、Webflow の主要機能の強化、設計者や開発者向けの最先端のソリューションの開発を可能にします。 

プロのヒント: コーディングスキルが足りない場合は、次のようなツールがあります。 統合的に, 作る、Zapier を使用すると、API を直接操作したりコードを記述したりすることなく、Webflow をさまざまなサードパーティ アプリケーションと統合できます。 

このチュートリアルでは、次のトピックについて説明します。 

1. WebflowのAPIの可能な使用法 
2. APIトークンを生成する手順 
3. Webhookの作成 

Webflow の API の可能性を探る 

Webflow の API はさまざまなシナリオに対応します。 

• サイト API — サイト情報を取得するため 
• ページ API — ページの詳細と関連メタデータを取得するため 
• アセットAPI — Webflowのアセットパネルでアセットを管理したり、アセットをフォルダに割り当てたり、既存のアセットを一覧表示したりします 
• CMS API — CMSコレクションおよびコレクションアイテムのCRUD操作用 
• 電子商取引API — Eコマースの商品と注文に対するCRUD操作用 
• ユーザーアカウント API — ユーザーアカウントを管理する 
• フォームAPI — フォームの構造と送信、フォームを外部データソースに接続 
• カスタムコードAPI — カスタムスクリプトを追加して処理する 
• デザイナーAPI — 要素、スタイル、コンポーネントの管理など、デザイナーキャンバスを直接操作します。 

Webflowがサードパーティのアプリケーションと通信できるようにWebhookを設定することもできます。WebflowのAPIの機能について詳しくはこちらをご覧ください。 ここ. 

APIトークンの作成 

WebflowのAPIにアクセスするには、認証のためにアクセストークンが必要です。これは、 オーソリティ または、サイト API トークンを生成します。 

社内プロジェクトの場合、サイトAPIトークンを生成することでプロセスを迅速化できます。ただし、より広範囲での使用を目的としたプロジェクトの場合は、Webflowアプリを採用することで、 OAuth認証 がおすすめ。 

このセクションでは、API の使用時にパスワードの代わりに使用する API トークンの作成方法について説明します。パスワードと同様に、API トークン (「API キー」または「アクセス トークン」とも呼ばれます) は、要求元のサイトまたはアプリケーションを識別します。API トークンには、その機能の概要と管理を行う権限 (「スコープ」) も備わっています。 

注記： API トークンは、365 日間使用しないと期限切れになります。

API トークンを生成するには: 

1. 案内する サイト設定 > アプリと統合 タブ > APIアクセス
2. クリック APIトークンを生成する 
3. 入力してください 名前 APIトークン
4. 各Webflow APIの必要な権限を選択します（アクセスなし、読み取り専用、読み取りと書き込みなど）。
5. クリック トークンを生成する
6. 生成されたトークンをクリップボードにコピーします

重要： APIトークンにはパスワードのような個人情報や機密情報が含まれているため、安全に保管してください。トークンは一度作成するとダッシュボードで再度表示できなくなります。トークンが侵害されたのではないかと心配ですか? こちらから新しいトークンを生成してください。 サイト設定 > アプリと統合 タブ > APIアクセス、そしてサードパーティの接続で侵害されたトークンを置き換えます。 

Webhookの確立 

Webhookは、特定のサイトイベント時にWebflowから外部アプリケーションにライブデータを送信するために役立ちます。利用可能なWebhookイベントの詳細については、開発者documentationをご覧ください。 ここ. 

Webhook を設定するには: 

1. アクセス サイト設定 > アプリと統合 タブ > ウェブフック
2. クリック ウェブフックを追加 
3. トリガー タイプを選択します (例: フォームの送信、サイトの公開など) 
4. API バージョンを選択します (例: v1 または v2)
5. Webhook URL を挿入します (例: https://yourdomain.com/webhook/webflow)