テスターですが何か?

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

【日本語訳】ASP.NET MVC4 Mobile Features Part4 jQueryMobile(前編)

leave a comment »

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

 

jQuery Mobileの利用

JQuery Mobileは有名なモバイルブラウザで動作するユーザーインターフェースを提供するライブラリです。jQueryMobileはCSSやJavaScriptをサポートするモバイルブラウザに「Progressive Enhancement」という考え方を適用しています。「Progressive Enhancement」とは、デスクトップのような強力なデバイス・ブラウザにはよりリッチな表示を行い、モバイルデバイス・ブラウザに対しては基本的な内容を表示するというものです。jQueryMobileに含まれているJavaScriptやCSSファイルは、マークアップの変更無しにモバイルブラウザに合ったスタイルを提供します。

このセクションでは、jQuery.Mobile.MVC NuGetパッケージを使用してjQueryMobileとview-switcher ウィジェットをインストールします。

はじめに、前のPartで作成した「Shared\_Layout.Mobile.cshtml」と「Shared\_Layout.Android.cshtml」ファイルを削除します。

「Views\Home\AllTags.Mobile.cshtml」ファイルを「Views\Home\AllTags.Android.cshtml.hide」にリネームします。ファイルの拡張子が「.cshtml」ではなくなるため、ASP.NET MVC4ランタイムはAllTagの表示のためにこのファイルを使用しなくなります。

以下の手順でjQuery.Mobile.MVC Nuget パッケージをインストールします。

1.[ツール]メニューから、[Library Package Manager]-[Package Manager Console]を選択します。

image

2.Package Manager Consoleから「install-Package jQuery.Mobile.MVC」と入力します。

image

Note 以下のエラーメッセージが表示されることがあります。
「ファイル C:\my_script.ps1 を読み込むことができませんでした。このシステムではスクリプトの拡張子が無効になっています。詳細情報は「Get-Help about_signing」を参照してください。

Scott Hanselmanのブログ「Signing PowerShell Scripts」も参照してください。署名されたスクリプトを実行できるようにするために、次のコマンドをPower Shellから実行してください。

Set-ExecutionPolicy AllSigned

このコマンドの実行には管理者権限が必要です。スクリプト実行ポリシーの変更は即時に反映されます。

  • jQuery.Mobile.NVC Nugetパッケージによって以下がインストールされます。
  • jQuery Mobile(jquery.mobile-1.0b3.jsと縮小版のjquery.mobile-1.0b3.min.js)
  • jQuery Mobileスタイルのレイアウトファイル(Views\Shared\_Layout.Mobile.cshtml)
  • jQuery Mobile CSSファイル(jquery.mobile-1.0b3.cssと縮小版のjquery.mobile-1.0b3.min.css)
  • Content\imagesフォルダに画像ファイル(.png)数個
  • デスクトップ用の表示からモバイル用の表示へ切り替える(その逆も)リンクを各ページのトップに表示するView-Switcher用のPartial View(MvcMobile\Views\Shared\_ViewSwitcher.cshtml)
  • ViewSwitcher用のController(Controllers\ViewSwitcherController.cs)
  • jQuery.Mobile.MVC.dll、オーバーライドするViewが存在するかどうかを判断するために使用される、コンテキストビュー拡張DLL

インストールプロセスにてjQueryも1.6.2から1.6.3へのアップグレードが行われます。チュートリアル開始時点のプロジェクトはjQuery1.63を使用しているので不要ですが、新しくASP.NET MVCプロジェクトを作成した場合、手動でレイアウトファイルのjQueryへの参照をバージョンを1.62から1.63へ変更剃る必要があります。

Note レイアウトファイル内のjQueryとjQueryMobileのバージョン番号と、プロジェクト内のバージョン番号が一致していることを確認してください。新しく作成したMVC4プロジェクトでNuGetパッケージを更新した場合、「MvcMobile\Views\Shared_Layout.Mobile.cshtml」ファイル内の参照を1.6.2から1.6.3へ変更する必要があります。

「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>

bodyセクション全体は以下のようになります。

<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>

アプリケーションをビルドし、モバイルブラウザでAllTag画面を表示してください。以下のように表示されるはずです。

p3_afterNuGet

Note モバイルブラウザで、Home, Speaker, Tag, Dateリンクがボタンの表示表示されない場合、jQueryMobileスクリプトファイルへの参照が間違っている可能性が高いです。レイアウトファイルで参照しているjQueryMobileのファイルバージョンと、scriptフォルダにあるファイルのバージョンが一致していることを確認してください。

ページスタイルが変わっていることに加えて、「Displaying mobile view」とモバイル端末用表示からデスクトップ用表示への切り替えを行うリンクに気がつくと思います。「Desktop view」リンクを選択すると、デスクトップ用の表示に切り替わります。

p3_desktopView

デスクトップ用表示からモバイル用表示へ戻ることができないため、変更を行います。「Views\Shared\_Layout.cshtml」ファイルを開き、ページ直下のdiv要素に、view-switcherのためのコードを追加します。

@Html.Partial("_ViewSwitcher")

以下が、bodyの内容です。

<body>
    <div class="page">
        @Html.Partial("_ViewSwitcher")
        <div id="header">
           
        @*Items removed for clarity.*@
        </div>
    </div>
</body>

AllTag画面をモバイルブラウザで再表示すると、デスクトップ表示とモバイル表示を切り替えるリンクが表示されているはずです。

p3_desktopViewWithMobileLink

AllTagsページをデスクトップ用ブラウザで表示してください。View-Switcherはモバイル用レイアウトページにのみ追加したため、デスクトップブラウザ上には表示されません。後ほど、このチュートリアルでデスクトップ用表示にもView-Switcherを追加する方法についてみていく予定です。

image

 

【コメント】

ViewSwitcherのコード(_ViewSwitcher.cshtml)内でモバイルデバイスからのアクセスかどうかをRequest.Browser.IsMobileDeviceで判定していますが、Android2.3, iOS5ともにモバイルデバイスと判定されませんでした。そのため、ViewSwitcherの部分のキャプチャはチュートリアルのものを使用しています。なぜ、モバイル用デバイスと判定されなかったのかは、時間を見つけて確認したいと思います。

Written by david9142

2011年11月13日 @ 7:27 PM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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