jQuery Mobileで作るスマホ向けFacebookアプリ：無料クラウドでできるFacebookアプリ開発入門（3）（4/5 ページ）

» 2011年08月01日 00時00分公開

[亀渕景司，株式会社ビービーシステム]

■ 取得したJSONを基にjQuery MobileとRazor記法でHTML作成

　取得した情報（JSONデータ）を基に、HTMLを生成するビューを作成します。本稿では、「Razor記法」と呼ばれる構文を使用しています。コード内の@で始まる個所など、HTMLに直接コードを書くことができ、ループ処理など、より直感的に開発できます。

　まず、今回のWebアプリの共通レイアウトとして、jQuery Mobileなどに関する基本的なページ構成を、「Views」→「Shared」フォルダにある「_Layout.cshtml」ファイルに記述します。

コード4　_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
  <title>@ViewBag.Title</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
 
<body>
  <div class="page">
  <div data-role="page" id="main">
    <div data-role="header" data-position="fixed">
      <h1>@ViewBag.Title</h1>
      @Html.Partial("_LogOnPartial")
    </div>
    <div data-role="content">
      @RenderBody()
    </div>
  </div>
</body>
</html>

　共通レイアウトである_Layout.cshtmlファイルでは、jQuery Mobileの読み込み（<script>タグ）や、ページ全体のHTMLを定義します。通常のHTMLと同様に、記述した通りに出力されます。

　またパーシャルビュー（部分ビュー）として一部分だけ別ファイルにしたり（@Html.Partialの部分）、ページの本体として別の.cshtmlファイル（@RenderBodyの部分）を記述できます。

　jQuery Mobile固有の部分では、「data-*」属性を使用して要素に意味を持たせたブラウザのレンダリングや処理を行わせることが可能です（ヘッダとしてレンダリングする「data-role=”header”」など）。

　ページの共通部分は以上です。同様に_LogOnPartial.cshtmlファイルも以下のように修正します。

コード5　_LogOnPartial.cshtml

@if(Request.IsAuthenticated) {
@Html.ActionLink("Log Off", "LogOff", "Account",null,new { @class = "ui-btn-right" , data_ajax = "false"})
}
else {
@Html.ActionLink("Log On", "LogOn", "Account", null, new { @class = "ui-btn-right" , data_ajax = "false" })
}

　次に、既定で表示されるIndex.cshtmlを修正します。ASP.NET MVCでは、Viewsフォルダ内にコントローラの名前に応じたフォルダを作成し、コントローラ内のメソッドに応じたビューを作成します。

　先ほどの手順でHomeController.csのIndexメソッドやFriendDetailメソッドを追加修正しました。コントローラの処理後、レンダリングされる際に呼び出されるビューは、Indexメソッドであれば「Views」→「Home」フォルダのIndex.cshtml、FriendDetailメソッドであれば「Views」→「Home」フォルダのFriendDetail.cshtmlとなります。

　本稿では、Aboutメソッドを削除し、FriendDetailメソッドを追加したので、「Home」フォルダからAbout.cshtmlファイルは削除しても構いません（呼び出されません）。その代わりにFriendDetail.cshtmlが必要です。

　ここでは、まずIndex.cshtmlファイルを以下のように修正します。

コード6　Index.cshtml

@{
    if(Request.IsAuthenticated) {
        ViewBag.Title = Mvc3Website.Models.InMemoryUserStore.Get(long.Parse(Context.User.Identity.Name)).Name;
    }
    else
    {
        ViewBag.Title = "Facebook Sample";
    }
}
<div data-role="content" >
    <ul data-role="listview">
    @if(Model != null){
        foreach (var f in Model.data)
        {
            <li>@Html.ActionLink((string)f["name"],
                                "FriendDetail",
                                "Home",
                                new { id = f["id"] },
                                new { data_rel = "dialog", data_transition = "pop" })</li>
        }
    }
    </ul>
</div>

　友達一覧は、<ul>タグと<li>タグ（リスト）を使用してWebブラウザ側に出力します。また、<ul>タグのdata-role属性に「listview」を設定することで、jQuery Mobileが自動的にスマートフォンに適したリスト表示に処理します。

　同様に、FriendDetailメソッド用にビューを作成します。ここではAbout.cshtmlを「FriendDetail.cshtml」にファイル名を変更し、内容を以下のように修正します。

コード7　FriendDetail.cshtml

@{
    ViewBag.Title = "Friend Detail";
}
 
<div>
    @if (Model != null)
    {
        <img src="@Model.picture" alt="@Model.name" style="float:left;margin-right: 10px;"/>
        <p>
            @Model.name<br />@Model.gender
        </p>
    }
</div>

　以上でアプリの修正は完了です。