[アーティクル]
11/03/2015

October 2015

Volume 30 Number 10

ASP.NET - どこでも ASP.NET 5 (OmniSharp と Yeoman)

Sayed Ibrahim Ibrahim | October 2015

開発チームが使用するツールの選択肢が多様化しているため、フレームワークでも摩擦のない選択肢を用意しなければなりません。ASP.NET 5 ではクロスプラットフォームサポートが導入され、OmniSharp のようなオープンソースツールを使用した開発や、Microsoft Azure での Docker のようなコンテナーを使用したホスティングなどが可能になります。そこで今回は、開発者が選択したプラットフォームで ASP.NET 5 を使い始める方法を紹介します。ASP.NET 5 を使った Web アプリケーションの開発に着手するために必要なことはすべて取り上げます。

最近の Web アプリケーション開発には多くの選択肢があるため、プロジェクトへの着手や実施がかえって難しくなりがちです。Visual Studio を利用する開発者は恵まれています。Visual Studio IDE、組み込みテンプレート、ツール (Web Essentials など) の助けを借りて、新しいプロジェクトに簡単に着手できます。しかし、Windows と Visual Studio のようなリッチな IDE を使用しない開発者は、通常、Yeoman、Grunt や Gulp、Node.js などのコマンドラインツールを利用して、Web アプリケーションの構築や開発を行っています。そのため、ASP.NET 5 は、すべてのプラットフォームを念頭に置いて根本から作り直されました。このリリースではデベロッパーツールに対して、「選択の自由こそが最も重要」というアプローチを採用しています。ASP.NET 5 は Windows プロジェクトだけでなく、Linux と OS X 向けにも使用できるようになります。今回は、Windows 以外の OS を使用する観点から ASP.NET 5 を使用するプロジェクトをセットアップし、作成する方法の概要を説明します。

環境のセットアップ

環境をセットアップするのに必要なものがいくつかありますが、OS X と Linux の両方に関するセットアップのプロセスを記載したドキュメントが公開されています。セットアップの詳しい手順については、bit.ly/1Ljhj68 (英語) をご覧ください。今回は OS X を使用している開発者が多いと考えて話を進めます。

まず、ASP.NET 5 Web アプリケーションのビルドに使用するツールをインストールします。最終的には CoreCLR (github.com/dotnet/coreclr、英語) がこのフレームワークのベースとなるランタイムです。ただし、現時点の ASP.NET 5 では、依然として Mono ランタイムが必要です。Mono をインストールするには、HomeBrew (http://brew.sh/index_ja.html) を使用します。

$ brew install mono

次に NET Version Manager (DNVM) をインストールします。DNVM は、コマンドラインユーティリティのセットで、これを使用することで .NET Execution Environment (DNX) を更新および構成できます。DNX は、NET Core 5 (docs.asp.net/en/latest/dnx、英語) を使用したクロスプラットフォーム開発を事実上可能にします。DNVM と DNX を端末からインストールするには次のコマンドを実行します。

$ brew tap aspnet/dnx
$ brew update
$ brew install dnvm

これで Mono ランタイム、DNVM、DNX がインストールされました。インストールした DNVM のバージョンをチェックするには、端末で「$ dnvm」と入力します (図 1 参照)。シェルが $ dnvm コマンドを認識しない場合は、「source dnvm.sh」を実行して DNVM を読み込む必要があります。

図 1 DNVM のバージョンチェック

エディターの選択

Windows を使用しているなら迷うことなく、いずれかのバーションの Visual Studio を選択します。しかし、OS X や Linux には、TextMate のようなシンプルなテキストエディターから、Sublime、Atom、Emacs、Vim などの人気のある各種エディターまで選択肢がたくさんあります。ですが、ここにクロスプラットフォーム開発エディターの候補として新たに加わったのが、マイクロソフトの Visual Studio Code (code.visualstudio.com、英語) です。Visual Studio Code は、ASP.NET 5 だけでなく、AngularJS や Node.js、一般的な JavaScript の開発にも適したエディターです (図 2 参照)。

図 2 Visual Studio Code のウェルカムページ

どのツールを使用するにしても、OS X や Linux で ASP.NET 5 用のエディターを使用するうえで鍵となるのが OmniSharp (omnisharp.net) です。Visual Studio Code には OmniSharp が組み込まれています。他のエディターにも拡張機能や "アドイン" のリポジトリがあり、そこから OmniSharp コンポーネントをダウンロードできます。

最初のプロジェクトへの着手

OS X にはリッチな Visual Studio 2015 開発環境がないため、ASP.NET 5 アプリケーションを開発するには、さまざまなアプローチを利用する必要があります。Yeoman (yeoman.io、英語) と ASP.NET ジェネレータープロジェクト (bit.ly/1MPe5KY、英語) に参加します。Yeoman は Node.js を土台に構築されたスキャフォールディングプラットフォームで、プロジェクトファイルまたはコードファイルのテンプレートベースのジェネレーターをビルドできます。Yeoman はコマンドラインユーティリティで、Node.js を土台に構築されているため、最初に対応が必要な依存関係がいくつかあります。

まず、Node.js とノードパッケージマネージャー (NPM) を HomeBrew または nodejs.org (英語) から直接ダウンロードしてインストールします。

$ brew install node

インストールが完了したら、npm を使用してジェネレーターをインストールします。

$ npm install -g yo generator-aspnet

Bower、Grunt、Gulp をまだ使用したことがなければ、これらのツールも同じように入手します。最新の開発スタックの一環としてこれらのツールに慣れておくことをお勧めします (今月号の「Visual Studio - Bower: Web 開発用最新ツール」を参照してください)。

$ npm install -g bower grunt-cli gulp-cli

Bower は、フロントエンド Web アプリケーション開発用パッケージマネージャーで、JavaScript や CSS などの Web リソースのリポジトリです。Grunt と Gulp は、スクリプトやイメージの縮小やトランスパイル (TypeScript や CoffeeScript などで) するようなビルドプロセスを実行するためのタスク実行ライブラリです。

どのエディターを使用するにしても、開発に必要なツールのセットアップはこれで完了です。では、新しい種類のプロジェクトを開始するために、「$ yo aspnet」を実行して Yeoman ジェネレーターを初期化し、作成するプロジェクトを選択します。今回は 図 3 に示すように [Web Application Basic [without Membership and Authorization]] (Web アプリケーションベーシック [メンバーシップおよび認証なし]) を選択します。次にプロジェクト名を入力し、Enter キーを押します。

図 3 Yeoman でのプロジェクトの種類の選択

ジェネレーターの処理が完了したら、Kestrel クロスプラットフォーム Web サーバーを使用してアプリケーションを実行するオプションを利用できるようになります。このオプションを利用する前に、npm、Bower、Nuget の依存関係をインストールする必要があります。そのためには、以下の復元コマンドを実行して、これらのリソースを取得します。

$ cd [projectname]
$ dnu restore

このコマンドによって、project.json ファイルで参照される NuGet パッケージがプロジェクト用にすべてダウンロードされます。

(また、「$ npm install」と「$ bower install」を実行して、JavaScript のリソースと UI コンポーネントのリソースを最新のものにします。ただし、これは必須ではありません)。

次に、以下のコマンドを実行して Kestrel を開始します。

$ dnx . kestrel

(ASP.NET 5 Beta 7 のリリース後は、上記のコマンドが「dnx kestrel」とシンプルになります)。

「Started」(開始) が端末のウィンドウに表示され、http://localhost:5000 にアクセスすると、この Web サイトを閲覧できるようになります。この時点で、Windows も Visual Studio も使用せずに、プロジェクトを作成し、パッケージを復元し、サイトを実行したことになります。次に、コードを Visual Studio Code で開きます。

ASP.NET の編集

前述のように、Visual Studio Code はクロスプラットフォーム開発用の優秀なエディターです。いつもの方法、またはプロジェクトフォルダーの "code" キーボードショートカットを使用して、プロジェクトを開きます ("code" ショートカットをセットアップする方法については、bit.ly/1LwonPN (英語) を参照してください)。

Visual Studio Code でソースフォルダーを開いたら、アプリケーション開発を開始できます。図 4 は、Visual Studio Code でプロジェクトを開いた結果を示しています。

図 4 Visual Studio Code エディターで開いたプロジェクト

予想通り C# ファイルの構文全体が強調表示されます。それも Mac OS X でです。よく見ると 2 行目のカーソルの近くに電球が表示されています。Visual Studio と同様、この電球からコンテキストに応じてクイック操作を実行できます。今回の場合、Visual Studio Code では不要な using の削除が提案されます。ここで、新しいファイルをプロジェクトに追加します。

新しいファイルを ASP.NET 5 プロジェクトに追加するのに特別な操作は必要はありません。ファイルをディレクトリに追加するだけで、そのファイルが自動的にプロジェクトに含まれます。Visual Studio Code では、ツリービューの [Add File] (ファイルの追加) を使用するか、Ctrl キーを押しながら N キーを押して新しいファイルを追加します。何らかの初期コンテンツから始める場合は「yo aspnet」を使用します。既存の ASP.NET 5 プロジェクトにファイルを追加するには、次の構文を使用してサブジェネレーターを呼び出します。

$ yo aspnet:<Name> <options>

これを示すために、Web アプリケーションの新しい管理ページ用に MVC コントローラーとビューを新たに追加します。最初に MVC コントローラーを追加します。「yo aspnet」を実行するとファイルが現在の作業ディレクトリに追加されるため、このコマンドを実行する前にカレントディレクトリを適切なディレクトリに変更しておきます。MVC コントローラーを追加するには、Controllers フォルダーで次のコマンドを実行します。

yo aspnet:MvcController AdminController

上記のコマンドを実行すると、新しいファイル (Hello.cs) が現在の作業ディレクトリに追加されます。Hello.cs ファイルのコンテンツを図 5 に示します。

図 5 Hello.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
// For more information on enabling MVC for empty projects, visit
// go.microsoft.com/fwlink/?LinkID=397860
namespace MyNamespace
{
  public class AdminController : Controller
  {
    // GET: /<controller>/
    public IActionResult Index()
    {
      return View();
    }
  }
}

このファイルは、Visual Studio でファイルを右クリックし、[新しい項目] から MVC コントローラーを選択した場合と同じように見えますが、名前空間名が自動更新されず、MyNamespace とハードコードされる点が異なります。現状では、名前空間宣言を更新する必要がありますが、この点は今後のバージョンで更新される予定です。この MvcController サブジェネレーターは、「yo aspnet」で使用できる数多くのサブジェネレータの 1 つにすぎません。サブジェネレーターのリストをすべて確認するには、次のコマンドを実行します。

$ yo aspnet --help

「yo aspnet」のサブジェネレーターは、Visual Studio でファイルの [新しい項目の追加] ダイアログボックスから使用できる項目テンプレートに相当します。ビューを追加するには、MvcView サブジェネレーターを使用します。管理ビューを追加するには、Views フォルダーから次のコマンドを実行します。

$ yo aspnet:MvcView Index

結果として作成されるビュー (Index.cshtml) は、次のように非常に基本的なものです。

@*
  // For more information on
  // enabling MVC for empty projects,
  // visit bit.ly/1PBdyKc
*@
@{
  // ViewBag.Title = "Index Page";
}

ここでもまた、「yo aspnet」を使用して作成したコンテンツは、Visual Studio の [新しい項目の追加] ダイアログボックスから作成したものと同じです。次のように Index.cshtml ファイルにヘッダーを追加でき、それによりこのページにアクセスしてすべて正しく動作していることを検証できます。

<h1>Admin Page</h1>

ここで、このアプリケーションをビルドして実行するために必要なことを確認しておきます。

「dnx . kestrel」コマンドを使用してアプリケーションを実行できます。Visual Studio Code を使用している場合は、図 6 に示すコマンドパレットを使用して Web サーバーを実行できます。

図 6 Visual Studio Code での Web サーバーの起動

Visual Studio Code を使用している場合、ソースファイルに変更が加えられるたびに OmniSharp を使用してプロジェクトが背後でビルドされます。図 7 に示すように、Visual Studio Code でエラーや警告を表示するには、ステータスバーのエラーボタンと警告ボタンを使用します。16 行目に不適切なコードがあることが Visual Studio Code によって示されます。

図 7 Visual Studio Code でのエラーと警告の表示

プロジェクトはコマンドラインからもビルドできます。新しい AdminController クラスでビルドエラーが発生したとします。コマンドラインでアプリケーションをビルドするには、次のコマンドを実行します。

$ dnu build

その結果、Visual Studio Code で表示されたのと同じエラーと警告が表示されます。アプリケーションをビルドおよび実行する方法を確認したところで、今度はデバッグと配置について簡単に説明します。

デバッグ

現状では、ASP.NET 5 のデバッグは Windows と Visual Studio を除き、どのプラットフォームでもサポートされません。つまり、OS X や Linux の Mono で実行されている ASP.NET 5 アプリケーションはデバッグできません。ASP.NET 5 アプリケーションは、Mono コンパイラではなく Roslyn コンパイラを使用してコンパイルしますが、デバッグ情報は出力されません。Visual Studio Code ではまだデバッグがサポートされていませんが、Mac や Linux コンピューターで仮想マシンを実行すれば、そこで Visual Studio を使用できます。CoreCLR のリリース後に Visual Studio Code チームによってデバッグがサポートされることを期待しましょう。

配置

ローカルにアプリケーションを配置する方法は説明しました。ここでは、ホスティングオプションについて簡単に検討します。このトピックを詳しく調べるだけでも専用のコラムを書けるほどなので、ここでは概要を説明するだけにとどめ、参考にできるリソースをいくつか紹介します。最新情報については、bit.ly/1fvDQ41 (英語) にアクセスしてください。

大まかには、ASP.NET 5 の公開オプションは次のようなものです。

「dnu publish」コマンドラインユーティリティによるコマンドラインからの公開
Git による Azure Web アプリの公開
Azure で実行される Docker コンテナーへの公開

「dnu publish」コマンドが各公開メソッドの中心に位置します。このコマンドによって、Web サーバーで実行可能な形式にアプリケーションがパッケージ化されます。それでは、詳しく見ていきましょう。

まず利用できるコマンドラインオプションを確認するには、次のコマンドを実行します。

dnu publish –help

図 8 にこのコマンドを実行した結果を示します。

図 8 「dnu publish」コマンドによるヘルプの表示

最も重要なコマンドラインオプションは、--out (-o) 引数です。この引数を使用して、ファイルを公開するフォルダーを指定します。ただし、必要に応じて残りのオプションも確認しておくことをお勧めします。

アプリケーションをフォルダーに公開したら、後はそのフォルダーを Web サーバーにコピーするだけです。IIS を実行している Windows コンピューターに公開する場合は、いつもと同じように Web サイトを構成します。Linux で Web サーバーを構成する方法については、bit.ly/1E8uebl (英語) を参照してください。

Azure に公開する場合、開始にあたって使用できるサポートがいくつかあります。Azure は、Azure Web アプリに加え、Docker コンテナーでも ASP.NET 5 アプリケーションをサポートします。Windows コンピューター以外から Azure Web アプリをデプロイするには、FTP または Git のいずれかを使用します。FTP を使用する場合は、「dnu publish」の結果を公開します。詳細については、https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-deploy/#ftp を参照してください。

Git ベースの公開モデルは、利用が簡単で、継続配置のシナリオもサポートします。Git を使用して Azure Web アプリでの公開を始める場合は、https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-publish-source-control/ を参照してください。任意のプラットフォームで ASP.NET 5 アプリケーションの開発および実行を始めるうえで知っておくべきことは以上です。

まとめ

以前は ASP.NET で Web アプリケーションを開発するには Windows と Visual Studio を使用する必要がありました。現在は、任意のプラットフォームで ASP.NET 5 と関連するコマンドラインユーティリティやツールを使用できるようになっています。そして、これは始まりにすぎません。ASP.NET 5 の最新情報については、github.com/aspnet/Home (英語) にアクセスしてください。"yo aspnet" プロジェクトは完全にコミュニティ主導型です。支援に関心がある方は、bit.ly/1PvtcGX (英語) にアクセスして Issues (問題) を確認してください。

Shayne Boyer は、フロリダ州オーランド在住で、ASP.NET MVP を取得したコミュニティの講演者兼ソリューションアーキテクトです。これまで 20 年に渡って、マイクロソフトベースソリューションの開発に携わっています。生産性とパフォーマンスに重点を置いて、大規模 Web アプリケーションに 10 年以上取り組んでいます。Shayne の連絡先は、Twitter (@spboyer、英語) または同氏の Web サイト (tattoocoder.com、英語) です。

Sayed Ibrahim Hashimiは、マイクロソフトの Visual Studio Web チームのシニアプログラムマネージャーを務めています。マイクロソフト技術に関する書籍を複数執筆していて、SideWaffle と TemplateBuilder の開発者です。また、OmniSharp の共同開発者でもあります。Sayed の連絡先は、Twitter (@SayedIHashimi) または同氏のブログ (sedodream.com) です。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Scott Hanselman に心より感謝いたします。