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

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

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

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

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

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

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

  1. Windows Forms プロジェクトでは、チャートコントロールをツールボックスからフォーム上にドラグ&ドロップします。チャートプロパティのデータセクションで DataSource を選択し、メニューからプロジェクトデータソースの追加を選択します。 Add a data source to be bound to the chart.
  2. 出てくるデータソース構成ウィザードでデータベース -> データセットを選択します。
  3. データ接続ステップで、「新しい接続」をクリックします。
  4. データ接続の選択ダイアログで、「変更」をクリックして、CData Google Translate のデータソースを選択して、接続プロパティを入力します。下は代表的な接続文字列ですです。:

    Below is a typical connection string:

    Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;

    認証

    Google Cloud Translation API では、翻訳サービス、データセット、用語集、適応型 MT リソースへの安全なアクセスを確保するために、OAuth 2.0 認証が必要です。この認証方式により、Google Cloud プロジェクトに安全に接続し、適切な認可のもとで翻訳リソースを管理できます。

    OAuth 2.0 のセットアップと設定

    ステップ 1:Google Cloud プロジェクトの作成と API の有効化

    OAuth 認証をセットアップするには、以下のステップで進めます:

    1. Google Cloud Console にアクセスします
    2. 新しいプロジェクトを作成するか、既存のプロジェクトを選択します
    3. Project ID を控えておきます(すべての API 呼び出しで必要です)
    4. 「APIs & Services」 > 「Library」に移動します
    5. 「Cloud Translation API」を検索して有効化します
    6. 「APIs & Services」 > 「Credentials」に移動します
    7. 「Create Credentials」をクリックし、「OAuth Client ID」を選択します
    8. プロンプトが表示されたら OAuth 同意画面を設定します
    9. 用途に応じて「Desktop application」または「Web application」を選択します
    10. 承認済みリダイレクト URI(CallbackURL)を設定します
    11. 接続で使用する Client ID と Client Secret をコピーします

    必須の接続プロパティ

    • AuthScheme:OAuth に設定します(必須)
    • OAuthClientId:Google Cloud Console の Client ID(必須)
    • OAuthClientSecret:Google Cloud Console の Client Secret(必須)
    • CallbackURL:OAuth アプリケーションで指定したリダイレクト URI(必須)
    • InitiateOAuth:トークンを自動管理するには GETANDREFRESH に設定します(推奨)
    • ProjectId:Google Cloud のプロジェクト ID またはプロジェクト番号(クエリに必須)

    必須の OAuth スコープ

    Google Cloud Translation API プロファイルでは、以下の OAuth スコープが必要です:

    • https://www.googleapis.com/auth/cloud-translation - 翻訳、データセット、用語集、適応型 MT を含む Cloud Translation API リソースへのフルアクセス
  5. Connection properties for the selected data source in the Add Connection dialog. (Salesforce is shown.)
  6. 使用するデータソースオブジェクトを選択します。例は SupportedLanguages テーブルです。 Select database objects. (Salesforce is shown.)

DataBind

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

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

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

コード Walk-through

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

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

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

APIConnection conn = new APIConnection("Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;");
APICommand comm = new APICommand("SELECT LanguageCode, DisplayName FROM SupportedLanguages WHERE ProjectId = 'my-project-12345'", conn);
APIDataAdapter da = new APIDataAdapter(comm);
DataSet dataset = new DataSet();
da.Fill(dataset);

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

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

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

Google Translate に接続