jQuery UI と Ajax を使用してカスタマイズ可能な Web インターフェースを作成する

Comments

今日の Web サイトは従来に比べるとカスタマイズ可能なものになっており、Web サイトに表示される内容をユーザーが変更し、自分の好みに合うようにパーソナライズすることができます。iGoogle、MyYahoo!、MyAOL など、パーソナライズ可能なホームページ (あるいはダッシュボード・ページ) は次第に一般的なものになっており、同様の機能が大半の Web アプリケーションに組み込まれるほどになっています。こうしたユーザーによるパーソナライズなどの複雑な操作は、jQuery ライブラリーを使用することにより、JavaScript で容易に作成できるようになります。jQuery UI を導入すれば、さらに容易に作成できるようになります。これは、jQuery ライブラリーではユーザーによる一般的な操作に対処する機能を利用しやすい jQuery プラグインの形で提供しているためです。

この記事では、Ajax と jQuery UI を使用して、高度なカスタマイズが可能でさまざまなカスタム機能を備えた UI を作成する方法について説明します。具体的には、Web ページのさまざまな側面をカスタマイズする方法と、Ajax を使用して設定内容を保存する方法、さらにはドラッグ・アンド・ドロップなどの手法を使用し、リスト項目の並べ替えや、ページ要素および UI ウィジェットの配置変更、テーマや配色の切り替えのすべてを 1 つの Web ページ内で行う方法について説明します。

カスタムの UI 機能を作成する

jQuery UI は UI ライブラリーであり、その中には作成の容易な対話動作、アニメーション、エフェクトの他、容易にカスタム・テーマを設定可能なウィジェットも含まれています。「参考文献」のリンクを辿って jQuery UI をダウンロードしてください。ダウンロード時に、そのダウンロードの内容を構成することもできます。そのためには、含めたいテーマや、具体的なコンポーネント (必須コンポーネントである UI Core (UI コア)、Interactions (インタラクション)、Widgets (ウィジェット)、Effects (エフェクト) など) を選択します。jQuery UI を使用するためには、最新バージョンの jQuery ライブラリーも必要です。jQuery ライブラリーは jQuery UI のダウンロードに含まれていますが、あとで更新が必要になった場合には、いつでも jQuery のサイトから最新のライブラリーを直接ダウンロードすることができます (「参考文献」のリンクを参照)。リスト 1 は jQuery UI ライブラリーやその他の必要なファイルを Web ページに含める方法を示しています。

リスト 1. jQuery UI コードを含む Web ページを作成する
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>
  Creating Customizable Web Interfaces with the jQuery UI and Ajax
  </title>
  <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
  rel="stylesheet" />
  <link type="text/css" href="css/custom.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
  </script>	
</head>
<body>
</body>
</html>

上記のコードでは、最初に読み込んでいる CSS ファイルによって、選択されたテーマ (「UI lightness」) のコードが提供されます。「UI lightness」は jQuery UI をダウンロードする際に選択されるデフォルトのテーマですが、これを別のテーマに変更することもできます。既に jQuery UI ライブラリーをダウンロードしてあり、使用しているテーマを変更したい場合には、ThemeRoller (「参考文献」を参照) にアクセスしてギャラリーに提供されているテーマを単にダウンロードするか、あるいはその用意されているテーマを独自のテーマにカスタマイズすることが可能です。2 番目に読み込んでいる CSS ファイルは、ページのスタイルを設定したり、選択したテーマで使用されている属性を変更したりするためのカスタム・クラス用のファイルです。最後に読み込んでいる 2 つの JavaScript ファイルは jQuery ライブラリーと jQuery UI ライブラリーのファイルです。

jQuery UI を使ってドラッグ・アンド・ドロップ・インターフェースを作成する

ドラッグ・アンド・ドロップ機能は、Web ページでも次第に一般的な機能になりつつあります。ドラッグ・アンド・ドロップ機能はリストのソートやページ要素の配置に使用されており、また多くの Web アプリケーションのパーソナル・ホームページによく使われています。jQuery UI の Sortable プラグインを利用すると、Web ページに簡単にソート機能を追加することができるだけでなく、ソート機能の操作を望みどおりにカスタマイズするためのオプションやイベントも数多く提供されます。

リスト 2 のサンプルは、Sortable プラグインを使って単純なソート可能リストを作成する方法を示しています。このプラグインを使用すると、単純な HTML リストをソート可能なドラッグ・アンド・ドロップ・リストにすることができますが、それにはこの HTML リストに単純に ID を追加します。ここでは ”sortable” という ID を付与しており、これによって jQuery で容易にこのリストを指定して、ソート関数 (sortable) の呼び出しを追加できるようにしています。また各リスト項目に "ui-state-default" という値のクラス属性を追加しており、選択されたテーマのスタイルがリスト項目にも適用されるようにしています。

リスト 2. jQuery UI の Sortable プラグインを使って単純なソート可能リストを作成する
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
	Creating Customizable Web Interfaces with the jQuery UI and Ajax
	</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
	rel="stylesheet" />
	<link type="text/css" href="css/custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
	</script>
    <script type="text/javascript">
        $(function(){
            $( "#sortable" ).sortable();
        });
    </script>	
</head>
<body>
	
    <h1>
	Creating Customizable Web Interfaces with the jQuery UI and Ajax
	</h1>
    
    <ul id="sortable">
        <li id="item1" class="ui-state-default">Item 1</li>
        <li id="item2" class="ui-state-default">Item 2</li>
        <li id="item3" class="ui-state-default">Item 3</li>
        <li id="item4" class="ui-state-default">Item 4</li>
        <li id="item5" class="ui-state-default">Item 5</li>
        <li id="item6" class="ui-state-default">Item 6</li>
        <li id="item7" class="ui-state-default">Item 7</li>
    </ul>
    
</body>
</html>

リストの項目の位置を保存したい場合には、その詳細をクッキーまたはデータベースに保存することで、後からページを適切に表示できるようにする必要があります。データベースを使用する場合には、Ajax を使って位置のデータをサーバー・サイド・スクリプトに送信し、そのスクリプトによってデータベースに値を書き込みます。その後、初めてページがロードされる際に、そのスクリプトは適切な位置情報を含む XML レスポンスまたは JSON レスポンスを返します。これにより、各要素が適切な場所に配置されます。リスト 3 のサンプル・コードはリストの項目の位置の値をサーバー・サイドの PHP スクリプトに送信する方法を示しています。

リスト 3. リストの項目の位置の値をサーバー・サイドのスクリプトに送信する
$( "#sortable" ).sortable({
  stop: function(event, ui) {
    $("#sortable li").each(
      function(index){
        $.ajax({
          type: 'POST',
          url: 'filename.php',
          data: 'method=updateposition&id='+$(this).attr('id'))+'&positions='+index,
          success: function(xml){
            // Success
          }
        });
       }
     );
   }
 });

ソート可能リストの項目の位置を保存するためには、いつ項目が保存されたかをイベントを使って判断する必要があります。ソートに関連するイベントはいくつもありますが、この場合には stop イベントが必要です。なぜなら、ソート可能な要素がすべてソートされた後にトリガーされるのは stop イベントのみだからです。この点は重要です。要素の位置を保存する前に、確実にすべての要素が新しい位置に配置されている必要があるからです。stop イベントがトリガーされたら、ループ処理によってリストの各項目のインデックスを取得し、続いて各項目の ID も取得し、それから Ajax を使ってインデックスと ID の両方の値を PHP ファイルに送信します。ソートされた結果は PHP ファイルによってデータベースに保存され、後でこのページに戻ったときに要素がソートされます。

また Sortable プラグインには、他にもカスタマイズ・オプションがたくさんあります。以下はその一部です。

  • プレースホルダー・クラスを定義し、ある項目がドラッグされたときのプレースホルダー要素の表示スタイルを設定することができます。
  • リストを結合し、同じ Web ページ上の別のソート可能リストに要素をドロップすることができます。
  • グリッド内でソート可能な要素を表示したり、制限したりすることができます。
  • 複数列のインターフェースを作成し、要素を複数の列間でドラッグおよびソートすることができます。

リスト 4 の例は、ドラッグ・アンド・ドロップ要素を持つ 3 列のインターフェースを作成する方法を示しています。これらの列は CSS を使用して、互いに隣り合った位置に配置される 3 つの <div> 要素によって表現されます。この列の構造で Sortable プラグインを動作させるためには、単純に connectWith オプションを使用してその値を column クラスに設定し、この column クラスをそれぞれの列要素で指定します。connectWith オプションを使用することで、複数列のインターフェースを使用して、列と列の間で要素をドラッグおよびソートすることが可能になります。

リスト 4. 3 列のドラッグ・アンド・ドロップ・インターフェース
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>
 Creating Customizable Web Interfaces with the jQuery UI and Ajax
 </title>
 <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
 rel="stylesheet" />
 <link type="text/css" href="css/custom.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
 </script>
 <script type="text/javascript">
	$(function(){
		$( ".column" ).sortable({
			connectWith: ".column"
		});
		
		$( "#sortable" ).sortable();
	});
 </script>	
</head>
<body>
	
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>

<ul id="page">
 <li class="column">
  <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div>
	<div class="portlet-content">
		<ul id="sortable">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
			<li class="ui-state-default">Item 6</li>
			<li class="ui-state-default">Item 7</li>
		</ul>
	</div>
</div>

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
	<div class="portlet-content">content</div>
</div>
</li>

<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
	<div class="portlet-content">content</div>
</div>
</li>

<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
	<div class="portlet-content">content</div>
</div>

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
	<div class="portlet-content">content</div>
  </div>
 </li>
</ul>
    
</body>
</html>

要素のスタイル設定を、選択した jQuery UI のテーマに合わせるために、特定の CSS クラスを指定することで、ヘッダーおよびコンテンツを持つポートレットとして各要素を定義します。これらの CSS クラスによって jQuery UI CSS フレームワークが構成され、カスタム UI 要素に対して容易にテーマを設定することができます。

jQuery UI CSS フレームワーク

ここまでの説明で、jQuery UI CSS フレームワークのクラスをいくつか使用しました。このセクションではもう少し掘り下げ、これらのクラスを利用することによって、ユーザーがパーソナル・ダッシュボード・ページの外観をオンザフライで変更できるようにする方法を説明します。jQuery UI CSS フレームワークには、一般的な UI 要素をカバーするクラスが数多く含まれています。これらのクラスを適用すると、ウィジェットにはユーザーが選択したテーマに従って自動的にテーマが設定されます。利用可能なクラスのカテゴリーには、レイアウト・ヘルパー、ウィジェット・コンテナー、ユーザー操作の状態、ユーザー操作用のキュー、アイコン (状態、画像、アイコン・タイプなど)、多種多様な視覚要素 (角を丸めるためのヘルパー、オーバーレイ、影など) などがあります。個々のクラスの詳細については「参考文献」を参照してください。

jQuery UI CSS フレームワークのクラスを使用すると、利用可能なテーマの間で容易にテーマを切り替えることができます。リスト 5 には、ThemeRoller に用意されたテーマ切替用ツール (themeswitcher) を使用すると、いかに容易にテーマを切り替えられるかを示してあります。

リスト 5. JavaScript と HTML を使用してサンプル Web ページのカスタム・ポートレットにテーマ切替用ツールを追加する
<script type="text/javascript">
$(function(){
  $('#switcher').themeswitcher();
            
  $( ".column" ).sortable({
    connectWith: ".column"
  });        
  
  $( "#sortable" ).sortable();
});
</script>

<div class="portlet-content">
  <script type="text/javascript" 
  src="//jqueryui.com/themeroller/themeswitchertool/"></script>
  <div id="switcher"></div>
  </div>
</div>

リスト 5 の例は、既存のサンプル Web ページ上にあるポートレットに、いかに容易にテーマ切替用ツールを追加できるかを示しています。ウィジェットに関連する JavaScript ファイルを読み込む処理と、その読み込み処理を包含する <div> を作成することで、単純にその <div> を対象に themeswitcher を適用することができます。その結果、jQuery UI に用意されているテーマを含むドロップダウン・メニューができあがります。このドロップダウン・メニューから 1 つのテーマを選択すると、そのテーマに合わせてページ全体が瞬時に更新されます。このタイプのウィジェットは、ユーザーが自らの Web ページのカスタマイズをする場合に便利です。テーマ切替用ツールには、クッキー・ベースのストレージが用意されているため、ユーザーがページを最新の表示にした場合でも、最新の表示にする前に選択されていたテーマが変わらず適用されますが、先ほど説明した要素位置の保存方法と同じ方法を使用することで、さまざまなオプションをデータベースに保存することもできます。

jQuery UI ライブラリーには、あらかじめ作成された便利なウィジェットも用意されており、それらのウィジェットを容易にページに追加することができます。各ウィジェットは、カスタムのテーマやユーザーが選択したテーマを使用して描画するように事前に構成されています。リスト 6 の例は、タブ・ウィジェットを使用してページ上にユーザー用の特定のコンテンツを配置し、そのページを既存のテーマを使用して描画する方法を示しています。

リスト 6. 既存のテーマの中で jQuery UI のウィジェットを追加する
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
	Creating Customizable Web Interfaces with the jQuery UI and Ajax
	</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" 
	rel="stylesheet" />
	<link type="text/css" href="css/custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
	</script>
    <script type="text/javascript">
        $(function(){
			$( "#tabs" ).tabs();
			
            $('#switcher').themeswitcher();
            
            $( ".column" ).sortable({
                connectWith: ".column"
            });
            
            $( "#sortable" ).sortable();
        });
    </script>	
</head>
<body>
	
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>

<div id="tabs">
 <ul>
	<li>
	  <a href="#tabs-1">Portlets</a>
	</li>
	<li>
	  <a href="#tabs-2">Profile information</a>
	</li>
</ul>
<div id="tabs-1">

  <ul id="page">
  <li class="column">
<div class="portlet 
              ui-widget 
              ui-widget-content 
              ui-helper-clearfix 
              ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">
	ToDo List
	</div>
	<div class="portlet-content">
		<ul id="sortable">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
			<li class="ui-state-default">Item 6</li>
			<li class="ui-state-default">Item 7</li>
		</ul>
	</div>
</div>

<div class="portlet 
ui-widget 
ui-widget-content 
ui-helper-clearfix 
ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">
	Header
	</div>
	<div class="portlet-content">content</div>
</div>
</li>

<li class="column">
<div class="portlet 
ui-widget 
ui-widget-content 
ui-helper-clearfix 
ui-corner-all">
	<div class="portlet-header ui-widget-header ui-corner-all">
	Header
	</div>
	<div class="portlet-content">content</div>
</div>
</li>

<li class="column">
<div class="portlet 
ui-widget 
ui-widget-content 
ui-helper-clearfix 
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Theme
</div>
	<div class="portlet-content">
	  <script 
	   type="text/javascript" 
	   src="//jqueryui.com/themeroller/themeswitchertool/">
	  </script>
	  <div id="switcher"></div>
	</div>
</div>

<div class="portlet 
ui-widget 
ui-widget-content 
ui-helper-clearfix 
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
	<div class="portlet-content">content</div>
</div>
	</li>
  </ul>
<br class="clear" />
 </div>
<div id="tabs-2">
 <p>Show profile information here</p>
</div>
</div>
    
</body>
</html>

このタブ・インターフェースを構成しているのは、tabs という ID を持つ外側の <div> 要素、実際のタブとして使用され、タブの名前が含まれる 2 つのリスト項目、そしてタブ・リスト項目のアンカーに対応する ID を持つ 2 つのタブです。ご覧のように、リスト 6 は、タブおよびそのコンテンツを描画するための適切な HTML を追加し、タブ・コンテナーにタブ・ウィジェットを適用しただけの簡単なものです。こうしたコードを作成することで、タブ・インターフェースが自動的に描画され、選択されたクラスにより、選択されたテーマが自動的に適用されるようになります。

エフェクトを使って UI を強化する

jQuery UI ライブラリーでは、さまざまなカテゴリーのエフェクトを利用できますが、これらの遷移の多くは単純に jQuery の既存のメソッドを拡張しているにすぎません。各カテゴリーには独自のカスタム引数を持つメソッドが含まれており、例えば次のようなメソッドがあります。

  • 色の遷移
    • animate: Web ページ内のアニメーションと色の遷移に使用されます。
  • 可視性の遷移
    • toggle: 要素の可視性 (表示/非表示) を切り替えます。
    • show: 要素を表示し、指定された任意のアニメーション・タイプで要素をアニメーション化することができます。
    • hide: 要素を非表示にし、指定された任意のアニメーション・タイプで要素をアニメーション化することができます。
  • クラスの遷移
    • addClass: 要素にクラスを追加するために使用されます。また、そのクラスによって描画される 2 つの異なる表示状態の間で切り替わるアニメーションを含めることができます。
    • removeClass: 要素からクラスを削除するために使用されます。また、そのクラスによって描画される 2 つの異なる表示状態の間で切り替わるアニメーションを含めることができます。
    • switchClass: 2 つのクラスを切り替えるために使用されます。また、そのクラスによって描画される 2 つの異なる表示状態の間で切り替わるアニメーションを含めることができます。
    • toggleClass: 既に要素にクラスが含まれているかどうかにより、要素にクラスを追加、または要素からクラスを削除するために使用されます。また、そのクラスによって描画される 2 つの異なる表示状態の間で切り替わるアニメーションを含めることができます。

いくつかのメソッドの説明の中で触れたように、各エフェクト・メソッドと組み合わせて使用できるアニメーション・エフェクトもあります。これらのエフェクトを提供するライブラリーには、Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide、Transfer などがあります。また、jQuery の easing プラグインを使用することで簡単に適用できる高度な手法もあります(「参考文献」を参照)。

jQuery UI ライブラリーでは特別なことではありませんが、エフェクトの適用方法も容易です。単純に Web ページ上の HTML 要素 (1 つまたは複数) を対象として適切なメソッドを適用すればよいのです。リスト 7 は Toggle エフェクトの使用方法を示しており、サンプル Web ページの各ポートレットのコンテンツ領域に toggle メソッドを適用しています。この例では、ポートレットのヘッダーをダブルクリックすると Toggle エフェクトがトリガーされ、コンテンツの表示/非表示が切り替えられます。

リスト 7. Toggle エフェクトを適用してポートレットのコンテンツの表示/非表示を切り替える
<script type="text/javascript">
$(function(){
  $( ".portlet-header" ).dblclick(function(){
    $(this).parent().find(".portlet-content").toggle();
  });
});
</script>

ポートレットのコンテンツの表示/非表示を切り替えるためには、ヘッダーの親要素までトラバースした後、portlet-content クラスに関連付けられた要素を jQuery の find メソッドを使用して見つけます。

まとめ

jQuery UI を使用して Web ページを機能強化するための基本は、適切なファイルを読み込み、関数を 1 度呼び出すだけでよいのです。高度な操作を行うためのインターフェースの作成は、jQuery や jQuery UI などのライブラリーが登場するまでは複雑でした。それはゼロからのコード作成が必要であり、そのコードをすべての主要ブラウザーで動作させるために大量のテストが必要だったからです。今ではファイルを 1 つ読み込み、関数を 1 度呼び出すだけで、エフェクトやソート可能な要素を作成したり、あるいはテーマを変更したりすることができます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=644066
ArticleTitle=jQuery UI と Ajax を使用してカスタマイズ可能な Web インターフェースを作成する
publish-date=03082011