Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/03/16 14:00
目次

使用するWebアプリについて

 今回のサンプルとして利用するWebアプリは、ASP.NET CoreのASP.NET MVCプロジェクトのテンプレートを再利用して作成します。

Modelクラス

 今回のアプリは、表示に利用するサンプルデータが必要になります。

 そこで、プロジェクトのModelフォルダー内に以下のようなSampleModelクラスを追加します。

using System;
using System.Collections.Generic;
using System.Linq;

namespace C101MvcApp.Models
{
    // Chart用サンプルエンティティ
    public class DailySale
    {
        public DateTime Date { get; set; }
        public int? TotalSales { get; set; }
        public int? AsiaSales { get; set; }
        public int? JapanSales { get; set; }
    }

    // サンプルモデルクラス
    public class SampleModel
    {
        // チャートに表示する値は乱数から作成
        private static readonly Random rand = new Random(0);

        // チャートに表示するデータ
        public IEnumerable<DailySale> Sales { get; } = Enumerable.Range(0, 92)
            .Select(index => new DailySale()
            {
                Date       = new DateTime(DateTime.Today.Year, 1, 1).AddDays(index),
                JapanSales = rand.Next(  0, 100),
                AsiaSales  = rand.Next(100, 200),
                TotalSales = rand.Next(200, 300)
            });

        // Guageに表示するデータ
        public int GuageValue { get; set; } = 30;

        // InputNumberのデータ
        public int InputValue { get; set; } = 567;

        // InputDatetimeのデータ
        public DateTime InputDatetime { get; set; } = DateTime.Now;

        // MultiAutoCompleteのデータ
        public List<string> Todofuken { get; set; } = new List<string>
        {
            "Hokkaido",
            "Aomori", "Iwate", "Miyagi", "Akita", "Yamagata", "Fukushima",
            "Ibaraki", "Tochigi", "Gunma", "Saitama", "Chiba", "Tokyo", "Kanagawa",
            "Niigata", "Toyama", "Ishikawa", "Fukui", "Yamanashi", "Nagano", "Gifu", "Shizuoka", "Aichi",
            "Mie", "Shiga", "Kyoto", "Osaka", "Hyogo", "Nara", "Wakayama",
            "Tottori", "Shimane", "Okayama", "Hiroshima", "Yamaguchi",
            "Tokushima", "Kagawa", "Ehime", "KOchi",
            "Fukuoka", "Saga", "Nagasaki", "Kumamoto", "Oita", "Miyazaki", "Kagoshima", "Okinawa",
        };

    }
}

Controllerクラス

 今回のアプリはテンプレートで作成したアプリを極力再利用したいと思います。

 Controllersフォルダー内にある、テンプレートで自動生成されたHomeControllerクラスのアクションメソッドIndexメソッドを、以下のように加工します。

        public IActionResult Index()
        {
            var source = new SampleModel();
            return View(source);
        }

View

 Views\Homeフォルダー内にある、こちらもテンプレート自動生成されたIndex.cshtmlファイルを以下のように加工します。

@model SampleModel
@{
    ViewData["Title"] = "ComponentOne MVC Page";
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<Style>
    .chart-title {
        background-color: darkblue;
    }

    .guage-title {
        background-color: darkgreen;
    }

    .number-title {
        background-color: darkcyan;
    }

    .calendar-title {
        background-color: darkred;
    }

    .autocomplete-title {
        background-color: darkgoldenrod;
    }


    .title {
        color: white;
    }

    h2 {
        font-size: 30px;
        font-weight: 700;
        line-height: 30px;
        margin-bottom: 50px;
        text-transform: uppercase !important;
        font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    }

    .wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .control-item {
        margin: auto;
    }
</Style>

<div class="row wrap">
    <div class="col-md-4 chart-title title">
        <h2>FlexChart</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-flex-chart binding-x="Date" chart-type="Area">
            <c1-items-source source-collection="Model.Sales" />
            <c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
            <c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
            <c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
        </c1-flex-chart>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 guage-title title">
        <h2>Guage</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-radial-gauge min="0" max="100"
                         start-angle="-20" sweep-angle="220"
                         width="500" height="200"
                         show-text="None" value="Model.GuageValue">
            <c1-gauge-range min="0" max="40" color="red" />
            <c1-gauge-range min="40" max="80" color="yellow" />
            <c1-gauge-range min="80" max="100" color="green" />
        </c1-radial-gauge>
    </div>
</div>


<div class="row wrap">
    <div class="col-md-4 number-title title">
        <h2>InputNumber</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-input-number value="Model.InputValue"
                         show-spinner="true"
                         step="10" format="n0"
                         min="0" max="1000"
                         placeholder="1~1000までの値を入力してください。">
        </c1-input-number>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 calendar-title title">
        <h2>InputDateTime</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-input-date value="Model.InputDatetime"
                       min="DateTime.Today.AddYears(-1)"
                       max="DateTime.Today.AddYears(1)">
        </c1-input-date>
    </div>
</div>

<div class="row wrap">
    <div class="col-md-4 autocomplete-title title">
        <h2>MultiAutoComplete</h2>
    </div>
    <div class="col-md-8 control-item">
        <c1-multi-auto-complete selected-index="12"
                                max-selected-items="5">
            <c1-items-source source-collection="Model.Todofuken" />
        </c1-multi-auto-complete>
    </div>
</div>

ComponentOne Studio for ASP.NET MVCのプログラミングについて

 ComponentOne Studio for ASP.NET MVCでは、各コントロールをTag Helperで表現できます。つまり、デザイナーなどがViewの作成を行う際、従来行われていたC#ライクなRazor構文を習得していなくとも、HTMLと同様のタグを用いてコーディングできるため、高機能なコントロールを用いた表現を手軽に作成することができます。

<c1-flex-chart binding-x="Date" chart-type="Area">
    <c1-items-source source-collection="Model.Sales" />
    <c1-flex-chart-series binding="TotalSales" name="総売り上げ" />
    <c1-flex-chart-series binding="AsiaSales" name="アジアの売り上げ" />
    <c1-flex-chart-series binding="JapanSales" name="日本の売り上げ" />
</c1-flex-chart>

 Visual Studio 2017では、Tag HelperにおいてもIntellisenseによるコーディングのサポートが行われます。

 ComponentOne Studio for ASP.NET MVCの持つTag Helperを利用する場合には、Viewsフォルダーにある_ViewImports.cshtmlや、Views\Sharedフォルダーにある_Layout.cshtmlなどの共通で参照されるファイルの中に以下のような記述を追記することでIntellisenseが有効な状態でコーディングを行うことができます。

 後述する「C1 ASP.NET Core MVCプロジェクトテンプレート」のウィザードを使用してプロジェクトを作成すると、テンプレートの中でこれらの設定が行われています。

@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

 Intellisenseが利用できることで、コーディング中に要素名や属性名の入力補完が行われるので、必要なパラメータの設定を簡単に行うことができます。

図1 Tag HelperのIntellisense
図1 Tag HelperのIntellisense

 Razor構文によるコーディングに慣れている開発者の方は、従来通りのHtml Helperによるコーディングもサポートされています。

 ComponentOne Studio for ASP.NET MVCの Html Helperは、コントロールに対するパラメータの設定にGoFのBuilderパターンを使用します。

 具体的には、以下のようにメソッドチェーンによって、必要なパラメータを追加記述することで表示の制御を行うことができます。

@(Html.C1().FlexChart()
    .Bind("Date", Model.Sales)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Area)
    .Series(sers =>
    {
        sers.Add().Binding("TotalSales").Name("総売り上げ");
        sers.Add().Binding("AsiaSales").Name("アジアの売り上げ");
        sers.Add().Binding("JapanSales").Name("日本の売り上げ");
    }))

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 森 博之(モリ ヒロユキ)

     .NETテクノロジーを中心とした開発支援や技術記事の執筆、セミナースピーカーを行っているフリーランスのソフトウェアエンジニア。  Microsoft MVPをVisual Studio and Development Technologies、Windows Development、Client...

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5