連載:改造WebアプリケーションUIビフォー/アフター

第3回 jQueryにより操作性と見栄えが格段に向上

葛西秋雄
2010/04/16
Page1 Page2 Page3

はじめに

 前回では、jQueryおよびjQuery UIの使い方を解説しました。最終回となる今回では、jQueryのAPIとjQuery UIのプラグインを利用して、第1回で作成した「ITブック」のUIを改善します。

 本稿を読み進める前に、改善後の「ITブック」のライブ・デモ(http://asp35.com/ITafterUI/)を用意しましたので、事前にご覧いただくことをお勧めします。

 以下は、「ITブック」の特徴的なUIの例です。


図1 改善後の「ITブック」の実行時画面


図2 拡大鏡(ルーペ)アイコンをクリックしてカバーを拡大表示


図3 ショッピング・カートにアイテムをドラッグ&ドロップ


図4 ドロップダウンリストによりテーマを変更

 以下では改善後の「ITブック」の実装について、各層ごとに解説していきます。

 なお、今回で作成している改善後の「ITブック」のソース・コードを以下のリンクからダウンロードできます(C#版とVB版の両方が含まれています)。本稿内で示しているコードはここから抜粋したものです。

ITブックのプロジェクト

「ITブック」の改善後のシステム構成

 改善後の「ITブック」も、プレゼンテーション層、ビジネスロジック層、データアクセス層の3階層から構成されます。

 プレゼンテーション層では、ASP.NETのWebフォームにListViewコントロールを配置して商品リストとショッピング・カートを同時に表示します。ビジネスロジック層では、ProductManagerクラスのメソッドを利用してデータアクセス層に商品データをリクエストする処理を行います。データアクセス層では、ProductManagerDBクラスのメソッドを利用してデータベースを操作する処理を行います。

 第1回と同様、今回もデータベースの代わりに便宜的にXMLファイルを使用します。Books.xmlファイルには書籍データがXML形式で格納されています。


図5 「ITブック」の改善後のシステム構成

データアクセス層

 「ITブック」のデータアクセス層は、ProductManagerDBクラスから構成されます。Productは、商品データを格納するエンティティ・クラスです。


図6 データアクセス層に登録されているクラスとメソッド/プロパティ

 ProductManagerDBクラスのGetProductListメソッド(リスト1)は、App_Dataフォルダに格納されているXMLファイル(Books.xml)からすべての商品データを取得してProductクラスに格納してコレクションを返します。

 GetProductListメソッドでは、Books.xmlファイルをDataSetオブジェクトのReadXmlメソッドで読み込みます。そして、DataSetのTablesコレクションからDataTableを生成します。DataTableは、CacheオブジェクトのInsertメソッドにより、Webサーバのメモリ上に20分間キャッシュされます。

 DataTableのRowsコレクションからDataRowを取得したらProductのインスタンスを生成して商品データを格納します。生成したProductはListコレクションに追加します。RowsコレクションからすべてのDataRowを取得したらListコレクションを返します。

Public Shared Function GetProductList() As List(Of Product)

  Dim clsProductList As List(Of Product) = New List(Of Product)
  Dim clsProduct As Product
  Dim ds As New DataSet()
  Dim dt As DataTable

  ' DataTableがキャッシュされているか?
  If HttpContext.Current.Cache(productList) IsNot Nothing Then
    ' キャッシュからDataTableを生成する
    dt = CType(HttpContext.Current.Cache(productList), DataTable)
  Else
    ' Books.xmlファイルを読み込んでDataTableに格納する
    ds.ReadXml( _
      HttpContext.Current.Server.MapPath("~\App_Data\books.xml"))
    dt = ds.Tables(0)
    ' DataTableをキャッシュする
    HttpContext.Current.Cache.Insert( _
      productList, dt, Nothing, _
      DateTime.Now.AddMinutes(20), TimeSpan.Zero)
  End If

  ' DataTableのRowsコレクションからDataRowを取得して
  ' Productクラスに格納する
  For Each dr As DataRow In dt.Rows
    clsProduct = New Product
    clsProduct.ID = dr("id")
    clsProduct.Header = dr("header")
    clsProduct.Title = dr("title")
    clsProduct.Abstract = dr("abstract")
    clsProduct.Price = dr("price")
    clsProduct.LargeImage = dr("largeimage")
    clsProduct.SmallImage = dr("smallimage")
    clsProductList.Add(clsProduct)
  Next
  ' Listコレクションを返す
  Return clsProductList
End Function
public static List<Product> GetProductList()
{
  List<Product> clsProductList = new List<Product>();
  Product clsProduct = default(Product);
  DataSet ds = new DataSet();
  DataTable dt = default(DataTable);

  // DataTableがキャッシュされているか?
  if (HttpContext.Current.Cache[productList] != null)
  {
    // キャッシュからDataTableを生成する
    dt = (DataTable)HttpContext.Current.Cache[productList];
  }
  else
  {
     // Books.xmlファイルを読み込んでDataTableに格納する
    ds.ReadXml(
      HttpContext.Current.Server.MapPath("~\App_Data\\books.xml"));
    dt = ds.Tables[0];

    // DataTableをキャッシュする
    HttpContext.Current.Cache.Insert(
      productList, dt, null,
      DateTime.Now.AddMinutes(20), TimeSpan.Zero);
  }
  // DataTableのRowsコレクションからDataRowを取得して
  // Productクラスに格納する
  foreach (DataRow dr in dt.Rows)
  {
    clsProduct = new Product();
    clsProduct.ID = int.Parse(dr["id"].ToString());
    clsProduct.Header = dr["header"].ToString();
    clsProduct.Title = dr["title"].ToString();
    clsProduct.Abstract = dr["abstract"].ToString();
    clsProduct.Price = decimal.Parse(dr["price"].ToString());
    clsProduct.LargeImage = dr["largeimage"].ToString();
    clsProduct.SmallImage = dr["smallimage"].ToString();
    clsProductList.Add(clsProduct);
  }
  // Listコレクションを返す
  return clsProductList;
}
リスト1 ProductManagerDBクラスのGetProductListメソッド(上:VB、下:C#)

 なお、Books.xmlファイルには、次のような書籍データが格納されています。<id>要素には書籍のID、<title>要素には書籍のタイトル、<abstract>要素には書籍の概要、<price>要素には書籍の定価が定義されています。<largeimage>/<smallimage>要素には、書籍カバーのフルサイズとサムネイルのパスが定義されています。

<?xml version="1.0" encoding="utf-8" ?>
<books>
  <book>
    <id>1</id>
    <header>jQuery UI</header>
    <title>jQuery UI + 厳選プラグイン41</title>
    <abstract>リッチWebを手軽に実現する!・・・</abstract>
    <price>2800</price>
    <largeimage>jQueryUI700.png</largeimage>
    <smallimage>jQueryUI120.png</smallimage>
  </book>
</books>
Books.xmlファイル内のデータ例

ビジネスロジック層

 ビジネスロジック層は、ProductManagerクラスから構成されます。


図7 ビジネスロジック層に登録されているクラスとメソッド/プロパティ

 ProductManagerクラスのGetProductListメソッド(リスト2)は、データアクセス層のProductManagerDB.GetProductListメソッドを呼び出して商品データを要求します。

<ComponentModel.DataObjectMethodAttribute( _
  ComponentModel.DataObjectMethodType.Select, True)> _
Public Shared Function GetProductList() As List(Of Product)
    Return ProductManagerDB.GetProductList()
End Function
[System.ComponentModel.DataObjectMethodAttribute(
  System.ComponentModel.DataObjectMethodType.Select, true)]
public static List<Product> GetProductList()
{
  return ProductManagerDB.GetProductList();
}
リスト2 ProductManagerクラスのGetProductListメソッド(上:VB、下:C#)


 INDEX
  改造WebアプリケーションUIビフォー/アフター
  第3回 jQueryにより操作性と見栄えが格段に向上
  1.「ITブック」の改善後のシステム構成/データアクセス層/ビジネスロジック層
    2.プレゼンテーション層/商品にズームイン
    3.カートに入れる/ドラッグ&ドロップ/ドラッグ&リサイズ/テーマの切り替え

インデックス・ページヘ  「改造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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

業務アプリInsider 記事ランキング

本日 月間
ソリューションFLASH