ASP.NET CoreとComponentOneを使って、マルチプラットフォームで動作するWebアプリを作成しよう！【Windows編】

　ASP.NET Coreは、ASP.NET MVCをベースとして再設計されたマルチプラットフォームで利用可能なWebアプリの開発が行えるオープンソースの基盤技術です。しかし、実際のWebアプリを作成やアプリをホストするための方法は、それぞれのプラットフォームによって異なります。また、グレープシティの「ComponentOne Studio for ASP.NET MVC」もASP.NET Core 2.0をサポートしています。

　今回より2回に渡って、以下のポイントについて紹介したいと思います。

• グレープシティの「ComponentOne Studio for ASP.NET MVC」をASP.NET Core 2.0で使用する方法
• クロスプラットフォームで動作するWebアプリの作成
• プラットフォーム毎の開発からWebサーバーにホストするまでの手順

　本記事では、「ComponentOne Studio for ASP.NET MVC」を使用した、Windows環境におけるASP.NET Coreアプリの開発手順について紹介します。

対象読者

• C#／ASP.NET MVCなどを使用したWebアプリの開発経験者

　ASP.NET Core 2.0を使用したWebアプリの開発については、以下の記事も参考にしてください。

• ASP.NET Coreの概要を理解してセットアップしよう（CodeZine）
• 「ASP.NET Core 2.0」の変更点とインストール方法を知ろう（CodeZine）
• ASP.NET Core 2.0でRazor Pagesアプリケーションを作ろう（CodeZine）

必要な環境

• Windows：Visual Studio 2017のWeb開発ワークロードをインストールしていること
• Mac：Visual Studio for Macをインストールしていること
• Linux：Visual Studio Codeおよび.NET Core SDKをインストールしていること

　本稿のサンプルコードを実行する場合は、ComponentOne Studio for ASP.NET MVCのインストールが必要です。

　ComponentOne Studio for ASP.NET MVCは、以下のページの矢印にあるリンクからトライアル版がダウンロードできます。

• ComponentOne Studio

ComponentOne Studioサイト

今回利用するコンポーネント

　今回、ComponentOne Studio for ASP.NET MVCより、チャートやゲージといった視覚化に特化したコントロールからInputにある入力系コントロールを使用したWebアプリのサンプルを作成します。

FlexChart for ASP.NET MVC

　FlexChartは、Webアプリケーション上でさまざまな数値データを視覚化する場合に利用できる高機能なコントロールです。

　データのコレクションがあれば、縦棒、横棒、バブル、ローソク足、折れ線、散布図といった、さまざまなチャートを非常に簡単な手順で表示することができます。

FlexChart

Guages for ASP.NET MVC

　Guagesは、数値の割合・比率などを視覚化して表現するためのユニークなコントロールです。

　比率・割合が視覚化されることで、単純な数値表現に比べて直感的に理解できます。

Guages

InputNumber（Input for ASP.NET MVC）

　InputNumberは、数値を入力するためのコントロールです。

　通常のテキストで整数値を入力するほか、スピンボタン（＋、－のボタン）を使用しての入力値の増減や、通貨、パーセンテージなど書式設定されたテキストボックスでの入力もできます。

InputNumber

InputDateTime（Input for ASP.NET MVC）

　InputDatetimeは日時を入力するためのコントロールです。

　入力方法は書式設定されたテキストボックスでの入力やドロップダウンボックスに表示されるカレンダーコントロールから選択して入力することができます。

　他にも日付入力に特化したInputDate、時間入力に特化したInputTimeなどのコントロールもあります。

InputDatetime（日付選択画面）

InputDatetime（時刻選択画面）

MultiAutoComplete（Input for ASP.NET MVC）

　MultiAutoCompleteは、カスタムオブジェクトの項目や文字列の項目などのリストから複数項目を選択することができます。

　コントロール名のように、入力フィールドにテキストを入力すると該当する項目のリストを表示します。

　該当する項目をリストから選択すると入力フィールドに該当項目が追加されます。

Guages

クロスプラットフォームで動作するWebアプリ

　前述の通り、ASP.NET Coreで作成したWebアプリはWindows、Mac、Linuxのクロスプラットフォームで動作させることが可能です。

　これは、マネージコードで作成された「Kestrel」と呼ばれるWebサーバー機能が、.NET Coreでホストされる単一のコンソールアプリとして実装されているためです。

　ただし、Kestrelは多くのWebサーバーが持つ、以下のような機能をサポートしないため、ホストするためにはリバースプロキシーとしてIIS、Nginx、Apacheなどを利用することになります。

• 単一サーバー上に同じIPとポートを共有する複数アプリが存在する場合
• Webサーバーを公開した際のセキュリティ上の制約を行いたい場合
• 既存のインフラとの統合が必要な場合
• 負荷分散およびSSLのセットアップの簡略化を行いたい場合

リバースプロキシーとKestrel

　本稿では、IISを利用したホスティング構成を解説します。