テスターですが何か?

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

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

leave a comment »

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

 

Speakers Listの改善

モバイルブラウザでSpeakerリンクを選択して下さい。モバイル用のView(AllSpeakers.Mobile.cshtml)がないため、モバイル用のレイアウト(_Layout.Mobile.cshtml)を使用してデフォルトのSpeakerリスト画面(AllSpeakers.cshtml)が表示されます。

20111114-184423

ファイル「Views\_ViewStart.cshtml」でRequireConsistentDisplayModeをtrueに設定することで、サイト全体でモバイル用のレイアウトを使用してデフォルト(モバイル用ではない)Viewを使用させなくすることができます。

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

RequireConsistentDisplayModeをtrueに設定すると、モバイル用のレイアウト(_Layout.Mobile.cshtml)がモバイル用のView(Viewのファイル名がViewName.Mobile.cshtmlとなっているファイル)の表示のみに使用されるようになります。モバイル用のレイアウトファイルがモバイル用でないViewではうまく表示されない場合に、RequireConsistentDisplayModeをtrueに設定するといいかもしれません。以下のスクリーンショットはRequireConsistentDisplayModeをtrueに設定してSpeakersページを表示した場合です。

20111114-192433

個別のViewファイル内でRequireConsistentDisplayModeをfalseに設定することで、Consistent Display Mode(レイアウトとビューの組み合わせを一致させる)を無効化させることができます。以下のマークアップ記述は「Views\Home\AllSpeakers.cshtml」ファイル内でRequireConsistentDisplayModeをfalseに設定しています。

@model IEnumerable<string>

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

 

モバイル用Speakers Viewの作成

先ほども確認しましたが、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>

ブラウザを再表示し、表示形式が更新されていることを確認します。

20111114-200154

モバイル用の画面表示は改善されましたが、まだスピーカーのリスト表示が長く探しづらいです。この問題に対応するために、<ul>タグに「data-filter」属性を追加し値をtrueに設定します。以下に、<ul>部分のマークアップを載せておきます。

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

次の画像で、data-filter属性を追加してことによって画面の上部に検索ボックスが表示されたことが分かります。

20111114-200955

検索ボックスに入力すると、jQueryMobileの機能でリアルタイムにリストのフィルタリングが行われます。

20111114-201410

 

タグリスト画面の改善

スピーカーリスト画面と同様に、タグリスト画面も見る分には問題ないのですが、モバイル端末ではリンクが小さすぎてタップしづらくなっています。このセクションでは、スピーカーリスト画面で行った改善をタグリスト画面にも行なって行きましょう。

「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」でフィルタした様子です。

20111114-204155

 

日時リストの改善

これまでスピーカーリスト画面やタグリスト画面でモバイル端末で使いやすくするために行なってきた改善を、日時リスト画面でも行なって行きましょう。

「View\Home\AllDates.cshtml」をコピーして「View\Home\AllDates.Mobile.cshtml」ファイルを作成します。ファイルを開き、<h2>要素を削除します。

「data-role=”listview”」を<ul>タグに追加します。

<ul data-role="listview">

以下のスクリーンショットはdata-role属性を追加した状態日時リストの画面です。

20111114-205322

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

このコードではセッションを日ごとにグループ化しています。日ごとにリストに分割行をつくり、分割行の間に全セッションのリストを表示しています。アプリケーションをを実行すると、以下のように表示されます。

20111114-210357

Written by david9142

2011年11月14日 @ 9:06 PM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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