目次


jQuery UI のテーマを扱う

Comments

テーマは新しい概念ではありません。おそらく皆さんも Web サイトのルック・アンド・フィールのフォーマットを設定するために、CSS (Cascading Style Sheet) のスタイルとクラスを使用してテーマを作成した経験があることでしょう。テーマの作成にフレームワークを使用すると、テーマを作成するための手法が標準化され、作業量も作成しなければならないコードの量も少なくなります。

現在、テーマを実装する上での業界標準となっているのは jQuery UI です。他にも Dojo (Dijit と併用) や Ext JS などの選択肢はありますが、jQuery UI はテーマをウィジェット (ユーザーが日付ピッカーやボタンを操作するために使用する要素) の使用と組み合わせます。jQuery UI によるテーマの内部構造を調べると、テーマを構成するファイルとしての CSS と JavaScript しかありません。けれども、この CSS と JavaScript の使い方に込められた思考プロセスと標準化こそが、jQuery UI を、Web サイトのルック・アンド・フィールを作成するための優れたプラットフォームにしているのです。

jQuery UI のテーマ

jQuery UI プラットフォームは、2 つのサブフレームワークからなります。1 つは、Widget Factory と一般的に使用されるウィジェットのセットが含まれるウィジェット・フレームワーク、そしてもう 1 つは CSS フレームワークです。Widget Factory は、ウィジェットのセットに含まれる共通ウィジェットを含む、すべての jQuery UI ウィジェットの基盤となります。ウィジェットを作成するときには、共通ウィジェット・セットのうちのいずれか 1 つのウィジェットを出発点として使用するか、一からウィジェットを作成します。共通ウィジェットがどこにあるのかがわかったら、そのうちの 1 つをお好きなエディターで開いて、コードを表示してください。そこから先は、そのコードを変更し、(他のいずれかのウィジェットを出発点として使用して) カスタマイズしたウィジェットを生成するか、同様の構造を持つ新規ウィジェットを作成します。

jQuery UI のthemes フォルダー構造

さまざまなファイルとその内容を調べる前に、jQuery UI プラットフォーム (「参考文献」のリンクを参照) からいずれかのテーマをダウンロードしてください。ダウンロードした ZIP ファイルには、css、js、および development-bundle という 3 つのフォルダーが含まれています。development-bundle フォルダー内には themes という名前のフォルダーがあります。このフォルダーが、開発中の jQuery UI テーマが保持される場所です。themes フォルダー内には選択/ダウンロードしたテーマの名前が付けられたフォルダー (UI lightness など) と、base という名前のフォルダーがあります。base フォルダーには、独自のテーマを作成する際の出発点となるテーマが格納されています。このフォルダーは、どのテーマを選択した場合でも常にダウンロードされます。

css フォルダー内には、ダウンロードしたテーマの名前が付けられたフォルダーがあります。このテーマ・フォルダーに格納されるのは、すべてのコンポーネントまたはウィジェットの CSS マークアップを収容する CSS ファイルです。一方、development-bundle フォルダー内にも themes/<theme-name> フォルダーがあり (ここで、<theme-name> は選択したテーマの実際の名前)、そこには各コンポーネントまたはウィジェットの個々の CSS ファイルが格納されます。この構造により、独自のテーマの変更内容を見つけたり、変更したりするのが簡単にできるようになっています。図 1 に、themes フォルダーの構造を示します。

図 1. themes フォルダーの構造
themes フォルダーの構造を示す画像
themes フォルダーの構造を示す画像

図 1 には <theme-name> フォルダーのすべてのファイルが示されているわけではありませんが、ここに示されているのは重要なファイルです。まず、jquery.ui.all.css ファイルは、jquery.ui.base.css ファイルと jquery.ui.theme.css ファイルをインポートします。つまり、jquery.ui.all.css ファイルを使用するだけで、この 2 つのファイルを簡単にインポートできるというわけです。jquery.ui.base.css ファイルは、jquery.ui.core.css ファイルおよび同じフォルダー内にあるその他すべてのコンポーネントおよびウィジェット・ファイル (図 1 には示されていません) をインポートします。jquery.ui.core.css ファイルには、すべてのウィジェット・ファイルで共有される共通クラスが含まれます。このファイルは (テーマ内の) すべての jQuery UI ウィジェットのベースとなる CSS クラスを提供するだけでなく、ウィジェットの可視性および位置を指定するための共通の機能を提供します。最後に挙げる重要なファイルは、jquery.ui.theme.css です。このファイルは、テーマ内のすべてのウィジェットが共有する共通の外観と動作、ならびにテーマそのものを提供します。

jquery.ui.theme.css ファイルには、以下の 3 種類のスタイルが用意されています。

  • container ― このスタイルは、コンテナーのテーマ (ui-widgetui-widget-content、または ui-widget-header) を定義します。
  • states ― jQuery UI ウィジェットはこのスタイルを使用して、ユーザーがウィジェットを操作するときのウィジェットの外観を定義します。クラスには、ui-state-defaultui-state-hover、および ui-state-active があります。
  • cues ― アプリケーションの中でユーザーによるアクション以外の何かが発生すると、これらのクラスがウィジェットの外観を変更します。クラスには、ui-state-highlightui-state-error、および ui-state-disabled があります。

共通ウィジェット

このセクションで検討するサンプル・コードは、いくつかの共通ウィジェットを使用してサンプル・アプリケーションを作成します。このサンプル・アプリケーションは、スライダー・ウィジェット、ダイアログ・ボックスを開くボタン、そして開かれるとその時点でのスライダーの値を表示するダイアログ・ボックスで構成されます。図 2 に、サンプル・アプリケーションのスナップショットを示します。

図 2. 共通ウィジェットを使用したサンプル・アプリケーション
共通ウィジェットを使用したサンプル・アプリケーションの画像
共通ウィジェットを使用したサンプル・アプリケーションの画像

リスト 1 に、HTML インデックス・ファイルを記載します。

リスト 1. 共通ウィジェットを使用したサンプル・アプリケーションの HTML インデックス・ファイル
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Slider Value Example</title>
        <link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css"
        		rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js">
        		</script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body style="font-size: 10px;">
        <div id="sld_value" style="margin-bottom:10px;"></div>
        <button id="btn_value">Display Value</button>
        <div id="dlg_value"></div>
    </body>
</html>

リスト 2 に、このサンプル・アプリケーションに関連付けられた JavaScript ファイル (index.js) を記載します。

リスト 2. サンプル・アプリケーションに関連付けられた JavaScript ファイル
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

初期セットアップは、ヘッダー内で以下のコードによって行われます。

<link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>

上記コードでは、CSS を関連付けた後、JavaScript ファイルを読み込んでいます。

このアプリケーションを構成する 3 つのウィジェットのうち、HTML のタグが既に存在しているボタン以外のウィジェットは、<div> を使用して定義されています。これらのウィジェットを定義するコードは以下のとおりです。

<div id="sld_value" style="margin-bottom:10px;"></div>
<button id="btn_value">Display Value</button>
<div id="dlg_value"></div>

JavaScript コードで実際にウィジェットを作成するための処理は、ブラウザーがページを完全にロードするまで遅延されます (リスト 3 を参照)。

リスト 3. ウィジェットの作成
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

このコードによって、上述のウィジェットのそれぞれが作成されます。ダイアログ・ボックスとボタンには、どちらも特定のイベントに対する関数が割り当てられます。例えば、ボタンのクリック・イベントに対しては、ボタンがクリックされたときにダイアログ・ボックスを開くように指示しています。ダイアログ・ボックスに対しては、ダイアログ・ボックスが開かれるたびに、テキストを変更してその時点でのスライダーの値を示すように指示しています。

ウィジェットの外観を変更するには、2 通りの方法があります。その 1 つは、ウィジェットに必要なコンストラクター・パラメーターと併せて、コンストラクターに値を渡すという方法です。以下にその一例を示します。

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

あるいは以下のように、ウィジェットが作成された後に、ウィジェットのメソッドを呼び出すこともできます。

$("#dlg_popup").dialog({ draggable: false });

ほとんどの共通ウィジェットには、設定可能な多数のオプションが関連付けられています。これらのオプションを無視した場合には、ウィジェットがオプションをデフォルト値に設定します。これらの値は必要に応じて変更することができます。

ウィジェットのイベント

ウィジェットは基本的に JavaScript オブジェクトであるため、Web サイト・アプリケーションの存続中に起動されるイベントを使用してウィジェットをセットアップすることができます。これらのイベントが起動されると、Web サイトが提供するコードによってイベントが捕捉されるか、またはウィジェット内でイベントが処理されます (後者が、デフォルトです)。

すべてのウィジェットのデフォルト動作の実装については、jQuery UI チームが各共通ウィジェットに関する詳細なドキュメントを作成しています。ただし、ウィジェットのイベントを 1 つ以上選択して処理するための独自のコードを注入することも可能です。一例として、以下にイベントの受信をセットアップするコードを記載します。

$( "#dlg_popup" ).dialog({
   drag: function(event, ui) { ... }
});

このサンプル・コードは、ダイアログ・ボックスのドラッグ操作時に起動される drag イベントにフックしています。上記の例に示されている省略記号 () の部分は、イベントを処理するための個別のコードに置き換えることができ、イベント用のコードを実装することができます。

ウィジェットのメソッド

メソッドは (よく知られている言語での場合と同じく) ウィジェットに関連付けられ、事前に作成された機能を特定のウィジェットで実行できるようにして、そのウィジェットに特定のアクションを実行させます。以下に、ウィジェットのメソッドを呼び出す例を記載します。

$(“#dlg_popup”).dialog("moveToTop”);

概念としては、オプションとメソッドは異なります。けれども以下の例に示すように、メソッドのような実装を使用して、オプションの値を変更または取得できるという点に注意してください。

$(“#dlg_popup”).dialog("option", "autoOpen", false);

テーマの切り替え

HTML ファイルと JavaScript ファイルには、ドロップダウン・メニューを使用してオンザフライでテーマを切り替えられるようにするためのコードを含めることができます。このような変更をするには、HTML ソース・コードに対してリスト 4 に示すような変更を加えます。

リスト 4. オンザフライのテーマの変更
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
.
.
.
        <script type="text/javascript" 
        		src="//jqueryui.com/themeroller/themeswitchertool/">
        </script>
.
.
.
    </head>
    <body style="font-size: 12px;">
        <div id="switcher" style="padding-bottom:15px;"></div>
.
.
.
    </body>
</html>

リスト 5 に、対応する JavaScript ソース・コードを記載します。

リスト 5. オンザフライでテーマを変更する場合の JavaScript ソース・コード
$(document).ready(function(){
    $('#switcher').themeswitcher();
.
.
.
});

図 3 に、以上の変更を行った後のサンプル・アプリケーションを示します。

図 3. コードを変更した後のサンプル・アプリケーション
コードを変更した後のサンプル・アプリケーションの画像
コードを変更した後のサンプル・アプリケーションの画像

ブラウザーでもう一度 HTML ページを実行して、結果を確認してください。ドロップダウン・リストをクリックすると、テーマを変更できるようになっているはずです。選択したテーマは、必要に応じてバッググラウンドでダウンロードされます。

テーマの切り替えツールは、非本番サイトで (テストして結果を確認するために) 使用する場合は問題ありませんが、本番サイトで使用するのは望ましいことではありません。このツールは、テーマをホストするサード・パーティーのサーバーに依存することから、ユーザーに対して表示される結果を確実に把握することができないためです。

jQuery UI のテーマをテストするには、Mozilla Firefox 専用の ThemeRoller ツールを使用するという方法もあります (「参考文献」のリンクを参照)。このツールを (Firefox のブックマークレットとして) インストールした後、ギャラリーを開き、表示するテーマを選択します。テーマを選択してダウンロード・リンクをクリックしてください。ダウンロードが完了したら、テーマ・フォルダーを抽出して、それを jQuery UI フォルダーに配置し、HTML ファイルがそのフォルダーを指すようにします。

このツールは、テーマを切り替えるためだけに役立つわけではありません。このツールを使用すると、手作業でカスタム・テーマを作成しなければならない場合よりも簡単にカスタム・テーマを作成することができます。

独自のテーマの作成

独自のテーマを作成する際に、ThemeRoller Web サイト (よく使用されているほとんどのブラウザーで動作します。「参考文献」のリンクを参照) を利用すれば、(テーマを作成する出発点としての) 既存の jQuery テーマに変更を加えることができます。こうすることで、テーマを一から作成する必要がなくなります。これはまた、CSS の専門知識は不要であることも意味します。さらに、このツールでは、既存のテーマやウィジェットに加えた変更をオンザフライで表示することができます。図 4 に、(Firefox で動作する ThemeRoller ブックマークレットと混同しないように) ThemeRoller サイトを示します。

図 4. ThemeRoller サイト
ThemeRoller サイトの画像
ThemeRoller サイトの画像

「Gallery (ギャラリー)」をクリックすると、既存のテーマをどれでも選択することができます。テーマを選択するとサンプル・ウィジェットが使用する CSS スタイルと画像が切り替わり、テーマの変更が反映されます。テーマに関連付けられた「Edit (編集)」ボタンをクリックすると、「Roll Your Own (カスタマイズ)」タブが最前面に表示されます。このタブで、テーマに関連付けられた CSS スタイルに変更を加えることができます。編集するテーマを選択せずに「Roll Your Own (カスタマイズ)」タブを表示した場合には、一からテーマを作成することになります。

作業が完了したら、「Download theme (テーマのダウンロード)」をクリックします。すると、選択したテーマが、テーマの変更内容がすべて含まれるカスタム・テーマとしてダウンロードされます。jQuery UI とそのテーマは、数多くの CSS3 機能をサポートしていることに注目してください。これはつまり、主要なすべてのブラウザーがサポートされているということです (Windows Internet Explorer の古いバージョンはサポートされていません)。

ThemeRoller の「Roll Your Own (カスタマイズ)」タブはわかりやすく編成されているため、探している対象を素早く見つけて変更することができます。このタブを構成するセクションのうち、重要なセクションは以下のとおりです。

  • Font Settings (フォント設定) ― テーマ全体で使用されるフォントに一般的な変更を加えることができます。
  • Corner Radius (角丸) ― 各種ウィジェットの角の丸み (または、角の丸みなし) を制御します。
  • Header/Toolbar (ヘッダー/ツールバー) ― 各種ウィジェットで使用されるヘッダーのルック・アンド・フィールを指定します。
  • Content (コンテンツ) ― ウィジェット本体を制御するための設定があります。
  • Clickable (クリック可能) ― ウィジェットが使用するさまざまな状態を制御します。

さまざまなオプションをクリックしていくうちに、これらのテーマの構成について、興味深い点がいくつかあることに気付くはずです。例えば、jQuery UI テーマはテクスチャーを利用します。どのテクスチャーが使われているかを調べるには、ThemeRoller で「Header/Toolbar (ヘッダー/ツールバー)」をクリックし、中央の色の付いたボタンをクリックしてください。すると、ドロップダウン・パレットが表示されて、そこからパターンを選択できるようになります。このパレットで選択する背景色が、選択されているテクスチャーと組み合わせられて、ヘッダーとツールバーで使用されるパターンになります。これは、テクスチャーを利用する 1 つの方法に過ぎません。jQuery UI のテーマ全体では、他にもテクスチャーを利用する方法があります。例えば、「Clickable: default state (クリック可能: デフォルト状態)」のテクスチャーを変更して、その変更が、選択されているテーマのボタンにどのように影響するかを確かめてください。

jQuery UI のテーマの興味深い特徴の 1 つは、(「視覚的な手掛かり」でもある) 強調表示とエラーの使用に関する部分です。ThemeRoller では、これらの視覚的な手掛かりをユーザーに表示する方法を完全に制御することができます。テクスチャー、背景色、輪郭の角、テキストの色、さらには (その手掛かりの中にアイコンが表示される場合には) アイコンの色まで変更することができます。ThemeRoller には、これらのスタイルの名前が表示されるので、それらの名前を必要に応じて自分の Web サイトで指定するだけで、それらのスタイルをユーザーに表示されるテキストに適用することができます。

さまざまな設定を変更すると、ブラウザーでの ThemeRoller の URL が変更されます。その一例として、リスト 6 に URL を記載します。

リスト 6. ThemeRoller URL の例
http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&
   fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&
   bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&
   bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&
   iconColorHeader=fadc7a&bgColorContent=feeebd&
   bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&
   borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&
   bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&
   bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&
   iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png
   &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&
   iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png&
   bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&
   iconColorActive=eb990f&bgColorHighlight=f5d361&
   bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&
   borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&
   bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&
   bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&
   iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&
   bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&
   bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&
   thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&
   cornerRadiusShadow=8px

この URL を保存し、その後で復元すると、その設定に戻ってさらに変更を加えることができます。例えば、設定を変更した後、URL をコピーして、それをどこかに貼り付けて保管してください。ブラウザー (または ThemeRoller サイトが表示されているブラウザー・タブ) を閉じてから、コピーした URL を使用して再び開くと、すべての変更が再び表示されてさらに変更を加えられることが、おわかりになるはずです。

まとめ

jQuery UI の内部構造については、他にもまだたくさんの内容を伝えることができますが、jQuery UI のテーマを試しに使ってみる上で必要な基本事項は学んだはずです。記事で説明したフォルダーとファイルの構造がわかっていれば、テーマに変更を加えることができます。これらのファイルを出発点として表示または使用して、独自のテーマを作成してください。

この記事では、既存のテーマに変更を加えたり、新しいテーマを一から作成したりするのをサポートする ThemeRoller と、これに関連する Webサイトのページについても取り上げました。そして最後に、ThemeRoller Webサイトでのテーマの変更を保存して復元するプロセスについても説明しました。


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


関連トピック

  • ThemeRoller: ThemeRoller Web サイトを調べてください。このサイトでは、jQuery UI プラットフォームから既存のテーマをテストしたり、カスタマイズしたり、あるいはカスタムでテーマを作成したりすることができます。
  • developerWorks Web development ゾーン: さまざまな Web ベースのソリューションを話題にした記事を調べてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、Web development の技術文書一覧を参照してください。
  • developerWorks テクニカル・イベント: これらのセッションで最新の技術情報を入手してください。
  • developerWorks 最新イベント情報: IBM の製品およびツールについての情報や IT 業界の動向についての情報を迅速に把握してください。
  • Twitter での developerWorks: 今すぐ登録して developerWorks のツイートをフォローしてください。
  • jQuery UI プラットフォーム: jQuery UI をダウンロードし、この記事の内容に従って、例を試してください。
  • jQuery UI ThemeRoller 開発者ツール: Firefox 向けの ThemeRoller アドオンを調べてください。
  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールやミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Java technology
ArticleID=938461
ArticleTitle=jQuery UI のテーマを扱う
publish-date=08012013