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サイトとの接続の開始
前提条件:
- あ ブログコレクションを特集したWebflowサイト
- テンプレートがない場合は、 スタートアップ Webflow テンプレート コンパイル
- あ サーバ のように Node.js または ジャンゴ
- 選択する場合 サーバーレス展開を選択する 次のようなソリューション AWS ラムダ または Google クラウド機能
- の 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('request'); const options = { method: 'POST', url: 'https://api.webflow.com/collections/YOUR_BLOG_POSTS_COLLECTION_ID/items', headers: { 'Accept-Version': '1.0.0', Authorization: 'Bearer YOUR_API_TOKEN_HERE', 'content-type': 'application/json' }, body: { fields: { name: 'API経由の私の最初のブログ投稿', slug: 'my-inaugural-blog-post-via-api', _archived: false, _draft: false, author: '580e640c8c9a982ac9b8b778', 'post-body': '<p>ブログ投稿の本文のHTMLは次のとおりです</p>', 'post-summary': 'ブログ投稿の要約' } }, 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間のフィールドのマッピングは面倒になることがある
➡️ データの正確性を確認するため。
これで完了です！準備完了です。🎉
zap を有効にすると、Airtable にレコードを追加するたびに、CMS コレクション アイテムが Webflow に追加され、ライブで公開されます。
このプロセスは理論的には効果的であるように見えますが、実際には多くの課題が生じます。
楽しいですね。
そうじゃない？
Webflow-Zapier 統合における認識された制約
- ザピエール 排除することができない アイテム Webflow zapを使用したCMSから、コレクションアイテムの作成と更新のみが可能です。
- 公開前にアイテムをステージングする機能がない サイトの展開を正確に制御できないため
- Airtableのユーザーインターフェースは、広範なコンテンツを作成するのにひどいです
Zapier経由でWebflowにコンテンツを配信する簡単な方法をお探しの場合は、 独自のCMSを活用することを検討する.
Letterdrop が出版に Webflow を採用
これから何が起こるのでしょうか?
CMSを選択 Webflowに公開可能 — 1 作家に焦点を当てる そして本当にコードがない.
レタードロップ コンテンツマーケティングに特化したヘッドレスCMSを発表Webflow CMS コレクションにシームレスに公開されます。
Letterdropで簡単に出版
Letterdropは、使い慣れたCMSエクスペリエンスを提供しながらも、はるかに強力です
LetterdropはWebFlowに公開するための総合的なツールとして機能します。 プロジェクト管理、コンテンツカレンダーのスケジュール設定、配信を容易にするコンテンツ運用プラットフォーム.
Letterdrop は次の機能を提供します:
- 現在利用可能な唯一の本物のWebflow CMS統合 — ディン！ディン！ディン！Letterdrop は Webflow コレクションを更新し、1 分以内に Webflow サイトにすばやく公開します。カスタム フィールドやプレビューなど、特定のシナリオをすべて管理します。実際、当社は公式の Webflow パートナーとして認められています。
- SEO最適化ツールを内蔵 — Googleの記事を構造的に強化し、競合ページから洞察を得るための自動推奨事項を提供します
- AI搭載のライティング支援ツールとGrammarly Business — ブレインストーミング、コンテンツの構成、文法の検証を支援
- プレビュー — Webflow ステージングサイトで記事を選択して公開し、公開ボタンを押す前に外観をプレビューします。
- 構文強調表示付きコード — Markdownをサポートし、構文の強調表示の言語を指定し、Webflowと互換性のある形式に変換します。 プリズム.
- 動的コンテンツカレンダー — プロジェクトのステータスを自動的に更新し、必要なアクションについて貢献者に通知します
- ワンクリックのメールニュースレターとソーシャルメディア配信 — ブログ投稿をソーシャル メディアや電子メールで自動的に配信します。マーケティング業務の追跡はもう必要ありません。
- ライブコラボレーションと変更履歴 — チームメンバーはプロジェクトでやり取りや共同作業ができ、すべてCMS内で同期されます。
レタードロップのSEOオプティマイザー
Webflowを簡素化するためにLetterdropで出版を開始
あなたにはあらゆるサポートが必要だと理解しています。しかし、 明らかにニーズに合わないCMSに踏み込むと、フラストレーションが溜まります.
Webflowはウェブサイト構築に優れています。しかし、ブログの公開に関しては、 WebflowのCMSではAPIを展開するためのエンジニアリング作業が必要 Webflow を使用してパーソナライズされた CMS ツールを開発するのは非常に困難です。
確かに、 機知に富んだマーケティング担当者はZapierを通じてソリューションを組み立てることができるノーコードユーティリティの配列を統合しているにもかかわらず、それはまだ 「ダクトテープ」による修正 目標を達成するために、Webhook リクエストの数には上限があり、この制限を超えると Zap はアクティブ化されなくなります。 Zapier もこれを認めています。
まあ！
その SEOツール、盗作チェッカー、コンテンツカレンダー、役割と権限、ワンクリック公開など、LetterdropはWebflowを簡素化します。Zapier でできることはすべて実現します… そしてその先へ — 「フランケンボックスのダクトテープ、エンジンが燃えている、翼が落ちている、山に墜落している」という不安に満ちた感覚は除きます。
EN 
ZH 
ZH_CN 
JA 
KO