jQueryを利用したコンポーネントで軽量かつ高機能なWebアプリづくりを！

2011/10/28 14:00

ポスト

　本記事では、NetAdvantage for jQueryを利用した高機能で軽量なクライアントサイド実装について解説します。入力補助となるエディタ機能や、HTML5対応もされているレーティングやビデオ機能についても解説します。

ポスト

はじめに

　NetAdvantage for jQueryは、jQueryとjQuery UIの上で動作する高機能なコンポーネントセットです。高機能なグリッド表を生成するigGridをはじめ、特定の値入力に特化したEditorsコンポーネント、動画配信に対応したigVideoPlayerなどのコンポーネントが用意されています。

　NetAdvantage for jQueryはあくまでクライアントサイドのコンポーネントのため、サーバーサイドの実装を意識することなく利用できるのが特長です。また、ASP.NET MVCの親和性にも優れており、専用のHTMLヘルパーを利用することで、簡単に利用できます。

　NetAdvantage for jQueryの概要や、igGridの利用方法については、前回の記事でも扱っていますので、併せて参照してください。

必要な環境

　次の環境が必要です。

NetAdvantage for jQuery

　NetAdvantage for jQueryはこちらからサンプルダウンロードできます。インストールはウィザードに従って進めるだけです（トライアル版ではminサイズのファイルしかありません）。NetAdvantage for jQueryの利用方法については前回の記事を参照してください。

高機能な入力サポートEditorsコンポーネント

　NetAdvantage for jQueryには、多くのEditorsコンポーネントが存在します。

NetAdvantage for jQueryが提供している主なEditorsコンポーネント

コンポーネント名	機能
igCurrencyEditor	様々な通貨に対応し、入力値の制御もできる入力コンポーネント
igDateEditor	日付入力コンポーネント
igDatePicker	カレンダー付きの日付入力コンポーネント
igMaskEditor	指定された入力マスクエディターコンポーネント
igNumericEditor	指定した範囲の数値のみ受け付ける入力コンポーネント
igPercentEditor	パーセントの数値のみ受け付ける入力コンポーネント
igTextEditor	1行から複数行までの書式設定可能なテキスト入力コンポーネント

　Editorsコンポーネントでは、それぞれ用途に応じて入力できる数値や文字列を制限し、また、入力値の検証機能を提供しています。また、ローカライズもされているので、日付や通貨の表記も意識する必要がありません。

　いずれのコンポーネントも、オプションこそ異なりますが、同じ構文で利用できます。XXXの部分は、Editorsコンポーネントの名前を表します。また、すべてのEditorsコンポーネントはASP.NET MVCのHTMLヘルパーを提供しています。

Editorsコンポーネントのメソッドの構文

$(セレクタ).igXXXEditor({ オプション名: 値, ... });

　それでは、具体的な例を見ていきましょう。

オプションなしでも利用できるEditorsコンポーネント

　高機能でシンプルに利用できるNetAdvantage for jQueryの中でも、特に簡単に利用できるEditorコンポーネントが、igCurrencyEditor（通貨入力）とigPercentEditor（パーセント入力）です。これらのメソッドは、オプションなどを指定することなく、メソッドのコールだけで実行できます。

igCurrencyEditorsとigPercentEditorコンポーネントの利用例（igEditorsSample.htm）

<input id="currencyEditor" type="text" value="145000" />
<input id="percentEditor" type="text" value="31.1"/>
<script type="text/javascript">
    $('#currencyEditor').igCurrencyEditor();
    $('#percentEditor').igPercentEditor();
</script>

　実行結果は図1のとおりです。

図1 通貨入力ボックスとパーセント値入力ボックス

　テキストボックスには数値以外の文字列や記号は入力できないため、誤ったデータが挿入されることはありません（IMEが有効の場合は記号やひらがななどの文字列を入力できますが、フォーカスが外れた段階で数値以外の入力データは消失します）。また、nullTextオプションを利用することで、フィールドが空の場合に表示させるウォーターマーク（透かし文字）を指定することも可能です。

nullTextオプションの指定例（igEditorsSample.htm）

$('#currencyEditor').igCurrencyEditor({ nullText: '貯金額を入力してください。' });

$('#percentEditor').igPercentEditor({ nullText: '出席率を入力してください。' });

　nullTextオプションは、基本的にすべてのEditorsコントロールで使用できます（図2）。

図2 未入力の際にウォーターマークを表示

日付入力を支援するigDateEditorとigDatePicker

　日付入力に関するEditorsコンポーネントには、igDateEditorとigDatePickerがあります。まずは実際の実行結果を見てみましょう。

　図3は、実行直後の画面です。

図3 日付入力ボックスの実行結果

　図4のように、スピンボタンをクリックすることで、日付を1日ずつ変化させることもできます。

図4 アップダウンボタンで前後の日付に変更

　図5は、［▽］ボタンをクリックしてポップアップカレンダーを表示させている例です。

図5 ポップアップカレンダーで日付を選択

　igDatePickerは基本的に月単位での表示切り替えとなるので、少し前の時期や近い将来など実際のスケジュールと照らし合わせて入力して欲しい場合に利用すると良いでしょう。生年月日など数年以上前の情報などを入力させる場合には、直接数値を入力できるigDateEditorを利用してください。

　こちらのコンポーネントでは、数値以外の値や、2011年13月41日のように実在しない日付を入力することができませんので、値検証をほとんど意識しなくても良いというメリットがあります。実際のコードは、以下のとおりです。

igDateEditorとigDatePickerコンポーネントの利用例（igEditorsSample.htm）

<input id="dateEditor" type="text" />
<input id="datePicker" type="text" />

<script type="text/javascript">
    $('#dateEditor').igDateEditor({
        button: 'spin',
        dateInputFormat: 'dateLong',
        minValue: new Date(1900, 0, 1),
        maxValue: new Date(2011, 11, 31),
        width: 195,
        nullText: '生年月日を入力してください。'
    });

    $('#datePicker').igDatePicker({
        dropDownTriggers: 'button',
        dateInputFormat: 'dateLong',
        minValue: new Date(2011,8,1),
        maxValue: new Date(2011,10,31),
        width: 195,
        nullText: '今日の日付を入力してください。'
    });
</script>

　それぞれのinput要素に対して、igDateEditor／igDatePickerメソッドで日付入力機能を付加しています。それぞれのメソッドで共通で利用できるオプションは、以下のとおりです。

igDateEditorのオプションの一部

オプション	概要
button	ボタンを入力補助として使用する場合、spinを指定
dateInputFormat	日付入力のフォーマットを指定
minValue	入力できる最も過去の日付を指定
maxValue	入力できる最も未来の日付を指定
width	幅を指定
nullText	入力前のウォーターマークテキストを指定

　igDatePickerメソッドもigDateEditorメソッドとほぼ同様のオプションが使用できます。

　その他、今回のサンプルではigDatePickerメソッドでdropDownTriggersオプションを使用しています。dropDownTriggersオプションはポップアップカレンダーを表示するトリガーを表します。サンプルではbutton値を指定していますので、ボタンクリック時にカレンダーを表示しますが、focus値を指定することで、テキストボックスにフォーカスを移動した時にカレンダーを表示させることもできます。

HTML5対応のコンポーネントをjQueryで利用

　前項で紹介したEditorsコンポーネントは、旧来のHTML4のinputタグをjQueryで機能拡張するものでしたが、以降で紹介するコンポーネントはHTML5に対応しています。作成するWebアプリケーションに、新しいインタラクションを盛り込んでくれるでしょう。

igVideoPlayerによるFlashレスでのビデオ実装

　igVideoPlayerは、FlashやSilverlightなどのアドインがなくともビデオ配信を実現できるコンポーネントです。内部的にはHTML5のvideoタグを使用していますが、オプションを指定することで、通常のvideo要素では実現できないような高機能な処理を実装できます。

　なお、HTML5のvideoタグは、次表のとおり、現在リリースされている主要ブラウザではほとんど実装済みです。

主要ブラウザにおけるvideoタグの実装状況

ブラウザ	対応バージョン
Internet Explorer	9以降
Firefox	3.6以降
Chrome	8以降
Safari	5以降
Opera	11.0以降

　videoタグを実装していないブラウザでアクセスした場合は、FlashやSilverlightを表示させることもできます。記述例は以下のとおりです。

videoタグ未実装の場合のFlash動画への切り替え例

$("#videoPlayer").bind({
   igvideoplayerbrowsernotsupported: function (sender, eventArgs) {
       $("#flashPlayer").css("display", "block");
       $("#videoPlayer").css("display", "none");
       eventArgs.cancel = true;
   }
});

　videoタグ未実装のブラウザの場合、browsernotsupportedイベントが発生し、FlashPlayerの要素を表示させ、igVideoPlayerを非表示にさせています。

　既定の処理では、図6のような画面が表示されます。このように、videoタグ実装のブラウザでアクセスするようにユーザーに促し、アイコンをクリックすることで各ブラウザのダウンロードページへ遷移できるわけです。

図6 HTML5未実装のブラウザでアクセスした場合

　特長を理解できたところで、具体的なサンプルを見ていきましょう。

igVideoPlayerコンポーネントの利用例（igVideoPlayer.htm）

<div id="videoPlayer" ></div>

<script type="text/javascript">
    $(function () {
        $('#videoPlayer').igVideoPlayer({
            height: '300px',
            width: '400px',
            title: 'うさぎ動画',
            sources: [ 'http://dl.infragistics.com/pg/2011-1/web/shared/videoplayer/videos/big_buck_bunny.mp4' ],
            autoplay: 'true',
            volume: '0.7',
            bookmarks: [{title:'うさぎ登場', time: 25},{title: 'うさぎのめざめ',time: 40 }],
            loop: 'true'
        });
    });
</script>

　実行結果は、以下の通りです。

図7 igVideoPlayerコンポーネントの実行結果

図8 チャプター機能で指定の時間に移動もできる

図9 画面右下の拡大ボタンで映像を拡大

　igVideoPlayerメソッドで指定しているオプションの意味は、以下の通りです。

igVideoPlayerの主なオプション

オプション	概要
height	videoタグの高さを指定
width	videoタグの幅を指定
title	動画のタイトルを指定
sources	動画のソースとなるURLを配列で記載。コーデックなどを考慮して複数指定も可
autoplay	ページアクセス時に自動再生するかどうかをbool型で指定。既定はfalse
volume	再生時の既定の音量を0.0～1.0の間で指定
bookmarks	チャプターを使用する場合に指定タイトルと秒数を配列で指定
loop	終了時にループ再生するかどうかbool型で指定。既定はfalse

　今回はあくまでお手軽に動画配信ができるという部分にフォーカスを当てていますが、商業用での用途も考慮した設計になっており、動画内にバナーを挿し込んだり、動画の中で特定のタイミングで別のコマーシャル動画などを挿し込んだりといった処理も、オプションの指定だけで実現できます。

igRatingによるHTML5時代のレーティング

　igRatingは、整数だけでなく0.5ずつや小数点以下までも表現できるレーティング用のコンポーネントです。HTML5のAudioタグやCSS3のグラデーション機能などを使用して、評価時の効果音の指定や、きめ細やかなレーティングを実現できます。

　早速、具体的なコードを見ていきましょう。

igRatingコンポーネントの利用例（igRating.htm）

<div id="igRating"></div>

<script type="text/javascript">
    $("#igRating").igRating({
        voteCount: 5,
        value: 0.5,
        precision: "exact"
    });
</script>

　実行結果は、以下の通りです。

図10 igRatingコンポーネントの実行結果

　igRatingメソッドで指定しているオプションの意味は、以下の通りです。今回は、レーティングの最大値を5に、既定値を5の半分の2.5に、レーティングはマウスで選択した位置までという指定をしています。

igRatingのオプションの一部

オプション	概要
voteCount	レーティングの最大値を指定
value	0.0～1.0で初期値を指定
precision	レーティングの精度を1単位ずつ（whole）か、半分ずつ（half）か、マウスで選択した部分まで（exact）かを指定