.NETによるスマートフォンWeb UI開発ガイド【導入編】 Webフォーム vs. ASP.NET MVC 2011/04/18 |
|
|
■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」から始まる[アセンブリ名]のサーバ・コントロール項目すべてにチェックを入れ()、それらのサーバ・コントロールを[ツールボックス]に登録する。()
(2)ScriptManagerコントロールとC1ViewPortコントロールの追加
C1 iPhoneでは、ASP.NET AJAXの仕組みを利用するため、まずはScriptManagerコントロール(図4の)と、スマートフォン(iPhone)向けキャンパス(=デザイン領域)となるC1ViewPortコントロール()を[デザイン]ビューに追加し、そのコントロールの各種プロパティを設定してデザインを整える()。
図4 C1 iPhoneのiPhone向けキャンパス(=デザイン領域)を作成 | |||||||||
この例では、Webフォーム・デザイナ([デザイン]ビュー)にScriptManagerコントロールとC1ViewPortコントロールを追加して、iPhone向けキャンパス(=デザイン領域)を作成している。 | |||||||||
|
(3)検索用TextBoxと結果表示用ListViewの追加
さらに、iPhone向けキャンパス内に検索用のTextBoxコントロール(図5の)と、結果を表示するためのListViewコントロール()を追加し、さらにデータソースの設定を開始する()。
図5 C1 iPhoneのiPhone向けキャンパスへ各種サーバ・コントロールを追加 | |||||||||
この例では、Webフォーム・デザイナでiPhone向けキャンパスに、各種サーバ・コントロールを追加している。 | |||||||||
|
(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ページは完成だ。
|
|
リスト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開発ガイド【導入編】」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|