CodeZine(コードジン)

特集ページ一覧

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

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

macOS環境の開発

 それでは、macOS環境での開発について説明します。macOSにおけるASP.NET Coreの開発環境には以下があります。

  • Visual Studio for Mac(IDE、Microsoft)
  • Visual Studio Code(エディタ、Microsoft)
  • JetBrains Rider(IDE、JetBrains)

 本稿では、Visual Studio for Macを利用した開発手順を紹介します。

Visual Studio for Macの起動

 Visual Studio for Macを起動すると[スタートページ]を表示します。

Visual Studio for Macスタート画面
Visual Studio for Macスタート画面

 [新しいプロジェクト]をクリックすると[テンプレート選択画面]を表示します。

新しいプロジェクト - テンプレート選択画面
新しいプロジェクト - テンプレート選択画面

 今回はRazor Pagesを使用したアプリの開発なので、[.NET Core]の[アプリ]のテンプレートの中から[ASP.NET Core Webアプリ]を選択します。

 [次へ]ボタンをクリックすると、プロジェクト名やソリューション名など入力や設定を行う[構成画面]を表示します。

新しいプロジェクト - 構成画面
新しいプロジェクト - 構成画面

 環境に合わせてプロジェクト名やソリューション名を入力や場所の設定を行います。今回は、プロジェクト名を「C1RazorPagesApp」とします。

 [作成]ボタンをクリックするとRazor Pagesアプリのプロジェクトを作成し、構成ファイルをダウンロードします。すべての設定が完了するとコードエディタウインドウを表示します。

 今回のサンプルアプリは、Modelクラスを追加するため、まず、Modelクラスを格納する「Models」フォルダーを追加します。

 コードエディタの左に表示されるソリューションエクスプローラーにある[C1RazorPages]プロジェクトを右クリックし、コンテキストメニューを表示します。

プロジェクトのコンテキストメニューを表示
プロジェクトのコンテキストメニューを表示

 コンテキストメニューから[追加]→[新しいフォルダー]をクリックします。

Modelsフォルダーを追加
Modelsフォルダーを追加

 Modelクラスを格納するためのフォルダーなので「Models」と命名します。そして、Modelsフォルダーにモデルクラスを追加します。

 次に、ソリューションエクスプローラーからModelsフォルダーを右クリックして、コンテキストメニューを表示します。

Modelsフォルダーのコンテキストメニューを表示
Modelsフォルダーのコンテキストメニューを表示

 コンテキストメニューから[追加]→[新しいファイル]を選択すると[新しいファイルウインドウ]が開きます。

新しいファイルウインドウ
新しいファイルウインドウ

 [General]→[空のクラス]を選択後、名前を「SampleModel」と設定します。その後、[新規]ボタンをクリックします。

SampleModelクラスをコーディング
SampleModelクラスをコーディング

 SampleModelクラスが作成されるとコードエディタに表示されるので、前ページに記載したSampleModelクラスの内容を入力します。

ComponentOne for ASP.NET MVCのパッケージをインストール

 冒頭でも触れましたが、ComponentOne for ASP.NET MVCは、Mac環境での開発はサポート対象外です。お試しになる場合は自己責任でお願いします。

 Mac環境でComponentOne for ASP.NET MVCのコントロールを使用する場合、ViewやPageModelを作成する前にNuGetからパッケージをダウンロード/インストールしなくてはいけません。

 Visual Studio for MacからNuGet経由でインストールする場合も、パッケージソースの追加を行う必要があります。

Visual Studio for Macにおけるパッケージソースの追加

 パッケージソースの追加は、メニューから[プロジェクト]→[NuGet パッケージの追加(P)]をクリックします。

NuGet パッケージの追加
NuGet パッケージの追加

 [パッケージの追加(P)]をクリックすると[パッケージの追加ウインドウ]が表示されるので、左上部にあるパッケージソースのドロップダウンから[ソースの構成]を選択します。

ソースの構成
ソースの構成

 [ソースの構成]を選択すると[ユーザー設定]ウインドウを開き、[NuGet]→[ソース]の設定画面になります。

NuGetソースの設定画面
NuGetソースの設定画面

 パッケージソースの追加を行う行う場合は、右ペインの下にある[追加]ボタンをクリックします。[追加]ボタンをクリックすると[パッケージソースの追加ウインドウ]が開きます。

パッケージソースの追加
パッケージソースの追加

 [パッケージソースの追加ウインドウ]では以下の項目を設定します。

項目 設定値
名前 GrapeCity
場所 http://nuget.c1.grapecity.com/nuget/

 設定が完了したら[ソースの追加]ボタンをクリックします。

 正しく追加が行われると、パッケージソースのドロップダウンに「GrapeCity」が追加されます。

パッケージソース
パッケージソース

ComponentOne for ASP.NET MVC パッケージのインストール

 今回の記事は、前回の記事と同様のコントロールを使用しているので、前回の記事と同じパッケージを追加します。

 [パッケージソースの追加]が終わり、[OK]ボタンをクリックすると[NuGetパッケージの追加画面]に戻ります。

 ComponentOne for ASP.NET MVCのパッケージをインストールするには、パッケージソースのドロップダウンを「GrapeCity」に切り替えます。

 次に[NuGetパッケージの追加画面]のウインドウ右上部にある検索ボックスから「C1.AspNetCore.Mvc」を検索します。

ComponentOne for ASP.NET MVC
ComponentOne for ASP.NET MVC

 検索結果の一覧から「C1.AspNetCore.Mvc.ja」と「C1.AspNetCore.Mvc.FlexSheet.ja」の2つのパッケージの前にあるチェックボックスにチェックします。チェックが終わったら[パッケージを追加]ボタンをクリックします。

「_Layout.cshtml」「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」および「Startup.cs」をコーディング

 プロジェクトの中にある「Pages」、フォルダーの中にある「_Layout.cshtml」「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」、プロジェクトルートにある「Startup.cs」を前ページの通りコーディングします。

Viewをコーディング
Viewをコーディング

License.csの追加

 ライセンス情報の追加は、ComponentOneのサイトにログインすることで、ライセンスキーの発行を行うことが可能です。

 ComponentOneのログイン画面から新規ユーザーの登録を行います。既に登録している場合は、ログインします。

新規ユーザー登録/ログイン
新規ユーザー登録/ログイン

 ログイン後、表示される[アカウントサービス画面]から[ASP.NET Core ライセンス生成]のリンクをクリックします。

ASP.NET Core ライセンス生成
ASP.NET Core ライセンス生成

 シリアルナンバーに有効なシリアルまたはトライアル版を選択し、アプリケーション名に任意の名前を設定します。設定が終わったら[生成]ボタンをクリックします。

ライセンス生成
ライセンス生成

 [生成]ボタンをクリックし、しばらくするとライセンスキーを含むLicenseクラスのテキストが表示されます。

ライセンスキークラス
ライセンスキークラス

 表示されたライセンスキークラスのテキストを全選択し、コピーします。

 Visual Studio for Macに戻り、プロジェクトにLicense.csクラスを追加し、コピーしたテキストを貼り付けます。

License.csの追加
License.csの追加

 続けて「Startup.cs」にあるStartupクラスのコンストラクタに、ライセンスマネージャーへのキーの設定を追加します。

    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            C1.Web.Mvc.Sheet.LicenseManager.Key = License.Key;
            C1.Web.Mvc.LicenseManager.Key = License.Key;
        }

        // 以下省略

 ライセンスキーの設定後、コマンドラインでdotnet runで実行します。

コマンドラインで実行
コマンドラインで実行

 コマンドラインに表示されたURLをブラウザで確認すると、下図のように表示されます。

実行
実行

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

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

著者プロフィール

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

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

あなたにオススメ

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