テスターですが何か?

ホビープログラマ略してHPです

【日本語訳】ASP.NET MVC4 Mobile Features Part3 Viewの新機能

leave a comment »

このエントリーはASP.NET公式サイトのチュートリアル「ASP.NET MVC4 Mobile Features」の日本語訳になります。このコンテンツ、日本語訳の全体についてはこちらのエントリーを参照してください。

 

View, Layouts, Partial Viewをオーバーライドする

ASP.NET MVC4の重要な新機能は、一般的なモバイルブラウザ向け、特定のモバイルブラウザ向け、特定のブラウザ向けにView, Layout, Partial Viewをオーバーライドできることです。Viewのファイルをコピーして「.Mobile」をファイル名に追加することで、モバイル向けのViewを作成することができます。例えば、モバイル用の「Index」Viewを作成したい場合は、「View\Home\Index.cshtml」をコピーして「Views\Home\Index.Mobile.cshtml」を作成します。

このセクションでは、モバイル用のLayoutファイルを作成しようと思います。

はじめに「Views\Shared\_Layout.cshtml」をコピーして「Views\Shared\_Layout.Mobile.cshtml」を作成します。「_Layout.Mobile.cshtml」を開きページタイトルを「MVC4 Conference」から「Conference(Mobile)」に変更します。各Html.ActionLinkのリンク文字列から「Browse by」を削除します。以下のコードがモバイル用に作成したLayoutファイルのbody部分です。

<body>
    <div class="page">
        <div id="header">
            <div id="logindisplay"></div>
            <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>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>

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

<h2>Tags (M)</h2>

デスクトップ用ブラウザと、モバイル用ブラウザのそれぞれでページを表示してみましょう。モバイル用ブラウザでは変更を加えた2箇所が反映されています。

p2m_layoutTags.mobile

※手元のAndroid端末(sh-12c)ではなぜかモバイル用のViewが表示されなかったため、チュートリアルにあるWP7エミュレーターの画像を載せています。

それに対して、デスクトップブラウザでは変更は反映されていません。

image

 

特定のブラウザ向けのViewの作成

モバイル向け、デスクトップ向けViewの作成に加えて、特定のブラウザ向けのViewを作成することができます。例えばAndroidブラウザ向けのViewを作成してみましょう。このセクションでは、Androidブラウザ向けのlayoutファイルとAllTags Viewを作成します。

※チュートリアルではiPhone向けViewを作成していますが、私の手元にあるのがAndroid端末のなので、Android用に変更しました。

「Global.aspx」ファイルを開き、Application_Startメソッドに以下のコードを追加します。

            DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Android")
            {
                ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf(
                    "Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });

Application_Startメソッド全体は以下のようになります。

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

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);

            DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Android")
            {
                ContextCondition = (ctx => ctx.Request.UserAgent.IndexOf(
                    "Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });
        }

上記コードは各リクエストとの比較対象となる、「Android」というディスプレイモードを定義します。リクエストが定義内容と一致する場合(つまり、ユーザーエージェントに「Android」という文字列が含まれている場合)、ASP.NET MVCは「Android」というサフィックスが付けられたViewを探しに行きます。

コード内で、「DefaultDisplayMode」を右クリックし、[競合の解決]を選択し、[using System.Web.Pages]を選択します。これによって、DiaplayModeやDefaultDisplayMode型が定義されている、System.Web.WebPages名前空間への参照が追加されます。

image

または、手動で以下のようにusingを記載することも可能です。

using System.Web.WebPages;

変更を保存し、「MvcMobile\ViewsShared\_Layout.Mobile.cshtml」ファイルをコピーして「MvcMobile\Views\Shared\_Layout.Android.cshtml」を作成します。ファイルを開き<h1>要素の値を「Conference(Mobile)」から「Conference(Android)」に変更します。

「MvcMobile\Views\Home\AllTags.Mobile.cshtml」をコピーして「MvcMobile\View\Home\AllTags.Android.cshtml」ファイルを作成します。<h2>要素の値を「Tags(M)」から「Tags(Android)」に変更します。

アプリケーションを実行し、Android用ブラウザで表示します。ユーザーエージェント文字列に「Android」が含まれていることを確認し、AllTagsを表示します。このスクリーンショットはAndroidブラウザで表示したものです。

20111112-174647

※チュートリアルではSafariを使用してユーザーエージェント文字列を変更してiPhoneからのアクセスをエミュレートしています。方法はDaid Alisonのブログ「How to let Safari pretend it’s IE」を参照してください。

このセクションでは、モバイル向けのlayoutとViewの作成方法、特定のデバイス(Andoird, iPhone)向けのlayoutやViewの作成方法についてみてきました。次のセクションでは、よりモバイルブラウザでの表示の親和性の高い、jQueryMobileの活用についてみていきます。

Written by david9142

2011年11月12日 @ 5:57 PM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。