【徹底解説】Typeform とのデータ連携ができるMVC アプリケーションの作り方

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

複雑な開発が必要なMVC アプリからTypeform API とのデータ連携をノーコードで実現。接続→クエリ実行まで実装手順を詳細解説、API のアップデート追従も不要でWebアプリケーションの開発・保守を効率化できます。

この記事では、Visual Studio のウィザードを使って簡単なMVC（モデル・ビュー・コントローラ）プロジェクトを作成し、Entity Framework のメソッドを使うTypeform にcreate, read, update, delete (CRUD) コマンドクエリを実行する方法を説明します。

Entity Framework Model の作成

下記の手順に従って接続プロパティを保存し、データモデルのエンティティにテーブルをマップします。

Entity Framework 6 をお使いの場合は、あらかじめプロジェクトに Typeform Entity Framework プロバイダーを登録してください。詳しくは、ヘルプドキュメントの「LINQ およびEntity Framework」をご参照ください。
Visual Studio で新規MVC プロジェクトを作成［Internet Application］テンプレート、［Razor］ビューエンジンを選択します。この例では、プロジェクト名はMvcAPIApp です。
デザイナーから.edmx ファイルを追加するには、［プロジェクト］>［新しい項目の追加］をクリックします。ADO.NET Entity Data Model を選択してモデルに名前を付けたら［追加］をクリックします。この例では、モデル名はAPIModel です。
［Entity Data Model］ウィザードで、［EF Designer from database］オプションを選択します。［Entity Data Model］ウィザードが表示されます。
［New Connection］をクリックします。ダイアログが表示されたらCData Typeform のデータソースを選択します。
必要な接続文字列プロパティを指定します。
まず、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 を設定します。
一般的な接続文字列は次のとおりです。
```
Profile=C:\profiles\TypeForm.apip;Authscheme=OAuth;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;
```
接続に名前を付け、資格情報などのセンシティブ情報を接続文字列に含めるかどうかを選択します。簡略化のため、この例ではセンシティブ情報をWeb.config に保存しています。
必要なテーブルおよびビューを選択します。ここでは、Tags をインポートしています。また、オブジェクト名を複数形に変換するオプションは、チェックをはずしています。［Finish］をクリックして.edmx ファイルを作成します。
プロジェクトをビルドして完成です。

コントローラーの作成およびメソッドとビューの生成

モデルの作成とプロジェクトのビルドが終わったら、以下の手順に従ってコントローラー、ビュー、および関連するCRUD メソッドを作成できます。 Tags テーブルに許可されたすべてのアクションのビューは、［Views］フォルダ内のTags サブフォルダに.cshtml ファイルとして格納されます。

［ソリューションエクスプローラー］で［Controllers］フォルダを右クリックし、［追加］>［コントローラー］をクリックします。コントローラーにAPIController のような名前を付け、以下のオプションを設定します。

Template：次のオプションを選択します：'Controller with read/write actions, using Entity Framework'.
Model class：Tags を選択。
Data context class：APIEntities を選択。

Creating a new Controller from an existing entity data model in the Add Controller dialog. (QuickBooks is shown.)

これで、プロジェクトを実行できます。［Index］ビューにアクセスするには、"API" をURL に追加します。

The Index view of the example MVC Web application. (QuickBooks is shown.)

一からコントローラーを作成

このセクションでは、ほんの数行のコードでCRUD コマンドクエリをインプリメントする方法について説明します。利用可能なウィザードは、各ステップで詳しく説明します。

このチュートリアルを始める前に、エンティティデータモデルを作成しておいてください。Typeform へのコマンドを実行するために、コンテキストクラスのメソッドを使用していきます。［Entity Framework Data Model］ウィザードを使ってモデルを作成する方法については、前のセクションをご参照ください。 — これはモデルファーストアプローチです。コードファーストアプローチの利用に関する詳細は、ヘルプドキュメントの「LINQ およびEntity Framework」をご参照ください。

次の例のAPIController のようにコントローラーを手動で作成するには、［ソリューションエクスプローラー］で［Controllers］フォルダを右クリックし、［追加］>［コントローラー］をクリックします。
［Add Controller］ダイアログが表示されたら、［Template］メニューから'Controller with empty read/write actions' オプションを選択します。［Controller］フォルダ内にAPIController.cs が作成されます。

The Add Controller dialog with the selected template, Controller with empty read/write actions. (QuickBooks is shown.)

コンテキストの作成

以下のコードを追加し、コンテキストクラスをクラス変数としてインスタンスを生成します。この簡単な例では、コントローラーはコンテキストクラスのメソッドを直接呼び出してCRUD コマンドを実行します。

private APIEntities db = new APIEntities();

Typeform のデータエンティティの取得

レコードのリストをビューに表示するには、Index メソッドを以下のように書き換えます。このコードは、コンテキストクラスのToList() メソッドを呼び出して、レコードテーブルを表示するビューを返します。デフォルトでは、Index メソッドは空のビューを返します。

public ActionResult Index() { return View(db.Tags.ToList()); }

ビューを作成するには、Index メソッド内を右クリックし、［Add View］をクリックします。ウィザードが表示されたら新しいビューIndex.cshtml を作成します。作成されたビューは［Views］フォルダに格納されます。このビューをロードするには、.cshtml ファイルを右クリックして［View In Page Inspector］をクリックします。

［Add View］ダイアログでビューに名前を付け、以下のオプションを設定します：

Create a strongly typed view：このオプションを選択し、Tags タイプのビューを作成。
Model class：Tags エンティティ、Tags を選択。
Scaffold template：［List］を選択。このメニューオプションは、エンティティを表示するHTML テーブルを生成します。

Settings for an Index view. (QuickBooks is shown.)

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

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

Typeform に接続お問い合わせ