ASP.NET MVC 4 モバイル機能

  • [アーティクル]

作成者 : Rick Anderson

このチュートリアルの MVC 5 バージョンとコード サンプルは、「 Azure Web サイトに ASP.NET MVC 5 Mobile Web アプリケーションをデプロイする」にあります。

このチュートリアルでは、ASP.NET MVC 4 Web アプリケーションでモバイル機能を操作する方法の基本について説明します。 このチュートリアルでは、Visual Studio Express 2012 または Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer or VWD") を使用できます。 既にある場合は、プロフェッショナル バージョンの Visual Studio を使用できます。

開始する前に、以下に示す前提条件がインストールされていることを確認してください。

  • Visual Studio Express 2012 (推奨) または Visual Studio Web Developer Express SP1。 Visual Studio 2012 には、MVC 4 ASP.NET が含まれています。 Visual Web Developer 2010 を使用している場合は、 MVC 4 ASP.NET インストールする必要があります。

モバイル ブラウザー エミュレーターも必要です。 次のいずれでも動作します。

  • Windows 7 Phone Emulator。 (これは、このチュートリアルのほとんどのスクリーン ショットで使用されるエミュレーターです)。
  • iPhone をエミュレートするようにユーザー エージェント文字列を変更します。 このブログ エントリを参照してください。
  • Opera Mobile Emulator
  • ユーザー エージェントが iPhone に設定されている Apple Safari。 Safari のユーザー エージェントを "iPhone" に設定する方法については、David Alison のブログの 「Safari が IE のふりをする方法 」を参照してください。

次のトピック用に、C# のソース コードを使用した Visual Studio プロジェクトが用意されています。

作成するアプリケーション:

このチュートリアルでは、スタート プロジェクトに用意されている単純な会議一覧アプリケーションにモバイル機能を追加します。 次のスクリーンショットは、 Windows 7 Phone Emulator に表示されている完成したアプリケーションのタグ ページを示しています。 キーボード入力を簡略化するには、「Windows Phone Emulator のキーボード マッピング」を参照してください。

p1_Tags_CompletedProj

インターネット エクスプローラー バージョン 9 または 10、FireFox、または Chrome を使用して、ユーザー エージェント文字列を設定してモバイル アプリケーションを開発できます。 次の図は、iPhone をエミュレートするインターネット エクスプローラーを使用した完成したチュートリアルを示しています。 インターネット エクスプローラー F-12 開発者ツールと Fiddler ツールを使用して、アプリケーションをデバッグできます。

Windows 7 電話ディスプレイの [すべてのタグ] ページを示すスクリーンショット。

学習内容

ここでは次の内容について学習します。

  • ASP.NET MVC 4 テンプレートで HTML5 viewport 属性とアダプティブ レンダリングを使用してモバイル デバイスでの表示を改善する方法。
  • モバイル固有のビューを作成する方法。
  • ユーザーがアプリケーションのモバイル ビューとデスクトップ ビューを切り替えできるようにするビュー スイッチャーを作成する方法。

作業の開始

次のリンクを使用して、スターター プロジェクトの会議リスト アプリケーションをダウンロードします: ダウンロード。 次に、Windows エクスプローラーで、MvcMobile.zip ファイルを右クリックし、[ プロパティ] を選択します。 [ MvcMobile.zip のプロパティ ] ダイアログ ボックスで、[ ブロック解除 ] ボタンを選択します。 (ブロックを解除すると、Web からダウンロードした .zip ファイルを使おうとしたときに表示されるセキュリティに関する警告を回避できます)。

p1_unBlock

MvcMobile.zip ファイルを右クリックし、[すべて抽出] を選択してファイルを解凍します。 Visual Studio で、 MvcMobile.sln ファイルを開きます。

Ctrl キーを押しながら F5 キーを押してアプリケーションを実行すると、デスクトップ ブラウザーに表示されます。 モバイル ブラウザー エミュレーターを起動し、会議アプリケーションの URL をエミュレーターにコピーし、[ タグで参照 ] リンクをクリックします。 Windows Phone エミュレーターを使用している場合は、URL バーをクリックし、一時停止キーを押してキーボード にアクセスします。 下の図は、 AllTags ビューを示しています ( [タグで参照] を選択)。

p1_browseTag

モバイル デバイス上でも読みやすい表示になっています。 [ASP.NET] リンクを選択します。

p1_tagged_ASPNET

ASP.NET タグ ビューは非常に乱雑です。 たとえば、 Date 列の読み取りは非常に困難です。 チュートリアルの後半では、モバイル ブラウザー専用の AllTags ビューのバージョンを作成し、表示を読みやすくします。

注: 現在、モバイル キャッシュ エンジンにはバグがあります。 運用アプリケーションの場合は、 Fixed DisplayModes nugget パッケージをインストールする必要があります。 修正 の詳細については、「mvc 4 Mobile Caching Bug Fixed ASP.NET」を参照してください。

CSS メディア クエリ

CSS メディア クエリ は、メディアの種類の CSS の拡張機能です。 これにより、特定のブラウザー (ユーザー エージェント) の既定の CSS 規則をオーバーライドする規則を作成できます。 モバイル ブラウザーを対象とする CSS の一般的な規則は、最大画面サイズを定義することです。 新しい ASP.NET MVC 4 インターネット プロジェクトの作成時に作成される Content\Site.css ファイルには、次のメディア クエリが含まれています。

@media only screen and (max-width: 850px) {

ブラウザー ウィンドウの幅が 850 ピクセル以下の場合、このメディア ブロック内の CSS 規則が使用されます。 このような CSS メディア クエリを使用すると、デスクトップ ブラウザーのより広い表示用に設計された既定の CSS ルールよりも、小さなブラウザー (モバイル ブラウザーなど) での HTML コンテンツの表示を向上させることができます。

ビューポート メタ タグ

ほとんどのモバイル ブラウザーでは、モバイル デバイスの実際の幅よりもはるかに大きい仮想ブラウザー ウィンドウの幅 ( ビューポート) が定義されています。 これにより、モバイル ブラウザーは Web ページ全体を仮想ディスプレイ内に収めることができます。 その後、ユーザーは関心のあるコンテンツを拡大できます。 ただし、ビューポートの幅を実際のデバイスの幅に設定した場合は、コンテンツがモバイル ブラウザーに収まるため、ズームは必要ありません。

ASP.NET MVC 4 レイアウト ファイルのビューポート <meta> タグは、ビューポートをデバイスの幅に設定します。 次の行は、ASP.NET MVC 4 レイアウト ファイルのビューポート <meta> タグを示しています。

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

CSS メディア クエリとビューポート メタ タグの効果を調べる

エディターで Views\Shared\_Layout.cshtml ファイルを開き、ビューポート <meta> タグをコメントアウトします。 次のマークアップは、コメントアウトされた行を示しています。

@*<meta name="viewport" content="width=device-width">*@

エディターで MvcMobile\Content\Site.css ファイルを開き、メディア クエリの最大幅を 0 ピクセルに変更します。 これにより、CSS ルールがモバイル ブラウザーで使用されなくなります。 次の行は、変更されたメディア クエリを示しています。

@media only screen and (max-width: 0px) { ...

変更を保存し、モバイル ブラウザー エミュレーターで会議アプリケーションを参照します。 次の図の小さなテキストは、ビューポート <meta> タグを削除した結果です。 ビューポート <meta> タグがない場合、ブラウザーは既定のビューポートの幅 (ほとんどのモバイル ブラウザーでは 850 ピクセル以上) に縮小しています。

p1_noViewPort

変更を元に戻す — レイアウト ファイルのビューポート <meta> タグのコメントを解除し、メディア クエリを Site.css ファイルの 850 ピクセルに復元します。 変更を保存し、モバイル ブラウザーを更新して、モバイル対応ディスプレイが復元されたことを確認します。

ビューポート <meta> タグと CSS メディア クエリは、MVC 4 ASP.NET 固有のものではありません。これらの機能は、任意の Web アプリケーションで利用できます。 ただし、新しい ASP.NET MVC 4 プロジェクトを作成するときに生成されるファイルに組み込まれるようになりました。

ビューポート タグの詳細については、「2 つのビューポート<meta>の物語 - パート 2」を参照してください。

次のセクションでは、モバイル ブラウザー専用ビューを作成する方法について説明します。

ビュー、レイアウト、および部分ビューのオーバーライド

ASP.NET MVC 4 の重要な新機能は、モバイル ブラウザー全般、個々のモバイル ブラウザー、または特定のブラウザーのビュー (レイアウトや部分ビューを含む) をオーバーライドできる単純なメカニズムです。 モバイル専用ビューを用意するには、ビュー ファイルをコピーして .Mobile をファイル名に追加します。 たとえば、モバイル インデックス ビューを作成するには、 Views\Home\Index.cshtml を Views\Home\Index.Mobile.cshtml にコピーします。

このセクションでは、モバイル専用のレイアウト ファイルを作成します。

開始するには、 Views\Shared\_Layout.cshtml を Views\Shared\_Layout.Mobile.cshtml にコピーします。 _Layout.Mobile.cshtml を開き、タイトルを MVC4 Conference から Conference (Mobile) に変更します。

各 Html.ActionLink 呼び出しで、各リンク ActionLink の "Browse by" を削除します。 次のコードは、モバイル レイアウト ファイルの完成した body セクションを示しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="title">
        <h1> Conference (Mobile)</h1>
    </div>
    <div id="menucontainer">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Date", "AllDates", "Home")</li>
            <li>@Html.ActionLink("Speaker", "AllSpeakers", "Home")</li>
            <li>@Html.ActionLink("Tag", "AllTags", "Home")</li>
        </ul>
    </div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Views\Home\AllTags.cshtml ファイルを Views\Home\AllTags.Mobile.cshtml にコピーします。 新しいファイルを開き、次のように <h2> 要素を「Tags」から「Tags (M)」に変更します。

<h2>Tags (M)</h2>

デスクトップ ブラウザー、および、モバイル ブラウザー エミュレーターを使用してタグ ページに移動します。 モバイル ブラウザー エミュレーターには、行った 2 つの変更が表示されます。

p2m_layoutTags.mobile

これに対し、デスクトップディスプレイは変更されていません。

p2_layoutTagsDesktop

Browser-Specific ビュー

モバイル専用のビューやデスクトップ専用のビューに加え、個別のブラウザーに対してビューを作成できます。 たとえば、iPhone ブラウザー専用のビューを作成できます。 このセクションでは、iPhone ブラウザーと iPhone バージョンの AllTags ビュー用のレイアウトを作成します。

Global.asax ファイルを開き、 メソッドに次のコードをApplication_Start追加します。

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

このコードでは、"iPhone" という表示モードを定義し、受信された各要求をその定義に対して照合します。 受信された要求が定義した条件に一致する場合 (つまり、ユーザー エージェントに "iPhone" という文字列が含まれている場合)、"iPhone" というサフィックスが含まれる名前のビューが ASP.NET MVC によって検索されます。

コードで、DefaultDisplayMode を右クリックし、[解決]、using System.Web.WebPages; の順にクリックします。 DisplayModes 型と DefaultDisplayMode 型が定義されている System.Web.WebPages 名前空間に参照が追加されます。

p2_resolve

別の方法として、単純にファイルの using セクションに、次の行を手動で追加することもできます。

using System.Web.WebPages;

Global.asax ファイルの完全な内容を次に示します。

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            AreaRegistration.RegisterAllAreas();

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

変更を保存します。 MvcMobile\Views\Shared\_Layout.Mobile.cshtml ファイルを MvcMobile\Views\Shared\_Layout.iPhone.cshtml にコピーします。 新しいファイルを開き、見出しを h1 から Conference (Mobile) に Conference (iPhone)変更します。

MvcMobile\Views\Home\AllTags.Mobile.cshtml ファイルを MvcMobile\Views\Home\AllTags.iPhone.cshtml にコピーします。 新しいファイルで、 <h2> 要素を "Tags (M)" から "Tags (iPhone)" に変更します。

アプリケーションを実行します。 モバイル ブラウザー エミュレーターを実行し、ユーザー エージェントが "iPhone" に設定されていることを確認して、 AllTags ビューにアクセスします。 次のスクリーンショットは、Safari ブラウザーでレンダリングされた AllTags ビューを示しています。 Safari for Windows はダウンロードできます。

p2_iphoneView

このセクションでは、モバイル レイアウトとビューの作成方法および iPhone などの特定のデバイス専用のレイアウトとビューの作成方法を説明しました。 次のセクションでは、jQuery Mobile を活用して、より魅力的なモバイル ビューを表示する方法について説明します。

jQuery Mobile の使用

jQuery Mobile ライブラリには、すべての主要なモバイル ブラウザーで動作するユーザー インターフェイス フレームワークが用意されています。 jQuery Mobile は、CSS と JavaScript をサポートするモバイル ブラウザーに プログレッシブ拡張 を適用します。 プログレッシブエンハンスメントにより、すべてのブラウザがWebページの基本的なコンテンツを表示しながら、より強力なブラウザとデバイスがより豊富なディスプレイを持つことができます。 jQuery Mobile に含まれる JavaScript ファイルと CSS ファイルは、マークアップを変更せずにモバイル ブラウザーに合わせて多くの要素をスタイルします。

このセクションでは、jQuery Mobile とビュー スイッチャー ウィジェットをインストールする jQuery.Mobile.MVC NuGet パッケージをインストールします。

開始するには、先ほど作成した Shared\_Layout.Mobile.cshtml ファイルと Shared\_Layout.iPhone.cshtml ファイルを削除します。

Views\Home\AllTags.Mobile.cshtml および Views\Home\AllTags.iPhone.cshtml ファイルの名前を Views\Home\AllTags.iPhone.cshtml.hide および Views\Home\AllTags.Mobile.cshtml.hide に変更します。 ファイルは .cshtml 拡張子を持たなくなったため、 allTags ビューをレンダリングするために ASP.NET MVC ランタイムでは使用されません。

次の操作を行って 、jQuery.Mobile.MVC NuGet パッケージをインストールします。

  1. [ツール] メニューの [NuGet パッケージ マネージャー] を選択し、[パッケージ マネージャー コンソール] を選択します。

    p3_packageMgr

  2. パッケージ マネージャー コンソールで、「」と入力します。Install-Package jQuery.Mobile.MVC -version 1.0.0

次の図は、NuGet jQuery.Mobile.MVC パッケージによって MvcMobile プロジェクトに追加および変更されたファイルを示しています。 追加されるファイルには、ファイル名の後に [追加] が追加されます。 画像には、 Content\images フォルダーに追加された GIF ファイルと PNG ファイルは表示されません。

M V C Mobile のフォルダーとファイルを示すスクリーンショット。

jQuery.Mobile.MVC NuGet パッケージは、次をインストールします。

  • 追加された jQuery JavaScript ファイルと CSS ファイルを参照するために必要なApp_Start \BundleMobileConfig.cs ファイル。 以下の手順に従い、このファイルで定義されているモバイル バンドルを参照する必要があります。
  • jQuery Mobile CSS ファイル。
  • ViewSwitcherコントローラー ウィジェット (Controllers\ViewSwitcherController.cs)。
  • jQuery Mobile JavaScript ファイル。
  • jQuery Mobile スタイルのレイアウト ファイル (Views\Shared\_Layout.Mobile.cshtml)。
  • デスクトップ ビューからモバイル ビューに切り替えるリンクを各ページの上部に提供するビュー スイッチャー部分ビュー (MvcMobile\Views\Shared\_ViewSwitcher.cshtml)。
  • Content\images フォルダー内のいくつかの.png および .gif イメージ ファイル。

Global.asax ファイルを開き、 メソッドの最後の行として次のコードをApplication_Start追加します。

BundleMobileConfig.RegisterBundles(BundleTable.Bundles);

次のコードは、 Global.asax ファイル全体を示しています。

using System;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.WebPages;

namespace MvcMobile
{

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
                    ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
            });
            AreaRegistration.RegisterAllAreas();

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

注意

インターネット エクスプローラー 9 を使用していて、上のBundleMobileConfig行が黄色で強調表示されていない場合は、[互換性ビュー] ボタンをクリックします。IE の [互換表示] ボタン (オフ)](https://res2.windows.microsoft.com/resbox/en/Windows 7/メイン/f080e77f-9b66-4ac8-9af0-803c4f8a859c_15.jpg "互換性ビューボタンの図 (オフ)") の画像を表示し、アウトラインからアイコンを変更します。[互換表示] ボタンの画像 (オフ)](https://res2.windows.microsoft.com/resbox/en/Windows 7/メイン/f080e77f-9b66-4ac8-9af0-803c4f8a859c_15.jpg "互換性ビュー ボタンの図 (オフ)") を単色に![互換表示] ボタンの画像 (オン)](https://res1.windows.microsoft.com/resbox/en/Windows 7/メイン/156805ff-3130-481b-a12d-4d3a96470f36_14.jpg "互換性ビュー ボタンの画像 (オン)")。 または、FireFox または Chrome でこのチュートリアルを表示することもできます。

MvcMobile\Views\Shared\_Layout.Mobile.cshtml ファイルを開き、呼び出しの直後に次のマークアップをHtml.Partial追加します。

<div data-role="header" align="center">
    @Html.ActionLink("Home", "Index", "Home")
    @Html.ActionLink("Date", "AllDates")
    @Html.ActionLink("Speaker", "AllSpeakers")
    @Html.ActionLink("Tag", "AllTags")
</div>

完全な MvcMobile\Views\Shared\_Layout.Mobile.cshtml ファイルを次に示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
</head>
<body>

    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
        <div data-role="header" align="center">
            @Html.ActionLink("Home", "Index", "Home")
            @Html.ActionLink("Date", "AllDates")
            @Html.ActionLink("Speaker", "AllSpeakers")
            @Html.ActionLink("Tag", "AllTags")
        </div>
        <div data-role="header">
            <h1>@ViewBag.Title</h1>
        </div>

        <div data-role="content">
            @RenderSection("featured", false)
            @RenderBody()
        </div>

    </div>

</body>
</html>

アプリケーションをビルドし、モバイル ブラウザー エミュレーターで AllTags ビューを参照します。 次のように表示されます。

p3_afterNuGet

注意

IE または Chrome の ユーザー エージェント文字列を iPhone に設定し、F-12 開発者ツールを使用して、モバイル固有のコードをデバッグできます。 モバイル ブラウザーに [ホーム]、[ スピーカー]、[ タグ]、[ 日付] の各リンクがボタンとして表示されない場合は、jQuery Mobile スクリプトと CSS ファイルへの参照が正しくない可能性があります。

スタイルの変更に加えて、 モバイル ビューの表示と、モバイル ビュー からデスクトップ ビューに切り替えるリンクが表示されます。 [ デスクトップ ビュー ] リンクを選択すると、デスクトップ ビューが表示されます。

p3_desktopView

デスクトップ ビューでは、モバイル ビューに直接戻る方法は提供されません。 これで修正します。 Views\Shared\_Layout.cshtml ファイルを開きます。 page body 要素のすぐ下に、ビュー スイッチャー ウィジェットをレンダリングする次のコードを追加します。

@Html.Partial("_ViewSwitcher")

モバイル ブラウザーで AllTags ビューを更新します。 デスクトップ ビューとモバイル ビューの間を移動できるようになりました。

p3_desktopViewWithMobileLink

注意

デバッグメモ: Views\Shared\_ViewSwitcher.cshtml の末尾に次のコードを追加して、ブラウザーを使用するときにユーザー エージェント文字列をモバイル デバイスに設定するときにビューをデバッグできます。

else
{
     @:Not Mobile/Get
}

次の見出しを Views\Shared\_Layout.cshtml ファイルに 追加します。

<h1> Non Mobile Layout MVC4 Conference </h1>

デスクトップ ブラウザーで [AllTags] ページを参照します。 ビュー スイッチャー ウィジェットはモバイル レイアウト ページにのみ追加されるため、デスクトップ ブラウザーには表示されません。 チュートリアルの後半では、ビュー スイッチャー ウィジェットをデスクトップ ビューに追加する方法について説明します。

p3_desktopBrowser

スピーカーリストの改善

モバイル ブラウザーで [Speakers] リンクをタップします。 モバイル ビュー (AllSpeakers.Mobile.cshtml) がないため、既定のスピーカー表示 (AllSpeakers.cshtml) はモバイル レイアウト ビュー (_Layout.Mobile.cshtml) を使用してレンダリングされます。

p3_speakersDeskTop

次のように Views\_ViewStart.cshtml ファイルで を にtrue設定RequireConsistentDisplayModeすることで、モバイル レイアウト内での既定の (モバイル以外の) ビューのレンダリングをグローバルに無効にすることができます。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = true;
}

が にtrue設定されている場合RequireConsistentDisplayMode、モバイル レイアウト (_Layout.Mobile.cshtml) はモバイル ビューにのみ使用されます。 (つまり、ビュー ファイルは **ViewName という形式です。Mobile.cshtml.) モバイル レイアウトがモバイル以外のビューでうまく機能しない場合は、 を にtrue設定RequireConsistentDisplayModeできます。 次のスクリーンショットは、 が に設定されている場合に Speakers ページがどのように RequireConsistentDisplayMode レンダリングされるかを true示しています。

p3_speakersConsistent

ビュー ファイルで を にfalse設定RequireConsistentDisplayModeすることで、ビューで一貫性のある表示モードを無効にすることができます。 Views\Home\AllSpeakers.cshtml ファイルの次のマークアップは にfalse設定RequireConsistentDisplayModeされます。

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
    DisplayModeProvider.Instance.RequireConsistentDisplayMode = false;
}

モバイル スピーカー ビューの作成

いま見たように、 Speakers ビューは読み取れますが、リンクが小さく、モバイル デバイスではタップが困難です。 このセクションでは、最新のモバイル アプリケーションのように見えるモバイル固有の Speakers ビューを作成します。このビューには、大きくタップしやすいリンクが表示され、話者をすばやく見つけるための検索ボックスが含まれています。

AllSpeakers.cshtml を AllSpeakers.Mobile.cshtml にコピーします。 AllSpeakers.Mobile.cshtml ファイルを開き、見出し要素を<h2>削除します。

タグに 属性を<ul>data-role追加し、その値を にlistview設定します。 他 data-* の属性と同様に、 を使用すると、 data-role="listview" 大きなリスト アイテムを簡単にタップできます。 完成したマークアップは次のようになります。

@model IEnumerable<string>

@{
    ViewBag.Title = "All speakers";
}
<ul data-role="listview">
    @foreach(var speaker in Model) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

モバイル ブラウザーの表示を更新します。 更新されたビューは次のようになります。

p3_updatedSpeakerView1

モバイル ビューは改善されましたが、スピーカーの長い一覧を移動するのは困難です。 これを修正するには、 タグで 属性を<ul>data-filter追加し、 にtrue設定します。 次のコードは、マークアップを ul 示しています。

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

次の図は、 属性の結果のページの上部にある検索フィルター ボックスを data-filter 示しています。

ps_Data_Filter

検索ボックスに各文字を入力すると、次の図に示すように、表示されているリストが jQuery Mobile によってフィルター処理されます。

モバイル ビューの [すべてのスピーカー] ページを示すスクリーンショット。

タグ リストの改善

既定の [スピーカー] ビューと同様に、[ タグ] ビューは読み取り可能ですが、リンクは小さく、モバイル デバイスでタップするのが困難です。 このセクションでは、[スピーカー] ビューを修正したのと同じ方法で [タグ] ビュー を 修正します。

Views\Home\AllTags.Mobile.cshtml.hide ファイルの "非表示" サフィックスを削除して、名前が Views\Home\AllTags.Mobile.cshtml になるようにします。 名前が変更されたファイルを開き、 要素を削除します <h2> 。

次に data-role 示すように、 属性と data-filter 属性を <ul> タグに追加します。

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

次の図は、文字 Jに対するタグ ページのフィルター処理を示しています。

p3_tags_J

日付リストの改善

[スピーカー] ビューと [タグ] ビューを改善したのと同様に、[日付] ビューを改善して、モバイル デバイスで使いやすくすることができます。

Views\Home\AllDates.cshtml ファイルを Views\Home\AllDates.Mobile.cshtml にコピーします。 新しいファイルを開き、 要素を削除します <h2> 。

次のように タグに <ul> を追加data-role="listview"します。

<ul data-role="listview">

次の図は、 属性が設定された [日付] ページの外観を data-role 示しています。

p3_dates1Views\Home\AllDates.Mobile.cshtml ファイルの内容を次のコードに置き換えます。

@model IEnumerable<DateTime>
@{
    ViewBag.Title = "All dates";
    DateTime lastDay = default(DateTime);
}
<ul data-role="listview">
    @foreach(var date in Model) {
        if (date.Date != lastDay) {
            lastDay = date.Date;
            <li data-role="list-divider">@date.Date.ToString("ddd, MMM dd")</li>
        }
        <li>@Html.ActionLink(date.ToString("h:mm tt"), "SessionsByDate", new { date })</li>
    }
</ul>

このコードは、すべてのセッションを日別にグループ化します。 新しい日ごとにリストの区切り線が作成され、各日のすべてのセッションが区切り線の下に一覧表示されます。 このコードを実行すると、次のようになります。

p3_dates2

SessionsTable ビューの改善

このセクションでは、モバイル固有のセッション ビューを作成します。 加えた変更は、作成した他のビューよりも広範になります。

モバイル ブラウザーで、[ スピーカー ] ボタンをタップし、検索ボックスに「」と入力 Sc します。

モバイル ビューの [すべてのスピーカー] ページを示すスクリーンショット。検索に文字 S c が入力されています。

[Scott Hanselman] リンクをタップします。

p3_scottHa

ご覧のように、モバイル ブラウザーでは表示が読みにくいです。 日付列の読み取りが難しく、タグ列がビュー外です。 これを修正するには、 Views\Home\SessionsTable.cshtml を Views\Home\SessionsTable.Mobile.cshtml にコピーし、ファイルの内容を次のコードに置き換えます。

@using MvcMobile.Models
@model IEnumerable<Session>

<ul data-role="listview">
    @foreach(var session in Model) {
        <li>
            <a href="@Url.Action("SessionByCode", new { session.Code })">
                <h3>@session.Title</h3>
                <p><strong>@string.Join(", ", session.Speakers)</strong></p>
                <p>@session.DateText</p>
            </a>
        </li>                                           
    }    
</ul>

このコードでは、会議室とタグの列を削除し、タイトル、発表者、日付を垂直方向に書式設定して、この情報をすべてモバイル ブラウザーで読み取れるようにします。 次の図にはコードの変更が反映されています。

モバイル ビューの [セッション] ページを示すスクリーンショット。

SessionByCode ビューの改善

最後に、 SessionByCode ビューのモバイル固有のビューを作成します。 モバイル ブラウザーで、[ スピーカー ] ボタンをタップし、検索ボックスに「」と入力 Sc します。

[すべてのスピーカー] ページのモバイル ビューを示すスクリーンショット。検索に S c が入力されます。

[Scott Hanselman] リンクをタップします。 Scott Hanselman のセッションが表示されます。

[セッション] ページのモバイル ビューを示すスクリーンショット。

[ MS Web Stack of Love の概要] リンクを選択します。

ps_love

既定のデスクトップ ビューは問題ありませんが、改善できます。

Views\Home\SessionByCode.cshtml を Views\Home\SessionByCode.Mobile.cshtml にコピーし、Views\Home\SessionByCode.Mobile.cshtml ファイルの内容を次のマークアップに置き換えます。

@model MvcMobile.Models.Session

@{
    ViewBag.Title = "Session details";
}
<h2>@Model.Title</h2>
<p>
    <strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Speakers</li>
    @foreach (var speaker in Model.Speakers) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

<p>@Model.Description</p>
<h4>Code: @Model.Code</h4>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Tags</li>
    @foreach (var tag in Model.Tags) {
        <li>@Html.ActionLink(tag, "SessionsByTag", new { tag })</li>
    }
</ul>

新しいマークアップでは、 属性を data-role 使用してビューのレイアウトを改善します。

モバイル ブラウザーの表示を更新します。 次の図には行ったコードの変更が反映されています。

p3_love2

ラップアップとレビュー

このチュートリアルでは、ASP.NET MVC 4 Developer Preview の新しいモバイル機能について説明しました。 モバイル機能には、次のものが含まれます。

  • グローバルビューと個々のビューの両方で、レイアウト、ビュー、および部分ビューをオーバーライドする機能。
  • プロパティを使用して、レイアウトと部分オーバーライドの適用を RequireConsistentDisplayMode 制御します。
  • デスクトップ ビューにも表示できる、モバイル ビュー用のビュー スイッチャー ウィジェット。
  • iPhone ブラウザーなど、特定のブラウザーをサポートするためのサポート。

参照