SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 今回より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アプリの開発については、以下の記事も参考にしてください。

必要な環境

 本稿のサンプルコードを実行する場合は、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
FlexChart

Guages for ASP.NET MVC

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

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

Guages
Guages

InputNumber(Input for ASP.NET MVC)

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

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

InputNumber
InputNumber

InputDateTime(Input for ASP.NET MVC)

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

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

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

InputDatetime(日付選択画面)
InputDatetime(日付選択画面)
InputDatetime(時刻選択画面)
InputDatetime(時刻選択画面)

MultiAutoComplete(Input for ASP.NET MVC)

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

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

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

Guages
Guages

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

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

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

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

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

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

次のページ
使用するWebアプリについて

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

森 博之(AZPower株式会社)(モリ ヒロユキ)

 Microsoft Azure、.NETテクノロジーを使用したWebサービスのプロダクトアーキテクト。他にも技術記事の執筆やトレーニング、セミナースピーカーを行っている。 Microsoft MVPをDeveloper Technologies、Visual Studio and Development Technologies、Windows Development、Client App Dev、.NET、Silverlight、Visual C#などのコン...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10691 2018/03/16 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング