Webflow のデータをDevExpress Data Grid にデータバインドする。

CData API Driver for ADO.NET は、サードパーティ製コントロールと組み合わせて使える標準的なADO.NET データアクセスコンポーネントを備えています。通常のADO.NET データバインドの手順に沿って進めるだけで、UI コントロールからリアルタイムデータへの双方向アクセスを実現できます。この記事では、CData のコンポーネントを使って DevExpress UI コントロール（Windows Forms およびWeb コントロール） にデータバインドする方法を紹介します。今回は、リアルタイムのデータを可視化するチャートにデータバインドしていきます。

認証

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 - 認可されたユーザーへの読み取りアクセス

Windows Forms コントロール

下のコードでは、Webflow でDevExpress のチャートに追加する方法を説明します。APIDataAdapter はチャートコントロールのSeries プロパティにバインドします。コントロールのDiagram プロパティはx 軸とy 軸をカラム名として定義します。

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Webflow.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT ,  FROM Sites WHERE Id = 'your_site_id'", connection);

  DataTable table = new DataTable();
  dataAdapter.Fill(table);
  DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
  chartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}

Web コントロール

下のコードではWebflow でDevExpress Web を操作するための設定方法を説明します。APIDataAdapter はチャートのSeries プロパティにバインドします。Diagram プロパティはx 軸とy 軸をカラム名として定義します。

using DevExpress.XtraCharts;

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Webflow.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT ,  FROM Sites WHERE Id = 'your_site_id'", connection);
  DataTable table = new DataTable();
  APIDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}