テスターですが何か?

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

ASP.NET MVC4 DP でiOSとAndoindがモバイルデバイスと判定されない?(1)

leave a comment »

以前、ASP.NET MVC4 Developer Preview機能の検証でこちら(【日本語訳】ASP.NET MVC4 Mobile Features Part3 Viewの新機能)のエントリーを公開しました。その際、Android用のViewを作成したのですが、実機のAndroidでアクセスしてもモバイルデバイスとは判定されませんでした。あの時はとりあえずチュートリアルを消化していくことが目的だったので深くは踏み込んでいませんが、ASP.NET4の目玉の新機能がなぜ正しく動作しなかったのかを検証していきます。

検証はモバイルデバイスの判定機能「Viewのオーバーライド」と「ViewSwitcher」を対象にします。

Viewのオーバーライド

ASP.NET MVC4で新規にプロジェクトを作成します。実機のAndroid, iOSからアクセスできるようにするためAzure用のクラウドプロジェクトのWebロールとして作成します。プロジェクトテンプレートには「Internet Application」を選択します。「Home」Viewの中身をすっきりさせて以下のようにします。フルブラウザ用のビューであることを表示しています。

フルブラウザ(IE9)で表示

image

 

Android 2.3(sh-12c)で表示

A1

iOS5(iPodtouch第4世代)で表示

i1

Android、iOS用のViewを追加します。「Index.cshtml」をコピーして、それぞれ「Index.Android.cshtml」「Index.Pod.cshtml」を作成します。そして、画面のメッセージを「This is a page for Android」、「This is a page for iOS」にします、ブラウザのUserAgent文字列を表示させています。Android用のViewのソースは以下の通りです。

@{
    ViewBag.Title = "Home Page";
}

@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
</hgroup></div>
</section>
}</pre>
<h3>This is a page for Android
@Request.UserAgent</h3>
<pre>



<section class="features"></section>

そして、Global.asax.csファイルのApplication_Startメソッドを以下のように変更します。UserAgent文字列に「Android」、「iPod」が含まれている場合は、専用のViewを表示します。

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

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

 

以前、チュートリアルを日本語訳していたときは、Androidでもフルブラウザ用のViewが表示されたんですよね。それぞれのデバイスでページを表示させます。

フルブラウザ(IE9)

image

 

 

Android 2.3(sh-12c)

A2

iOS5(iPod touch)

i2

ちゃんとデバイスごとのViewが表示されてる orz あー...自分のミスだったみたいです...すみません。Viewのオーバーライド機能では、ちゃんとAndroid、iOSの判定ができています。UserAgent文字列をもとに判定を行なっていると思われるので、出来て当たり前といえば当たり前なんですが。

作成したソースはこちらにアップしておきます。次は ViewSwiter でのモバイルデバイス判定の検証を行います。

Written by david9142

2011年12月31日 @ 4:20 PM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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