Active Query Builder を使用してTypeform 駆動型アプリを素早く開発

古川えりか
コンテンツスペシャリスト

Active Query Builder SQL インターフェースビルダーと、.NET データアクセスの簡単さを活用し、データ駆動型のWinForms とASP.NET アプリを作成します。

SQL インターフェースを介してTypeform を公開する標準.NET を記述します。Active Query Builder は、開発者がSQL インターフェースを作成するのに役立ちます。CData ODBC Driver for API は、Typeform への標準ベースのアクセスを可能にします。この統合では、ODBC ドライバーとActive Query Builder オブジェクト間のブリッジとして、Microsoft ADO.NET Provider for ODBC を使用してビジュアルSQL コンポーザーを構築します。

CData ODBC ドライバとは？

CData ODBC ドライバは、以下のような特徴を持った製品です。

Typeform をはじめとする、CRM、MA、会計ツールなど多様なカテゴリの270種類以上のSaaS / オンプレデータソースに対応
多様なアプリケーション、ツールにTypeform のデータを連携
ノーコードでの手軽な接続設定
標準SQL での柔軟なデータ読み込み・書き込み

CData ODBC ドライバでは、1.データソースとしてTypeform の接続を設定、2.Active Query Builder 側でODBC Driver との接続を設定、という2つのステップだけでデータソースに接続できます。以下に具体的な設定手順を説明します。

CData ODBC ドライバのインストールとTypeform への接続設定

まずは、本記事右側のサイドバーからAPI ODBC Driver の無償トライアルをダウンロード・インストールしてください。30日間無償で、製品版の全機能が使用できます。

未指定の場合は、初めに ODBC DSN（データソース名）で接続プロパティを指定します。ドライバーのインストールの最後にアドミニストレーターが開きます。Microsoft ODBC データソースアドミニストレーターを使用して、ODBC DSN を作成および設定できます。

まず、Profile 接続プロパティにTypeForm プロファイルのディスク上の場所を設定します（例：C:\profiles\TypeForm.apip）。次に、ProfileSettings 接続プロパティにTypeForm の接続文字列を設定します（以下を参照）。

TypeForm API プロファイル設定

TypeForm への認証にはOAuth 標準を使用します。

TypeForm に認証するには、まずTypeForm でOAuth アプリケーションを登録および設定する必要があります：https://admin.typeform.com/account#/section/tokens。アプリにはclient ID とclient secret が割り当てられ、接続文字列で設定できます。OAuth アプリケーションの設定の詳細については、https://developer.typeform.com/get-started/ をご参照ください。

使用シナリオによって異なるリダイレクトURI が必要です：

CData デスクトップアプリケーション：CData デスクトップアプリケーション（Sync、API Server、ArcESB）は/src/oauthCallback.rst でOAuth トークンを受け入れます。ホストとポートはアプリケーションが使用するデフォルトポートと同じです。例えば、http://localhost:8019/ でCData Sync にアクセスする場合、リダイレクトURI はhttp://localhost:8019/src/oauthCallback.rst になります。
CData クラウドアプリケーション：CData クラウドアプリケーションはデスクトップ版と同様です。https://1.2.3.4/ でConnect AI にアクセスする場合、リダイレクトはhttps://1.2.3.4/src/oauthCallback.rst を使用します。
デスクトップアプリケーション：デスクトップアプリケーションを使用する場合、URI はhttps://localhost:33333 を推奨します。
Web アプリケーション：ドライバーを使用してWeb アプリケーションを開発する場合、https://my-website.com/oauth のような独自のURI を使用します。

以下の接続プロパティを設定すると、接続の準備が整います：

AuthScheme：OAuth に設定します。
InitiateOAuth：GETANDREFRESH に設定します。InitiateOAuth を使用してOAuthAccessToken を取得するプロセスを管理できます。
OAuthClientId：アプリ設定で指定されているClient Id を設定します。
OAuthClientSecret：アプリ設定で指定されているClient Secret を設定します。
CallbackURL：アプリ設定で指定したRedirect URI を設定します。

SQL を使用してTypeform と対話

以下のステップに従ってWinForms ビジュアルクエリビルダーを作成します。

新しいWindows Forms プロジェクトで、QueryBuilder を［Toolbox］からフォームにドラッグします。
ActiveQueryBuilder.ODBCMetadataProvider への参照を追加します。
OdbcConnection を追加し、最初のセクションで作成したDSN に接続文字列を設定します。
```
OdbcConnection connection = new OdbcConnection();
connection.ConnectionString = "DSN=API"
```
ODBCMetadataProvider インスタンスとGeneralSyntaxProvider インスタンスを初期化し、ODBCMetadataProvider オブジェクトのConnection プロパティをOdbcConnection に設定します。
```
GenericSyntaxProvider syntaxProvider = new GenericSyntaxProvider();
ODBCMetadataProvider metadataProvider = new ODBCMetadataProvider();
metadataProvider.Connection = connection;
```
QueryBuilder オブジェクトの、対応するMetadataProvider プロパティとSyntaxProvider プロパティを設定します。
```
  queryBuilder1.MetadataProvider = metadataProvider;
  queryBuilder1.SyntaxProvider = syntaxProvider;
```
QueryBuilder クラスのInitiatelizeDatabaseSchemaTree メソッドを呼び出してTypeform メタデータを取得し、Typeform テーブルのツリーデビューを生成します。
```
queryBuilder1.InitializeDatabaseSchemaTree();
```
QueryBuilder を作成したら、それをTextBox に接続するか、使用する場合は、ActiveQueryBuilder SQLTextEditor に接続しますSQLTextEditor をデザイナにドラッグし、ドロップします。

以下のコードをSQLTextEditor のValidating イベントに追加します。

private void sqlTextEditor1_Validating(object sender, CancelEventArgs e) {
  try {

    // Update the query builder with manually edited query text:
    queryBuilder1.SQL = sqlTextEditor1.Text;
  }
  catch (SQLParsingException ex) {
    e.Cancel = true;

    // Set caret to error position
    sqlTextEditor1.SelectionStart = ex.ErrorPos.pos;

    // Report error
    MessageBox.Show(ex.Message, "Parsing error");
  }
}

SQLUpdated イベントに以下を追加します。

private void queryBuilder1_SQLUpdated(object sender, EventArgs e) {
  sqlTextEditor1.Text = queryBuilder1.FormattedSQL;
}

これで、クエリをビジュアルに作成できます。［Columns Pane Area］のテーブルをダブルクリックすると、［entity/relationship］ダイアグラムが［Query Building Area］に表示されます。ダイアグラムで選択したカラムがクエリに追加されます。

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

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

Typeform に接続お問い合わせ