Webflow のデータ 用のシンプルな VCL アプリケーションを構築

Dibyendu Datta
Dibyendu Datta
Lead Technology Evangelist
CData ODBC Driver for Webflow を使用して RAD Studio でWebflow のデータを表示するシンプルな VCL アプリケーションを構築する方法を説明します。



Embarcadero RAD Studio は、Delphi および C++Builder アプリケーション用の開発環境を提供します。CData ODBC Driver for Webflow を使用すると、RAD Studio 内からリアルタイムWebflow のデータにアクセスでき、データをテーブル、ビュー、ストアドプロシージャとして抽象化してWebflow のデータの取得が可能です。この記事では、Webflow に接続し、フォームデザイナを使用してシンプルな VCL アプリケーションを作成する方法を説明します。

Webflow のデータ への接続を作成

まだ設定していない場合は、ODBC DSN（データソース名）で接続プロパティを指定します。これはドライバーインストールの最後のステップです。Microsoft ODBC データソースアドミニストレーターを使用して、ODBC 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 - 認可されたユーザーへの読み取りアクセス

次に、以下の手順で Data Explorer を使用してWebflow のデータへの FireDAC 接続を作成します。

  1. 新しい VCL フォームアプリケーションで、Data Explorer の FireDAC ノードを展開します。
  2. Data Explorer で ODBC Data Source ノードを右クリックします。
  3. ［新しい接続の追加］ をクリックします。
  4. 接続の名前を入力します。
  5. 表示される FireDAC Connection Editor で、DataSource プロパティに Webflow 用 ODBC DSN の名前を設定します。

Webflow のデータ に接続する VCL アプリケーションを作成

以下の手順に従って、クエリ結果をグリッドに表示するシンプルな VCL アプリケーションからWebflow のデータへのクエリ実行を開始します。

  1. TFDConnection コンポーネントをフォームにドロップし、以下のプロパティを設定します。

    • ConnectionDefName:Webflow のデータへの FireDAC 接続を選択します。
    • Connected: メニューから True を選択し、表示されるダイアログで資格情報を入力します。

  2. TFDQuery コンポーネントをフォームにドロップし、以下のプロパティを設定します。

    • Connection: まだ指定されていない場合は、このプロパティを TFDConnection コンポーネントに設定します。

    • SQL: SQL プロパティのボタンをクリックしてクエリを入力します。例:

      SELECT ,  FROM Sites WHERE Id = 'your_site_id'
    • Active: このプロパティを true に設定します。

  3. TDataSource コンポーネントをフォームにドロップし、以下のプロパティを設定します。

    • DataSet: このプロパティのメニューで、TFDQuery コンポーネントの名前を選択します。

  4. TDBGrid コントロールをフォームにドロップし、以下のプロパティを設定します。

    • DataSource: TDataSource の名前を選択します。
  5. TFDGUIxWaitCursor をフォームにドロップします。これはランタイムエラーを回避するために必要です。

これで、TFDQuery オブジェクトに設定された SQL クエリの結果を表示する実行可能なアプリケーションが完成しました。

関連記事

RAD Studio、Delphi、C++ Builder で CData ODBC ドライバを使用するその他の記事は以下をご覧ください。

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

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

Webflow に接続

この記事の内容

関連記事