ASP.NET MVCの新機能：特集：ASP.NET 4.5新機能概説（3）（3/6 ページ）

[花田善仁（監修：山田祥寛），WINGSプロジェクト]

モバイル・デバイスへの最適化

　スマートフォンやタブレットなど、スマートデバイスからのWebへのアクセスは日々増大しており、Webアプリのモバイル・デバイス対応はもはや当たり前のこととなってきた。ASP.NET MVC 4のモバイル・デバイス対応では、独自技術を指向せず、HTML5やCSS3、そしてJavaScriptなどWebの標準技術を採用している。以降ではASP.NET MVC 4で追加された、モバイル・デバイス対応機能について紹介する。

●モバイル・デバイス用プロジェクト・テンプレート

　ASP.NET MVC 4では、モバイル・アプリ用のテンプレートも追加されている（本稿冒頭の画面の［モバイル アプリケーション］プロジェクト・テンプレート）。このテンプレートは、タッチに最適化されたUIを構築するために、オープンソースのライブラリであるjQuery Mobileをベースにしている。

　モバイル・アプリケーション・テンプレートは、インターネット・アプリケーション・テンプレートと同じ構成で、コントローラなどのコードは事実上、同じものとなっているため、これまでにASP.NET MVCでWeb開発を行ってきた経験のある開発者が、これから新たにモバイル・デバイス対応を行う場合には理解しやすいだろう。なお、モバイル・デバイス用UIを実現するのに使用しているjQuery Mobileについては、本記事では詳細には触れないが、「連載：jQuery Mobile入門」が参考になるので、ぜひとも目を通してみていただきたい。

●複数ブラウザに対応させるためのディスプレイ・モード

　すでにデスクトップ・ブラウザ用のサイトを構築しており、これからモバイル・デバイスに対応させる場合や、新規にデスクトップとモバイル・デバイス両対応のサイトを構築しようとしている場合には、ディスプレイ・モードを使うことで大きな手間なく両方のデバイスに対応できる。

　ディスプレイ・モードでは、ブラウザからやってくるリクエストを見て、対応するテンプレート・ファイルの切り替えが行われる。例えば、デスクトップ・ブラウザから「/Home」へのリクエストが行われると、「Views\Home\Index.cshtml」というテンプレートが使用される。一方、モバイル・デバイスから同じURLに対してリクエストが行われた場合には、「Views\Home\Index.Mobile.cshtml」というテンプレートが用意されていれば、こちらを使用して結果を返す。

　さらに個別のテンプレート以外にも、レイアウトやパーシャル・テンプレートについても同様の仕組みを利用することができる。

　実際のモバイル・デバイス対応サイトを構築する際には、特定の端末だけは別扱いにしなければならない場合がある。例えばiPhoneからのアクセスだけを別のテンプレートに切り分けて処理をしたい場合には、iPhone用のテンプレートを用意したうえで、Global.asaxファイルのApplication_Startメソッドに以下のようなコードを追加すればよい。

using System.Web.WebPages;
        ……省略……

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

リスト1　iPhone用のディスプレイ・モードを識別させる例（Global.asax.csファイル）

　特定のディスプレイ・モードによる処理の切り分けを行うには、System.Web.WebPages名前空間のDisplayModeProviderクラスを使用する。このクラスはその名前のとおり、ディスプレイ・モードに関係する機能を提供するクラスで、Singletonパターンで公開されるプロパティ「DisplayModeProvider.Instance.Modes」に、対応するディスプレイ・モードのインスタンスを保持する。

　上記のコードでは、DisplayModeProviderインスタンスのModesプロパティにiPhoneという識別子を登録したDefaultDisplayModeインスタンスを登録している。併せてDefaultDisplayMode.ContextConditionプロパティでは、UserAgentに「iPhone」という文字列がある場合に、このディスプレイ・モードを使用することを指定している。

　あとは必要に応じてiPhone専用のテンプレート、例えば「Views\Home\Index.iPhone.cshtml」を用意してやればよい。

　ただし、2012.2 Updateを適用していない環境では、DisplayModeProviderを使用した場合に問題が発生するため、別途、NuGetで「Microsoft.Web.Mvc.FixedDisplayModes」パッケージをインストールする必要があるので、注意が必要だ。

　本記事で紹介したもの以外で、モバイル・デバイス対応をどのように実装していくかについては、「ASP.NET MVC 4 Mobile Features」にチュートリアル形式で説明されているので参考にされたい。

データベースの移行をサポートする機能

　ASP.NET MVC 4のプロジェクトはデフォルトでEntity Framework 5をサポートしている。そして、Entity Framework 5の大きな機能の1つに、データベース・マイグレーションがある。この機能を使うと、コード・ファーストなデータベース・スキーマの移行を容易に行えるようになる。例えばWebアプリをリリースした後に、データベースのテーブルにフィールドを追加する際に、マイグレーション用コードとパッケージ・マネージャ・コンソールを利用して、モデル・クラスとデータベースのスキーマとの対応関係を保ちながらデータベースを移行できるようになる。

　データベース・マイグレーションには、パッケージ・マネージャ・コンソールを使用し、以下のような手順で行う。このとき、あらかじめ参照しているデータベースを削除しておく。

1. データベース・マイグレーションを有効にする
   − パッケージ・マネージャ・コンソールで、「Enable-Migrations」コマンドを実行すると、プロジェクト・フォルダに「Migrations」フォルダが作成され、この中に「Configuration.cs」ファイルが作成される
2. Add-Migrationコマンドで初期マイグレーション・ファイルを作成
   − 最初にコードからテーブルを作成するために「Add-Migration Initial」コマンドでDbMigrationクラスを継承したクラスを生成する。実行するとMigrationsフォルダ以下に「タイム・スタンプ_Initial.cs」ファイルが作成される
3. Update-Databaseコマンドでデータベースを更新
   − Update-Databaseコマンドを実行すると、先ほど作成したDbMigrationの継承クラスが作成した順に実行される（ファイル名の先頭にタイム・スタンプがあるのはこのためだ）。最初の状態では「タイム・スタンプ_Initial.cs」ファイルのみが実行され、初期状態のテーブルが作成される。全てのDbMigration継承クラスが実行された後に、Configuration.csファイルのSeedメソッドが呼び出されるので、このメソッドにモデル・オブジェクトの登録処理を記述することで、該当するレコードがテーブルにインサートされる
4. Add-Migrationコマンドでカラム追加／変更用マイグレーション・ファイルを作成
   − 次に、カラムの追加などを行うためのマイグレーション・ファイルを作成する。例えばテーブルにAddressなどのカラムを追加するには、「Add-Migration AddAddressToPerson」のようにファイル名を見て何を行っているか分かりやすい名前を指定する
   − このコマンドを実行するとInitialと同様にタイム・スタンプがプレフィックスとして付加されたファイルが作成される。そしてこのファイルにカラム追加などの必要な処理を記述する。Configuration.csファイルにサンプル・データ登録処理を行っている場合には、こちらにも忘れずにプロパティを追加する
5. Update-Databaseコマンドでデータベースを更新
   − 再度Update-Databaseコマンドを実行すると、テーブルにカラム追加などの処理が行われる

　本記事では概要までしか紹介しないが、実際のマイグレーションを行う詳細な手順については、ASP.NET MVC 4のチュートリアルにある、「Adding a New Field to the Movie Model and Table」を参照されたい。