GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

FlexGridでAzure Cosmos DBを使ってみる(ASP.NET Core MVC)

今回はAzure Cosmos DB(SQL API)に登録したデータをComponentOne for ASP.NET MVCのFlexGridで表示してみます。

Azure Cosmos DB Emulatorの準備

まず、テストをローカルで実行するためにAzure Cosmos DB Emulatorをインストールします。下記ページの冒頭にある「MSI のダウンロード」をクリックしてダウンロードしたインストーラでインストールします。

Azure Cosmos DB Emulatorのメリットは公式ドキュメントに記載されているようにコストを気にせず利用できることですね。また、接続先をAzure Cosmos DBと切り替えるだけで本番環境とテスト環境をカンタンに切り替えられるのもポイントです。

Azure Cosmos DB Emulator では、Azure Cosmos DB サービスを開発目的でエミュレートするローカル環境を利用できます。 Azure Cosmos DB Emulator を使用すると、ローカルでのアプリケーションの開発とテストが、Azure サブスクリプションを作成したりコストをかけたりせずに実施できます。 Azure Cosmos DB Emulator でのアプリケーションの動作に満足できたら、クラウドでの Azure Cosmos DB アカウントの使用に切り替えることができます。

Azure Cosmos DB Emulatorを実行すると、ブラウザでデータエクスプローラーが自動的に開きます。

f:id:GrapeCity_dev:20180528094547p:plain:w600

表示されているURIPrimary Keyが接続先の情報になります。こちらを作成するアプリで使用します。

Primary Connection StringはMicrosoft Azure Storage ExplorerでAzure Cosmos DB Emulatorを参照する際に使用します。

ブラウザのデータエクスプローラーではAzure Cosmos DB Emulatorだけしか参照できませんが、Microsoft Azure Storage Explorerでは本番環境とテスト環境両方に接続して参照できてとても便利です。こちらも必要に応じて利用するといいかと思います。

f:id:GrapeCity_dev:20180528102846p:plain:w600

データの作成

Azure Cosmos DB Emulatorでデータベースを作成します。データエクスプローラーで[New Collection]をクリックしてデータベースIDとコレクションIDを設定します。ここではデータベースIDをc1mvcflexgridtest、コレクションIDをcollection1と設定します。

f:id:GrapeCity_dev:20180528113407p:plain:w300

データベースを作成した後、サンプルデータを作成します。[New Document]をクリックして

f:id:GrapeCity_dev:20180528113730p:plain:w600

以下の5個のドキュメント(JSON)をそれぞれ追加します。

{
    "id": "1",
    "name": "ActiveReports",
    "description": "使いやすいデザイナ、縦書きなどの日本仕様対応、PDFやExcelへの出力など、日本の帳票開発に必要なすべての機能を搭載したコンポーネントです。",
    "category": ".NET"
}
{
    "id": "2",
    "name": "SPREAD",
    "description": "グリッドとスプレッドシートの特長を兼ね備えた表計算データグリッドです。ExcelライクなUIを持つアプリケーションを短期間で開発できます。",
    "category": ".NET"
}
{
    "id": "3",
    "name": "ComponetOne",
    "description": "Windowsフォーム、ASP.NET MVC/Web Forms、WPF、UWP、Xamarinのアプリケーションを開発できるコンポーネントを数多く収録したセットです。",
    "category": ".NET"
}
{
    "id": "4",
    "name": "Wijmo",
    "description": "軽量/高速、タッチファーストで保守性の高いコントロールにより業務アプリケーション開発をサポートする新世代のJavaScriptコントロールです。",
    "category": "JavaScript"
}
{
    "id": "5",
    "name": "SpreadJS",
    "description": "Excel風グリッドから自在レイアウトまで、Webアプリのデータ表示に特化したSpread.SheetsとSpread.Viewsの2つのコントロールを搭載する高機能JavaScriptライブラリです。",
    "category": "JavaScript"
}

f:id:GrapeCity_dev:20180529093436p:plain:w600

これでデータベースの準備は完了です!

アプリの作成

Visual StudioでASP.NET Core MVCアプリC1MvcFlexGridAzCosmosDbを作成します。ComponentOne for ASP.NET MVCではASP.NET MVCとASP.NET Core MVCで利用できるプロジェクトテンプレートが提供されています。

f:id:GrapeCity_dev:20180425131851p:plain:w600

このテンプレートを利用してComponentOne for ASP.NET MVCを使用したアプリを簡単に作成することができます。

Visual Studioで[ファイル]→[新規作成]→[プロジェクト]を選択します。さらにインストール済みテンプレートから、[C1]→[.NET Core]→[C1 ASP.NET Core MVC アプリケーション (.NETCore) (C#)]を選択します。

f:id:GrapeCity_dev:20180528130756p:plain:w600

続いて[Razor ページ]を選択します。

f:id:GrapeCity_dev:20180423161920p:plain:w600

次にライセンスキーを設定します。[ツール]メニューまたはソリューションエクスプローラーでソリューションを右クリックして表示されるコンテキストメニューから、[C1 ASP.NET Coreランタイムライセンスを生成]をクリックします。

f:id:GrapeCity_dev:20180528131443p:plain:w600

Azure Cosmos DB .NET Core SDKの追加

NuGet パッケージ マネージャーで Azure Cosmos DB .NET Core SDKMicrosoft.Azure.DocumentDB.Core)を追加します。

f:id:GrapeCity_dev:20180528132603p:plain:w600

モデルの作成

Azure Cosmos DB のデータを扱うモデルを作成します。Modelsフォルダを作成し、Productクラスを作成します。

using Newtonsoft.Json;

public class Product
{
    [JsonProperty(PropertyName = "id")]
    public string Id { get; set; }

    [JsonProperty(PropertyName = "name")]
    public string Name { get; set; }

    [JsonProperty(PropertyName = "description")]
    public string Description { get; set; }

    [JsonProperty(PropertyName = "category")]
    public string Category { get; set; }
}

接続情報の設定

Azure Cosmos DB に接続して使用するためのクラスDocumentDBRepositoryをプロジェクト直下(Startup.csやProgram.csと同じパス)追加します。

using C1MvcFlexGridAzCosmosDb.Models;
using Microsoft.Azure.Documents.Client;
using System;
using System.Linq;

public static class DocumentDBRepository
    {
        // Emulator
        private const string EndpointUri = "エミュレーターのURI";
        private const string PrimaryKey = "エミュレーターのPrimary Key";

        // Database ID
        private const string DatabaseId = "c1mvcflexgridtest";
        // Collection ID
        private const string CollectionId = "collection1";

        private static DocumentClient client;

        public static IQueryable<Product> ExecuteSimpleQuery()
        {
            client = new DocumentClient(new Uri(EndpointUri), PrimaryKey);

            FeedOptions queryOptions = new FeedOptions { MaxItemCount = -1 };

            IQueryable<Product> products = client.CreateDocumentQuery<Product>(UriFactory.CreateDocumentCollectionUri(DatabaseId, CollectionId), queryOptions);


            return products;
        }
    }

FlexGridの設定

RazorページFlexGridPagesフォルダに追加します。

f:id:GrapeCity_dev:20180528134400p:plain:w600

FlexGrid.cshtml

@page
@model C1MvcFlexGridAzCosmosDb.Pages.FlexGridModel

<c1-flex-grid allow-sorting="false" auto-generate-columns="false" is-read-only="true" height="800px"
              id="flexgrid">
    <c1-items-source source-collection="@Model.Products"></c1-items-source>
    <c1-flex-grid-column binding="Id" header="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Name" header="製品名称"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Description" header="製品説明" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Category" header="製品カテゴリ"></c1-flex-grid-column>
</c1-flex-grid>

FlexGrid.cs

public class FlexGridModel : PageModel
{
    public readonly IEnumerable<Product> Products = DocumentDBRepository.ExecuteSimpleQuery();

    public void OnGet()
    {

    }
}

Azure Cosmos DB Emulatorで確認

Visual Studioからデバッグ実行してみます。/flexgridに移動します。FlexGridにデータが表示されていれば成功です!

f:id:GrapeCity_dev:20180529093617p:plain:w600

データの移行

Azure Cosmos DB データ移行ツールを使用してAzure Cosmos DB Emulatorで利用したサンプルデータをAzure Cosmos DBにインポートします。

公式ドキュメントに記載されているように、このツールを使用して色々なソースからデータを移行できるので便利ですね。

JSON ファイル、CSV ファイル、SQL、MongoDB、Azure Table Storage、Amazon DynamoDB、さらには Azure Cosmos DB SQL API コレクションからもインポートできます。Azure Cosmos DB で使用するためにそのデータをコレクションやテーブルに移行します。 データ移行ツールは、SQL API の 1 つの単一パーティション コレクションから複数パーティション コレクションに移行する場合にも使用できます。

まず、以下の手順を参考にAzure Cosmos DBのアカウント、データベース、コレクションを作成しておきます。

ここではデータベースIDをc1mvcflexgrid、コレクションIDをcollection1と設定します。

次にデータ移行ツールをこちらからダウンロードしてdtui.exeを起動します。

f:id:GrapeCity_dev:20180528150957p:plain:w600

[Source Information]でAzure Cosmos DB Emulatorの情報を入力します。[Import From]にDocumentDBを選択して[Connection String]と[Collection]を入力します。ここでの[Connection String]は以下のようにAccountEndpointにEndpointUri、AccountKeyにPrimaryKey、DatabaseにDatabaseIdを設定する必要がありますのでご注意ください。

f:id:GrapeCity_dev:20180531094433p:plain:w400

すべてのデータをインポートするので、[Enter Query]ではSELECT * FROM cを入力します。

f:id:GrapeCity_dev:20180528151013p:plain:w600

[Target Information]でAzure Cosmos DBの情報を入力します。[Export To]にDocumentDB - Bulk Import (single partition collections)を選択して[Connection String]と[Collection]を入力します。[Connection String]の注意点は先ほどと同じです。

f:id:GrapeCity_dev:20180528151156p:plain:w600

そのまま[Next]をクリックしてインポートを実行します。成功すると以下のように表示されます。

f:id:GrapeCity_dev:20180528152017p:plain:w600

Azure Cosmos DBのデータエクスプローラーでも確認してみます。インポートされていれば準備完了です!

f:id:GrapeCity_dev:20180529094526p:plain:w600

Azure Cosmos DBで確認

DocumentDBRepositoryの接続情報(EndpointUriPrimaryKeyDatabaseIdCollectionId)をAzure Cosmos DB EmulatorからAzure Cosmos DBに変更します。またVisual Studioからデバッグ実行してみましょう。ブラウザで/flexgridに移動します。

f:id:GrapeCity_dev:20180529093617p:plain:w600

先ほどと同じようにFlexGridにデータが表示されていれば成功です!

さいごに

2018年5月1日からComponentOneはブランド名を変更し、今回紹介したASP.NET MVCも含め全てのプラットフォームでランタイムフリーになりました。 是非お試しください!

FlexGridの機能を確認できるデモはこちらです。

FlexGrid - はじめに - ComponentOne for ASP.NET MVC