API と Zapier 経由で Webflow CMS にアップロードするためのガイド

LetterdropではWebflowを愛用していますが、 プリインストールされたCMSはブログの投稿に面倒な場合があります:

• の 権限サポート、コラボレーション機能、SEOツールの欠如 外部アプリケーションに頼らずにチームがコンテンツの作成と戦略を共同で取り組むことが困難になります。
• Google Docs や他の執筆プラットフォームとの統合がないため、手動でコピー＆ペーストする必要があり（面倒な書式変更にも対処する必要がある）、
• Flexbox、CSS グリッド、その他のフロントエンドプログラミングの概念に関する広範な専門知識が必要であり、特に Web 開発が主な役割ではない場合は時間がかかります。

簡単に言えば、 Webflow CMSはコンテンツマーケティングチーム向けにカスタマイズされていません.

私たちの主張を理解しましたか?

デザイナーや Web 開発者にとっては、コーディングなしで素早くサイトを作成できるのは素晴らしいことですが、大量のコンテンツを投稿することを目指すマーケティング担当者にとってはイライラすることがあります。

企業は従業員の精神的健康に十分な配慮がされていないため、従業員の維持に課題を抱えている。

ほとんどの企業は、最終的には、ライター、編集者、マーケティング担当者が好むアプリケーション (Airtable、Google Docs、Notion、ヘッドレス CMS など) から Webflow にデータを集中させることになります。

どうやって？ 選択肢は 2 つあります。 CMSをリンクするためのコードを活用する 経由 の Webflow API またはノーコードソリューションを活用する のような ザピエール.

それぞれの手順をご案内します。

解決策 1: Webflow API 経由で投稿する

の Webflow API CMSアイテムの作成、更新、削除などの操作が可能になります。ただし、 コーディングの知識は必須条件です.

Webflow Designerに精通しており、技術的な能力を持っていると想定しています。 APIを処理するそうでない場合は、エンジニアにリダイレクトするか、Webflow で Zapier などのノーコード プラットフォームを使用する次のセクションに進んでください。

まだ聞いていらっしゃるなら、始めましょう。

理解しておくべき基本的な用語をいくつか紹介します。

Webflow の主要概念

コレクション

あ コレクションはWebflowのデータベースをミラーリングします.

これはコンテンツ リポジトリとして機能し、Webflow サイト全体のコレクションからのデータ参照を容易にします。

例えば、 ブログ投稿 Webflowのコレクションはブログ投稿データをカプセル化します、基本的なブログに必要なフィールド（プレーンテキストタイプのタイトル、リッチテキストタイプの本文、数値タイプの読み取り時間など）を含むプリセットのブログテンプレートとともに。 Webflow テンプレート 通常、ブログ機能が含まれます。

Webflow のデフォルトのブログ テンプレート

コレクションアイテム

コレクションアイテムは、ブログ投稿コレクション内の個々の投稿を表します。.

各投稿は、ブログ コレクション スキーマ内で定義されている同一のデータを持つ特定のブログ投稿ページを参照します。

Webflow CMS UI内でコレクションアイテムを作成することができます（熱心に回避しているにもかかわらず）または API経由でコレクションを埋め込む.

コレクションアイテムで表されるブログ投稿

それで、 バックエンドサーバーからWebflowサイトへの接続を確立するにはどうすればいいですか API リクエストを開始するには?

WebFlowサイトとの接続の開始

前提条件:

1. あ ブログコレクションを特集したWebflowサイト
   1. テンプレートがない場合は、 スタートアップ Webflow テンプレート コンパイル
2. あ サーバ のように Node.js または ジャンゴ
   1. 選択する場合 サーバーレス展開を選択する 次のようなソリューション AWS ラムダ または Google クラウド機能
3. の Webflow SDK 選択した言語で または対応するライブラリ APIリクエストを実行する（ リクエスト または アクシオス Node.js用)

APIトークン経由でWebflowサイト接続を開始する

Webflowサイトデータを変更する前に、接続が必須です。これは、 個人APIキー.

サイトのAPIキーを取得する手順:

➡️ Webflow ダッシュボードにアクセスします。

➡️接続サイトに移動し、 3つの点 （オプションメニュー）。

➡️「設定」を選択します。

アクセス設定

➡️ 統合に進み、API アクセスを見つけて、「API トークンの生成」をタップします。

(トークンは安全に保管してください。共有したり、パブリック リポジトリにコミットしたりしないでください)。

API トークンを生成します (心配しないでください。このトークンは変更されており、私たちのものではありません)

➡️ この API トークンをすべての API リクエストのヘッダーに組み込みます。

これは サンプルのヘッダー構造:

ヘッダー: { 'Accept-Version': '1.0.0'、Authorization: 'Bearer YOUR_API_TOKEN_HERE'、'content-type': 'application/json' }

コピー

➡️ カールを利用するか 郵便配達員 ターミナルでクエリを実行し、その機能を検証します。

curl --location --request GET 'https://api.webflow.com/sites' --header 'Authorization: Bearer YOUR_API_TOKEN_HERE'

コピー

➡️ 実行が成功すると、次のような Webflow サイトの包括的なリストが表示されます。

[ { "_id": "6ee3aee90fa1d92e4f760a0f", "createdOn": "2022-09-03T19:45:49.426Z", "name": "Letterdrop v2", "shortName": "letterdrop-v2", "lastPublished": "2022-10-01T00:24:42.955Z", "previewUrl": "https://screenshots.webflow.com/sites/6ee3aee90fa1d92e4f760a0f/20221001001825_e2d60b485c0f28cd97cd0b6b0f6bf9af.png","time zone": "America/Los_Angeles", "データソース": ["6ee3aee90fa1d92e4f760a0f" } ]

複製する

➡️ オプションがあります このAPIトークンをWebflow SDKで利用するJavaScript SDK を使用する場合は、Webflow オブジェクトを初期化するときに API トークンを提供するようにしてください。

例えば：

const Webflow =require("webflow-api"); const webflow = new Webflow({ token: "API トークンを環境変数に保存し、ここで参照します", });

複製する

これで、サーバーから Webflow サイトにリンクされました。すばらしいですね!

API 経由でコレクション フィールドを取得する

さあ、 ブログ投稿コレクションに新しいコレクションアイテムを作成する.

➡️ デザイナーの視点を起動する Webflow サイト用。

➡️ 「CMSコレクション」を押します 左側のメニューにあります。

ブログ投稿コレクションを選択

➡️ 「設定」オプションをタップします このコレクションの右上隅にあります。

コレクションIDを複製する

‎➡️ このコレクションには、 コレクションIDそれを複製します。

API呼び出しではこれを参照します。こうすることで、どのコレクションにアイテムを生成するか（ブログ投稿など）がわかります。ただし、その前に このコレクション内のフィールドを認識する そしてそれらを参照する方法を説明します。

➡️ さあ API呼び出しを実行する シェルでタイトルを取得します。

curl --location --request GET 'https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID' --header 'Authorization: Bearer YOUR_API_TOKEN_HERE' --data-raw ''

複製する

➡️ このアクションにより、 これに似た応答:

{ "_id": "580e640c8c9a982ac9b8b778", "lastUpdated": "2022-10-23T21:32:39.561Z", "createdOn": "2021-11-23T00:43:35.049Z", "title": "ブログ投稿", "slug": "ブログ", "singularName": "ブログ投稿", "fields": [ { "title": "タイトル", "slug": "名前", "kind": "プレーンテキスト", "mandatory": true, "modifiable": true, "helpText": "", "identification": "9260ce6725dc623d8f5e6768728d6660", "validations": {} }, { "title": "URL", "slug": "スラッグ", "kind": "プレーンテキスト", "mandatory": true、"modifiable": true、"helpText": "", "identification": "6a474648c22ad777613f6429dd510415", "validations": {} }, { "title": "Body", "slug": "post-body", "kind": "RichText", "mandatory": false、"modifiable": true、"helpText": "", "identification": "24207669717864dc68511c63fb32c281", "validations": {} }, ... }

複製する

ここ、 あなたは次のことを認識することができます:

• の ブログ投稿のタイトル 内部的には 名前
• の ブログ投稿のスラッグ 内部的には ナメクジ
• の ブログ投稿の本文 内部的には次のように参照されます ポストボディ

➡️ コレクションにこれをメモしておいてください。 コレクションアイテムを作成するときにこれらのフィールドタイトルを使用します.

API を介したコレクション アイテム フィールドの構築

さて、 コレクションアイテムAPIエンドポイントを確立する Node.jsでAPIリクエストを実行するためのRequestパッケージについては、 API呼び出しを実行してコレクションアイテムを構築する.

➡️ リクエスト本文にデータを組み込む、データを組み込む フィールド（次のことが必要になります フィールドタイトルを活用する （前のセクションより）

const request = require(&#039;request&#039;); const options = { method: &#039;POST&#039;, url: &#039;https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID/items&#039;, headers: { &#039;Accept-Version&#039;: &#039;1.0.0&#039;, Authorization: &#039;Bearer YOUR_API_TOKEN_HERE&#039;, &#039;content-type&#039;: &#039;application/json&#039; }, body: { fields: { name: &#039;API経由の私の最初のブログ投稿&#039;, slug: &#039;my-inaugural-blog-post-via-api&#039;, _archived: false, _draft: false, author: &#039;580e640c8c9a982ac9b8b778&#039;, &#039;post-body&#039;: &#039;<p>ブログ投稿の本文のHTMLは次のとおりです</p>&#039;, &#039;post-summary&#039;: &#039;ブログ投稿の要約&#039; } }, json: true }; request(options, function (error, response, body) { if (error) throw new Error(error); console.log(body); });

複製する

➡️ これで、Webflow のコレクションで最近作成したブログ投稿を確認できるようになります。🎉

「公開予定。" （これ 意味する あなたのブログ投稿はまだ公開待ちです).

‎API を通じて Webflow サイトを配布する

最終段階は、作成したブログ投稿エントリが Web サイトで公開されるように、サイトを配布することです。

これを実現するには 公開サイト API エンドポイント.

➡️ まず最初に、 ドメインを記録する 公開したい宛先。

➡️その後、 Webflowデザイナーに移動する.

➡️ 「公開」をクリック 右上のセクションで ドメインのリストを取得する 公開できる場所。

当社が所有しているのは標準の Webflow ドメインのみです。カスタム ドメインは設定されていません。

➡️ あなたは ウェブフロー‎ドメインが表示され、カスタムドメインが設定されている場合は、それも表示されます。 これらをAPI呼び出しのペイロードに統合する:

const request = require('request'); const options = { method: 'POST', url: 'https://api.webflow.com/sites/YOUR_BLOG_POSTS_COLLECTION_ID/publish', headers: { 'Accept-Version': '1.0.0', Authorization: 'Bearer YOUR_API_TOKEN_HERE', 'content-type': 'application/json' }, body: {domains: [YOUR_DOMAIN_1, YOUR_DOMAIN_2]}, json: true }; request(options, function (error, response, body) { if (error) throw new Error(error); console.log(body); });

複製する

➡️ 公開には1〜2分かかります（Webflow サイトの公開期間は、サイトの規模（所有する CMS コレクションのアイテムとページの数）によって異なります）。

➡️その後、あなたはできるはずです ライブブログにアクセスして、作成したブログ投稿を確認します API を通じてサイト上でライブ配信します。

おめでとうございます！達成しました！🎉

現在、 ブログのエントリを変更したり削除したりする権限があります 使用して コレクションアイテムエンドポイントの更新 そして コレクションアイテムエンドポイントの削除このプロセスはアイテムの作成を反映します。

ソリューション2の検討: Zapier Webflow統合を活用する

コーディングが得意でない場合は、 コードなしのセクションへようこそ! おそらく、前のセグメントが言葉の羅列のようだったために、ここにたどり着いたのでしょう (エンジニアたちも同じように感じていると思います 😅 )。

ザピエール Webflowを最も一般的なアプリとリンクできます タスクを自動化します。

Airtable から Webflow Zap へ

➡️ Zapier アカウントにサインインして、新しいワークフローを作成します。

➡️「Zapを作成左上隅に配置されます。

➡️ ソースアプリケーションを探す（ここでオリジナルのブログ投稿が作成されます。Airtable、Google Docs、Notion などが使用される可能性があります）。

ZapierでAirtableトリガーを設定する

私たちは活用します エアテーブル このイラストの場合。

➡️ Airtableをアプリとして選択したら、 「新しいレコード」を選択する トリガー イベントとして。この zap は、接続した Airtable Base で新しいレコードが生成されるたびに機能します。

ソースアプリとしてAirtableを選択する

➡️ あなたの エアテーブル API キー Zapierの要求に応じて、このキーは Airtableアカウントページ.

エアテーブル API キー

‎➡️ その後、キーを入手したら、 表示されたボックスに埋め込む Zapier で。

Airtable APIキーをZapierに入力する

接続が確立されると、 Airtable Baseはおそらくこのように表示されます:

これはコンテンツマーケティングの取り組みを整理するためのハックされた方法だと思いますが、Airtableのエントリは次のようになります。

‎➡️ 今なら トリガーを設定する.

➡️ 関連するベースとベース内のテーブルを選択します トリガーを精査する前に。

‎➡️ 行を含める あなたのエアテーブルで 情報が伝達されているかどうかを評価する.

ZapierでWebflowアクションを確立する

次にZapierに知らせてください Airtableトリガーに基づいて実行するアクション.

➡️ アプリケーションとしてWebflowを選択してください アクションセグメントで。

➡️ イベントとして「ライブアイテムの作成」を選択します（Zapier には専用の Webflow 公開アクションがないため、「通常」ではなく「ライブ」を選択します。したがって、アイテムを作成して同時に公開します）。

Webflow ライブアイテムアクションの作成

➡️ Webflowにログインするように指示するプロンプトが表示されます。 リンクしたいサイトを指定する.

Webflow OAuth

➡️ ブログ投稿用のWebflowコレクションを選択し、 Airtableのフィールドを揃える Webflow のブログ投稿にあるものと同じです。

AirtableとWebflow間のフィールドのマッピングは面倒になることがある

➡️ データの正確性を確認するため。