次の方法で共有

ASP.NET MVC 4 の新機能

  • [アーティクル]

Web Camps チーム

Web Camps トレーニング キットのダウンロード

ASP.NET MVC 4 は、確立された設計パターンと、ASP.NET と .NET フレームワークの機能を使用して、スケーラブルな標準ベースの Web アプリケーションを構築するためのフレームワークです。 この新しい 4 番目のバージョンのフレームワークでは、モバイル Web アプリケーションの開発を容易にすることに重点を置いています。

まず、新しい ASP.NET MVC 4 プロジェクトを作成するときに、モバイル デバイス専用のスタンドアロン アプリのビルドに使用できるモバイル アプリケーション プロジェクト テンプレートが追加されました。 さらに、ASP.NET MVC 4 は jQuery.Mobile.MVC NuGet パッケージを介して jQuery Mobile と統合されます。 jQuery Mobile は、Windows Phone、iPhone、Android など、すべての一般的なモバイル デバイス プラットフォームと互換性のある Web アプリを開発するための HTML5 ベースのフレームワークです。 ただし、特殊化が必要な場合は、ASP.NET MVC 4 を使用して、デバイスごとに異なるビューを提供し、デバイス固有の最適化を提供することもできます。

このハンズオン ラボでは、まず ASP.NET MVC 4 "インターネット アプリケーション" プロジェクト テンプレートを使用して、フォト ギャラリー アプリケーションを作成します。 jQuery Mobile と ASP.NET MVC 4 の新機能を使用してアプリを徐々に強化し、さまざまなモバイル デバイスやデスクトップの Web ブラウザに対応できるようにします。 また、コード生成のための新しいコードレシピと、ASP.NET MVC 4 が Task <ActionResult> の戻り値の型をサポートすることで、非同期アクションメソッドをどのように書きやすくするかについても学びます。

Note

すべてのサンプル コードとスニペットは、Microsoft-Web/WebCampTrainingKit リリースで入手できる Web Camps トレーニング キットに含まれています。 このラボに固有のプロジェクトは、ASP.NET 4.5 の Web Forms の新機能で入手できます。

目標

このハンズオン ラボでは、次のことを行う方法について説明します。

  • 新しいモバイル アプリケーション プロジェクト テンプレートを含む、ASP.NET MVC プロジェクト テンプレートの機能強化を活用する
  • HTML5 ビューポート属性と CSS メディア クエリを使用してモバイル デバイスでの表示を改善する
  • jQuery Mobile を使用して、段階的な機能強化とタッチ最適化 Web UI の構築に使用する
  • モバイル固有のビューを作成する
  • ビュー スイッチャー コンポーネントを使用して、アプリケーションのモバイル ビューとデスクトップ ビューを切り替える
  • タスクサポートを使用して非同期コントローラーを作成する

前提条件

このラボを完了するには、次の項目が必要です:

段取り

ラボ ドキュメントには、コード ブロックを挿入するように指示する記述が随所に出現します。 便宜上、そのコードのほとんどは Visual Studio Code スニペットとして提供されており、手動で追加する必要がないように Visual Studio 内から使用できます。

コード スニペットをインストールするには:

  1. Windows エクスプローラー ウィンドウを開き、ラボの Source\Setup フォルダーを参照します。
  2. このフォルダー内の Setup.cmd ファイルをダブルクリックして、Visual Studio コード スニペットをインストールします。

Visual Studio Code スニペットに慣れていない場合、その使用方法については、このドキュメントの付録「付録 A: コード スニペットの使用」を参照してください。

演習

このハンズオン ラボに含まれる演習は次のとおりです。

  1. 新しい ASP.NET MVC 4 プロジェクト テンプレート
  2. フォト ギャラリー Web アプリケーションの作成
  3. モバイル デバイスのサポートの追加
  4. 非同期コントローラーの使用

Note

各演習には、演習を完了した後に得られる、結果のソリューションが含まれる End フォルダーが付帯しています。 このソリューションは、演習の作業についてさらにヘルプが必要な場合に、ガイドとして使用できます。

このラボの推定所要時間: 60 分。

演習 1: 新しい ASP.NET MVC 4 プロジェクト テンプレート

この演習では、ASP.NET MVC 4 プロジェクト テンプレートの機能強化について説明します。 MVC 3 に既に存在するインターネット アプリケーション テンプレートに加えて、このバージョンにはモバイル アプリケーション用の個別のテンプレートが含まれるようになりました。 まず、各テンプレートの関連する機能をいくつか見ていきます。 次に、適切なアプローチを使用して、さまざまなプラットフォームでページを適切にレンダリングします。

タスク 1 - インターネット アプリケーション テンプレートの探索

  1. Visual Studio を開きます。

  2. [ファイル | 新規 | プロジェクト] メニュー コマンドを選択します。 [新しいプロジェクト] ダイアログで、左側のウィンドウ ツリーの [Visual C# | Web] を選択し、[ASP.NET MVC 4 Web アプリケーション] を選択します。プロジェクトに PhotoGallery という名前を付け、場所を選択して (または既定値のままにして)、[OK] をクリックします。

    Note

    今作成している PhotoGallery ASP.NET MVC 4 ソリューションを後でカスタマイズします。

    Creating a new project

    新しいプロジェクトの作成

  3. [新しい ASP.NET MVC 4 プロジェクト] ダイアログで、インターネット アプリケーション プロジェクト テンプレートを選択し、[OK] をクリックします。 ビュー エンジンとして Razor を選択していることを確認します。

    Creating a new ASP.NET MVC 4 Internet Application

    新しい ASP.NET MVC 4 インターネット アプリケーションを作成する

    Note

    Razor 構文は、ASP.NET MVC 3 で導入されました。 その目的は、ファイルに必要な文字数とキーストロークを最小限に抑え、高速で流動的なコーディング ワークフローを可能にすることです。 Razor は、既存の C# / VB (またはその他) 言語スキルを活用し、優れた HTML 構築ワークフローを可能にするテンプレート マークアップ構文を提供します。

  4. F5 キーを押 してソリューションを実行し、更新されたテンプレートを確認します。 次の機能をご覧ください:

    モダンスタイルのテンプレート

    テンプレートが更新され、モダンスタイルが提供されます。

    ASP.NET MVC 4 restyled templates

    ASP.NET MVC 4 のテンプレートをリスタイルする

    New Contact page

    新しい問い合わせ先ページ

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

    ブラウザー ウィンドウのサイズ変更を確認し、ページ レイアウトが新しいウィンドウ サイズにどのように動的に適応するかを確認します。 これらのテンプレートでは、アダプティブ レンダリング手法を使用して、カスタマイズなしでデスクトップ プラットフォームとモバイル プラットフォームの両方で適切にレンダリングします。

    ASP.NET MVC 4 project template in different browser sizes

    さまざまなブラウザー サイズの ASP.NET MVC 4 プロジェクト テンプレート

    JavaScript を使用したより豊富な UI

    既定のプロジェクト テンプレートに対するもう 1 つの機能強化は、JavaScript を使用して、より対話型の JavaScript を提供することです。 テンプレートで使用されるログインおよび登録リンクは、jQuery Validation を使用してクライアント側から入力フィールドを検証する方法を例示しています。

    jQuery Validation

    jQuery Validation

    Note

    2 つのログイン セクションに注目してください。最初のセクションでは、サイトの登録済みアカウントを使用してログインできます。2 番目のセクションでは、Google などの別の認証サービスを使用してログインすることもできます (既定では無効)。

  5. ブラウザーを閉じてデバッガーを停止し、Visual Studio に戻ります。

  6. App_Start フォルダーの下にあるファイル AuthConfig.cs を開きます。

  7. 最後の行からコメントを削除して、Google クライアントを OAuth 認証に 登録します。

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Note

    Facebook、Twitter、Microsoft などの任意の OpenID または OAuth サービスを使用して、認証を簡単に有効にできることに注意してください。

  8. F5 キーを押 してソリューションを実行し、ログイン ページに移動します。

  9. ログインする Google サービスを選択します。

    Selecting the log in service

    ログイン サービスの選択

  10. Google アカウントを使用してログインします。

  11. サイト (localhost) が Google アカウントから情報を取得できるようにします。

  12. 最後に、Google アカウントを関連付けるためにサイトに登録する必要があります。

Associate your Google account

Google アカウント の関連付け 13.ブラウザーを閉じてデバッガーを停止し、Visual Studio に戻ります。 14.次に、ソリューションを調べて、プロジェクト テンプレートで ASP.NET MVC 4 導入されたその他の新機能を確認します。

The ASP.NET MVC 4 Internet Application Project Template

ASP.NET MVC 4 インターネット アプリケーション プロジェクト テンプレート

  • HTML 5 マークアップ

    テンプレート ビューを参照して、新しいテーマのマークアップを確認します。

    New template, using Razor and HTML5 markup About.cshtml.

    Razor および HTML5 マークアップ (About.cshtml) を使用した新しいテンプレート。

  • 更新された JavaScript ライブラリ

    ASP.NET MVC 4 の既定のテンプレートには、JavaScript と HTML を使用して応答性の高い豊富な Web アプリケーションを作成できる JavaScript MVVM フレームワークである KnockoutJS が含まれるようになりました。 MVC3 と同様に、jQuery と jQuery UI ライブラリも ASP.NET MVC 4 に含まれています。

    Note

    KnockOutJS ライブラリの詳細については、次のリンクを参照してください: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/)。 さらに、[http://docs.jquery.com/](http://docs.jquery.com/) で jQuery と jQuery UI について学習できます。

タスク 2 - モバイル アプリケーション テンプレートの探索

ASP.NET MVC 4 は、モバイルおよびタブレット ブラウザー用の Web サイトの開発を容易にします。 このテンプレートは、インターネット アプリケーション テンプレートと同じアプリケーション構造を持ちます (コントローラー コードは実質的に同じであることに注意してください)。ただし、そのスタイルはタッチベースのモバイル デバイスで適切にレンダリングされるように変更されています。

  1. [ファイル | 新規 | プロジェクト] メニュー コマンドを選択します。 [新しいプロジェクト] ダイアログで、左側のウィンドウ ツリーの [Visual C# | Web] テンプレートを選択して、[ASP.NET MVC 4 Web アプリケーション] を選択します。プロジェクトに PhotoGallery.Mobile という名前を付け、場所を選択 (または既定値のままにします) し、[ソリューションに追加] を選択して [OK] をクリックします。

  2. [新しい ASP.NET MVC 4 プロジェクト] ダイアログで、モバイル アプリケーション プロジェクト テンプレートを選択し、[OK] をクリックします。 ビュー エンジンとして Razor を選択していることを確認します。

    Creating a new ASP.NET MVC 4 Mobile Application

    新しい ASP.NET MVC 4 モバイル アプリケーションを作成する

  3. これで、ソリューションを探索し、モバイル用の ASP.NET MVC 4 ソリューション テンプレートによって導入された新機能のいくつかを確認できます:

    • jQuery モバイル ライブラリ

      モバイル アプリケーション プロジェクト テンプレートには、モバイル ブラウザーの互換性のためのオープン ソース ライブラリである jQuery Mobile ライブラリが含まれています。 jQuery Mobile は、CSS と JavaScript をサポートするモバイル ブラウザーにプログレッシブエンハンスメントを適用します。 プログレッシブ エンハンスメントにより、すべてのブラウザが Web ページの基本的なコンテンツを表示できる一方で、最も強力なブラウザのみがリッチ コンテンツを表示できるようにします。 jQuery Mobile スタイルに含まれる JavaScript ファイルと CSS ファイルは、モバイル ブラウザーがページ マークアップを変更することなく、画面にコンテンツを収めるのに役立ちます。

      jQuery-mobile-library-included-in-the-template

      テンプレートに含まれる jQuery モバイル ライブラリ

    • HTML5 ベースのマークアップ

      Mobile-application-template-using-HTML5-markup

      HTML5 マークアップを使用したモバイル アプリケーション テンプレート (Login.cshtml および index.cshtml)

  4. F5 キーを押して、ソリューションを実行します。

  5. Windows Phone 7 Emulator を開きます。

  6. 電話のスタート画面で、Internet Explorer を開きます。 デスクトップ アプリケーションが起動した URL を確認し、電話からその URL を参照します (例: http://localhost:[PortNumber]/)。

  7. これで、ログイン ページを入力したり、About ページを確認したりできます。 Web サイトのスタイルは、モバイル用の新しい Metro アプリに基づいていることに注意してください。 ASP.NET MVC 4 プロジェクト テンプレートがモバイル デバイスに正しく表示され、ページのすべての要素が表示され、有効になっていることを確認します。 ヘッダーのリンクは、クリックまたはタップするのに十分な大きさであることに注意してください。

    Project template pages in a mobile device

    モバイル デバイスのプロジェクト テンプレート ページ

  8. 新しいテンプレートでは、Viewport メタ タグも使用されます。 ほとんどのモバイル ブラウザーでは、モバイル デバイスの実際の幅よりも大きい仮想ブラウザー ウィンドウまたは "ビューポート" の幅が定義されています。 これにより、モバイル ブラウザーは、仮想ディスプレイ内の Web ページ全体を表示できます。 Viewport メタ タグを使用すると、Web 開発者は モバイル デバイス 上のブラウザー領域の幅、高さ、およびスケールを設定できます。モバイル アプリケーション用の ASP.NET MVC 4 テンプレートは、すべてのページでビューポートがデバイスの画面幅に設定されるように、レイアウト テンプレート (Views\Shared_Layout.cshtml) のデバイス幅 ("width=device-width") にビューポートを設定します。 ビューポート メタ タグでは、既定のブラウザー ビューは変更されないことに注意してください。

  9. Views | Shared フォルダーにある _Layout.cshtml を開き、Viewport メタ タグにコメントを付けます。 アプリケーションをまだ開いていない場合は実行し、違いを確認します。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

The site after commenting the viewport meta tag

ビューポート メタ タグ 10 をコメントした後のサイト。Visual Studio で Shift + F5 キーを押 して、アプリケーションのデバッグを停止します。 11.ビューポート メタ タグのコメントを解除します。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

タスク 3 - アダプティブ レンダリングの使用

このタスクでは、カスタマイズを行わずに、モバイル デバイスと Web ブラウザーで Web ページを正しくレンダリングする別の方法について説明します。 同様の目的でビューポート メタ タグを既に使用しています。 次に、アダプティブ レンダリングという別の強力な方法を紹介します。

アダプティブ レンダリングは、CSS3 メディア クエリを使用してページに適用されるスタイルをカスタマイズする手法です。 メディア クエリは、スタイル シート内の条件を定義し、特定の条件で CSS スタイルをグループ化します。 条件が true の場合にのみ、スタイルが宣言されたオブジェクトに適用されます。

アダプティブ レンダリング手法によって提供される柔軟性により、サイトをさまざまなデバイスに表示するためのカスタマイズが可能になります。 スタイルを選択するロジック コードを記述しなくても、1 つのスタイル シートに必要な数のスタイルを定義できます。 したがって、レンダリング目的で重複するコードとロジックの量が減るため、ページ スタイルを適応させる非常にすっきりした方法です。 一方、CSS ファイルのサイズがわずかに大きくなる可能性がある場合は、帯域幅の消費が増加します。

アダプティブ レンダリング手法を使用すると、ブラウザーに関係なく、サイトが正しく表示されます。ただし、帯域幅の余分な負荷が懸念される場合は、考慮する必要があります。

Note

メディア クエリの基本的な形式は次のとおりです: @media Scope: all | handheld | print | projection | screen] ([property:value] と ... [property:value])

メディア クエリの例: >@media all と (max-width: 1000px) と (最小幅: 700px) {}: 700px から 1000px までのすべての解像度。

@media 画面と (最小幅: 400px)、(max-width: 700px) { ... }: 画面のみ。 解像度は 400 から 700px の間である必要があります。

@media ハンドヘルドと (最小幅: 20em)、画面、および (最小幅: 20em) { ... }: ハンドヘルド (モバイルおよびデバイス) および画面の場合。 最小幅は 20em を超える必要があります。

詳細については、W3C サイトを参照してください。

次に、アダプティブ レンダリングのしくみを調べ、ASP.NET MVC 4 の既定の Web サイト テンプレートの読みやすさを向上させます。

  1. タスク 1 で作成した PhotoGallery.sln ソリューションを開き、PhotoGallery プロジェクトを選択します。 F5 キーを押して、ソリューションを実行します。

  2. ブラウザーの幅を変更し、ウィンドウを元のサイズの半分または 4 分の 1 未満に設定します。 ヘッダー内の項目の動作に注目してください。一部の要素はヘッダーの表示領域に表示されません。

  3. Content プロジェクト フォルダーにある Visual Studio ソリューション エクスプローラーから Site.css ファイルを開きます。 Ctrl キーを押しながら F キーを押して Visual Studio 統合検索を開き、@media を書き込んで CSS メディア クエリを見つけます。

    このテンプレートで定義されているメディア クエリ条件は、この方法で機能します。ブラウザーのウィンドウ サイズが 850 px 未満の場合、適用される CSS ルールはこのメディア ブロック内で定義されています。

    Locating the media query

    メディア クエリの検索

  4. アダプティブ レンダリングを無効にするには、850 px に設定された最大幅属性値を 10px に置き換え、Ctrl キーを押しながら S キーを押 して変更を保存します。 ブラウザーに戻り、Ctrl + F5 キーを押 して、行った変更でページを更新します。 ウィンドウの幅を調整するときに、両方のページの違いに注意してください。

    The page is applying the <span class=@media スタイルを左と右に、スタイルは省略されています"title="左側では、ページは @media スタイルを適用しています。右側では、スタイルは省略されています" />

    左側では、ページが @media スタイルを適用しています。右側では、スタイルは省略されています

    次に、モバイル デバイスで何が起こるかを確認してみましょう:

    In the left, the page is applying the <span class=@media スタイル、右側ではスタイルは省略されています"title="左側では、ページは@media スタイルを適用しています。右側では、スタイルは省略されています" />

    左側では、ページが @media スタイルを適用しています。右側では、スタイルは省略されています

    Web ブラウザーでページがレンダリングされるときの変更はあまり重要ではないことに気付くでしょうが、モバイル デバイスを使用する場合、違いはより明確になります。 画像の左側では、カスタム スタイルによって読みやすさが向上していることがわかります。

    アダプティブ レンダリングは、さらに多くのシナリオで使用できるため、条件付きスタイルを Web サイトに簡単に適用し、一般的なスタイルの問題をすっきりしたアプローチで解決できます。

    ビューポート メタ タグと CSS メディア クエリは、ASP.NET MVC 4 に固有のものではありません。そのため、これらの機能を任意の Web アプリケーションで利用できます。

  5. Visual Studio で Shift + F5 キーを押して、アプリケーションのデバッグを停止します。

この演習では、フォト ギャラリー アプリケーションで写真を表示します。 まず、ASP.NET MVC 4 プロジェクト テンプレートから始めて、サービスから写真を取得してホーム ページに表示する機能を追加します。

次の演習では、モバイル デバイスでの表示方法を強化するために、このソリューションを更新します。

タスク 1 - モック フォト サービスの作成

このタスクでは、ギャラリーに表示されるコンテンツを取得するフォト サービスのモックを作成します。 これを行うには、各写真のデータを含む JSON ファイルを返す新しいコントローラーを追加します。

  1. まだ開いていない場合は、Visual Studio を開きます。

  2. [ファイル | 新規 | プロジェクト] メニュー コマンドを選択します。 [新しいプロジェクト] ダイアログで、左側のウィンドウ ツリーの [Visual C# | Web] を選択し、[ASP.NET MVC 4 Web アプリケーション] を選択します。プロジェクトに PhotoGallery という名前を付け、場所を選択して (または既定値のままにして)、[OK] をクリックします。 または、演習 1 から既存の ASP.NET MVC 4 インターネット アプリケーション ソリューションから 作業を続け、次の手順をスキップすることもできます。

  3. [新しい ASP.NET MVC 4 プロジェクト] ダイアログ ボックスで、インターネット アプリケーション プロジェクト テンプレートを 選択し、[OK] をクリックします。 Razor がビュー エンジンとして選択されていることを確認します。

  4. ソリューション エクスプローラーで、プロジェクトの App_Data フォルダーを右クリックし、[追加 | 既存の項目] を選択します。 このラボの Source\Assets\App_Data フォルダーを参照し、Photos.json ファイルを追加します。

  5. PhotoController という名前の新しいコントローラーを作成します。 これを行うには、Controllers フォルダーを 右クリックし、[追加] に移動し、[コントローラー] を選択します。コントローラー名を入力し、空の MVC コントローラー テンプレートをそのままにして、[追加] をクリックします。

    Adding the PhotoController

    PhotoController の追加

  6. Index メソッドを次の Gallery アクションに置き換え、プロジェクトに最近追加した JSON ファイルからコンテンツを返します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex02 - ギャラリー アクション)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. F5 キーを押 してソリューションを実行し、モック写真サービスをテストするために次の URL を参照します: http://localhost:[port]/photo/gallery ([port] 値は、アプリケーションが起動された現在のポートによって異なります)。 この URL への要求では、Photos.json ファイルの内容を取得する 必要があります。

    Testing the mocked photo service

    モック写真サービスのテスト

実際の実装では、ASP.NET Web API を使用してフォト ギャラリー サービスを実装できます。 ASP.NET Web API は、ブラウザーやモバイル デバイスなどを含む多様なクライアントに提供できる HTTP サービスの構築が容易になるフレームワークです。 ASP.NET Web API は、.NET Framework に基づいて RESTful アプリケーションを構築するのに最適なプラットフォームです。

タスク 2 - フォト ギャラリーの表示

このタスクでは、この演習の最初のタスクで作成したモック サービスを使用して、ホーム ページを更新してフォト ギャラリーを表示します。 モデル ファイルを追加し、ギャラリー ビューを更新します。

  1. Visual Studio で Shift + F5 キーを押して、アプリケーションのデバッグを停止します。

  2. Models フォルダーに Photo クラスを作成します。 これを行うには、[モデル] フォルダーを右クリックし、[追加] を選択して [クラス] をクリックします。 次に、名前を Photo.cs に設定し、[追加] をクリックします。

  3. 次のメンバーを Photo クラスに追加します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex02 - 写真モデル)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Controllers フォルダーから HomeController.cs ファイルを開きます。

  5. 次の using ステートメントを追加します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex02 - HomeController Usings)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. HttpClient を使用してギャラリー データを取得するように Index アクションを更新し、JavaScriptSerializer を使用してビュー モデルに逆シリアル化します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex02 - インデックス アクション)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Views\Home フォルダーの下にある Index.cshtml ファイルを開き、すべてのコンテンツを次のコードに置き換えます。

    このコードは、サービスから取得したすべての写真をループ処理し、順序なしリストに表示します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex02 - 写真リスト)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. ソリューション エクスプローラーで、プロジェクトの Content フォルダーを右クリックし、[追加 | 既存の項目] を選択します。 このラボの Source\Assets\Content フォルダーを参照し、Site.css ファイルを追加します。 置き換えを確認する必要があります。 Site.css ファイルを開いている場合は、ファイルの再読み込みも確認する必要があります。

  9. エクスプローラーを開き、このラボの Source\Assets フォルダーにある Photos フォルダー全体 をソリューション エクスプローラーのプロジェクトのルート フォルダーにコピーします。

  10. アプリケーションを実行します。 これで、ギャラリーに写真が表示されているホーム ページが表示されます。

    Photo Gallery

    フォト ギャラリー

  11. Visual Studio で Shift + F5 キーを押して、アプリケーションのデバッグを停止します。

演習 3: モバイル デバイスのサポートを追加する

ASP.NET MVC 4 の重要な更新プログラムの 1 つは、モバイル開発のサポートです。 この演習では、前の演習で作成した PhotoGallery ソリューションを拡張することで、モバイル アプリケーション用の ASP.NET MVC 4 の新機能について説明します。

タスク 1 - ASP.NET MVC 4 アプリケーションへの jQuery Mobile のインストール

  1. Source/Ex3-MobileSupport/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. [ツール]>[NuGet パッケージ マネージャー]>[パッケージ マネージャー コンソール] メニュー オプションをクリックして、パッケージ マネージャーコンソールを開きます。

    Opening the NuGet Package Manager Console

    NuGet パッケージ マネージャー コンソールを開く

  3. パッケージ マネージャー コンソールで、次のコマンドを実行して jQuery.Mobile.MVC パッケージをインストールします。

    jQuery Mobile は、タッチ最適化 Web UI を構築するためのオープン ソース ライブラリです。 jQuery.Mobile.MVC NuGet パッケージには、ASP.NET MVC 4 アプリケーションで jQuery Mobile を使用するためのヘルパーが含まれています。

    Note

    次のコマンドを実行すると、Nuget から jQuery.Mobile.MVC ライブラリがダウンロードされます。

    PM

    Install-Package jQuery.Mobile.MVC

    このコマンドは、jQuery Mobile といくつかのヘルパー ファイルをインストールします。これには、次のものが含まれます:

    • Views/Shared/_Layout.Mobile.cshtml: 小さい画面用に最適化された jQuery Mobile ベースのレイアウトです。 Web サイトは、モバイル ブラウザーから要求を受信すると、元のレイアウト (_Layout.cshtml) をこのレイアウトに置き換えます。

    • ビュー スイッチャー コンポーネント: Views/Shared/_ViewSwitcher.cshtml 部分ビューと ViewSwitcherController.cs コントローラーで構成されます。 このコンポーネントには、ユーザーがページのデスクトップ バージョンに切り替えできるようにするためのリンクがモバイル ブラウザーに表示されます。
      Photo Gallery project with mobile support

      モバイル対応のフォト ギャラリー プロジェクト

  4. モバイル バンドルを登録します。 これを行うには、Global.asax.cs ファイルを開き、次の行を追加します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex03 - モバイル バンドルの登録)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. デスクトップ Web ブラウザーを使用してアプリケーションを実行します。

  6. スタート メニュー | すべてのプログラム | Windows Phone SDK 7.1 | Windows Phone Emulator にある Windows Phone 7 Emulator を開きます。

  7. 電話のスタート画面で、Internet Explorer を開きます。 アプリケーションが起動した URL を確認し、電話ブラウザー (例: http://localhost:[PortNumber]/) でその URL を参照します。

    jQuery.Mobile.MVC によってモバイル デバイス用に最適化されたビューを表示する新しい資産がプロジェクトに作成されたため、Windows Phone Emulator ではアプリケーションの外観が異なります。

    電話の上部にメッセージが表示され、デスクトップ ビューに切り替わるリンクが表示されます。 さらに、インストールした パッケージによって作成された _Layout.Mobile.cshtml レイアウトには、アプリケーションに別のレイアウトが含まれています。

    Note

    現時点では、モバイル ビューに戻るためのリンクはありません。 これは、新しいバージョンに含まれる予定です。

    Mobile view of the Photo Gallery Home page

    フォト ギャラリーのホーム ページのモバイル ビュー

  8. Visual Studio で Shift + F5 キーを押して、アプリケーションのデバッグを停止します。

タスク 2 - モバイル ビューの作成

このタスクでは、モバイル デバイスでの外観を改善するためにコンテンツを調整したモバイル バージョンのインデックス ビューを作成します。

  1. Views\Home\Index.cshtml ビューをコピーして貼り付けてコピーを作成し、新しいファイルの名前を Index.Mobile.cshtml に変更します。

  2. 新しく作成された Index.Mobile.cshtml ビューを開き、既存 の <ul> タグをこのコードに置き換えます。 これにより、jQuery Mobile データ注釈を使用して <ul> タグを更新し、jQuery のモバイル テーマを使用します。

    <ul data-role="listview" data-inset="true" data-filter="true">

    Note

    次のことに注意してください。

    • listview に設定されたデータ ロール属性は、listview スタイルを使用してリストをレンダリングします。

    • data-inset 属性を true に設定すると、罫線と余白が丸いリストが表示されます。

    • データ フィルター属性を true に設定すると、検索ボックスが生成されます。

    jQuery Mobile の規則の詳細については、プロジェクトのドキュメント [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/) を参照してください

  3. Ctrl + S キーを押して、変更を保存します。

  4. Windows Phone Emulator に切り替えて、サイトを更新します。 ギャラリー リストの新しい外観と、上部にある新しい検索ボックスに注目してください。 次に、検索ボックスに単語 (Tulips など) を入力して、フォト ギャラリーで検索を開始します。

    Gallery using listview style with filtering

    フィルター処理で listview スタイルを使用するギャラリー

    要約すると、ViewMobiler レシピを使用して、"mobile" サフィックスを持つインデックス ビューのコピーを作成しました。 このサフィックスは、モバイル デバイスから生成されたすべての要求がインデックスのコピーを使用することを ASP.NET MVC 4 に示します。 さらに、モバイル デバイスでのサイトの外観を向上させるために jQuery Mobile を使用するように、インデックス ビューのモバイル バージョンを更新しました。

  5. Visual Studio に戻り、Content フォルダーの下にある Site.Mobile.css を開きます。

  6. 写真のタイトルの位置を修正して、画像の右側に表示されるようにします。 これを行うには、Site.Mobile.css ファイルに次のコードを追加します。

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Ctrl + S キーを押して、変更を保存します。

  8. Windows Phone Emulator に戻り、サイトを更新します。 写真のタイトルが正しく配置されるようになったことに注意してください。

    Title positioned on the right side of the image

    画像の右側に配置されたタイトル

タスク 3 - jQuery モバイル テーマ

jQuery Mobile のすべてのレイアウトとウィジェットは、サイトとアプリケーションに完全な統一されたビジュアル デザイン テーマを適用できるようにする、新しいオブジェクト指向 CSS フレームワークを中心に設計されています。

jQuery Mobile の既定のテーマには、クイック リファレンス用の文字 (a、b、c、d、e) が与えられた 5 つの見本が含まれています。

このタスクでは、モバイル レイアウトを更新して、既定とは異なるテーマを使用します。

  1. Visual Studio に戻ります。

  2. Views\Shared にある _Layout.Mobile.cshtml ファイルを開きます。

  3. データ ロールが "page" に設定されている div 要素を検索し、データ テーマを "e" に更新します。

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

  4. Ctrl + S キーを押して、変更を保存します。

  5. Windows Phone Emulator でサイトを更新し、新しい配色パターンに注目します。

    Mobile layout with a different color scheme

    配色が異なるモバイル レイアウト

タスク 4 - ビュー スイッチャー コンポーネントとブラウザーオーバーライド機能の使用

モバイル最適化 Web ページの規則は、ユーザーがデスクトップ バージョンのページに切り替えることができる、デスクトップ ビューやフル サイト モードなどのテキストを含むリンクを追加することです。 jQuery.Mobile.MVC パッケージには、_Layout.Mobile.cshtml ビューで 使用されるこの目的のためのサンプル ビュー スイッチャー コンポーネントが含まれています。

Link to switch to Desktop View

デスクトップ ビューに切り替えるリンク

ビュー スイッチャーは、Browser Overriding という新しい機能を使用します。 この機能を使用すると、アプリケーションは要求を、実際のブラウザー (ユーザー エージェント) とは異なるブラウザーから送信されたかのように処理できます。

このタスクでは、jQuery.Mobile.MVC によって追加されたビュー スイッチャーのサンプル実装と、ASP.NET MVC 4 の新しいブラウザー オーバーライド機能について説明します。

  1. Visual Studio に戻ります。

  2. Views\Shared フォルダーの下にある _Layout.Mobile.cshtml ビューを開き、ビュー スイッチャー コンポーネントが部分ビューとして参照されていることを確認します。

    Mobile layout using View-Switcher component

    View-Switcher コンポーネントを使用したモバイル レイアウト

  3. _ViewSwitcher.cshtml 部分ビューを開きます。

    部分ビューでは、新しいメソッド ViewContext.HttpContext.GetOverriddenBrowser() を使用して Web 要求の配信元を特定し、対応するリンクを表示してデスクトップ ビューまたはモバイル ビューに切り替えます。

    GetOverriddenBrowser メソッドは、要求に現在設定されているユーザー エージェント (実際またはオーバーライドされた) に対応する HttpBrowserCapabilitiesBase インスタンスを返します。 この値を使用して、IsMobileDevice などのプロパティを取得できます。

    ViewSwitcher partial view

    ViewSwitcher 部分ビュー

  4. Controllers フォルダーにある ViewSwitcherController.cs クラスを開きます。 ViewSwitcher コンポーネントのリンクによって SwitchView アクションが呼び出されていることを確認し、新しい HttpContext メソッドに注目してください。

    • HttpContext.ClearOverriddenBrowser() メソッドは、現在の要求に対してオーバーライドされたユーザー エージェントをすべて削除します。

    • HttpContext.SetOverriddenBrowser() メソッドは、指定されたユーザー エージェントを使用して、要求の実際のユーザー エージェント値をオーバーライドします。
      ViewSwitcher Controller
      ViewSwitcher コントローラー

      ブラウザーのオーバーライドは、ASP.NET MVC 4 のコア機能であり、jQuery.Mobile.MVC パッケージをインストールしない場合でも使用できます。 ただし、この機能はビュー、レイアウト、部分ビューにのみ影響し、Request.Browser オブジェクトに依存する機能には影響しません。

タスク 5 - デスクトップ ビューにビュー スイッチャーを追加する

このタスクでは、ビュー スイッチャーを含むようにデスクトップ レイアウトを更新します。 これにより、モバイル ユーザーはデスクトップ ビューを参照するときにモバイル ビューに戻ります。

  1. Windows Phone Emulator でサイトを更新します。

  2. ギャラリーの上部にある [デスクトップ ビュー] リンクをクリックします。 デスクトップ ビューにはモバイル ビューに戻るためのビュー スイッチャーがないことに注意してください。

  3. Visual Studio に戻り、_Layout.cshtml ビューを開 きます。

  4. ログイン セクションを検索し、_LogOnPartial 部分ビューの 下に _ViewSwitcher 部分ビューをレンダリングする呼び出しを挿入します。 次に、Ctrl + S キーを押して変更を保存します。

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Ctrl + S キーを押して、変更を保存します。

  6. Windows Phone Emulator でページを更新し、画面をダブルクリックして拡大します。 ホーム ページに、モバイル ビューからデスクトップ ビューに切り替える [モバイル ビュー] リンクが表示されます。

    View Switcher rendered in desktop view

    デスクトップ ビューでレンダリングされたビュー スイッチャー

  7. もう一度モバイル ビューに切り替え、[バージョン情報] ページ (http://localhost[ポート]/ホーム/バージョン情報) を参照します。 About.Mobile.cshtml ビューを作成していない場合でも、[バージョン情報] ページはモバイル レイアウト (_Layout.Mobile.cshtml) を使用して表示されます。

    About page

    [バージョン情報] ページ

  8. 最後に、デスクトップ Web ブラウザーでサイトを開きます。 以前の更新プログラムがデスクトップ ビューに影響を与えたことに注意してください。

    PhotoGallery desktop view

    PhotoGallery デスクトップ ビュー

タスク 6 - 新しい表示モードの作成

新しい表示モード機能を使用すると、アプリケーションは要求を生成しているブラウザーに応じてビューを選択できます。 たとえば、デスクトップ ブラウザーがホーム ページを要求した場合、アプリケーションは Views\Home\Index.cshtml テンプレートを返します。 次に、モバイル ブラウザーがホーム ページを要求すると、アプリケーションは Views\Home\Index.mobile.cshtml テンプレートを返します。

このタスクでは、iPhone デバイス用にカスタマイズされたレイアウトを作成し、iPhone デバイスからの要求をシミュレートする必要があります。 これを行うには、iPhone エミュレーター/シミュレーター (Electric Mobile Simulator など) またはユーザー エージェントを変更するアドオンを含むブラウザーを使用できます。 Safari ブラウザーでユーザー エージェント文字列を設定して iPhone をエミュレートする方法については、David Alison のブログで｢Safari が IE のふりをする方法」を参照してください。

このタスクは省略可能であり、ラボ全体を実行せずに続行できることに注意してください。

  1. Visual Studio で Shift + F5 キーを押して、アプリケーションのデバッグを停止します。

  2. Global.asax.cs を開き、次の using ステートメントを追加します。

    using System.Web.WebPages;

  3. Application_Start メソッドに、次の強調表示されたコードを追加します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex03 - iPhone DisplayMode)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

静的な DisplayModeProvider.Instance.Modes 静的リスト内で、"iPhone" という名前の新しい DefaultDisplayMode を登録しました。これは、各受信要求と照合されます。 受信要求に文字列 "iPhone" が含まれている場合、ASP.NET MVC は名前に "iPhone" サフィックスを含むビューを検索します。 0 パラメーターは、新しいモードがどの程度具体的であるかを示します。たとえば、このビューは、モバイル デバイスからの要求に一致する一般的な ".mobile" ルールよりも具体的です。

このコードを実行した後、iPhone ブラウザーが要求を生成すると、アプリケーションは次の手順で作成する Views\Shared\_Layout.iPhone.cshtml レイアウトを使用します。

Note

iPhone の要求をテストするこの方法はデモ目的で簡略化されており、すべての iPhone ユーザー エージェント文字列で期待どおりに動作しない場合があります (たとえば、テストでは大文字と小文字が区別されます)。

  1. Views\Shared フォルダーに _Layout.Mobile.cshtml ファイルのコピーを作成し、コピーの名前を " _Layout.iPhone.cshtml" に変更します。
  2. 前の手順で作成した _Layout.iPhone.cshtml を開きます。
  3. data-role 属性が page に設定されている div 要素を検索し、data-theme 属性を "a"に変更します。
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

これで、ASP.NET MVC 4 アプリケーションに 3 つのレイアウトが作成されました:

  1. _Layout.cshtml: デスクトップ ブラウザーに使用される既定のレイアウト。

  2. _Layout.mobile.cshtml: モバイル デバイスに使用される既定のレイアウト。

  3. _Layout.iPhone.cshtml: iPhone デバイスに固有のレイアウト。異なる配色を使用して _Layout.mobile.cshtml と区別します。

  4. F5 キーを押 してアプリケーションを実行し、Windows Phone Emulator でサイトを参照します。

  5. iPhone Simulator を開き (iPhone Simulator をインストールして構成する方法については付録 C を参照 )、サイトも参照します。 各電話が特定のテンプレートを使用していることに注意してください。

    Using-different-views-for-each-mobile-device2

    モバイル デバイスごとに異なるビューを使用する

演習 4: 非同期コントローラーを使用する

Microsoft .NET Framework 4.5 では、C# と Visual Basic で新しい言語機能が導入され、.NET プログラミングにおける非同期の新しい基盤が提供されます。 この新しい基盤により、非同期プログラミングは同期プログラミングと同様に簡単になります。 AsyncController クラスを使用して、ASP.NET MVC 4 で非同期アクション メソッドを 記述できるようになりました。 非同期アクション メソッドは、実行に時間のかかる CPU バインド以外の要求に使用できます。 これにより、要求の処理中に Web サーバーによる処理の実行が妨げられることがなくなります。 AsyncController クラスは、通常、実行時間の長い Web サービス呼び出しに使用されます。

この演習では、ASP.NET MVC 4 での非同期操作の基本について説明します。 詳細については、次の記事を参照してください: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

タスク 1 - 非同期コントローラーの実装

  1. Source/Ex4-Async/Begin/ フォルダーにある Begin ソリューションを開きます。 または、前の演習を完了して取得した End ソリューションを引き続き使用できます。

    1. 提供された Begin ソリューションを開いた場合は、続行する前に、不足している NuGet パッケージをダウンロードする必要があります。 これを行うには、[プロジェクト] メニューをクリックし、[NuGet パッケージの管理] を選択します。

    2. [NuGet パッケージの管理] ダイアログで、[復元] をクリックして、不足しているパッケージをダウンロードします。

    3. 最後に、[ビルド] | [ソリューションのビルド] をクリックしてソリューションをビルドします。

      Note

      NuGet を使用する利点の 1 つは、プロジェクト内のすべてのライブラリを発送する必要がなく、プロジェクト サイズが縮小される点です。 NuGet Power Tools では、Packages.config ファイルでパッケージのバージョンを指定することで、プロジェクトを初回実行するときに必要なすべてのライブラリをダウンロードできます。 このラボから既存のソリューションを開いた後に、これらの手順を実行する必要があるのは、このような理由によります。

  2. Controllers フォルダーから HomeController.cs ファイルを開きます。

  3. 次の using ステートメントを追加します。

    using System.Threading.Tasks;

  4. AsyncController から 継承するように HomeController クラスを更新します。 AsyncController から派生したコントローラーを使用すると、ASP.NET は非同期要求を処理でき、同期アクション メソッドを引き続き処理できます。

    public class HomeController : AsyncController
{

  5. 非同期キーワードを Index メソッドに 追加し、Task<ActionResult> 型を返すようにします。

    public async Task<ActionResult> Index()
{
    ...

    Note

    非同期 キーワードは、.NET Framework 4.5 が提供する新しいキーワードの 1 つです。このメソッドに非同期コードが含まれていることをコンパイラに通知します。 Task オブジェクトは、将来ある時点で完了する可能性のある非同期操作を表します。

  6. 以下に示すように、await キーワードを使用して完全な非同期バージョンで client.GetAsync() 呼び出しを置き換えます。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex04 - GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Note

    以前のバージョンでは、Task オブジェクトの Result プロパティを使用して、結果が返されるまでスレッドをブロックしていました (同期バージョン)。

    await キーワードを追加すると、メソッド呼び出しから返されたタスクを非同期的に待機するようにコンパイラに指示します。 つまり、残りのコードは、待機中のメソッドが完了した後にのみコールバックとして実行されます。 もう 1 つの注意すべき点は、この作業を行うために try-catch ブロックを変更する必要がないということです。バックグラウンドまたはフォアグラウンドで発生する例外は、フレームワークによって提供されるハンドラーを使用して余分な作業なしで引き続きキャッチされます。

  7. 次に示すように、行を新しいコードに置き換えて、非同期実装を続行するようにコードを変更します

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex04 - ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. アプリケーションを実行します。 大きな変更は発生しませんが、コードによってスレッド プールからのスレッドがブロックされず、サーバー リソースの使用率が向上し、パフォーマンスが向上します。

    Note

    詳細については、Visual Studio トレーニング キットに含まれているラボ「C# と Visual Basic を使用した .NET 4.5 での非同期プログラミング」で詳細情報をご確認ください。

タスク 2 - キャンセル トークンを使用したタイムアウトの処理

Task インスタンスを返す非同期アクション メソッドでも、タイムアウトをサポートできます。 このタスクでは、キャンセル トークンを使用してタイムアウト シナリオを処理するように Index メソッド コードを更新します。

  1. Visual Studio に戻り、Shift + F5 キーを押してデバッグを停止します。

  2. HomeController.cs ファイルに次の using ステートメントを追加します。

    using System.Threading;

  3. CancellationToken 引数を受け取るために Index アクションを更新します。

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. GetAsync 呼び出しを更新してキャンセル トークンを渡します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex04 - CancellationToken を使った SendAsync)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. AsyncTimeout 属性を 500 ミリ秒に設定し、TimedOut ビューにリダイレクトして TaskCanceledException を処理 するように構成された HandleError 属性を使用して Index メソッドを装飾します。

    (コード スニペット - ASP.NET MVC 4 ラボ - Ex04 - 属性)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. PhotoController クラスを開き、Gallery メソッドを更新して実行を 1000 ミリ秒 (1 秒) 遅らせ、実行時間の長いタスクをシミュレートします。

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Web.config ファイルを開き、次の要素を追加してカスタム エラーを有効にします。

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Views\Shared の名前付き TimedOut に新しいビューを作成し、既定のレイアウトを使用します。 ソリューション エクスプローラーで、Views\Shared フォルダーを右クリックし、[追加 | ビュー] を選択します。

    Using different views for each mobile device

    モバイル デバイスごとに異なるビューを使用する

  9. TimedOut ビューのコンテンツを次のように更新します。

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. アプリケーションを実行し、URL に移動します。 1000 ミリ秒の Thread.Sleep を追加すると、AsyncTimeout 属性によって生成され、HandleError 属性によって キャッチされるタイムアウト エラーが発生します。

    Time-out exception handled

    タイムアウト例外の処理

Note

さらに、「付録 D: Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行」に従って、このアプリケーションを Windows Azure Web サイトにデプロイできます。

まとめ

このハンズオン ラボでは、ASP.NET MVC 4 に常駐する新機能の一部を確認しました。 次の概念について説明しました:

  • 新しいモバイル アプリケーション プロジェクト テンプレートを含む、ASP.NET MVC プロジェクト テンプレートの機能強化を活用する
  • HTML5 ビューポート属性と CSS メディア クエリを使用してモバイル デバイスでの表示を改善する
  • jQuery Mobile を使用して、段階的な機能強化とタッチ最適化 Web UI の構築に使用する
  • モバイル固有のビューを作成する
  • ビュー スイッチャー コンポーネントを使用して、アプリケーションのモバイル ビューとデスクトップ ビューを切り替える
  • タスクサポートを使用して非同期コントローラーを作成する

付録 A: コード スニペットの使用

コード スニペットを使用すると、必要なすべてのコードをすぐに入手できます。 ラボ ドキュメントでは、次の図に示すように、使用できるタイミングが正確に示されています。

Using Visual Studio code snippets to insert code into your project

Visual Studio コード スニペットを使用してプロジェクトにコードを挿入する

キーボードを使用してコード スニペットを追加するには (C# のみ)

  1. コードを挿入する場所にカーソルを置きます。
  2. スニペット名の入力を開始します (スペースやハイフンは使用しない)。
  3. IntelliSense に対応するスニペットの名前が表示されるのを確認します。
  4. 適切なスニペットを選択します (または、スニペットの名前が完全に選択されるまで入力を続けます)。
  5. Tab キーを 2 回押して、カーソル位置にスニペットを挿入します。

Start typing the snippet name

スニペット名の入力を開始する

Press Tab to select the highlighted snippet

Tab キーを押して強調表示されたスニペットを選択する

Press Tab again and the snippet will expand

Tab キーをもう一度押すと、スニペットが展開される

マウスを使用してコード スニペットを追加するには (C#、Visual Basic、XML)

  1. コード スニペットを挿入する場所を右クリックします。
  2. [スニペットの挿入] に続いて [マイ コード スニペット] を選択します。
  3. 関連するスニペットをクリックして、一覧から選択します。

Right-click where you want to insert the code snippet and select Insert Snippet

コード スニペットを挿入する場所を右クリックし、[スニペットの挿入] を選択する

Pick the relevant snippet from the list, by clicking on it

関連するスニペットをクリックして、一覧から選択する

付録 B: Visual Studio Express 2012 for Web のインストール

Microsoft Web Platform Installer を使用して、Microsoft Visual Studio Express 2012 for Web または別の "Express" バージョンをインストールできます。 次の手順では、Microsoft Web Platform Installer を使用して Visual studio Express 2012 for Web をインストールするために必要な手順について説明します。

  1. [https://go.microsoft.com/?linkid=9810169] (https://go.microsoft.com/?linkid=9810169) に移動します。 または、Web Platform Installer を既にインストールしている場合、それを開き、製品 "Visual Studio Express 2012 for Web with Windows Azure SDK" を検索できます。

  2. [今すぐインストール] をクリックします。 Web Platform Installer がない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。

  3. Web Platform Installer が開いたら、[インストール] をクリックしてセットアップを開始します。

    Install Visual Studio Express

    Visual Studio Express をインストールする

  4. すべての製品のライセンスと使用条件を読み、[同意する] をクリックして続行します。

    Accepting licensing terms

    ライセンス条項に同意する

  5. ダウンロードとインストールのプロセスが完了するまで待機します。

    Progress of installation

    インストールの進行状況

  6. インストールが完了したら、[完了] をクリックします。

    Completed Installation

    インストールの完了

  7. [終了] をクリックして Web Platform Installer を閉じます。

  8. Visual Studio Express for Web を開くには、[スタート] 画面に移動し、「VS Express」と記入して、[VS Express for Web] タイルをクリックします。

    VS Express for Web tile

    VS Express for Web タイル

付録 C: WebMatrix 2 と iPhone Simulator のインストール

シミュレートされた iPhone デバイスでサイトを実行するには、WebMatrix 拡張機能 "iPhone 用の電気モバイル シミュレーター" を使用できます。 また、Visual Studio 2012 からシミュレーターを実行するように同じ拡張機能を構成することもできます。

タスク 1 - WebMatrix 2 のインストール

  1. [https://go.microsoft.com/?linkid=9809776] (https://go.microsoft.com/?linkid=9810169) に移動します。 または、Web Platform Installer を既にインストールしている場合は、それを開いて製品 "WebMatrix 2" を検索できます。

  2. [今すぐインストール] をクリックします。 Web Platform Installer がない場合は、最初にダウンロードしてインストールするようにリダイレクトされます。

  3. Web Platform Installer が開いたら、[インストール] をクリックしてセットアップを開始します。

    Install WebMatrix 2

    WebMatrix 2 のインストール

  4. すべての製品のライセンスと使用条件を読み、[同意する] をクリックして続行します。

    Accepting the license terms

    ライセンス条項に同意する

  5. ダウンロードとインストールのプロセスが完了するまで待機します。

    Installation progress

    インストールの進行状況

  6. インストールが完了したら、[完了] をクリックします。

    Installation completed

    インストールの完了

  7. [終了] をクリックして Web Platform Installer を閉じます。

タスク 2 - iPhone Simulator 拡張機能のインストール

  1. WebMatrix を実行 し、既存の Web サイトを開くか、新しい Web サイトを作成します。

  2. [ホーム] リボンの [実行] ボタンをクリックし、[新規追加] を選択します。

    Adding new WebMatrix extension

    新しい WebMatrix 拡張機能の追加

  3. iPhone Simulator を選択し、[インストール] をクリックします。

    Browsing WebMatrix extensions

    WebMatrix 拡張機能の参照

  4. パッケージの詳細で、[インストール] をクリックして拡張機能のインストールを続行します。

    iPhone Simulator extension

    iPhone Simulator 拡張機能

  5. 拡張機能の EULA を読んで同意します。

    WebMatrix extension EULA

    WebMatrix 拡張機能の EULA

  6. これで、iPhone Simulator オプションを使用して WebMatrix から Web サイトを実行できるようになりました。

    Run using iPhone

    iPhone を使用して実行する

タスク 3 - iPhone Simulator を実行するように Visual Studio 2012 を構成する

  1. Visual Studio 2012 を開 き、任意の Web サイトを開くか、新しいプロジェクトを作成します。

  2. [実行] ボタンから下矢印をクリックし、[参照] を選択します。

    Browse with

    参照

  3. [参照方法] ダイアログで、[追加] をクリックします。

  4. [プログラムの追加] ダイアログで、次の値を使用します:

    • プログラム: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (適宜パスを更新)

    • 引数: "1"

    • フレンドリ名: iPhone Simulator

      Add program

      参照するプログラムを追加する

  5. [OK] をクリックして、ダイアログ ボックスを閉じます。

  6. これで、Visual Studio 2012 から iPhone Simulator で Web アプリケーションを実行できるようになりました。

    Browse with iPhone Simulator

    iPhone Simulator を使用して参照する

付録 D: Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行

この付録では、Windows Azure 管理ポータルから新しい Web サイトを作成し、ラボに従って取得したアプリケーションを発行する方法について説明します。これは、Windows Azure によって提供される Web 配置発行機能を利用することです。

タスク 1 - Windows Azure Portal から新しい Web サイトを作成する

  1. Windows Azure 管理ポータルに移動し、サブスクリプションに関連付けられている Microsoft 資格情報を使用してサインインします。

    Note

    Windows Azure では、10 ASP.NET Web サイトを無料でホストし、トラフィックの増加に合わせてスケーリングできます。 こちらからサインアップできます。

    Log on to Windows Azure portal

    Windows Azure 管理ポータルにログオン

  2. コマンド バーの [新規] をクリックします。

    Creating a new Web Site

    新しい Web サイトの作成

  3. [コンピューティング] | [Web サイト] をクリックします。 続いて、[簡易作成] オプションを選択します。 新しい Web サイト用の使用可能な URL を指定し、[Web サイトの作成] をクリックします。

    Note

    Windows Azure Web サイトは、制御および管理できるクラウドで実行されている Web アプリケーションのホストです。 [簡易作成] オプションを使用すると、完成した Web アプリケーションをポータルの外部から Windows Azure Web サイトにデプロイできます。 データベースをセットアップするための手順は含まれません。

    Creating a new Web Site using Quick Create

    簡易作成を使用した新しい Web サイトの作成

  4. 新しい Web サイトが作成されるまで待機します。

  5. Web サイトが作成されたら、URL 列の下にあるリンクをクリックします。 新しい Web サイトが動作していることを確認します。

    Browsing to the new web site

    新しい Web サイトの参照

    Web site running

    実行中の Web サイト

  6. ポータルに戻って [名前] 列の下にある Web サイトの名前をクリックして、管理ページを表示します。

    Opening the web site management pages

    Web サイト管理ページを開く

  7. [ダッシュボード] ページの [概要] セクションで、[発行プロファイルのダウンロード] リンクをクリックします。

    Note

    発行プロファイル には、有効になっている各発行方法について、Windows Azure Web サイトに Web アプリケーションを発行するために必要なすべての情報が含まれています。 発行プロファイルには、発行メソッドが有効化される各エンドポイントに接続して認証するために必要な URL、ユーザーの資格情報、およびデータベース文字列が含まれています。 Microsoft WebMatrix 2、Microsoft Visual Studio Express for Web 、および Microsoft Visual Studio 2012 では、Windows Azure Web サイトに Web アプリケーションを発行するためのこれらのプログラムの構成を自動化するための発行プロファイルの読み取りがサポートされています。

    Downloading the web site publish profile

    Web サイト発行プロファイルのダウンロード

  8. 発行プロファイル ファイルを既知の場所にダウンロードします。 この演習では、このファイルを使用して、Visual Studio から Windows Azure Web サイトに Web アプリケーションを発行する方法について説明します。

    Saving the publish profile file

    発行プロファイル ファイルの保存

タスク 2 - データベース サーバーの構成

アプリケーションで SQL Server データベースを使用する場合は、SQL Database サーバーを作成する必要があります。 SQL Server を使用しないシンプルなアプリケーションをデプロイする場合は、このタスクをスキップできます。

  1. アプリケーション データベースを格納するための SQL Database サーバーが必要です。 [SQL データベース] | [サーバー] | [サーバーのダッシュボード] で Windows Azure 管理ポータルのサブスクリプションから SQL データベース サーバーを表示することができます。 サーバーを作成していない場合は、コマンド バーの [追加] ボタンを使用して作成できます。 次のタスクで使用するため、サーバー名と URL、管理者ログイン名、パスワードを書き留めます。 データベースは後の段階で作成されるため、まだ作成しないでください。

    SQL Database Server Dashboard

    SQL Database サーバー ダッシュボード

  2. 次のタスクでは、Visual Studio からのデータベース接続をテストします。そのため、ローカル IP アドレスをサーバーの許可された IP アドレスの一覧に含める必要があります。 これを行うには、[構成] をクリックし、[現在のクライアント IP アドレス] から IP アドレスを選択し、[開始 IP アドレス] テキスト ボックスと [終了 IP アドレス] テキスト ボックスに貼り付けて、add-client-ip-address-ok-button ボタンをクリックします。

    Adding Client IP Address

    クライアント IP アドレスの追加

  3. クライアント IP アドレスが許可された IP アドレスの一覧に追加されたら、[保存] をクリックして変更を確認します。

    Confirm Changes

    変更を確認

タスク 3 - Web 配置を使用した ASP.NET MVC 4 アプリケーションの発行

  1. ASP.NET MVC 4 ソリューションに戻ります。 ソリューション エクスプローラーで、プロジェクトを右クリックして [発行] を選択します。

    Publishing the Application

    Web サイトの発行

  2. 最初のタスクで保存した発行プロファイルをインポートします。

    Importing the publish profile

    公開プロファイルのインポート

  3. [接続の検証] をクリックします。 検証が完了したら、[次へ] をクリックします。

    Note

    [接続の検証] ボタンの横に緑色のチェックマークが表示されたら、検証は完了しています。

    Validating connection

    接続の検証

  4. [設定] ページの [データベース] セクションで、データベース接続のテキスト ボックス (DefaultConnection) の横にあるボタンをクリックします。

    Web deploy configuration

    Web 配置の構成

  5. 次のようにデータベース接続を構成します:

    • [サーバー名] に、tcp: プレフィックスを使用して SQL Database サーバーの URL を入力します。

    • [ユーザー名] に、サーバー管理者のログイン名を入力します。

    • [パスワード] に、サーバー管理者のログイン パスワードを入力します。

    • 新しいデータベース名を入力します (例: MVC4SampleDB)。

      Configuring destination connection string

      同期先接続文字列の構成

  6. 次に、 [OK] をクリックします データベースの作成を求められたら、[はい] をクリックします。

    Creating the database

    データベースの作成

  7. Windows Azure の SQL Database への接続に使用する接続文字列は、[既定の接続] ボックス内に表示されます。 続けて、 [次へ] をクリックします。

    Connection string pointing to SQL Database

    SQL Database を指す接続文字列

  8. [プレビュー] ページで [発行] をクリックします。

    Publishing the web application

    Web アプリケーションの発行

  9. 発行プロセスが完了すると、既定のブラウザーで発行された Web サイトが開きます。

    Application published to Windows Azure

    Windows Azure に発行されたアプリケーション