Skip to main content
サインイン
ホーム ライブラリ スキルアップ ダウンロード コミュニティ フォーラム MSDN サイト マップ
サンプル コード集
逆引きサンプル コード
コードで学ぶ Windows Azure アプリケーション 開発入門
こんなときには Windows Azure Platform
評価してください: 
Windows Azure Platform デベロッパー センター > スキルアップ > こんなときには Windows Azure Platform > ASP.NET MVC 4 を使ったモバイル Web アプリケーション実装

Windows Azure モバイル アプリケーション開発実践

ASP.NET MVC 4 を使った Mobile Web ソリューション実装

執筆者: 日本マイクロソフト株式会社 エバンジェリスト 鈴木章太郎 & 井上章

更新日: 2012 年 4 月 20 日

今回は、Visual Studio 2010 SP1、C# と、ASP.NET MVC 4 、SQL Azure、jQuery Mobile 等を利用して新しい Mobile Web アプリケーションを作成します。

目次

  1. Web アプリケーションにおける課題
  2. ASP.NET MVC アプリケーションの作成
  3. Display Modes によるビューの切り替え
  4. jQuery Mobile を使ってモバイル向けビューを作成する

1. Web アプリケーションにおける課題

PC 用 Web ブラウザーと Mobile Web ブラウザー

Web アプリケーションを作成して、Web サーバーや Windows Azure にデプロイした場合、様々なデバイスからアクセスされることになります。その場合、良く遭遇するのが、下記のような現象でしょう。下記の図を見てください。

このアプリケーションは、2012 年 4 月開催の Windows Developer Days のセッション管理を、ASP.NET MVC 4 を使い、SQL Azure に作成済みの RDB を使って Model を作成し、そこから簡単に View と Controller を生成し、Web アプリケーションを生成して作ったものです。非常に単純なテクニカル セッション情報管理のデモ アプリケーションです。画面遷移としては、まずホーム画面が表示されます。

図 1: ホーム画面

その後、画面中のセッション リストをクリックすると、セッション一覧画面に遷移します。

図 2: セッション一覧画面

この中で、あるセッションを選択して、Details をクリックすると、セッション詳細画面に、

図 3: セッション詳細画面

Edit をクリックすると、セッション情報編集画面に、それぞれ遷移します。

図 4: セッション情報編集画面

iPhone の Safari でアクセスした場合

さて、当たり前ですが、これは、PC 用のブラウザー用に作成したアプリケーションなので、例えば iPhone の Safari では少し工夫が必要となります。下記の図はホーム画面にアクセスした場合です。

図 5: Safari で見たホーム画面

これはまだ良い方ですが、セッション リストをクリックしてセッション一覧画面に遷移してみましょう。

図 6: Safari で見た session 一覧画面

このような状況は、iPhone 以外に、例えば、Android でも、 Windows Phone でもブラウザー アプリケーションである限り生じることでしょう。ASP.NET であれば、コンテンツ自体を HTML5 で作成・配信することができますが、このままでは表示が最適化できないので、個別に対応しておきたいところです。このような状況に対応するソリューションは、昔から存在しており、有償のパッケージとして売られているものも多数あります。しかし、ASP.NET MVC 4 を使えば、この Web アプリケーションを、iPhone のみならず、各種モバイル デバイス毎に最適化させることができるのです。

今回は、この ASP.NET MVC 4 を使った Mobile Web アプリケーションの作成と実行について、ご説明していきます。

ページのトップへ

2. ASP.NET MVC アプリケーションの作成

SQL Azure データベースの作成

今回は、テクニカル セッション情報を収納するデータベースを作成します。まず、Windows Azure ポータルにログインします。

図 7: Windows Azure Portal へのログイン

"データベース" タブをクリックすると、SQL Azure の管理画面に遷移します。

図 8: SQL Azure 管理画面

画面上にある、作成ボタンをクリックして、新規でデータベースを作ります。下記のダイアログが出ますので、名前は適当につけて、Web エディション、1 GB で作成します。

図 9: SQL Azure データベースの作成

テーブルの作成

SQL Azure のポータル画面で、作成したばかりのデータベースを選択して、管理ボタンをクリックすると、個別のデータベースの管理画面に遷移しますので、ユーザー名とパスワードを入力して、ログインします。

図 10: SQL Azure 管理ポータル ログイン

すると、下記のようなデータベースの管理画面が表示されます。このデータベースに関する諸情報が表示されており、ここから、テーブル作成、ビュー作成、ストアド プロシージャ作成、新規クエリ発行等、次のアクションをとることが可能となっています。

図 11: データベースの管理画面

次は、データベースの概要画面です。

図 12: データベースの概要画面

ここで、データベースのデザイン画面に遷移し、テーブルを作成します。

図 13: データベースのデザイン画面

テーブルを作成するには、新しいクエリ ボタンを押して、出てきたテキスト エリアに入力して実行します。テーブルは下記のクエリの通り、作成してください。最初は TimeSlots テーブルです。

/***** CREATE TABLE [TimeSlots] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Timeslots] Script Date: 04/10/2012 13:56:36 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Timeslots](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Name] [nvarchar](max) NULL,
    [Start] [datetime] NULL,
    [End] [datetime] NULL,
  CONSTRAINT [PK_Timeslots] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO

次は、Sessions テーブルです。

/***** CREATE TABLE [Sessions] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Sessions] Script Date: 04/10/2012 13:44:03 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Sessions](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Code] [nvarchar](max) NULL,
    [Title] [nvarchar](max) NULL,
    [Room] [nvarchar](max) NULL,
    [Hash] [nvarchar](max) NULL,
    [Timeslot_Id] [int] NOT NULL,
  CONSTRAINT [PK_Sessions] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO

ALTER TABLE [dbo].[Sessions] WITH CHECK ADD CONSTRAINT [FK_SessionTimeslot] FOREIGN KEY

([Timeslot_Id])
REFERENCES [dbo].[Timeslots] ([Id])
GO

ALTER TABLE [dbo].[Sessions] CHECK CONSTRAINT [FK_SessionTimeslot]
GO

次は、Speakers テーブルを作成します。

/***** CREATE TABLE [Speakers] *****/
USE [WDD2425]
GO

/****** Object: Table [dbo].[Speakers] Script Date: 04/10/2012 13:50:00 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Speakers](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Name] [nvarchar](max) NULL,
  CONSTRAINT [PK_Speakers] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF)
)

GO

以上でテーブル作成は終了です。

ASP.NET MVC Web Application の作成

Visual Studio に戻り、この SQL Azure データベースに接続し、作成した WDD2425 データベースを用いて、ASP.NET MVC アプリケーションを作成します。データは適当に入れておいてください。

※なお、これまでの作業に関しては、SQL Server Management Studio を使って、SQL Azure に接続して行っても OK です。

次の手順で、ASP.NET MVC 4 Web Application を作成します。適当な名前 (例: MvcApplication1) で、ASP.NET MVC 4 Web Application プロジェクトを新規作成します。

図 14: ASP.NET MVC3 Web Application の作成

次に出てくるダイアログでは、テンプレートでインターネット アプリケーションを選択し、ビュー エンジンは、今回は ASPX ではなく、Razor を選択します。

図 15: プロジェクト テンプレートとビュー エンジンの選択ダイアログ

次いで、ソリューション エクスプローラー上の Model のフォルダーを右クリックして、Model の追加を行います。追加→新しい項目を選択します。

図 16: Model の追加

新しい項目の追加ダイアログが出るので、データ タブを選択し、ADO.NET Entity Data Model を選択します。

図 17: ADO.NET Entity Data Model の選択

ウィザードが起動するので、最初に、データベースから作成、を選択して次へをクリックします。

図 18: データベースから作成を選択

次に、データ接続の選択、で、Microsoft SQL Server にチェックして、続行します。

図 19: Microsoft SQL Server にチェック

そして、データ ソースの箇所で、SQL Azure のサーバー名と、SQL Azure 認証のためのユーザー ID とパスワードを入力します。データベースは、WDD2425 を選択します。

図 20: データベースの選択

そして、テーブルの左のチェック ボックスにチェックを入れて全てのテーブルを選んで、完了をクリックします。

図 21: Model ウィザードの完了

すると、必要なライブラリが読み込まれて、同時に WDD2425 アプリケーションの Model が生成されます。この状態で必ず Ctrl+Shift + B で忘れずにビルドをしておきましょう。そうしないと次のコントローラーの追加のダイアログ ボックスの画面で、Class のリスト内に必要なモデルが表示されません。

図 22: 生成された Model

次いで、ソリューション エクスプローラー上で、Controller のフォルダーを右クリックして、新規コントローラーを追加します。

図 23: Controller の追加

コントローラーの追加ダイアログ ボックスが出るので、SessionController という名前にして、モデル クラス = Sessions、データ コンテキスト クラス = WDD2425 と設定して、追加をクリックします。

図 24: コントローラーの追加ダイアログ ボックス

すると、自動的に各種 (CRUD 用の) View も生成され、ソリューション エクスプローラーは下記の通りになります。

図 25: 自動生成される View 他

この状態で、Ctrl + F5 を押して、アプリケーションを起動しホーム画面を表示します。

図 26: アプリケーションの起動画面

この URL の部分の最後に、session (例: http://localhost:62217/session) と入れてリターン キーを押すと、下記の通り、既に全て必要な View その他機能が生成されていることが確認できます。各リンクをクリックして確認してみてください。

図 27: View その他機能の確認

あとは、ホーム画面のタイトルや Session 一覧へのリンク等を、図 1 にご紹介したように修正して、ASP.NET MVC Web アプリケーションの作成は終了です。

ページのトップへ

3. Display Modes によるビューの切り替え

デバイス/ブラウザー検出とビューの切り替え

1. でご紹介した通り、昨今では、PC 上の Web ブラウザーだけでなくスマート フォンやタブレットの呼ばれるモバイル端末上の Web ブラウザーで Web サイトを閲覧することが増えています。いつでも、どこでも、どんなデバイスでも使用可能な Web アプリケーションを開発するにあたって、モバイル端末からのアクセスか否かによってビューを自動で切り替える機能や、モバイル ブラウザー向けのビューと、デスクトップ・フル ブラウザー向けのビューをユーザーが任意に切り替え可能な機能が ASP.NET MVC 4 で容易に実装できます。

図 28: Display Modes によるビューの切り替え機能適用のイメージ

ASP.NET MVC 4 の Display Modes と呼ばれる機能では、デスクトップ PC 上の Web ブラウザー向けのビューと、モバイル端末の Web ブラウザー向けのビューをそれぞれ用意しておくだけで、ASP.NET MVC 4 フレームワークが自動でブラウザー種別を判断して切り替えをおこないます。

Display Modes

ASP.NET MVC 4 の Display Modes と呼ばれる機能では、デスクトップ PC 上の Web ブラウザー向けのビューと、モバイル端末の Web ブラウザー向けのビューをそれぞれ用意しておくだけで、ASP.NET MVC 4 フレームワークが自動でブラウザー種別を判断して切り替えをおこないます。例えば、下記のようにデスクトップ PC の Web ブラウザー向けの Index.cshtml と共に、モバイル ブラウザー向けの Index.Mobile.cshtml を作成します (ここでは Index.cshtml ファイルをコピーして同フォルダーにペーストして使用しています)。

図 29: Index.Mobile.cshtml の作成

さらに、分かりやすいように各ビューの一部を変更して下記のように記述します。

Index.cshtml

@{
  ViewBag.Title = "Windows Developer Days PC";
}

...

Index.Mobile.cshtml

@{
  ViewBag.Title = "Windows Developer Days Mobile";
}

...

この状態で、Visual Studio 2010 のメニューの [デバッグ開始 (F5)] または [デバッグなしで開始 (Ctrl + F5)] でアプリケーションを開始すると、デスクトップ PC 上の Web ブラウザーでは下記のように Index.cshtml がビューとして使用されます。

図 30: デスクトップ PC の Web ブラウザーでの表示

一方、同じ URL に対してモバイル端末の Web ブラウザーを使ってアクセスすると、下記のように Index.Mobile.cshtml がビューとして使用されます。

図 31: Windows Phone Emulator での表示

このように、モバイル端末用のビューを用意するだけで容易に表示を切り替えることが可能です。

この DisplayMode 機能では、HttpBrowserCapabilities の IsMobileDevice プロパティを元にモバイル Web ブラウザーか否かの判別がおこなわれています。

例えば、ビュー "Views\Home\Index.cshtml" に対して、通常のデスクトップ PC の Web ブラウザーでアクセスすると、通常は "IsMobileDevice == false" と判定され、そのまま Index.cshtml がビューとして使用されます。一方、この Web アプリケーションをモバイル端末の Web ブラウザーでアクセスして "IsMobileDevice == true" と判定されると、ASP.NET MVC 4 の DisplayMode 機能によってデフォルトでは Index.Mobile.cshtml が自動的にビューとして使用されるようになります。ここでは Index ページを例にとりましたが、この DisplayMode 機能はレイアウト ページ (_Layout.cshtml など) や部分ビュー (_LoginPartial.cshtml など) に対しても同じように動作します。

モバイル デバイス毎にビューを切り替える

デフォルトの Display Modes 機能では、モバイル Web ブラウザーか否かの判定でビューを切り替えるのみですが、モバイルと判定された場合のビューをさらに分けて用意し、モバイル端末の種別ごとにビューを切り替えることも可能です。

例えば、iPhone 専用のビューを用意したい場合、System.Web.WebPages を参照した上で、下記のコードを Global.asax.cs の Application_Start メソッドに追加し、DefaultDisplayMode インスタンスを追加登録します (UserAgent をベースとした判別ロジックは一例です)。

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)
  });

...
}

そして、例えば Index.cshtml に対して、iPhone 用のビュー Index.iPhone.cshtml を用意します。

図 32: Index.iPhone.cshtml の追加

また、Index.Mobile.cshtml の例と同様に、Index.iPhone.cshtml の記述をわかりやすいように下記のように書き換えます。

Index.iPhone.cshtml

@{
  ViewBag.Title = "Windows Developer Days iPhone";
}

...

この状態で、Visual Studio 2010 のメニュー [デバッグ開始 (F5)] または [デバッグなしで開始 (Ctrl + F5)] でアプリケーションを開始し iPhone でページを表示すると、下記のように iPhone 用のビューが使用されるようになります。

図 33: iPhone (Simulator) での表示

Note:
Display Modes では、ビューのファイル名に追加する文字列 (Mobile や iPhone など) の大文字・小文字の区別はされません。

ページのトップへ

4. jQuery Mobile を使ってモバイル向けビューを作成する

プロジェクトへ jQuery Mobile を追加する

jQuery Mobile (英語) と呼ばれる JavaScript ライブラリを使用すると、モバイル デバイスに最適化したビューを簡単に作成することができます。

ASP.NET MVC 4 の Internet Application プロジェクト テンプレートでは、標準では jQuery Mobile は含まれていませんが、NuGet と呼ばれるパッケージ マネージャの仕組みを使うことで簡単に jQuery Mobile をプロジェクトに追加することができます。

Visual Studio 2010 のメニューから、[ツール] – [Library Package Manager] – [Manage NuGet Packages for Solution...] を選択すると、[Manage NuGet Packages] ダイアログが表示されます。このダイアログの左側の "Online" を選択してから右上の検索ボックスに "jQuery.Mobile" と入力すると簡単に jQuery Mobile パッケージを検索することができます。

図 34: NuGet による jQuery Mobile のインストール

ここで [Install] ボタンをクリックすると、jQuery Mobile の JavaScript ファイルと CSS ファイルがプロジェクトに追加されます。

なお、NuGet パッケージ マネージャでは、上記のダイアログ ベースの管理だけでなくコマンドライン ベースの管理も可能です。メニューの [ツール] – [Library Package Manager] – [Package Manager Console] を選択するとコンソール ウィンドウが開きますので、ここで "Install-Package jQuery.Mobile" と入力することでもパッケージを追加可能です。

図 35: コマンドラインでの jQuery Mobile の追加

現時点では、jQuery Mobile のバージョン 1.0.1 が Script フォルダーに追加され、同時に依存関係を持った jQuery が 1.6.4 に更新されます。

図 36: プロジェクトに追加された jQuery Mobile 関連ファイル

モバイル用レイアウト ビューの作成

続いて、前述の Display Modes の機能を使ってレイアウト ビューもデバイス毎に切り替えるようにします。
下記のようにデスクトップ PC の Web ブラウザー向けのレイアウト ビュー _Layout.cshtml と共に、モバイル ブラウザー向けの _Layout.Mobile.cshtml を作成します。

図 37: _Layout.Mobile.cshtml の追加

そして、jQuery Mobile の機能を使って下記のようにビューを記述します。

_Layout.Mobile.cshtml

<!DOCTYPE html>
<html<
<head>
  <meta charset="utf-8" />
  <title>@ViewBag.Title</title>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="~/Content/jquery.mobile-1.0.1.min.css" />
  <script type="text/javascript"
          src="~/Scripts/jquery-1.6.4.min.js"></script>
  <script type="text/javascript"
          src="~/Scripts/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

  <div data-role="page" data-theme="a">

  <div data-role="header">
      <h1>WDD モバイル</h1>
      <div data-role="navbar">
        <ul>
          <li>@Html.ActionLink("Sessions", "Index", "Session")</li>
          <li>@Html.ActionLink("About", "About", "Home")</li>
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
      </div>
    </div>

    <div data-role="content">
      @RenderBody()
    </div>

  </div>

</body>
</html>

同時に、Index.Mobile.csthml と Index.iPhone.cshtml のセッション情報一覧へのリンクを下記のように jQuery Mobile のボタンとアイコン属性を指定して書き換えます。

Index.Mobile.cshtml と Index.iPhone.csthml

@{
  ViewBag.Title = "Windows Developer Days Mobile"; // または iPhone
}
<div>
  <h1>@ViewBag.Title.</h1>
  <h2>@ViewBag.Message</h2>
  <p>
    <a href="@Url.Action("Index", "Session")"
       data-role="button" data-icon="star">セッション情報一覧はこちら</a>
  </p>
</div>

この状態で iPhone でアプリケーションを表示すると、下記のように jQuery Mobile で最適化されたレイアウトやボタンが使用されたトップ ページが表示されます。

図 38: jQuery Mobile で最適化されたトップ ページ

モバイル用セッション情報一覧ビューの作成

同様に、セッション情報一覧のビューの表示を jQuery Mobile を使って最適化します。セッション情報一覧表示用のビュー ファイル "Views\Session\Index.cshtml" のモバイル用ビュー ファイル "Views\Session\Index.Mobile.cshtml" を作成します。

図 39: モバイル用セッション一覧ビューの作成

そして、下記のようにセッション情報一覧表示用のビューを記述します。

Views\Session\Index.Mobile.cshtml

@model IEnumerable<MvcApplication1.Models.Sessions>

@{
  ViewBag.Title = "セッション一覧";
}

<h2>@ViewBag.Title</h2>

<div>
  <ul data-role="listview" data-theme="c">
  @foreach (var item in Model) {
    <li>
      <a href="@Url.Action("Details", new { item.Id })">
        <h4>@Html.DisplayFor(modelItem => item.Title)</h4>
        <p>Session Code: @Html.DisplayFor(modelItem => item.Code)</p>
        <p>Room: @Html.DisplayFor(modelItem => item.Room)</p>
      </a>
    </li>
  }
  </ul>
</div>

<p>
  <a href="@Url.Action("Create", "Session")"
     data-role="button" data-icon="plus">追加</a>
</p>

この状態で iPhone でセッション情報一覧を表示すると、下記のような表示となります。

図 40: jQuery Mobile を使って最適化したセッション情報一覧ビュー

各セッションをタップ (クリック) すると、セッション情報の詳細ビューに表示が変わり、詳しい情報を確認することもできます。

Note:
このドキュメントでは、詳細ビュー "Details.cshtml" の変更まではご紹介しませんが、ここまでご紹介した jQuery Mobile を使ってモバイル デバイスで見やすいレイアウトに容易に変更することができます。

検索機能の追加

jQuery Mobile を使うと、リスト表示されたデータ アイテムの検索機能を簡単に追加することができます。前述の Views\Session\Index.Mobile.cshtml の ul リストの属性に、下記のように data-filter="true" と data-filter-placeholder="検索" を追加します。

Views\Session\Index.Mobile.cshtml

...

<div>
  <ul data-role="listview" data-theme="c"
      data-filter="true" data-filter-placeholder="検索">
...

この修正だけで、下記の実行例のように検索ボックスが表示されるようになります。

図 41: 検索ボックスの追加

検索はクライアント サイドでインクリメンタルにおこなわれるため、とても軽快にリスト アイテムを検索することができます。

図 42: アイテムの検索の様子

以上のように、ASP.NET MVC 4 と jQuery Mobile、そして SQL Azure などを利用することで、スマート フォンやタブレットなどの各種モバイル デバイスに対応した Web アプリケーションを迅速に作成することが可能です。

ページのトップへ

#
#
#
#
#


PHP で Windows Azure を利用する
OSS やソーシャル アプリケーションで Windows Azure を利用する
Windows Azure Platform の機能を使いこなす

一覧 > >

関連リンク

プロファイル (個人情報) の管理 |  お問い合わせ先 |  MSDN Flash ニュースレター |  日本での個人情報の取り扱い |  サイトマップ |  特定商取引法に基づく表示
© 2013 Microsoft. 使用条件 |  商標 |  プライバシー