AirOpsをWebflow CMSに接続するには?

簡単な答え:AirOpsのネイティブWebflow連携、または「Publish to CMS from Grid」アクションを使えば、AirOpsとWebflow CMSを接続できます。接続すると、AI生成コンテンツがコピーや整形、ツールの切り替えなしでWebflow CMSのコレクションに直接反映されます。

AI生成コンテンツは、公開されてはじめて役に立ちます。AirOpsのワークフローを実行したあと、出力を手作業でWebflowにコピーしているなら、自動化の意味がなくなるほどの手間が増えています。

このチュートリアルでは、AirOpsの出力をWebflow CMSのコレクションに自動で流し込む方法を具体的に説明します。最後まで進めると、AI生成コンテンツをフィールドごとにCMSへ直接公開するパイプラインが完成し、Webflowのエディタに触れる必要はなくなります。

AirOpsとWebflow CMSの連携でできること

AirOpsとWebflowの連携は、AIコンテンツのワークフローをAPI経由でWebflow CMSのコレクションにつなぎます。ドキュメントをエクスポートしてWebflow用に整形し直す代わりに、AirOpsの出力フィールドをCMSコレクションのフィールドへ直接マッピングし、必要なタイミングでアイテムを公開できます。

具体的には次のとおりです。

• タイトルフィールドはWebflowのアイテム名にマッピングされます
• リッチテキストの出力はコレクション内の複数行テキストまたはリッチテキストフィールドにマッピングされます
• メタディスクリプション、スラッグ、タグはそれぞれ対応するフィールドにマッピングされます
• 下書きまたは公開のステータスはワークフロー内で設定します

Webflow自身のチームも、この連携をAirOpsと併用してコンテンツのリフレッシュを5倍速にしました。拡張性のある公開ワークフローを構築するなら、CMSがオーガニックでの成果にどう影響するかを理解しておくことも役立ちます。特にSEOに強いCMSを選ぶ際は重要です。

始める前に必要なもの

パイプラインを構築する前に、次のものを用意してください。

• 有効なAirOpsアカウント(有料プランならすべてCMS連携を利用できます)
• CMSコレクションが1つ以上設定されたWebflowサイト
• CMSの読み取り/書き込み権限を持つWebflow APIトークン
• 構造化された出力(タイトル、本文、メタ情報など)を生成する、動作するAirOpsワークフロー

AirOpsのワークフローがまだ構造化されていないテキストを出力している場合は、先に構造化してください。この連携はフィールド単位で動作するため、マッピングの前に出力をコレクションのスキーマに合わせておく必要があります。

ステップ1:WebflowをAirOpsに接続する

1. AirOpsを開き、左サイドバーの各種連携に移動します
2. 連携の一覧からWebflowを選択します
3. Connectをクリックし、Webflowアカウントで認証します
4. AirOpsにサイトのCMSコレクションへのアクセスを許可します
5. 公開先のWebflowサイトを選択します

AirOpsは認証にOAuthを使用するため、この段階でAPIキーを手動で貼り付ける必要はありません。チームのワークスペースで作業している場合は、ワークスペースレベルで連携を設定すると、すべてのワークフローが同じWebflow接続を共有できます。

ステップ2:Webflow CMSのコレクションスキーマを設定する

Webflowのコレクションは、AirOpsのワークフローが生成する出力と一致している必要があります。Webflowを開き、コレクションのフィールドをAirOpsの出力と照らし合わせて確認してください。

AirOpsとの相性が良い標準的なブログコレクションのスキーマは、次のようになります。

AirOpsのワークフローが生成するフィールドがコレクションにない場合は、先に進む前にWebflowで追加してください。フィールドが一致していないと、公開アクションが失敗したり、コンテンツが通知なく欠落したりします。

ステップ3:構造化されたフィールドを出力するようAirOpsのワークフローを作成または更新する

AirOps内では、ワークフローがWebflowのフィールドに対応する名前付きの出力を生成する必要があります。Gridワークフロー(AirOpsのバッチコンテンツツール)を使う場合、グリッドの各列がマッピング可能なフィールドになります。

ワークフローの出力は次のように構成します。

• title(プレーンテキスト、SEOのため60文字以内)
• body(リッチテキストまたはHTML。Webflowのフィールドタイプに応じて選択)
• meta_description(プレーンテキスト、140〜160文字)
• slug(小文字、ハイフン区切り、スペースなし)
• status(テスト中は「draft」に設定し、準備ができたら「published」に切り替えます)

特にリッチテキストフィールドでは、AirOpsはHTML入力に対応しています。Webflowのリッチテキストフィールドが HTMLを受け付ける場合は、本文の出力をプレーンなMarkdownではなくHTML形式にしてください。そうすれば、インポート時にWebflowが書式を削除することなく、見出し階層、太字、リスト、リンクが保持されます。

ここは、AirOpsとWebflow CMSの設定で最も失敗しやすいポイントです。本文をプレーンテキストで出力すると、リッチテキストフィールドに送った時点で書式がすべて失われます。

ステップ4:AirOpsで「Publish to CMS」アクションを追加する

ここでパイプラインが完成します。

1. AirOpsのワークフロー内でAdd Actionをクリックします
2. Publish to CMS from Grid(バッチワークフロー向け)またはWebflow CMS Item(単一アイテムのワークフロー向け)を選択します
3. ドロップダウンから、接続済みのWebflowサイトを選択します
4. 対象のCMSコレクションを選択します
5. AirOpsの各出力フィールドを、対応するWebflowコレクションのフィールドにマッピングします

フィールドマッピング画面では、右側にWebflowのコレクションフィールド、左側にAirOpsのワークフロー出力が表示されます。ドラッグまたは選択して接続してください。

参照フィールド(Webflowのカテゴリーや著者フィールドなど)には、テキストのラベルではなく、その参照先のWebflowアイテムIDを渡す必要があります。これらのIDは、Webflow CMS APIから取得するか、Webflowのコレクションマネージャーで確認してください。

ステップ5:下書きアイテム1件でテストする

バッチ公開を実行する前に、ステータスを下書きにしたアイテム1件で接続をテストします。

1. ワークフローのステータス出力を次のように設定します: "draft"
2. 1行または1件の入力だけでワークフローを実行します
3. Webflow CMSを開き、下書きアイテムがコレクションに表示されているか確認します
4. 各フィールドを確認します。リッチテキストの書式が保たれているか、スラッグが正しいか、空欄のフィールドがないかをチェックしてください

この段階でよくある問題:

• リッチテキストフィールドにHTMLタグがそのまま表示される:Webflowのフィールドがリッチテキストではなくプレーンテキストに設定されています。Webflowでフィールドタイプを更新してください。
• アイテムは表示されるがスラッグが空:スラッグの出力にスペースや大文字が含まれています。AirOpsにテキスト変換のステップを追加して整形してください。
• 参照フィールドが空:WebflowのアイテムIDではなくラベルを渡しています。IDベースのマッピングに切り替えてください。

バッチ公開に進む前に、フィールドの問題をすべて修正してください。

ステップ6:AirOps Gridからバッチ公開を実行する

1件のテストに合格したら、AirOps Gridsを使って大規模に公開できます。

1. 公開したいコンテンツの行があるAirOps Gridを開きます
2. Webflowに送信する行を選択します(すべて選択も可能です)
3. Publish to CMSをクリックします
4. 対象のコレクションとフィールドマッピングを確認します
5. バッチアクションを実行します

AirOpsは各行を順番に処理し、1行ごとにWebflowで新しいCMSアイテムを作成します。行ごとに成功または失敗を示すステータスインジケーターが表示されます。失敗した行にはエラーメッセージが表示され、多くの場合、特定のフィールドマッピングの問題を示しています。

コンテンツのリフレッシュ(新規作成ではなく、既存のWebflowアイテムの更新)では、AirOpsはアイテムIDまたはスラッグで照合し、重複させずに更新できます。既存のWebflowアイテムIDを出力列として渡し、作成アクションではなく更新アクションにマッピングしてください。

Webflowでリッチテキストの書式を扱う方法

リッチテキストは、AirOpsとWebflow CMSのパイプラインの中で技術的に最も厄介な部分のため、独立したセクションで説明します。

WebflowのリッチテキストフィールドはHTMLを受け付けます。AirOpsは、プロンプトやワークフロー設定で指示すればHTMLを出力できます。最も確実な方法は次のとおりです。

1. プロンプトで、AirOpsの本文出力をHTML形式にすると明示します(「記事本文を、適切な見出しタグ、段落タグ、リストタグを含む有効なHTMLで出力してください」)
2. この出力をWebflowのリッチテキストフィールドにマッピングします
3. 次のことをテストします: <h2>, <h3>, <ul>, <ol>, <strong>、および <a> タグがWebflowで正しく表示されること

表やカスタムコード要素には追加の対応が必要です。Webflowのリッチテキストフィールドは、通常のHTMLページと同じようにはHTMLの表をネイティブに扱えません。コンテンツに表が含まれる場合は、公開前に構造化されたリストに変換するか、リッチテキストフィールドの代わりにWebflowのカスタム埋め込みフィールドを使用してください。

フルループの自動化:トリガーからCMSアイテム公開まで

このワークフローで最も効率的な形は、手作業のステップをすべてなくすことです。トリガーから公開までのループは、次のように設定します。

1. トリガー:Googleスプレッドシートへの新しい行の追加、Airtableレコードの更新、またはAirOpsのスケジュール実行
2. Generate:AirOpsがコンテンツのワークフローを実行し、構造化された出力を生成
3. 公開:AirOpsが手動のクリックなしで、Webflow CMSの公開アクションを自動で実行
4. Notify:アイテムが公開されたことを、AirOpsがSlackまたはメールで通知

この設定は、コンテンツのリフレッシュ用ワークフローで特に役立ちます。既存のWebflow CMSのアイテムIDと現在のコンテンツのリストをAirOpsに渡すと、ワークフローがそれらを書き換えまたは更新し、出力が同じCMSアイテムにそのまま戻ります。

よくある質問

Q:AirOpsはWebflow CMSに直接公開できますか?それともZapierが必要ですか?

AirOpsにはWebflowのネイティブ連携があり、ZapierやMakeといったミドルウェアを介さずに、CMSコレクションへ直接公開できます。AirOps内でWebflowを接続し、出力フィールドをコレクションのフィールドにマッピングすれば、ワンアクションで公開できます。サードパーティの自動化ツールは必要ありません。

Q: AirOpsでWebflowのリッチテキストフィールドに使うべき形式は何ですか?

Webflowのリッチテキストフィールドには、HTML形式の出力を使用してください。AirOpsのワークフローで、見出し、段落、太字、リストに適切なタグを付けた有効なHTMLとして本文を出力するよう指示します。プレーンテキストやMarkdownのままWebflowのリッチテキストフィールドにインポートすると、書式が失われます。

Q: AirOpsは既存のWebflow CMSアイテムを更新できますか、それとも新規作成のみですか?

AirOpsは、既存のWebflow CMSアイテムを更新できます。既存アイテムのWebflow IDをワークフローに渡し、作成アクションではなく更新アクションにマッピングします。コンテンツリフレッシュのワークフローは、この方法で動いています。アイテムIDで照合し、コンテンツを書き直して、同じCMSアイテムに更新を反映します。

Q: AirOpsは1回のバッチ実行で、Webflow CMSアイテムをいくつまで公開できますか?

AirOpsはGridの行を順番に処理するため、AirOps側にはバッチサイズの厳密な上限はありません。ただし、WebflowのCMS APIにはレート制限があります(現在、標準プランでは1分あたり60リクエスト)。60件を超える大規模なバッチでは、AirOpsのワークフロー設定にレート制限用のバッファを組み込むか、バッチを小さく分けて実行してください。

Q: この連携は技術に詳しくないチームにも向いていますか?

はい。AirOpsのフィールドマッピング画面は視覚的に操作でき、APIの知識は必要ありません。主な技術的な作業は、WebflowのOAuth接続の設定と、コレクションのスキーマの把握です。これらが整えば、コンテンツチームは開発者のサポートなしでワークフローを実行し、公開できます。