아주 좋은 정보가 있어서, 퍼왔습니다. (제일밑에 출처게재있음)

[소스 다운로드]

 

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.csApplication_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 では、ビューのファイル名に追加する文字列 (MobileiPhone など) の大文字・小文字の区別はされません。

ページのトップへ

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 アプリケーションを迅速に作成することが可能です。

 

출처 : http://msdn.microsoft.com/ja-jp/windowsazure/hh965702(ja-jp)

  1. TOSHU TOSHU 2013.01.28 15:13 신고

    혹시나 한국판 번역이 필요하신분이 열분정도 계시면,
    시간나는대로 번역해서 올리도록 하겠습니다.
    댓글로 문의주세요.

+ Recent posts