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

Linux環境の開発

　それでは、Linux環境の開発方法を説明します。Linux環境における開発環境には以下のツールがあります。

• Visual Studio Code（エディタ、Microsoft）
• JetBrains Rider（IDE、JetBrains）

　本稿では、高機能エディタであるVisual Studio Codeと.NET Core コマンドラインインターフェース＋NuGet コマンドラインインターフェース（CLI）を組み合わせて開発します。

　NuGet CLIは、.NET Frameworkで開発されているツールです。Mac／Linux環境でNugetを実行するためには、Linux環境で動作する.NET Framework互換の実装の「Mono」を使用します。

各CLIツールのインストール

　Linuxの場合は、利用するディストリビューションやバージョンなどによってインストール方法が異なるため、Microsoftのサイトで説明されているインストール方法を参照していただき、以下のツールをインストールします。

• .NET Core SDK ダウンロードサイト
• Linux における .NET Core の前提条件（インストール手順が掲載されています）
• Install Mono
• NuGet CLI ダウンロード（Windows x86 CommandLine）
• NuGet クライアント ツールのインストール

　筆者はCentOS 7を使用して環境を作成しました。設定はリリースした.NET Core SDKのバージョンによって変化することがあるため、必ず上記の手順を確認してください。

　参考までに、筆者が本記事執筆時に実施したインストール手順は以下の通りです。

.NET Core SDKのインストール

　.NET Coreをインストールするため、最初にMicrosoftの署名を登録します。

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc

　続けて、Microsoft製品のフィードを追加します。

sudo sh -c 'echo -e "[packages-microsoft-com-prod]\nname=packages-microsoft-com-prod \nbaseurl=https://packages.microsoft.com/yumrepos/microsoft-rhel7.3-prod\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/dotnetdev.repo'

　次に、.NET Core SDKのインストールします。

sudo yum update
sudo yum install libunwind libicu
sudo yum install dotnet-sdk-2.0.0

　任意の場所から動作できるようPATHの追加を行います。

export PATH=$PATH:/usr/share/dotnet

　以上で、.NET Core SDKのインストールは完了です。

　コマンドラインからdotnetを実行して、下図の通り表示されればインストールは成功です。

dotnet CLI

Monoのインストール

　Monoのインストールは以下のコマンドラインで行います。

rpm --import "http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF"
su -c 'curl https://download.mono-project.com/repo/centos7-stable.repo | tee /etc/yum.repos.d/mono-centos7-stable.repo'
yum install mono-devel

　コマンドラインからmonoを実行して、下図の通り表示されればインストールは成功です。

mono CLI

NuGetのインストール

　Nugetのインストールは以下のコマンドラインで行います。

# 最新のnugetをDownloadして `/usr/local/bin`に格納
sudo curl -o /usr/local/bin/nuget.exe https://dist.nuget.org/win-x86-commandline/latest/nuget.exe
# Give the file permissions to execute
sudo chmod 755 /usr/local/bin/nuget.exe

　これで、以下のコマンドラインでNuGetが利用できます。

mono /usr/local/bin/nuget.exe

　NuGet CLIを利用しやすいように、「~/.base_alias」や「~/.bash_profile」などに以下のaliasのスクリプトを登録します。

alias nuget="mono /usr/local/bin/nuget.exe"

　コマンドラインからnugetを実行して、下図の通り表示されればインストールは成功です。

NuGet CLI

Razor Pagesアプリの作成

　Linux環境における.NET Coreの開発は、主に.NET Core CLIを使用して開発を行います。.NET Core CLIの基本的な利用方法は、WindowsやmacOSでも同じです。今回はRazor Pagesのテンプレートを使って開発を行う手順を紹介します。

プロジェクトの作成

　まず、任意のディレクトリを作成し、.NET Core CLIでプロジェクトファイルを作成します。

　Razor Pagesのプロジェクトの作成は以下のコマンドラインを実行して作成します。

dotnet new razor

Modelクラスの追加

　プロジェクトの作成を行うと、ディレクトリ内にRazor Pagesのひな形プロジェクトがダウンロードされます。

　これ以降の作業は、Visual Studio Codeを利用して行います。Visual Studio Codeを起動し、プロジェクトのディレクトリを開きます。表示されたディレクトリから、モデルクラスを格納する「Models」フォルダーを追加します。

　続けて、「Models」フォルダーの中に、前ページを参考に「SampleModel.cs」ファイルを作成し、SampleModelクラスの追加を行います。

SampleModelクラスの追加

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

　ComponentOne for ASP.NET MVCのコントロールを使用する場合、ViewやPageModelを作成する前にNuGetからパッケージをダウンロード／インストールする必要があります。

パッケージソースの追加

　NuGetコマンドラインからNuGet経由でインストールする場合も、Windowsと同様にパッケージソースの追加を行う必要があります。パッケージソースの追加はNugetの環境設定の構成を編集することによって行います。

　具体的な手順としては、Nugetおよび.NET Core SDKインストール時に追加されたNuget.Configを編集します。Nuget.Configは、Mac／Linux環境では「~/.Nuget/Nuget.Config」に配置されています。

　Nuget.ConfigファイルをVSCodeで開いて、以下のようにpackageSourcesタグにGrapeCityのレポジトリを追記します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />

    <!-- 以下の行を追記 -->
    <add key="GrapeCity" value="http://nuget.c1.grapecity.com/nuget/" />

  </packageSources>
</configuration>

　追記後、ファイルを保存します。

パッケージの追加

　今回の記事は、前回の記事と同様のコントロールを使用しているので、前回の記事と同じパッケージを追加します。パッケージの追加は、プロジェクトファイル（拡張子がcsprojのファイル）を編集して行います。

　VSCodeでプロジェクトファイルを開いて、PackageReference要素が含まれるItemGroupに以下の通り、ComponentOne for ASP.NET MVCのPackageReferenceタグを2つ追記します。

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>

    <!-- ここから追加 -->
    <PackageReference Include="C1.AspNetCore.Mvc.FlexSheet.ja" Version="1.0.20173.143" />
    <PackageReference Include="C1.AspNetCore.Mvc.ja" Version="1.0.20173.143" />
    <!-- ここまで追加 -->

    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" />
  </ItemGroup>
  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
  </ItemGroup>
</Project>

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

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

「_ViewImports.cshtml」「Index.cshtml」「Index.cshtml.cs」をコーディング

License.csの追加

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

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

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

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

ASP.NET Core ライセンス生成

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

ライセンス生成

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

ライセンスキークラス

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

　Visual Studio for Macに戻り、プロジェクトに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をブラウザで確認すると下図のように表示されます。

実行