【ノーコード】Power Apps データフローを使ってWebflow のデータをDataverse に連携する方法

加藤龍彦
加藤龍彦
デジタルマーケティング
Webflowデータ連携の複雑さをPower Apps データフローとCData Power BI Connectorで解決。オンプレミスゲートウェイ設定からアプリ作成までノーコードで完了する実践的手順を詳しく解説します。



Power Apps はMicrosoft のローコードアプリ開発ツールです。Power Apps には、Power Apps 上で使えるデータベースライクなDataverse(旧CDS)というサービスがあるのですが、このサービスに連携するためのデータフローというデータインテグレーション機能が存在します。

Access やSharePoint リストを元に、Dataverse のエンティティ(テーブルのようなもの)を自動生成し、定期的にデータを同期させてくれるという便利な機能です!デフォルトでも30種類くらいのサービスに接続できるようになっているのですが、CData のPower BI Connectors と組み合わせればWebflow を含む270種類以上のデータソースに接続できます。 ここでは、汎用ODBC データプロバイダーとしてWebflow に接続し、Power Apps オンプレミスデータゲートウェイからWebflow のデータを連携利用する手順を説明します。

Webflow のデータに接続するDSN を設定

まずは、右側のサイドバーからPower BI Connector for API をダウンロードします。30日間無料で全機能が利用できるので、お気軽にご利用ください。インストールが完了すると、以下のように接続設定画面が表示されるので、 DSN を設定します。 DSN 設定の詳細については、ドキュメントを参照してください。 ODBC DSN設定画面

Webflow DSN の設定方法

認証

Webflow は、サイト、CMS コレクション、e コマースデータ、その他のリソースへの安全なアクセスを確保するために、OAuth 2.0 認証を使用します。この認証方式により、Webflow ワークスペースに安全に接続し、適切な認可のもとでリソースを管理できます。

OAuth 2.0 のセットアップと設定

ステップ 1:Webflow OAuth アプリケーションの作成

OAuth 認証をセットアップするには、以下のステップで進めます:

  1. Webflow Developer Portal にアクセスします
  2. Webflow アカウントの「Apps & Integrations」に移動します
  3. 「Register an App」をクリックして新しい OAuth アプリケーションを作成します
  4. アプリケーション名、説明、リダイレクト URI(CallbackURL)を設定します
  5. 接続で使用する Client ID と Client Secret をコピーします

必須の接続プロパティ

  • AuthScheme:OAuth に設定します(必須)
  • OAuthClientId:Webflow OAuth アプリケーションの Client ID(必須)
  • OAuthClientSecret:Webflow OAuth アプリケーションの Client Secret(必須)
  • CallbackURL:OAuth アプリケーションで指定したリダイレクト URI(必須)
  • InitiateOAuth:トークンを自動管理するには GETANDREFRESH に設定します(推奨)

必須の OAuth スコープ

Webflow API プロファイルでは、以下の OAuth スコープが必要です:

  • sites:read - サイト情報および設定への読み取りアクセス
  • pages:read - サイトページへの読み取りアクセス
  • cms:read - CMS コレクションおよびアイテムへの読み取りアクセス
  • forms:read - フォームおよびフォーム送信への読み取りアクセス
  • assets:read - メディアアセットおよびフォルダーへの読み取りアクセス
  • ecommerce:read - 製品、注文、在庫への読み取りアクセス
  • authorized_user:read - 認可されたユーザーへの読み取りアクセス

オンプレミスデータゲートウェイで Webflow コネクタを認識させる

次にオンプレミスデータゲートウェイにインストールしたWebflow コネクターを認識させます。もしデータゲートウェイのインストールがまだであれば、こちらのMS 公式ページからダウンロードできます。

  • Power Apps の環境では、モデル駆動アプリで利用できるDataverse にデータを連携するので、Dataverse の環境を予め構成しておいてください。
  • オンプレミスデータゲートウェイを立ち上げて「コネクタ」のタブに移動し、フォルダパスから「C:\Program Files\CData\CData Power BI Connector for API」を選択します。
  • カスタムデータコネクタが識別されれば、設定完了です。
  • データフローの接続を構成する

    それでは Power Apps の画面に移動して、データフローを作成してみましょう。

    • Power Apps の画面から「データフロー」を選択し、「データフローを作成する」をクリックします。
    • 任意の名称を入力し、「作成」をクリック
    • データソース一覧の中から「ODBC」を選択します。
    • 接続設定画面では、先程設定した接続情報を使うので接続文字列のところに「DSN=接続名称(今回の場合はDSN=CData PBI Webflow )」と入力します。オンプレミスデータゲートウェイからは接続先のゲートウェイが表示されるので、それを選択。現在のPower Apps データフローの仕様上ODBC 接続では認証が必須のようなので、認証の種類として「Basic」を選択し、適当な文字列を入力しておきます(この文字列は使われないので、特に気にしなくて大丈夫です)。
    • 次の画面に進むと、対象のテーブル・もしくはビュー選択画面に移動します。テーブルを選択すると、プレビューが表示され、正常にコネクターとゲートウェイ経由でWebflow のデータが参照できていることがおわかりいただけると思います。テーブルを選択して、次へ進みます。
    • クエリの編集画面では、特にカラムの変換など必要ない場合は、変更する必要はありません。そのまま次へ進んでも大丈夫です。
    • 重要なエンティティマップです。ここで、Dataverse にエンティティを構成するための各種設定を実施します。今回は新しくエンティティを構成してしまうので、「新しいエンティティを読み込む」にチェックを入れます。デフォルトでは、対象フィールドのタイプが複数行テキストになってしまうので、これらを「テキスト」のタイプに変更し、最後にプライマリフィールドを選択テーブルへ設定すればOKです。
      また、もしデータの差分をDataverse 側に残しておきたい場合は、「クエリ出力に存在しない行を削除します」にチェックを入れておきましょう。
    • 最後にデータの更新方法を選択します。せっかくなので、自動的に更新にしてみましょう。以下のように1時間ごとに更新というように設定しておけば、1時間毎に随時登録されたデータが吸い上げられ、最新のデータがDataverse 上に登録されていきます。
    • 設定後、「作成」をクリックすると、エンティティの作成と初期のデータ同期が開始されます。「完了済み」になればOKです。
    • データタブの「エンティティ」を選択すると、自動的に生成されたエンティティが一覧に含まれていることがわかります。

    おわりに

    このように、Power Apps から簡単にWebflow のデータに接続して利用することができました。CData のPower BI Connector は、Webflow 以外にも270種類以上のデータソースに対応しています。30日間の無償トライアルがありますので、ぜひお試しください。

はじめる準備はできましたか?

API Driver で Webflow のライブデータに接続

Webflow に接続