テスターですが何か?

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

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

leave a comment »

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

 

セッションテーブル画面の改善

このセクションでは、モバイル用のセッション画面を作成していきます。これまでに作成した他の画面よりも、手の込んだ変更を加えて機能を拡張していきます。

スピーカーリスト画面で、検索ボックスに「Sc」と入力します。

20111114-201410

「Scott Hanselman」リンクをタップします。

20111114-212921

画面を見れば分かりますが、モバイル端末からは非常に見づらいです。Date列は読めたものではありませんし、Tags列は画面からはみ出ています。この画面を修正するために、「Views\Home\SessionsTable.cshtml」をコピーして「Views\Home\SessionsTable.Mobile.cshtml」を作成し、コードを以下のとおり書き換えます。

@using MvcMobile.Models
@model IEnumerable<Session>

<ul data-role="listview">
    @foreach(var session in Model) {
        <li>
            <a href="@Url.Action("SessionByCode", new { session.Code })">
                <h3>@session.Title</h3>
                <p><strong>@string.Join(", ", session.Speakers)</strong></p>
                <p>@session.DateText</p>
            </a>
        </li>                                           
    }    
</ul>

変更後のコードでは、room列とtags列は削除され、title, speaker, dateは縦に配置され、モバイルブラウザからも見やすくなっています。ブラウザからは以下のように表示されます。

20111114-214044

 

SessionByCode画面の改善

最後に、モバイル用のSessionByCode画面を作成しましょう。モバイルブラウザからSpeakerボタンをタップし、検索ボックスに「Sc」と入力します。

20111114-201410

「Scott Hanselman」リンクをタップします。Scott Hanselmanが担当するセッションが表示されます。

20111114-214044

「An Overview of the MS Web Stack of Love」リンクを選択します。

20111114-214630

デスクトップ用の表示もまぁ悪くはないのですが、モバイル向けに改善していきましょう。

「Views\Home\SessionsByCode.cshtml」をコピーして「Views\Home\SessionsByCode.Mobile.cshtml」を作成し、コードを以下の内容に置き換えます。

@model MvcMobile.Models.Session

@{
    ViewBag.Title = "Session details";
}
<h2>@Model.Title</h2>
<p>
    <strong>@Model.DateText</strong> in <strong>@Model.Room</strong>
</p>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Speakers</li>
    @foreach (var speaker in Model.Speakers) {
        <li>@Html.ActionLink(speaker, "SessionsBySpeaker", new { speaker })</li>
    }
</ul>

<p>@Model.Description</p>
<h4>Code: @Model.Code</h4>

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Tags</li>
    @foreach (var tag in Model.Tags) {
        <li>@Html.ActionLink(tag, "SessionsByTag", new { tag })</li>
    }
</ul>

変更後のマークアップはdata-role属性を使用してレイアウトを改善しています。ブラウザを再表示し、変更した内容が反映されているか確認を行います。

20111114-215521

20111114-215529

 

このチュートリアルでは、ASP.NET MVC4 Developer Previewのモバイル向けの以下新機能について紹介してきました。

  • layout、views、partial viewsファイルをオーバーライドする機能、サイト全体・個別のViewごとに設定が可能
  • RequireConsistentDisplayModeプロパティを使用してレイアウトファイルのオーバーライドの制御が可能
  • view-switcherを使用してモバイル用表示、デスクトップ表表示の切替が可能
  • iPhoneなど、特定のブラウザ向けのViewを作成可能

Written by david9142

2011年11月14日 @ 10:15 PM

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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