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

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

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

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

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

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

1. Windows Forms プロジェクトでは、チャートコントロールをツールボックスからフォーム上にドラグ＆ドロップします。チャートプロパティのデータセクションで DataSource を選択し、メニューからプロジェクトデータソースの追加を選択します。
2. 出てくるデータソース構成ウィザードでデータベース -> データセットを選択します。
3. データ接続ステップで、「新しい接続」をクリックします。

4. データ接続の選択ダイアログで、「変更」をクリックして、CData Spotify のデータソースを選択して、接続プロパティを入力します。下は代表的な接続文字列ですです。:

   Below is a typical connection string:

   Profile=C:\profiles\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;

   OAuth 認証の設定

   Spotify は認証に OAuth 2.0 を使用します。クライアント認証情報を取得するには、Spotify Developer Dashboard でアプリケーションを作成する必要があります。

   Spotify アプリケーションのセットアップ

   1. Spotify Developer Dashboard にアクセスします。
   2. Spotify アカウントでログインして Create app をクリックします。
   3. アプリ名、説明を入力し、Redirect URI を設定します（デスクトップアプリケーションの場合は

      http://localhost:33333

      など）。
   4. アプリ設定から Client ID と Client Secret をコピーします。

   接続プロパティ

   以下の接続プロパティを設定して接続を確立してください：

   • AuthScheme：OAuth に設定します。
   • InitiateOAuth：GETANDREFRESH に設定します。InitiateOAuth を使うと、OAuthAccessToken を取得するプロセスを管理できます。
   • OAuthClientId：Spotify アプリケーションの Client ID に設定します。
   • OAuthClientSecret：Spotify アプリケーションの Client Secret に設定します。
   • Scope：必要な OAuth スコープ（スペース区切り）に設定します。デフォルトには、このプロファイルのテーブルに必要なすべての読み取りスコープが含まれます。
   • CallbackURL：Spotify アプリケーションで設定したリダイレクト URI に設定します（例：http://localhost:33333）。

   接続文字列の例

   Profile=C:\profiles\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;
   

   利用可能な OAuth スコープ

   • user-read-private：ユーザーのサブスクリプション詳細と露骨なコンテンツ設定への読み取りアクセス。
   • user-read-email：ユーザーのメールアドレスへの読み取りアクセス。
   • user-library-read：ユーザーが保存したトラック、アルバム、エピソード、ショー、オーディオブックへの読み取りアクセス。
   • playlist-read-private：ユーザーの非公開プレイリストへの読み取りアクセス。
   • playlist-read-collaborative：ユーザーがフォローしているコラボレーティブプレイリストへの読み取りアクセス。
   • user-follow-read：現在のユーザーがフォローしているアーティストの一覧への読み取りアクセス。
   • user-read-playback-state：ユーザーのプレーヤー状態（デバイス、現在のトラック、再生位置）への読み取りアクセス。
   • user-read-currently-playing：ユーザーが現在再生中のコンテンツへの読み取りアクセス。
   • user-read-playback-history：ユーザーが最近再生したトラックへの読み取りアクセス。
   • user-top-read：ユーザーのトップアーティストとトラックへの読み取りアクセス。

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

DataBind

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

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

チャートはこれでSpotify にデータバインドされました。チャートを実行して最新のデータを表示させましょう。

コード Walk-through

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

1. Spotify に接続します。
2. APIDataAdapter を作成して、クエリを作成し、結果を入れるデータセットを作成します。
3. 結果セットとチャートをデータバインドします。

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

APIConnection conn = new APIConnection("Profile=C:\profiles\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;");
APICommand comm = new APICommand("SELECT ,  FROM Albums WHERE Id = '4aawyAB9vmqN3uQ7FjRGTy'", conn);
APIDataAdapter da = new APIDataAdapter(comm);
DataSet dataset = new DataSet();
da.Fill(dataset);

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