.NETによるスマートフォンWeb UI開発ガイド【導入編】

Webフォーム vs. ASP.NET MVC
 ― スマートフォン向けWeb開発で使えるのはどっち?

WINGSプロジェクト かるあ(監修:山田祥寛)
2011/04/18
Page1 Page2 Page3 Page4

ASP.NET MVCを利用したHTML中心の開発

 ここでは、ASP.NET MVCを利用したHTMLを中心としたスマートフォン向けWeb開発を見ていく。

ASP.NET MVCによるスマートフォン向けWeb開発の特徴

 ASP.NET MVCは、Web開発では標準的なMVCパターンを、ASP.NETに採用したフレームワークで、最近、バージョン3が登場したばかりの比較的新しい技術だ。

 ASP.NET MVC 3は、個別にインストールすることも可能だが、Visual Studio 2010のSP1を導入することで手軽に利用できる。ただし、Visual Studio 2010 SP1を適用した場合、日本語のリソース・ファイルなどはインストールされるが、ASP.NET MVCの設定ダイアログなどのUIは日本語化されない。これらを日本語化したい場合は、別途、下記のURLから個別のASP.NET MVC 3をダウンロードしてインストールする必要がある。

 ASP.NET MVCの特徴としては、見た目(View)とビジネス・ロジック(Model)が分離しやすいため、

  • 単体テストがしやすい
  • 見た目の変更を行いやすい
  • URLのルーティングがシンプルで分かりやすい

といったメリットがある。スマートフォン向けのWeb開発に焦点を当てると、ASP.NET MVCでは、

  • HTMLコードのほとんどを開発者自身が記述するため、Web標準に準拠しやすく、HTML5の導入が比較的楽
  • スタイルシートの適用がしやすい

といった部分が大きなメリットになる。

jQuery MobileとHTML5

 開発者がHTMLコードの出力を細かく制御するため、Webフォームに比べてスマートフォンへの対応は容易だ。しかし見た目や、スマートフォンらしい画面のタッチなどに対応したアプリを作成するためには、いくつかテクニックが必要となる。

 今回は、jQuery MobileというJavaScriptのライブラリを利用して、そのあたりを補っていく。jQuery Mobileの最新バージョン(執筆時点では「1.0 alpha 4.1」が最新)は、本家サイトからダウンロードできる。

 また、jQueryのCDN(コンテンツ配信ネットワーク)でも配信されているので、こちらを利用することも可能だ。ただし、「alpha」というバージョン名が示すとおり、まだ作成段階のライブラリであるため、いくつかバグが潜んでいるので注意していただきたい。

 ASP.NET MVCの詳しい解説に関しては、次の連載を参照してほしい。

ASP.NET MVCによるスマートフォン向けWeb開発の手順

 それでは、先ほどのWebフォームで開発したものと同等のWebアプリを、今度はASP.NET MVCで作成していこう。

(1)コントローラ(Controller)の追加

 ASP.NET MVCのプロジェクトの「Controllers」フォルダに、書籍検索を行うためのコントローラを追加し、名前を「HomeController」とします(図8)。なお、「HomeController」のように、Controllerクラスは「Controller」というサフィックスを付けて命名されている必要がある。

[追加]−[コントローラー]をクリック
図8 コントローラ(名前は「HomeController」)の追加

 コントローラには、リスト2のように、引数なしでページを表示するためのIndex()メソッドと、エンド・ユーザーがPOST(=送信)したキーワードを基に検索を行うIndex(string)メソッドの2つを用意する。

 Webフォームと同様に、Amazon.co.jpのWebサービスからデータを得るAmazonServiceクラスを利用して書籍の検索を行い、その検索結果をモデルとしてビュー(View)に引き渡す。

public class HomeController : Controller
{
  //
  // GET: /Index/
  public ActionResult Index()
  {
    var emptyModel = new List<Core.AmazonService>();
    return View(emptyModel);
  }

  //
  // POST: /Index/
  [HttpPost]
  public ActionResult Index(string keyword)
  {
    var model = new Core.AmazonService();
    var result = model.Find(keyword);
    return View(result);
  }
}
Public Class HomeController
  Inherits System.Web.Mvc.Controller

  '
  ' GET: /Index/
  Function Index() As ActionResult
    Dim emptyModel = New List(Of Core.AmazonService)()
    Return View(emptyModel)
  End Function

  '
  ' POST: /Index/
  <HttpPost> _
  Function Index(ByVal keyword As String) As ActionResult
    Dim model = new Core.AmazonService()
    Dim result = model.Find(keyword)
    Return View(result)
  End Function

End Class
リスト2 コントローラの追加(上:HomeController.cs、下:HomeController.vb)

(2)ビュー(View)の追加

 コード・エディタ上でIndexメソッドにマウス・カーソルを合わせ、(右クリックすると表示される)コンテキスト・メニューから[ビューの追加]メニューを選択する。これにより、[ビューの追加]ダイアログが表示されるので、図9のように設定する。

[ビューの追加]をクリック
図9 各種設定を行ってビューを作成([ビューの追加]ダイアログ)

 [ビューの追加]ダイアログで設定した項目を表3に示す。[スキャフォールディング ビュー テンプレート]を利用すると、モデル・データを基に一覧画面などのひな形を作成することもできるが、今回は自前で作成したいので「Empty」を指定した。

設定項目 設定値
ビュー エンジン Razor (CSHTML)
モデル クラス AmazonService (Core)
スキャフォールディング ビュー テンプレート Empty
レイアウトまたはマスター ページを使用する ~/Views/Shared/_Layout.cshtml
表3 [ビューの追加]ダイアログにおけるビューに関する設定
C#の例。Visual Basicの場合は[ビュー エンジン]コンボボックスでは「Razor (VBHTML)」を選択し、[レイアウトまたはマスター ページを使用する]欄には「~/Views/Shared/_Layout.vbhtml」を入力する。

(3)レイアウト・ページ(_Layout.cshtml/_Layout.vbhtml)の編集

 _Layout.cshtml/_Layout.vbhtmlファイル(以下、レイアウト・ページ)はWebフォームのマスター・ページに相当する機能だ。この機能を使うと、ページ間で共通する構造を定義することで、サイト全体の見た目やナビゲーションを統一できる。

 レイアウト・ページでは、まず<head>タグ内に、前述したビューポートの設定や、jQuery Mobile用のJavaScript/CSSファイルへのリンクを定義する。

 そして、各<div>タグに対してdata-role属性を追加し、その属性でページ(page)のヘッダ(header)、コンテンツ(content)、フッター(footer)を定義する。jQuery Mobileでは、「data-」から始まる属性を要素に付け加えることで、その要素のスタイルが実行時に適用される。なお「data-」から始まる属性については、pikotea氏のページにある「jQuery Mobileで利用可能な属性の一覧」が、まとまっていて分かりやすい。

 リスト3の例では、data-role属性で定義した「header」と「fotter」は、RenderSectionヘルパー・メソッド(contentHeaderセクションとcontentFooterセクション)を記述することで、おのおののビュー側で別々に表示内容を作成できるようにした。

<!DOCTYPE html>
<html>
<head>
  <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
  <link href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
<div data-role="page">
  <div data-role="header" data-position="fixed" data-backbtn="false">
  @RenderSection("contentHeader")
  </div>
  <div data-role="content">
  @RenderBody()
  </div>
  <div data-role="footer">
  @RenderSection("contentFooter")
  </div>
</div>
</body>
</html>
リスト3 jQuery Mobileに対応させたレイアウト・ページ(_Layout.cshtml/_Layout.vbhtml)

[コラム]RenderSectionヘルパー・メソッドについて

 ページ全体のレイアウトを考えていくと、ページのメイン・コンテンツのセクション(=領域)以外にも、それぞれのページで動的に変更したいセクションがあることは少なくない。このような場合、ASP.NET MVCでは、RenderSectionメソッドをレイアウト・ページ側の「動的に変更したいセクション」に用意しておくことで、各ページ側で個別にそのセクションの表示を担当できるようになる。ASP.NET Webフォームを利用したことがあれば、マスター・ページのコンテンツ・ページのようなもの、と考えてもらえばいいだろう。

 RenderSectionメソッドについては、マイクロソフトのスコット・ガスリー氏のブログを参照してほしい。

(4)ビュー(View)の編集

 リスト4に示すように、ビュー側では、レイアウト・ページ側で記述したRenderSectionメソッドとRenderBodyメソッドによって描画されるcontentHeaderセクションおよびcontentFooterセクションの内容を定義する。

 リスト4のコード(index.cshtml/index.vbhtmlファイル)は、一覧を表示する単純なRazor構文で記述されたビューなので、コード全体の説明は割愛するが、ポイントなる部分のみを簡単に示しておこう。このコードでは、検索キーワードを入力する<input>タグにHTML5のplaceholder属性を追加することでウォーターマーク(=透かし)を表示している点と、<ul>タグに「data-role="listview"」を追加してjQuery Mobileの対象としている点に注目してほしい。

@model IEnumerable<Core.AmazonService>
@{
  ViewBag.Title = "Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
}

@section contentHeader {
  <h1>書籍検索</h1>
}

@section contentFotter {
}

@using (Html.BeginForm())
{
<div data-inline="true">
  <input type="search" name="keyword" placeholder="検索したい書籍名を入力してください。" data-inline="true" />
</div>
}

<ul data-role="listview">
  @foreach (var item in Model)
  {
  <li>
    <img src="@item.ImageUrl" alt="" style="float:left" />
    <div>
      <a href="@item.Url">@item.Title</a><br />
      @item.FormattedPrice<br />
      @item.Manufacturer<br />
      @item.Author
    </div>
  </li>
  }
</ul>
@ModelType IEnumerable(Of Core.AmazonService)

@Code
  ViewData("Title") = "Index"
  Layout = "~/Views/Shared/_Layout.vbhtml"
End Code


@section contentHeader
  <h1>書籍検索</h1>
End Section

@section contentFooter

End Section

@Using Html.BeginForm()
@<div data-inline="true">
  <input type="search" name="keyword" placeholder="検索したい書籍名を入力してください。" data-inline="true" />
</div>
End Using
 

<ul data-role="listview">
  @For Each item In Model
  @<li>
  <img src="@item.ImageUrl" alt="" style="float:left" />
  <div>
    <a href="@item.Url">@item.Title</a><br />
    @item.FormattedPrice<br />
    @item.Manufacturer<br />
    @item.Author
  </div>
  </li>
  Next
</ul>
リスト4 検索結果を一覧表示するビュー(上:index.cshtml、下:index.vbhtml)

(5)実行結果の確認

 作成したWebアプリを実行すると、図10のような画面が表示される。テキストボックスにはウォーターマークが表示される。また、検索を行うと、検索中を示す[loading]アニメーションが表示され、データのロードが完了すると、検索結果が表示される。

ロードが完了すると……
図10 ASP.NET MVCによるWebアプリの実行結果

 最後に次のページでは、WebフォームとASP.NET MVCの使い分け指針を示す。


 INDEX
  .NETによるスマートフォンWeb UI開発ガイド【導入編】
  Webフォーム vs. ASP.NET MVC ― スマートフォン向けWeb開発で使えるのはどっち?
    1.Webアプリとネイティブ・アプリの比較
    2.Webフォームを利用したコントロール中心の開発
  3.ASP.NET MVCを利用したHTML中心の開発
    4.WebフォームとASP.NET MVCの使い分け指針

インデックス・ページヘ  「.NETによるスマートフォンWeb UI開発ガイド【導入編】」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間