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

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

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

Webフォームを利用したコントロール中心の開発

 現在のASP.NETには、大別すると「Webフォーム」と「ASP.NET MVC」という2つの開発方法がある。

 まずは、伝統的なWebフォームを利用した、コントロール中心のスマートフォン向けWeb開発を見ていきたいと思う。

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

 通常のWebアプリの開発では、HTMLやJavaScript、スタイルシートといった技術を組み合わせて、使いやすいUIを構築したり、ブラウザの差異を吸収しながらWebページを作成したりする必要がある。ASP.NET Webフォームでは、HTMLやJavaScript、スタイルシートといった要素をサーバ・コントロールとして隠ぺいすることで、開発者の負担を軽減している。

 また、ボタンのクリックや、ドロップダウンリストの選択項目の変更といったHTMLコード上でのイベント処理も、前述のサーバ・コントロールのイベントとしてサーバ側で処理することで、イベント駆動開発に慣れたデスクトップ開発者がWebアプリを開発しやすいように配慮されている。

 Webフォームの開発では、HTMLコードを意識しないでよい半面、HTMLコードの出力を完全にはコントロールできない。そのため、出力されたHTMLコードに対してスタイルシートが適用しにくかったり、吐き出されたHTMLコードがWeb標準に準拠できていなかったりといった問題がある。

 スマートフォンの多くは、HTML5を解釈するモダン・ブラウザを搭載しているため、WebページをHTML5に対応したいといった場合に、Webフォームのこの特徴は大きな問題となる。このような場合、ASP.NETの「PageAdapter」という仕組みを利用することで、出力されるHTMLをカスタマイズすることも可能だが、制御方法が複雑で、苦労の割にそれほどメリットがないため、あまり普及はしていない。

ComponentOne Studio for iPhone-UX 2011J

 では、Webフォームでスマートフォン向けのアプリを作成することはできないのだろうか。

 Webフォームでは、前述したようにHTMLコードをサーバ・コントロールとして隠ぺいしている。このため、Webフォームでのスマートフォン向けWeb開発では、「スマートフォン向けのサーバ・コントロールを利用する」というアプローチを取るのが正当な方法といえる。

 そこで今回は、グレープシティから発売されているコンポーネントの「ComponentOne Studio for iPhone-UX 2011J」(以下、C1 iPhone)を利用して、Amazon.co.jpの書籍検索を行うスマートフォン用のサンプルWebサイトを作成してみよう。

 本稿のサンプルを試す場合は、グレープシティのサイトからC1 iPhoneのトライアル版をダウンロードして評価利用することが可能だ。

 C1 iPhoneを利用した開発方法は、通常のWebフォームの開発方法と同じと思ってもらっていいだろう。

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

 それでは、C1 iPhoneを利用したWebフォームのサンプルWebアプリを、順を追って作成していこう。

(1)C1 iPhoneのサーバ・コントロールの登録

 Webフォームでサーバ・コントロールを利用するために、図3に示す[ツールボックス アイテムの選択]ダイアログの[.NET Framework コンポーネント]で「C1.Web.IPhone4」から始まる[アセンブリ名]のサーバ・コントロール項目すべてにチェックを入れ()、それらのサーバ・コントロールを[ツールボックス]に登録する。(

図3 [ツールボックス]へC1 iPhoneの全サーバ・コントロールを登録
この例では、[ツールボックス]に「C1 iPhone」というタブを作成して、その中にC1 iPhoneの全サーバ・コントロールを登録している。
  「C1.Web.iPhone4」から始まる[アセンブリ名]のサーバ・コントロール項目すべてにチェックを入れる。
  [OK]ボタンを押して、[ツールボックス]にチェックしたサーバ・コントロールを登録する。

(2)ScriptManagerコントロールとC1ViewPortコントロールの追加

 C1 iPhoneでは、ASP.NET AJAXの仕組みを利用するため、まずはScriptManagerコントロール(図4の)と、スマートフォン(iPhone)向けキャンパス(=デザイン領域)となるC1ViewPortコントロール()を[デザイン]ビューに追加し、そのコントロールの各種プロパティを設定してデザインを整える()。

図4 C1 iPhoneのiPhone向けキャンパス(=デザイン領域)を作成
この例では、Webフォーム・デザイナ([デザイン]ビュー)にScriptManagerコントロールとC1ViewPortコントロールを追加して、iPhone向けキャンパス(=デザイン領域)を作成している。
  ScriptManagerコントロールをWebフォーム上に追加する。
  C1ViewPortコントロールをWebフォーム上に追加する。
  各種プロパティの値を変更して、デザインを整える。この例では[Text]プロパティに「書籍検索」という値を設定している。

(3)検索用TextBoxと結果表示用ListViewの追加

 さらに、iPhone向けキャンパス内に検索用のTextBoxコントロール(図5の)と、結果を表示するためのListViewコントロール()を追加し、さらにデータソースの設定を開始する()。

図5 C1 iPhoneのiPhone向けキャンパスへ各種サーバ・コントロールを追加
この例では、Webフォーム・デザイナでiPhone向けキャンパスに、各種サーバ・コントロールを追加している。
  検索用のTextBoxコントロールをiPhone向けキャンパスに追加する。
  一覧表示用のListViewコントロールをiPhone向けキャンパスに追加する。
  Webフォーム・デザイナではListViewコントロールの右肩に[ListView タスク]が表示されるので、そこで[データ ソースの選択]コンボボックスから「<新しいデータ ソース>」を選択して、データソースの設定を開始する。

(4)データソースへの書籍検索クラス(ビジネス・オブジェクト)の指定

 データソースの設定を開始すると、[データ ソース構成ウィザード]が表示される。図6に示す手順で、このウィザードを進めていき、あらかじめ作成しておいたAmazon.co.jpの書籍を検索するための「Core.AmazonWebServiceクラス」(Coreは名前空間)をビジネス・オブジェクトとしてデータソースに割り当て、そのデータソースを用いて書籍検索するデータ・メソッドのパラメータに、図5ので追加したTextBoxコントロールの値をバインドする。

「オブジェクト」を選択して[OK]ボタンをクリック
[ビジネス オブジェクトの選択]コンボボックスで(あらかじめ作成しておいた)「Core.AmazonWebService」を選択して[次へ]ボタンをクリック
[メソッドの選択]コンボボックスで「Find(string keyword)、戻り値 List<AmazonService>」メソッドを選択して[次へ]ボタンをクリック
先ほど選択したメソッドのパラメータにTextBoxコントロールの値をバインドするように指定して[完了]ボタンをクリック
図6 書籍検索クラス(ビジネス・オブジェクト)をデータソースに割り当てる
[パラメーターの定義]ページでは、[パラメーター ソース]ドロップダウンリストで「Control」を、[ControlID]ドロップダウンリストで「TextBox1」(=TextBoxコントロールのID)を指定する。

 このウィザードでビジネス・オブジェクトとして指定したAmazonWebServiceクラスの内容に関しては特に解説しないが、このクラスが持つメソッドとプロパティだけ、簡単に示しておこう。パラメータに与えられたキーワードに基づきAmazon.co.jp内の書籍を検索するFind(string keyword)メソッド(戻り値:List<AmazonService>型)と、検索した書籍に関するプロパティ(表2参照)を公開している。

プロパティ 概要
Asin Asin
Url Amazon.co.jp上のURL
Author 著者
Title タイトル
Manufacturer 出版社
FormattedPrice 価格
ImageUrl 表紙のURL
表2 AmazonWebServiceクラスが公開するプロパティ

 詳細なコードを確認したい方は、下記のリンク先からダウンロードしてほしい。

(5)テンプレートの編集

 ListViewコントロールのテンプレートをリスト1のように編集して、スタイルを整えれば、スマートフォン用のWebページは完成だ。

<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
  <LayoutTemplate>
    <ul ID="itemPlaceholderContainer" runat="server" class="SearchItem">
      <li runat="server" id="itemPlaceholder" />
    </ul>
  </LayoutTemplate>
  <ItemTemplate>
    <li>
      <img src="<%# Eval("ImageUrl") %>" alt="" style="float:left" />
      <div>
        <a href="<%# Eval("Url") %>"><%# Eval("Title") %></a><br />
        <%# Eval("FormattedPrice") %><br />
        <%# Eval("Manufacturer") %><br />
        <%# Eval("Author") %>
      </div>
    </li>
  </ItemTemplate>
</asp:ListView>
リスト1 ListViewのテンプレートの修正(Default.aspx)

(6)実行結果の確認

 実行すると、図7のような画面が表示される。このサンプル・アプリでは、テキストボックスにキーワードを入力すると、Ajaxの非同期通信を利用してAmazon.co.jpのWebサービスから得た書籍の検索結果を、リストに表示している。

図7 C1 iPhoneを利用したWebフォームによるWebアプリの実行結果

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


 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 記事ランキング

本日 月間