Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

jQueryを利用した軽量・高機能なクライアントサイド実装!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/07/12 14:00

 本記事では、NetAdvantage for jQueryを利用した高機能で軽量なクライアントサイド実装について解説します。データアクセステクノロジから、高機能なグリッドについて紹介します。

はじめに

 Webアプリケーション開発において、クライアントサイド開発はますます重要な位置を占めるようになっています。クライアントサイド開発ではjQueryとそのプラグインが使われることも増えてきました。そのほとんどが簡単に利用できますが、オープンソースプロダクトのため、以下の課題が残り続けます。

  • 動作保証がされない部分がある
  • 公式のドキュメントは(大部分が)英語
  • 基本的ににサポートはない(バグを報告しても、フィックスされるのが次のバージョンアップ時など)

 Infragistics社が提供しているNetAdvantage for jQueryはjQueryとjQuery UIの上で動作する高機能なコンポーネントセットですが、高機能なコンポーネントの提供以外に、プラスアルファとして上記の課題を払拭できます。

  • 動作保証がされている
  • ドキュメントは日本語化されている
  • 責任あるサポート(バグ報告時にフィックスされる事もある)

 この差は有償のコンポーネントだからこそ実現できている部分です。業務アプリケーションでは開発生産性の高さ以外にも、これらサポートを重視する傾向が強いため、NetAdvantage for jQueryは業務アプリケーションのシナリオに置いて確実にニーズがあるコンポーネント群といえます。

Infragistics社のサポートについて

 Infragistics社は、NetAdvantageをサブスクリプション形式でライセンス販売しています。サブスクリプション契約者は購入時から一年以内にリリースされる新バージョンへのアップグレード権と、製品のソースコードのダウンロード権、更には無制限の技術サポートが得られます。

 なお、ヘルプには既知の問題点やパフォーマンス改善のためのTipsが掲載されています。実際に利用する際にはこちらの情報もチェックしておきましょう。

 本稿では特にクライアントサイドで利用できるデータソースigDataSourceと、高機能なグリッドを簡単に実装できるigGridの機能にフォーカスを当てて解説します。

必要な環境

 次の環境が必要です。

  • Visual Studio 2010(Visual Web Developer 2010でもOK)
  • NetAdvantage for jQuery

 Visual Studio 2010(以下、VS 2010)のインストールは、Visual Studio 2010 Beta 2と変わりありませんので、「Visual Studio 2010 Beta 2を使ってみよう」を参考に行ってください。

 NetAdvantage for jQueryはこちらからサンプルダウンロードできます。インストールはウィザードに従って進めるだけです(トライアル版ではminサイズのファイルしかありません)。

NetAdvantage for jQueryの利用方法

 NetAdvantage for jQueryを使用する場合、jQuery、jQuery UIは必須です。そして、NetAdvantage for jQueryではそれぞれ以下のバージョンでの使用を推奨しています。

  • jQuery 1.4.4
  • jQuery UI 1.8.11以上

 以下の場所にスクリプトファイルは格納されています。

  • 64bit OSの場合:C:\Program Files (x86)\Infragistics\NetAdvantage 2011.1\jQuery\js\combined
  • 32bit OSの場合:C:\Program Files\Infragistics\NetAdvantage 2011.1\jQuery\js\combined

 格納されているスクリプトファイルは以下の通りです。

  • ig.ui.editors.min.js
  • ig.ui.grid.min.js
  • ig.ui.min.js
  • ig.ui.upload.min.js
  • ig.ui.videoplayer.min.js

 利用方法は通常のスクリプトファイルと同様です。

NetAdvantage for jQueryの利用例
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/ig.ui.min.js" type="text/javascript"></script>

 ファイル名からわかると思いますが、必要に応じて対応するスクリプトファイルを追加することで、各コンポーネントを利用できます。

 CSSファイルは以下の場所に格納されています。

  • 64bit OSの場合:C:\Program Files (x86)\Infragistics\NetAdvantage 2011.1\jQuery\themes
  • 32bit OSの場合:C:\Program Files\Infragistics\NetAdvantage 2011.1\jQuery\themes

 必要に応じてCSSファイルも利用してください。

NetAdvantage for jQueryの全体像

 NetAdvantage for jQueryはjQueryとjQuery UIを利用して作られたコンポーネント製品です。つまり、サーバーサイドのテクノロジには影響されずに利用ができます。ただし、他のNetAdvantage製品同様に.NETテクノロジにある程度の親和性はあり、DLLを参照追加することで、ASP.NET MVC対応のヘルパーとして各コンポーネント製品を扱うこともできます。

 NetAdvantage for jQueryで提供するコンポーネントは以下のとおりです。

NetAdvantage for jQueryが提供しているコンポーネント一覧
コンポーネント名 機能 ASP.NET MVCのヘルパーサポート
igDataSource 様々なデータソースを扱うコンポーネント ×
igDatePicker ドロップダウン型のカレンダー付の入力コンポーネント
igUpload ファイルアップロードコンポーネント
igRating 評価に使うレーティングコンポーネント
igGrid 高機能なグリッドコンポーネント
igVideoPlayer HTML5を使用したビデオプレーヤーコンポーネント
igCurrencyEditor 様々な通貨に対応した入力値制御もできるエディターコンポーネント
igDateEditor 日付エディターコンポーネント
igMaskEditor 指定された入力マスクエディターコンポーネント
igNumericEditor 指定した範囲の数値のみ受け付けるエディターコンポーネント
igPercentEditor パーセントの数値のみ受け付けるエディターコンポーネント
igTextEditor ウォーターマーク付きのテキストエディターコンポーネント

 各種機能の動作サンプルがこちらで確認できます。リンク先から高機能グリッドを表示させた例は図1になります。

図1 igGridの動作サンプル例
図1 igGridの動作サンプル例

 冒頭でも記載しましたが、NetAdvantage for jQueryが真価を発揮するのはズバリ、データソース(igDatasource)とグリッド(igGrid)の2つです。サーバーサイドテクノロジを使用したデータソースやグリッドは、サーバーサイドでソーティングやページング、フィルタリングを実施することがほとんどです。NetAdvantage for jQueryのデータソースとグリッドはクライアントサイドで全てを実現できるため、サーバーサイドでの処理による待ち時間が発生せず、軽快でありながら高機能なデータ表示が実現できます。

 それでは、実際にデータソースとグリッドを使用してみましょう。

クライアントサイドでデータ管理するigDataSourceと高機能なグリッドigGrid

 igDataSourceは、igGridコントロールなどのデータバインドコントロールとデータソースの間で動作するコンポーネントです。igDataSourceがサポートするソースは、以下のとおりです。

  • Webサービス全般(oData、WCFなど)
  • ローカルデータ(JSON、XML、HTMLテーブル、JavaScript配列など)
  • 関数の戻り値

 igGridはigDataSourceなどのデータソースをもとに仮想化やページング、ソートや、フィルター機能をクライアントサイドで実現する高機能で軽快に動作するグリッドコンポーネントです。それぞれのコンポーネントの関係は図2のようになります。

図2 igDataSourceとigGrid
図2 igDataSourceとigGrid

 なお、igDataSourceとigGridを使用することで、図3~6のようなグリッドが簡単に作成できます。

図3 igDataSourceとigGrid実行直後
図3 igDataSourceとigGrid実行直後

 フィルターの方法も、ドロップダウンから選択できます(図4)。

図4 igDataSourceとigGrid
図4 igDataSourceとigGrid

 値を入力することでフィルター結果がすぐに反映されます(図5)。

図5 igDataSourceとigGrid
図5 igDataSourceとigGrid

 行選択やページング機能も、すべてクライアントサイドで動作します(図6)。

図6 igDataSourceとigGrid
図6 igDataSourceとigGrid

 データは、oDataとして提供されているアメリカのオンラインDVDレンタル会社Netflixのデータを使用しています。

 それでは、サンプル作成について解説します。コードは以下の通りです。

igDataSourceとigGridによるサンプル例(igDataSource&igGrid.htm)
<!-- (1)CSSとJavaScriptの参照 -->
<link type="text/css" href="jquery.ui.custom.min.css" rel="stylesheet" />
<link type="text/css" href="ig.ui.min.css" rel="stylesheet" /> 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" ></script> 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>  
<script type="text/javascript" src="jquery.tmpl.js" ></script>
<script type="text/javascript" src="ig.ui.min.js" ></script>
<script type="text/javascript">
    
    var ds,
        oDataSchema,
        url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?&$top=500",

    // (2)データスキーマの作成
    oDataSchema = new $.ig.DataSchema("json", { fields: [
        { name: "Name" },
        { name: "ReleaseYear" },
        { name: "Synopsis"}],
        searchField: "d"
    });

    // (3)データソースのオブジェクト生成
    ds = new $.ig.DataSource({ type: "remoteUrl", dataSource: url, schema: oDataSchema, responseDataKey: "d", responseDataType: "jsonp" }).dataBind();

    $(function(){
        // (4)各種設定やデータソースを設定し、#iggridにグリッドを生成
        $("#iggrid").igGrid({
            caption : '映画タイトルと概要',
            columns: [
                { headerText: "映画タイトル", key: "Name", width:"200px" },
                { headerText: "公開年", key: "ReleaseYear", width:"70px" },
                { headerText: "映画のあらすじ", key: "Synopsis", width:"700px" },
            ],
            virtualization: true,
            autoGenerateColumns: false,
            dataSource: ds,
            scrollbars: true,
            height: '400px',
            features: [
                {
                    name: 'Paging',
                    type: 'local',
                    pageSize: 50
                },
                {
                    name: 'Sorting'
                },
                {
                    name: 'Selection'
                },
                {
                    name: 'Filtering',
                }
            ]
            });
    });
</script>
</head>
<body>
<h1>igDataSource & igGridサンプル</h1>
<div class="sampleContents">
<table id="iggrid">
</table>

 順に解説します。

(1)CSSとJavaScriptの参照

 「必要な環境」で記載した場所にスクリプトファイルやCSSファイルがあるので、それらをサンプルファイルのフォルダ上に展開し、HTMLページからインポートします。

(2)データスキーマの作成

 DataSchemaクラスでまず、元のデータからどの部分のどの情報を取得するかというスキーマを定義しておきます。今回は、取得するoDataのデータから名前、公開年、概要に絞ってスキーマを作成します。DataSchemaクラスの第1パラメータにスキーマの型を、第2パラメータのフィールドにデータフィールド名を、それぞれ指定します(例:{name: "データフィールド名"})。

 第3パラメータには、データを取得するためのパスを指定します。サンプルでもそうですが、oDataやWCFの場合、JSONで値を取得すると、dがフィールド値となります。実際にoDataを取得した例が図7です。一番最初にdが記載されていることが確認できます。

図7 oDataのデータ取得例
図7 oDataのデータ取得例

(3)データソースのオブジェクト生成

 igDataSourceのDataSourceクラスはデータソースからデータを取得するのに利用します。一般的な構文は、以下のとおりです。

$.ig.igDataSourceメソッドの構文
var ds = new $.ig.DataSource({ オプション名: 値, ... }).dataBind();

 $.ig.DataSourceメソッドには、以下のようなオプションを指定できます。

igDataSourceの主なオプション(*は必須)
オプション 概要
type* データソースの型
dataSource* データソースオブジェクト
callback データ取得時に実行されるコールバック関数
schema データのスキーマを指定(DataSchemaクラス)
responseDataKey データレコードのパスを指定

 今回のサンプルでは、外部のoDataからデータを取得するので、typeオプションにremoteUrlを、データソースはoDataのURLを、スキーマには(2)で設定したスキーマを指定しています。パラメータの設定後、dataBindメソッドを呼び出すことで、データが取り込まれます。

 ここまでがigDataSourceを利用したデータ管理の部分です。以降はigGridの機能です。

(4)各種設定やデータソースを設定し、#iggridにグリッドを生成

 igGridメソッドは高機能なグリッドを生成します。一般的な構文は、以下のとおりです。

igGridメソッドの構文
$("Gridを格納するテーブル要素").igGrid({ オプション名: 値, ....});

 以下は、igGridメソッドで利用できるオプションです。

igGridで使用率の高いオプション(*は必須)
オプション 概要
caption グリッドのタイトル
columns* 列に関する情報をオブジェクト配列で指定(headerText:ヘッダーの表示名、key:表示する列名など)
dataSource* データソースオブジェクトを指定
scrollbars スクロールバー表示の有無を指定(bool型)
virtualization 仮想化機能の利用の有無を指定(bool型)
height 高さを指定。virtualizationを使用する場合は必須項目
features ページング、ソート、セレクションなど、グリッドに持たせたい機能を個別に指定

 今回の例では、id="iggrid"であるテーブルに対して、igGridメソッドを適用し、グリッドを生成しています。columnsオプションでグリッド列のヘッダーテキストと表示データ、列幅をそれぞれ指定しています。

 dataSourceオプションには直接、WCFやJSONなどのデータソースを指定することもできます。この場合、スキーマ定義が別途必要です。今回はigDataSourceでスキーマ定義などを実施しているため、データソースオブジェクトとしてigDataSourceオブジェクトを指定するだけでOKです。

 featuresオプションでは、その他のグリッド機能を定義します。1つめはページング(Paging)機能です。nameで、ページング機能を有効化し、pageSizeで1ページ辺りに表示するレコードを指定しています。typeは、ページングの処理をクライアントサイドで実行することを表しています(他にはremoteurlがありますが、サーバーに要求を送信する分、パフォーマンスは劣化します)。また、ソーティング(Sorting)、行選択(Selection)、フィルタリング(Filtering)を有効化します。

 igDataSourceとigGridの基本的な使い方は以上です。実行すると図2~6の動作を確認できます。

[参考]仮想化テクノロジーの活用

 NetAdvantage for jQueryでは、膨大な量のデータを読み込む際に、画面に表示されている部分のオブジェクトのみを生成する「仮想化」テクノロジーが多く使われています。igGridでは、virtualizationオプションをtrueにすることで、グリッドで表示されている部分のみ描画される仮想化機能が使用できます。

 仮想化機能を利用すると、レコードの分だけDOMを生成するのではなく、既存のDOM要素を再利用するため、メモリやCPUのパフォーマンスが改善されます(図8)。

 

図8 virtualization有効時と無効時のDOMの違い
図8 virtualization有効時と無効時のDOMの違い

 virtualizationオプションではheightオプションの指定が必須です。そして、heightの値により一度に表示される値の量が変わるため、パフォーマンスが変動します。多くの値をが表示するようにした場合には、僅かではありますが、パフォーマンスに影響が出る可能性がありますので注意してください。

まとめ

 今回はjQueryの拡張コンポーネントNetAdvantage for jQueryの中でも目玉と言えるigDataSourceとigGridにフォーカスを当てて解説しました。サンプルソースから、非常に少ない手間で、高機能なコンポーネントの利用ができることが確認いただけたのではないでしょうか。また、今回は触れていませんが、ほとんどのコンポーネントがASP.NET MVCのヘルパーとして利用できます。プロジェクトで採用する場合はヘルパーの利用も検討してみるといいでしょう。

 業務アプリケーション開発や掲示板やフォーラムの一覧表示などでグリッドはまだまだ需要があるコンポーネントです。軽量で高速、かつ高機能なコンポーネントを利用したい場合はNetAdvantage for jQueryを利用してみてはいかがでしょうか。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5