Delphi のWebflow のデータへのデータバインドコントロール

古川えりか
古川えりか
コンテンツスペシャリスト
標準のデータアクセスコンポーネントとコントロールを備えたDelphi のWebflow にデータバインドします。



CData ODBC Driver for API は、ODBC 標準をサポートし、リアルタイムWebflow のデータとビジュアルフォームデザイナおよびDelphi の他のラピッド開発ツールとの統合を可能にします。ODBC ドライバーは、データベース開発用のシングルAPI を提供することにより、Delphi のような単一のコードベースを共有するアプリケーションのデータアクセス戦略を簡素化します。この記事では、Webflow に接続してシンプルなVisual Component Library (VCL) アプリケーションおよびDelphi コードからデータをクエリする方法を説明します。

CData ODBC ドライバとは？

CData ODBC ドライバは、以下のような特徴を持ったリアルタイムデータ連携ソリューションです。

  1. Webflow をはじめとする、CRM、MA、会計ツールなど多様なカテゴリの270種類以上のSaaS / オンプレミスデータソースに対応
  2. 多様なアプリケーション、ツールにWebflow のデータを連携
  3. ノーコードでの手軽な接続設定
  4. 標準 SQL での柔軟なデータ読み込み・書き込み

CData ODBC ドライバでは、1.データソースとしてWebflow の接続を設定、2.Delphi 側でODBC Driver との接続を設定、という2つのステップだけでデータソースに接続できます。以下に具体的な設定手順を説明します。

CData ODBC ドライバのインストールとWebflow への接続設定

まずは、本記事右側のサイドバーからAPI ODBC Driver の無償トライアルをダウンロード・インストールしてください。30日間無償で、製品版の全機能が使用できます。

未指定の場合は、初めにODBC DSN (data source name) で接続プロパティを指定します。ドライバーのインストールの最後にアドミニストレーターが開きます。Microsoft ODBC Data Source Administrator を使用して、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］プロパティをODBC DSN for API の名前に設定します。
A FireDAC connection to the ODBC data source.(Salesforce is shown.)

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 をフォームにドロップします。
Components in FireDAC used to databind an editable grid to the data source.(Salesforce is shown.)

FireDAC コンポーネントを使用してWebflow へのコマンドを実行

TFDConnection およびTFQuery コンポーネントを使用してWebflow へのクエリを実行できます。このセクションでは、TFQuery コンポーネントを使用してクエリを実行するWebflow 固有の例を示します。

Webflow のデータに接続

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

FDConnection1.ConnectionDefName := 'mywebflow';
FDConnection1.Connected := true;

パラメータクエリの作成

パラメータ化されたリソースはパフォーマンスを向上させることができます。ステートメントの準備は、システムリソースと時間の面でコストがかかります。ステートメントの準備中、接続がアクティブで開いている必要があるためです。FireDACはデフォルトで、同じクエリが何度もリコンパイルされないようにクエリを準備します。ステートメントの準備を無効にするには、ResourceOptions.DirectExecute を［True］に設定します。クエリを一回だけ実行する必要がある場合などに設定します。

クエリの実行

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

FDQuery1.Open('select * from Sites where Id = :Id',['your_site_id']);

おわりに

このようにCData ODBC ドライバと併用することで、270を超えるSaaS、NoSQL データをコーディングなしで扱うことができます。30日の無償評価版が利用できますので、ぜひ自社で使っているクラウドサービスやNoSQL と合わせて活用してみてください。

CData ODBC ドライバは日本のユーザー向けに、UI の日本語化、ドキュメントの日本語化、日本語でのテクニカルサポートを提供しています。

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

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

Webflow に接続

この記事の内容

関連記事