Visual Studio でチャートコントロールと Adobe Analytics をデータバインド

加藤龍彦
デジタルマーケティング

標準ADO.NET プロシージャを使ってデータバインドして、Visual Studio ツールボックスのコントロールから Adobe Analytics との双方向接続を実現。この記事ではVisual Studio のグラフィカルアプローチと、ほんの数行のコードでデータバインドをする方法を説明します。

データバインドによって、UI コントロールからデータに接続できます。 CData ADO.NET Provider for AdobeAnalytics を使って、Visual Studio 上でWindows Forms およびWeb Forms とAdobe Analytics をデータバインドできます。この記事で、Adobe Analytics を、ウィザードから変更をリアルタイムで反映するチャートにデータバインドする方法を説明します。 Code Walk-through セクションではチャートはほんの10行のコードで作成します。

チャートへのデータバインド

データバインドは３つのステップから構成されます。コントロールのインスタンス作成、データソースの設定、最後にデータバインドです。

接続を設定してデータベースオブジェクトを選択

下の手続きにより、データソース構成ウィザードを使ってチャートコントロールとAdobe Analytics との接続を作成します。ウィザード上でデータバインドをするAdobe Analytics エンティティを使います。

Windows Forms プロジェクトでは、チャートコントロールをツールボックスからフォーム上にドラグ＆ドロップします。チャートプロパティのデータセクションで DataSource を選択し、メニューからプロジェクトデータソースの追加を選択します。
出てくるデータソース構成ウィザードでデータベース -> データセットを選択します。
データ接続ステップで、「新しい接続」をクリックします。
データ接続の選択ダイアログで、「変更」をクリックして、CData Adobe Analytics のデータソースを選択して、接続プロパティを入力します。下は代表的な接続文字列ですです。:
```
GlobalCompanyId=myGlobalCompanyId; RSID=myRSID; OAuthClientId=myOauthClientId; OauthClientSecret=myOAuthClientSecret; CallbackURL=myCallbackURL;
```
Adobe Analytics への接続

それでは、Adobe Analytics に接続していきましょう。接続するには、GlobalCompanyId およびRSID を識別する必要があります。デフォルトでは、ドライバーが会社とレポートスイートの識別を自動で試みますが、これらの値を明示的に指定することも可能です。詳しい手順については、 href="/kb/help/" target="_blank">ヘルプドキュメントの「Adobe Analytics への接続」セクションをご確認ください。

Adobe Analytics への認証

続いて、認証方法を設定しましょう。Adobe Analytics はOAuth 認証標準を利用しており、OAuth またはサービスアカウントで認証できます。

ユーザーアカウント（OAuth）

ユーザーアカウントでの認証では、すべてのフローでAuthScheme をOAuth に設定する必要があります。詳しい認証手順については、 href="/kb/help/" target="_blank">ヘルプドキュメントの「Adobe Analytics への認証」セクションをご参照ください。

サービスアカウント

サービスアカウントではサイレント認証が利用でき、ブラウザでのユーザー認証が不要です。このフローを使用するには、アプリケーションを作成する必要があります。アプリケーションの作成および認可については、ドキュメントの「カスタムOAuth アプリの作成」をご確認ください。これにより、サービスアカウントにアクセス権があるAdobe Analytics データに接続できるようになります。

サービスアカウントを使用したServer-to-Server OAuth で認証するには、AuthScheme をOAuthClient に設定します。接続には以下のプロパティを設定してください。
- InitiateOAuth：GETANDREFRESH に設定
- OAuthClientId：アプリケーション設定のクライアントId に設定
- OAuthClientSecret：アプリケーション設定のクライアントシークレットに設定
接続すると、CData 製品がサービスアカウントでのOAuth フローを以下の手順で完了します。
1. クライアントクレデンシャルOAuth フローで指定されたOAuthClientId およびOAuthClientSecret を使用して、アクセストークンを取得します
2. OAuthSettingsLocation にOAuth 値を保存し、接続間で永続化されるようにします
3. トークンが期限切れになった際に、新しいアクセストークンを要求します

Connection properties for the selected data source in the Add Connection dialog. (Salesforce is shown.)

使用するデータソースオブジェクトを選択します。例は AdsReport テーブルです。

DataBind

データソースの追加とデータベースオブジェクトを選択したら、チャートにオブジェクトをバインドします。この例では、X軸に Page をY軸に PageViews を設定します。

チャートプロパティで、Series プロパティをクリックし、Series コレクションエディターを開きます。
Series プロパティでX軸、Y軸に設定するカラムを選択します：XValueMember および YValueMember プロパティにメニューからカラムを選びます。

The axes of the chart defined in the Series Collection Editor.

チャートはこれでAdobe Analytics にデータバインドされました。チャートを実行して最新のデータを表示させましょう。 The chart, filled with data at run time.

コード Walk-through

Adobe Analytics へのデータバインドはほんの数行のコードのみが必要で、３つの簡単なステップで完了できます。

Adobe Analytics に接続します。
AdobeAnalyticsDataAdapter を作成して、クエリを作成し、結果を入れるデータセットを作成します。
結果セットとチャートをデータバインドします。

下に完全なコードを示します:

AdobeAnalyticsConnection conn = new AdobeAnalyticsConnection("GlobalCompanyId=myGlobalCompanyId; RSID=myRSID; OAuthClientId=myOauthClientId; OauthClientSecret=myOAuthClientSecret; CallbackURL=myCallbackURL;");
AdobeAnalyticsCommand comm = new AdobeAnalyticsCommand("SELECT Page, PageViews FROM AdsReport WHERE City = 'Chapel Hill'", conn);
AdobeAnalyticsDataAdapter da = new AdobeAnalyticsDataAdapter(comm);
DataSet dataset = new DataSet();
da.Fill(dataset);

chart1.DataSource = dataset;
chart1.Series[0].XValueMember = "Page";
chart1.Series[0].YValueMembers = "PageViews";
// Insert code for additional chart formatting here.
chart1.DataBind();