Google Translate のデータをDevExpress Data Grid にデータバインドする。
CData API Driver for ADO.NET は、サードパーティ製コントロールと組み合わせて使える標準的なADO.NET データアクセスコンポーネントを備えています。通常のADO.NET データバインドの手順に沿って進めるだけで、UI コントロールからリアルタイムデータへの双方向アクセスを実現できます。この記事では、CData のコンポーネントを使って DevExpress UI コントロール(Windows Forms およびWeb コントロール) にデータバインドする方法を紹介します。今回は、リアルタイムのデータを可視化するチャートにデータバインドしていきます。
認証
Google Cloud Translation API では、翻訳サービス、データセット、用語集、適応型 MT リソースへの安全なアクセスを確保するために、OAuth 2.0 認証が必要です。この認証方式により、Google Cloud プロジェクトに安全に接続し、適切な認可のもとで翻訳リソースを管理できます。
OAuth 2.0 のセットアップと設定
ステップ 1:Google Cloud プロジェクトの作成と API の有効化
OAuth 認証をセットアップするには、以下のステップで進めます:
- Google Cloud Console にアクセスします
- 新しいプロジェクトを作成するか、既存のプロジェクトを選択します
- Project ID を控えておきます(すべての API 呼び出しで必要です)
- 「APIs & Services」 > 「Library」に移動します
- 「Cloud Translation API」を検索して有効化します
- 「APIs & Services」 > 「Credentials」に移動します
- 「Create Credentials」をクリックし、「OAuth Client ID」を選択します
- プロンプトが表示されたら OAuth 同意画面を設定します
- 用途に応じて「Desktop application」または「Web application」を選択します
- 承認済みリダイレクト URI(CallbackURL)を設定します
- 接続で使用する 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 リソースへのフルアクセス
Windows Forms コントロール
下のコードでは、Google Translate でDevExpress のチャートに追加する方法を説明します。APIDataAdapter はチャートコントロールのSeries プロパティにバインドします。コントロールのDiagram プロパティはx 軸とy 軸をカラム名として定義します。
using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;")) {
APIDataAdapter dataAdapter = new APIDataAdapter(
"SELECT LanguageCode, DisplayName FROM SupportedLanguages WHERE ProjectId = 'my-project-12345'", 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[] { "DisplayName" });
series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
series.ArgumentDataMember = "LanguageCode";
series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}
Web コントロール
下のコードではGoogle Translate でDevExpress Web を操作するための設定方法を説明します。APIDataAdapter はチャートのSeries プロパティにバインドします。Diagram プロパティはx 軸とy 軸をカラム名として定義します。
using DevExpress.XtraCharts;
using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\GoogleTranslate.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;"))
{
APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT LanguageCode, DisplayName FROM SupportedLanguages WHERE ProjectId = 'my-project-12345'", 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[] { "DisplayName" });
series.ArgumentScaleType = ScaleType.Qualitative;
series.ArgumentDataMember = "LanguageCode";
series.ValueScaleType = ScaleType.Numerical;
((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}