ASP.NET MVC 4

  • [アーティクル]

ASP.NET MVC 4 におけるモバイル開発向け新機能

Keith Burnell

 

開発者は長い間、1 つのコードベースであらゆるプラットフォームに対応できるツールという、至高の目標を求めてきましたが、今日、ますますその重要性が高まっています。全世界でスマートフォンやタブレットなどのモバイル機器の人気が急速に高まり、さまざまな機器が使われるようになっているため、Web サイトに使いやすいモバイル インターフェイスを備えておくことは非常に重要です。iOS、Android、Windows Phone、BlackBerry など、にそれぞれ固有のネイティブ アプリケーションを作成することもできますが、ネイティブ アプリケーションにはプラットフォームごとに固有のスキル セットとコードが必要です。

さいわい、HTML5 と CSS3 はついに「一度プログラムを書けば、どこでも実行できる (Write once, run anywhere)」を実現するツールセットになりそうです。HTML5 と CSS3 はまだ最終仕様になっていませんが、機能の多くが既に主要ブラウザーでサポートされており、マルチ ターゲットのブラウザー ベースのサイトにとっては急速に業界標準となっています。HTML5/CSS3 の組み合わせが優れている点は、基本的には HTML マークアップで、PHP から ASP.NET MVC まで、あらゆる HTML ベースのツールセットから活用できることです。

今回は ASP.NET MVC 4 の新機能に注目し、ブラウザーを問わずに利用できる HTML5 と CSS3 の機能を活用して、特にモバイル ブラウザーをターゲットとしたサイトや、モバイルとデスクトップの両方のブラウザーをターゲットとしたサイトを容易に開発する方法を示します。

Visual Studio 2010 を実行していても、ASP.NET MVC 4 をまだインストールしていない場合は、Web プラットフォーム インストーラー または ASP.NET MVC の Web サイト (asp.net/mvc/mvc4、英語) からダウンロードできます。Visual Studio 11 には ASP.NET MVC 4 が含まれています。

アダプティブ レンダリング

アダプティブ レンダリングとは、ターゲットとするデバイスやブラウザーの機能に応じて、Web サイトの表示を切り替えるプロセスです。ASP.NET MVC 4 にはアダプティブ レンダリングの多くの手法が含まれています。

Viewport メタ タグ: ブラウザーの既定では、モバイル デバイスやタブレットのブラウザーも含め、デスクトップにページをレンダリングすると想定して、980 ピクセルの幅でコンテンツを表示し、ズーム アウトして縮小表示します。ASP.NET MVC 3 の既定のインターネット サイト テンプレートを使って作成したサイトを図 1 に示します。このサイトをモバイル ブラウザーで表示していますが、ブラウザーはデスクトップへのレンダリングを想定しているのがわかります。このようにレンダリングされるサイトを使ってもかまいませんが、ベストな方法とは言えません。

The Default Display Created Using ASP.NET MVC 3
図 1 ASP.NET MVC 3 を使って作成した既定の表示

viewport メタ タグを使用すると、コンテンツをレンダリングする幅、高さ、倍率を、明示的にブラウザーに指示できます。viewport メタ タグを構成して、デバイスの機能に応じてレンダリングを行うことも可能です。

<meta name="viewport" content="width=device-width" />

viewport メタ タグを _Layout.cshtml に追加した場合のページを図 2 に示します。デバイスの幅に合わせてサイトが表示されるようになります。プロジェクト テンプレート (Web API テンプレートを除く) を使って新しく ASP.NET MVC 4 プロジェクトを作成し、_Layout.cshtml ファイルを開くと、最初のセクションに viewport メタ タグが含まれているのがわかります。

Scaling to the Device with ASP.NET MVC 4
図 2 ASP.NET MVC 4 を使ったデバイスに合わせた表示

CSS メディア クエリ: マルチ ターゲット サイトを開発するときは、通常、モバイル ユーザーにはデスクトップ ユーザーとは異なるビューを表示することを考えます。一般に、機能はほぼ同等で、コンテンツのスタイルと表示を変えます。CSS メディア クエリにより、Web サイトに要求を行うブラウザーの機能に応じて特定の CSS を適用します。

@media only screen and (max-width: 850px) {
    header{
      float: none;
    }
  }

このメディア クエリは、メディアが画面の (印刷ではない) 場合のみスタイルを適用し、サイトをレンダリングする領域の最大幅を 850 ピクセルにします。この方法により、ブラウザーのレンダリング機能に応じてコンテンツのスタイルを自由に変えることができます。

モバイル ブラウザーを扱う場合には、常に、帯域幅を考慮する必要があります。一般にモバイル デバイスを使っている場合は、Wi-Fi や高速ネットワークに接続していません。そのため、サイトをモバイル デバイスに対応させる際は、できる限り効率的な方法でサービスを提供します。たとえば、サイトの機能に不必要な画像は、モバイル ビューに含めません。画像が必要な場合は、適切なサイズの画像にします。つまり、実際に表示されるサイズで画像を送信します。CSS で画像を指定するのと同様に、CSS メディア クエリでは、デバイスやブラウザーの機能に応じて異なる画像を指定できます。

ASP.NET MVC 4 のすべての既定のテンプレート (Web API テンプレートを除く) には CSS メディア クエリの例を含んでいます。これを示すため、インターネット アプリケーション プロジェクト テンプレートを使って、新しい ASP.NET MVC 4 プロジェクトを作成し、実行します。ブラウザーを最大表示し、次にウィンドウのサイズを徐々に縮小します。ウィンドウ サイズが 850 ピクセル以下になると、既定のページの表示にいろいろな変化が起きます。こうした変化の詳細については、Site.css ファイルの 466 行目以降を参照してください。

CSS のみでは対応できない場合

スタイルを変更するだけでは、サイトをすべてのデバイスに適切にレンダリングするのに十分でない場合もあります。そのような場合には、目的のブラウザーの種類とデバイスに合わせたビューを作成するのが唯一の選択肢です。

モバイル固有のビューへの対応: 要求を行うブラウザーに応じて固有のページを作成する方法は、目新しいものではありません。開発者はこれまでもブラウザーを見分けてきました。ASP.NET MVC の初期バージョンでは、Web フォームまたは Razor ビュー エンジンから継承したカスタム ビュー エンジンの実装を作成し、FindView メソッドをオーバーライドして、ブラウザーを識別し、ブラウザーに固有のビューを返すことができました。ASP.NET MVC 4 では 2 つの新機能を使って、大幅に簡単な別のレベルでこれを実現できます。

ASP.NET MVC 4 の新機能により、構成ではなく規則を使って、モバイル デバイス向けのビューをグローバルにオーバーライドできます。ASP.NET MVC 4 がモバイル ブラウザーからの要求に対応して表示するビューを決めるときは、まず [ビュー].mobile.cshtml という名前付け規則に従ったビューを探します。名前付け規則に当てはまるビューが見つかった場合には、ASP.NET MVC はそのビューを使い、見つからなかった場合には標準のビューを使います。

図 3 では、_Layout.cshtml のコピーを作成して、名前付け規則に沿ってその名前を _Layout.mobile.cshtml に変更しました。このページのレンダリングのために追加した HTML で、_Layout.cshtml を使用している行をマークしてあります。サイトをデスクトップ ブラウザーでレンダリングする場合には何も変わりませんが、モバイル ブラウザーでレンダリングすると、図 4 に示すように、モバイル版の _Layout.cshtml が使われます。

Mobile-Specific _Layout.cshtml
図 3 モバイル固有の _Layout.cshtml

Mobile-Specific View
図 4 モバイル固有のビュー

ブラウザー固有のビューへの対応: デスクトップの場合、今ではブラウザー固有のビューやコンテンツを用意する必要はほぼなくなりました。長年 Web サイトの構築に携わってきた開発者の方は、おそらく特定のブラウザー用のコードや CSS を作成したことがあるかもしれません。モバイル ブラウザーの現状がこれに当てはまります。実際には多数のモバイル プラットフォームがあり、それぞれにブラウザーがあるため、問題はさらに複雑です。さらに厄介なのは、"ネイティブ" サイトの概念が生まれたことです。もはやモバイル ブラウザーでサイトをレンダリングするだけでは十分でありません。真に第一級のサイトであるためには、デバイスのネイティブ アプリケーションのようなルック アンド フィールを備える必要があります。これにはモバイル ブラウザー全般向けに固有のビューを備えるだけでなく、プラットフォームに合ったスタイルを持つ、特定のモバイル ブラウザー向けのビューが必要になります。

これを実現するため、ASP.NET MVC 4 では表示モードを導入しています。この新機能により、構成より規則を優先する利便性と、ブラウザー識別の信頼性を組み合わせて、ブラウザー固有のビューを表示できます。

表示モードを活用するには、まず Global.asax の Application_Start メソッドで定義する必要があります。

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
  ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

これは iPhone ブラウザー用に作成した表示モードです。最初の "iPhone" インスタンスは、レンダリングするビューを決める際に ASP.NET MVC が検索するビューのサフィックスを定義します。2 つ目の "iPhone" インスタンスは要求を行うユーザー エージェントを指し、[ビュー].iPhone.cshtml という名前付け規則に従って ASP.NET MVC が使用する条件を定義します。つまり、iPhone のブラウザーが要求を行うと、まずサフィックス "iPhone" に合うビューを探す、と解釈できます。

iPhone ブラウザーの表示モードについて説明するため、_Layout.cshtml のコピーをもう 1 つ作成し、表示モードを作成したときに定義した名前付け規則に基づいて _Layout.iPhone.cshtml としました。次に、iPhone でのサイト閲覧時に iPhone レイアウトが使われていることが明らかになるように変更しました。デスクトップ ブラウザーや Windows Phone エミュレーター ブラウザーでサイトを表示すると変更点はわかりませんが、iPhone ブラウザーでサイトを表示すると、図 5 のように変更点がわかります。

iPhone-Specific View
図 5 iPhone 固有のビュー

ASP.NET MVC 4 のこれらの新機能により、モバイル固有およびブラウザー固有のビューを、ほとんど労力を必要とせずに容易に作成できます。ASP.NET MVC 4 のビューのオーバーライドと表示モードを使って、モバイル固有またはブラウザー固有のビューを提供し、レンダリングするデバイスに完全に対応したサイトを表示できます。

jQuery Mobile と jQuery.Mobile.MVC

jQuery Mobile は jQuery Core を基にしたオープン ソース ライブラリで、モバイル デバイスの UI の構築に使用します。jQuery Mobile はドキュメントが整備されたツールセットですが、jQuery Mobile を ASP.NET MVC 4 で実装することは他の言語やフレームワークで実装するのと変わらないため、ここでは詳しく取り上げません。ただし、ASP.NET MVC 4 に組み込む方法についてだけ説明しておきます。

jQuery Mobile は、モバイル アプリケーション プロジェクト テンプレート以外の ASP.NET MVC 4 のプロジェクト テンプレートには既定で含まれていませんが、ASP.NET MVC 4 アプリケーションに追加することは難しくありません。NuGet を使ってスクリプトと他の必要なファイルをインストールし、_Layout.cshtml で必要なスクリプトと CSS の参照を手動で追加します。または、jQuery.Mobile.MVC の NuGet パッケージをインストールすると、すべてのスクリプトと必要なファイルがインストールされ、_Layout.Mobile.cshtml が作成されて、すべての jQuery Mobile スクリプトと CSS ファイルへの参照が追加されます。jQuery.Mobile.MVC の NuGet パッケージはビューの切り替え機能も追加します。これによって、サイトのモバイル版を表示しているユーザーは、図 6 に示すように、完全なデスクトップ ビューに切り替えることができます。

jQuery Mobile View with View-Switching Functionality
図 6 ビュー切り替え機能を備えた jQuery Mobile ビュー

プロジェクト テンプレート

モバイル ブラウザーを明確なターゲットとしたスタンドアロン サイトを作成する場合、ASP.NET MVC 4 にはそのためのプロジェクト テンプレートが作成されています。新しい ASP.NET MVC 4 プロジェクトを作成するときに、"モバイル アプリケーション" プロジェクト テンプレートを選択することができます。

ASP.NET MVC 4 のモバイル アプリケーション プロジェクト テンプレートを使ってプロジェクトを作成し、プロジェクトの全体構造を見てみてください。標準の ASP.NET MVC 4 のアプリケーション プロジェクト テンプレートと比べても特に変わった点はありません。同じモデル、ビュー、コントローラーがあります。しかしアプリケーションを実行すると、サイトはモバイル ブラウザーに適応していることがわかります。

先に簡単に説明したように、jQuery Mobile は ASP.NET MVC 4 モバイル プロジェクト テンプレートに標準で含まれています。さらに、jQuery Mobile はすべての既定のビューに実装されます。

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc"
    title="ASP.NET MVC Website">https://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Navigation</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

このコードは Views/Home/Index.cshtml です。jQuery Mobile とその実装になじみがなければ、最初に目を引くのは "data-" 属性でしょう。jQuery Mobile はこれを使ってページ上のコントロールを構成します。

ASP.NET MVC 4 モバイル アプリケーション プロジェクト テンプレートはモバイル ブラウザーのみをターゲットとするサイトを作成する場合や、モバイル ブラウザー固有の機能を実装する際に参照するには、非常に便利です。通常、デスクトップ ブラウザー向けのサイトを作成することが多くなります。しかし、モバイル ブラウザーでも適切なレンダリングを行いたいが、モバイル固有のコードの作成に多くの時間を費やしたくないと考えます。さいわい、ASP.NET MVC 4 モバイル アプリケーション プロジェクト テンプレートを使用できます。このテンプレートを、モバイル固有の機能を既存のデスクトップ ブラウザー ベースの MVC アプリケーションに追加するための出発点にすることができます。

モバイル デバイスの普及により、ASP.NET MVC 4 ではモバイル Web サイトの開発エクスペリエンスを向上することが重要でした。ASP.NET MVC 4 の新機能を活用すると、UI レイヤーで重複したコーディングを行うことなく、サイトのリーチを拡大できます。

Keith Burnell は Skyline Technologies に勤務するシニア ソフトウェア エンジニアです。大規模な ASP.NET および ASP.NET MVC Web サイトの開発を中心として、ソフトウェアの開発に 10 年以上携わっています。Burnell は開発者コミュニティで活発に活動しており、ブログ (dotnetdevdude.com)、Twitter (twitter.com/keburnell) から連絡することができます。

この記事のレビューに協力してくれた技術スタッフの Jatinder Mann と Clark Sell に心より感謝いたします。