C++Builder でWebflow のデータにデータバインドするコントロールを作成

Dibyendu Datta
Dibyendu Datta
Lead Technology Evangelist
C++Builder で標準コンポーネントとコントロールを使ってWebflow のデータ にデータバインド。



CData ODBC ドライバー for Webflow を使用すると、C++Builder の標準データアクセスコンポーネントを使ってライブのWebflow のデータ への接続を簡単に統合できます。この記事では、C++Builder でシンプルな VCL（Visual Component Library）アプリケーションを作成し、Webflow のデータ に接続してクエリを実行し、グリッドに結果を表示する方法を説明します。さらに、FireDAC コンポーネントを使ってコードからコマンドを実行する方法も紹介します。

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 Forms アプリケーションで、Data Explorer の FireDAC ノードを展開します。
  2. Data Explorer の ODBC Data Source ノードを右クリックします。
  3. Add New Connection をクリックします。
  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 をフォームにドロップします — これは実行時エラーを回避するために必要です。

FireDAC コンポーネントを使ってWebflow にコマンドを実行

TFDConnection および TFQuery コンポーネントを使用して、Webflow のデータ にクエリを実行できます。このセクションでは、TFQuery コンポーネントを使ったクエリ実行のWebflow 固有の例を紹介します。

Webflow のデータに接続

データソースに接続するには、TFDConnection コンポーネントの Connected プロパティを true に設定します。コードから同じプロパティを設定することもできます：

FDConnection1->ConnectionDefName = "CData Webflow ODBC Source";
FDConnection1->Connected = true;

TFDQuery コンポーネントをWebflow のデータ に接続するには、コンポーネントの Connection プロパティを設定します。設計時に TFDQuery コンポーネントを追加すると、上記のアプリケーションのように、その Connection プロパティはフォーム上の TFDConnection を指すように自動的に設定されます。

パラメータ化クエリの作成

パラメータ化クエリを作成するには、以下の構文を使用します： 

FDQuery1->SQL->Text = "select * from Sites where id = :Id";
FDQuery1->ParamByName("id")->AsString = "your_site_id";
FDQuery1->Open();

上記の例では、文字列型の入力パラメータを名前でバインドし、結果のデータセットを開いています。

ステートメントの準備

ステートメントの準備は、システムリソースと時間の両方でコストがかかります。ステートメントの準備中は、接続がアクティブで開いている必要があります。デフォルトでは、FireDAC は同じクエリを何度もコンパイルすることを避けるためにクエリを準備します。ステートメントの準備を無効にするには、ResourceOptions.DirectExecute を True に設定します。例えば、クエリを一度だけ実行する必要がある場合などです。

クエリの実行

SELECT クエリなど、結果セットを返すクエリを実行するには、Open メソッドを使用します。Open メソッドはクエリを実行し、結果セットを返して開きます。クエリが結果セットを生成しない場合、Open メソッドはエラーを返します。

FDQuery1->SQL->Text = "select * from Sites where id = :Id";
FDQuery1->ParamByName("id")->AsString = "your_site_id";
FDQuery1->Open();

関連記事

以下に、RAD Studio、Delphi、C++ Builder で CData ODBC ドライバーを使用するための他の記事を紹介します。

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

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

Webflow に接続

この記事の内容

関連記事