テスターですが何か?

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

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

leave a comment »

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

前々回のエントリーでは「Viewのオーバーライド」、前回のエントリーでは「ViewSwitcher」を対象にしました。そして残った課題がこの2つです。

  • Androidがモバイル端末と判断されず、ViewSwitcherが表示されない
  • cshtmlの拡張子を変更後再度拡張子をcshtmlに戻すと、そのファイルが発行対象にならなくなる?

Androidがモバイル端末と判断されない

ASP.NETはiOSはモバイル端末だと判断しますが、Androidはモバイル端末と判断しません。それでは、ASP.NETはリクエストを受けたクライアントの端末がモバイル端末かどうかをどのように判断しているのでしょうか。はい、「ブラウザ定義ファイル(Browser Definition File)」を使用しています。このブラウザ定義ファイルには、ブラウザバージョン、JavsScript,Cookieのサポート、モバイルブラウザかどうかなどのブラウザ定義情報を保持しています。そして、ASP.NETがリクエストヘッダー情報とこのブラウザ定義ファイルを利用して、リクエストがあったブラウザの情報を取得しています。

以下のディレクトリに拡張子「browser」のファイルがあり、これらのファイルがブラウザ定義と呼ばれています。

C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers

C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\Browsers

また、ブラウザ定義は階層構造になっています。

Use ASP.NET 4 Browser Definitions with ASP.NET 3.5」より抜粋

clip_image002_thumb

リクエストヘッダーとこのブラウザ定義ファイルから取得した情報は、System.Web.HttpRequest.Browserの各種プロパティから取得することができます。ソース(Index.cshtml, Index.Mobile.cshtml)を以下のように書き換えて、画面にブラウザ情報を表示させてみます。

<h3>This is a page for Mobile<br />
@Request.UserAgent<br />
@Request.Browser.IsMobileDevice.ToString()<br />
Type: @Request.Browser.Type<br />
Id: @Request.Browser.Id<br />
Browser: @Request.Browser.Browser<br />
MobileDeviceModel: @Request.Browser.MobileDeviceModel
</h3>

それでは実行します。

Android 2.3(sh-12c)

A5

iOS5(iPod touch)

i5

う~ん、よく分からない...TypeやIdがどこから取得されているのか、ブラウザ定義ファイルの内容を細かく確認していないので幾つかの値を画面に出してみたんですがよく分からない...Android用のブラウザ定義ファイルが存在しないので、Safariからのアクセスと判断されてしまいモバイルデバイスと判断されていないんだと思います。

現時点でうまくいっていない内容をまとめると

  • Androidからアクセスした場合に、IsMobileDeviceプロパティがFalseになりViewSwitcherが表示されない

です。これに対する対応の選択肢を考えてみると

  • 現状存在しないAndroid用のブラウザ定義ファイルを作成する
  • 「_ViewSwitcher.cshtml」を変更してAndroidをモバイルデバイスと判断されるようにする

本来は前者の対応をすべきだと思いますがどのように行えばいいのか分からないので、_ViewSwitcher.cshtmlを無理矢理変更して対応しようと思います。_ViewSwitcher.cshtmlのソースは以下のようになっています。

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        } 
        else 
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

「Request.Browser.IsMobileDevice」が正しく判断されないので、IsMobileDeviceではなくUserAgent文字列から判断させるようにします。変更したソースは以下のとおりです。

@if(Request.UserAgent.IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0 ||
    Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        } 
        else 
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

Global.asax.csにも同様の処理を記載しているので冗長になってしまいますが、これでAndroidにもViewSwitcherが表示されるはずです。では、アクセスしてみます。

Android 2.3 (sh-12c)

A6

iOS5 (iPod touch)

i6

はい、無事AndroidにもViewSwitcherが表示されました。

まとめ

  • ASP.NETにはAndroid用のブラウザ定義ファイルが存在しないため、モバイル用デバイスと判断されない。そのため、ViewSwitcherが表示されない。
  • Androidをモバイルデバイスと判断させるためには、Android用のブラウザ定義ファイルを追加するか、_ViewSwitcher.cshtmlのロジックを書き換える必要がある。

今回作成したソースはこちらにアップします、「MVC4DPMobileDeviceCloud_3.zip」をダウンロードしてください。次回は、なぜか一部のcshtmlファイルがアップロードされなかった現象について検証を行います。

Written by david9142

2012年1月1日 @ 4:04 PM

カテゴリー: ASP.NET MVC

Tagged with ,

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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