ComponentZine（ComponentOne）（AD）

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

森博之（AZPower株式会社）[著]

2018/04/25 14:00

ポスト

ダウンロードサンプルファイル (1.1 MB)

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

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

　ここでは、まずWindows環境での作成方法の説明を行います。

　Windows環境でRazor Pagesアプリを作成する場合、Visual Studio 2017を起動し、［新しいプロジェクトの作成］から［ASP.NET Core Webアプリケーション］を選択します。

　プロジェクト名を設定し（サンプルでは「C1RazorPagesApp」とします）、OKボタンをクリックします。

　続けて［新しいASP.NET Core Webアプリケーション］が表示されます。

　ここでは無印の［Web アプリケーション］のアイコンを選択してOKボタンをクリックします。

Razor PagesからComponentOne for ASP.NET MVCを使用する方法について

　Razor PagesにComponentOne for ASP.NET MVCを使用する場合は、NuGetからパッケージのダウンロードを行います。そのため、インターネットの接続できる環境でパッケージの追加を行う必要があります。

パッケージの追加

　ソリューションエクスプローラーから、プロジェクトを右クリックし、コンテキストメニューを表示します。プロジェクトのコンテキストメニューが表示されたら［NuGet パッケージの管理］をクリックします。

　クリックするとNuGetパッケージの管理画面が表示されます。

　パッケージの追加は以下の手順で行います。

右側上部にある［参照］タブ（図の（1））に切り替えます。
左側上部にある［パッケージソース］（図の（2））を先ほど追加した「GrapeCity」に切り替えます。
右側上部にあるパッケージの検索ボックス（図の（3）にあるテキストボックス）に「C1.AspNetCore.Mvc.ja」を入力し、Enterキーを押下します。

　正しく検索が行われると、図のようにパッケージの表示が行われます。パッケージをクリックし、プロジェクトにインストールします。

Modelクラス

　ASP.NET CoreのRazor PagesプロジェクトのテンプレートにはModel用のフォルダーが用意されていません。そのため最初に、プロジェクトに「Models」フォルダーを作成します。

　作成した「Models」フォルダーの中に、以下のSampleModelクラスを作成します。

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

namespace C1RazorPagesApp.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; }
    }

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


        public static IEnumerable<DailySale> GetSales() =>  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 static int GuageValue { get; } = 30;

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

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

        // MultiAutoCompleteのデータ
        public static List<string> Todofuken { get; } = 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",
        };

    }
}

Startupクラス

　プロジェクトルートにある「Startup.cs」ファイルを開き、Startupクラスを修正します。

　.NET Core SDKのバージョン 2.0.5以降では、以下の通りルート定義の修正を行う必要があります。Razor PagesでComponentOne for ASP.NET MVCを使用する場合は、この修正が必要です。

            // 2.0.5以前はこちら
            //app.UseMvc(); 
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

ライセンスの追加

　ComponentOne for ASP.NET MVCを使用する場合、ライセンス情報の追加が必要になります。ライセンス情報の追加はソリューションエクスプローラーから行います。

　ComponentOne for ASP.NET MVCのインストールが完了すると、ソリューションエクスプローラーからライセンス情報の追加を行うことができます。

　ソリューションエクスプローラーに表示される［ソリューション］を右クリックします。右クリックすると表示されるコンテキストメニューの中に［C1 ASP.NET Coreランタイムライセンスの生成］というメニューが追加されています。表示されたコンテキストメニューから［C1 ASP.NET Coreランタイムライセンスの生成］をクリックするとライセンスの生成が始まります。

　ライセンスの生成が成功すると下図のダイアログが表示されます。

　ライセンス情報はプロジェクトのルート直下にある「Startup.cs」のコンストラクタに「C1.Web.Mvc.LicenseManager.Key」へのキー設定が追加されます。

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            C1.Web.Mvc.LicenseManager.Key = "(埋め込まれたライセンスキー)";
        }

　なお、Mac環境／Linux環境ではLicenseキーの追加方法が異なります。各環境においてのライセンスの追加方法は、それぞれの開発手順の解説の中で説明します。

ファイル「_ViewImports.cshtml」

　「_ViewImports.cshtml」は、Viewの中でアプリケーションを通して、共通的に利用する宣言や定義などを追加するファイルです。

　このファイル「_ViewImports.cshtml」は、「Pages」フォルダーにあります。ここでは以下のように利用する名前空間やTagHelperの設定などを追加します。

@using C1RazorPagesApp
@namespace C1RazorPagesApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, C1.AspNetCore.Mvc
@addTagHelper *, C1.AspNetCore.Mvc.FlexSheet

ファイル _Layout.cshtml

　「_Layout.cshtml」は、Viewで使用するHTMLのひな形を定義するファイルです。

　ComponentOne for ASP.NET MVCを使用する場合、各コントロールで使用するCSSやScriptの定義を追加する必要があります。ComponentOne for ASP.NET MVCでは、CSSやScriptの定義を展開するTag Helperが用意されています。

　ここでは「Pages」フォルダーにあるファイル「_Layout.cshtml」を開いて、以下のようにHEADタグ内にTag Helperを追加します。

    <c1-styles></c1-styles>
    <c1-scripts>
        <c1-basic-scripts></c1-basic-scripts>
    </c1-scripts>

PageModelクラス

　PageModelクラスは「Pages」フォルダーにある「Index.cshtml.cs」を加工します。IndexModelクラスに、以下の通りプロパティの追加を行います。

    public class IndexModel : PageModel
    {
        // チャートに表示するデータ
        public IEnumerable<DailySale> Sales { get; set; } = SampleModel.GetSales();

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

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

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

        // MultiAutoCompleteのデータ
        public List<string> Todofuken { get; set; } = SampleModel.Todofuken;

        [BindProperty]
        public string SelectedTodofuken { get; set; }

        public void OnGet()
        {

        }
    }

View（Index.cshtml）

　ViewであるIndex.cshtmlも「Pages」フォルダーにあるので、以下の通り加工します。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home 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;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        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 id="flexChart" 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="１～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" selected-item="@Model.SelectedTodofuken">
            <c1-items-source source-collection="@Model.Todofuken" />
        </c1-multi-auto-complete>
    </div>
</div>

次のページ
macOS環境の開発

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

印刷用を表示

ポスト

ComponentZine（ComponentOne）連載記事一覧: 【ComponentOne Data Services活用術】kintoneのデータをWi...

業務アプリ開発用UIコンポーネント「ComponentOne」がBlazorに対応！サン...

WPF／WinFormsアプリをマイグレーションして、ComponentOneを利用したモ...

もっと読む

この記事の著者: 森博之（AZPower株式会社）（モリヒロユキ）

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

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

この著者の最近の執筆記事