Working with jQuery UI themes

4月 24, 2021

admin

Ken Ramirez
Published on April 04 2013

テーマは新しい概念ではありません。おそらく、Cascading Style Sheet (CSS) のスタイルとクラスを使用して、Web サイトのルックアンドフィールをフォーマットするために、いくつか展開したことがあることでしょう。フレームワークを使用することにより、アプローチを標準化し、作業量とコードを書く必要性を軽減します。

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

jQuery UI テーマ

jQuery UI プラットフォームは、Widget Factory とよく使われるウィジェットセットを含むウィジェットフレームワークと、CSS フレームワークの 2 つのサブフレームワークで構成されています。ウィジェットファクトリーは、ウィジェットセットに含まれる一般的なウィジェットを含む、すべてのjQuery UIウィジェットの基礎を提供します。ウィジェットを作成するときは、セットに含まれる一般的なウィジェットのいずれかを出発点として使用するか、ゼロから作成します。共通ウィジェットがどこにあるかがわかったら、それらのウィジェットを好きなエディタで開き、コードを表示します。そこから、このコードを修正してカスタマイズしたウィジェットを生成するか（他のウィジェットを出発点として使用）、同様の構造を持つウィジェットを作成します。

The jQuery UI themes folder structure

さまざまなファイルとその内容を見続ける前に、jQuery UI プラットフォームからテーマのいずれかをダウンロードします (リンクについては、「関連トピック」を参照してください)。ダウンロードした ZIP ファイルには、css、js、および development-bundle の 3 つのフォルダーが含まれています。 development-bundle フォルダには、開発中の jQuery UI テーマが保管されている themes という名前のフォルダが含まれています。 themes フォルダには、選択またはダウンロードしたテーマ名（UI lightness など）のフォルダと、base という名前のフォルダが含まれています。このフォルダには、独自のテーマを作成するための出発点が含まれています。これは、選択したテーマに関係なく、常にダウンロードされます。

cssフォルダーには、ダウンロードされたテーマ名のフォルダーが含まれます。このテーマフォルダーには、すべてのコンポーネントまたはウィジェットの CSS マークアップを組み込んだ CSS ファイルが含まれます。ただし、development-bundle フォルダには、各コンポーネントまたはウィジェットの個々の CSS ファイルを含む themes/ フォルダ (ここで選択したテーマの実際の名前) も含まれています。この構造により、自分のテーマで変更箇所を見つけ、修正することが容易になります。図1は、themesフォルダの構造を示しています。

図1. themes フォルダーの構造

View image at full size

フォルダーからのすべてのファイルが図 1 にリストされているわけではありませんが、重要なものはここにあります。 jquery.ui.all.css ファイルは jquery.ui.base.css と jquery.ui.theme.css ファイルをインポートするので、jquery.ui.all.css ファイルだけを使って簡単にインポートすることができます。 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-widget、ui-widget-content、ui-widget-header などのコンテナーテーマを定義するものです。
States – このスタイルタイプは、jQuery UI ウィジェットで使用され、ユーザーがウィジェットを操作したときの外観を定義します。クラスには ui-state-default、ui-state-hover、および ui-state-active があります。
Cues – アプリケーションで何かが起こると (ユーザーのアクションによってではなく)、これらのクラスはウィジェットの外観を変更します。クラスには、ui-state-highlight、ui-state-error、ui-state-disabledがあります。

Common widgets

このセクションでは、サンプルアプリケーションを構築するためにいくつかの共通ウィジェットを使用するサンプルコードについて説明します。この例には、スライダーウィジェット、ダイアログボックスを開くボタン、および開くたびにスライダーの現在の値を表示するダイアログボックスが含まれています。図 2 は、このアプリケーションのスナップショットです。

Figure 2. 一般的なウィジェットを使用したアプリケーションの例

View image at full size

Listing 1 は HTML インデックスファイルを提供するものです。一般的なウィジェットを使用したアプリケーションの例

Listing 2 では、関連する JavaScript ファイル (index.js) を示しています。

Listing 3 では、関連する JavaScript ファイル (index.js) を示しています。サンプルアプリケーションの関連 JavaScript ファイル

初期設定は、ヘッダーで以下のコードで行われます。

CSS でリンクした後、JavaScript ファイルが含まれます。

このアプリケーションの 3 つのウィジェットは、ほとんどの部分で <div> 文を使用して定義します (HTML にすでにタグがあるボタンを除きます)。これらのウィジェットは、以下のコードで定義されています。

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

最後に、リスト 3 に示すように、ページがブラウザによって完全にロードされるまで、JavaScript コードでウィジェットを実際に構築するのを遅らせます。

リスト 3. ウィジェットを構築する

すでに述べた各ウィジェットは、このコードで構築されます。ダイアログボックスとボタンは、いずれも特定のイベントに対して機能を割り当てています。例えば、ボタンのclickイベントは、クリックされたらダイアログボックスを開くように指示されています。ダイアログボックスについては、スライダーの現在値を示すテキストを変更するように指示されており、開くたびに変更されます。

ウィジェットの外観を変更する方法は2つあります。ウィジェットに必要なコンストラクタ・パラメータと一緒に、コンストラクタに値を渡すことができます。たとえば

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

または、次のように、作成後にウィジェットのメソッドを呼び出します。

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

ほとんどの一般的なウィジェットには、設定可能な多くの関連オプションがあります。さらに、これらのオプションを無視することを選択した場合、ウィジェットはそれらをデフォルト値に設定し、必要なものは何でも設定および変更できるようにします。

ウィジェットイベント

ウィジェットは基本的に JavaScript オブジェクトなので、Web サイトアプリケーションの有効期間中に発生するイベントを設定することができます。これらのイベントが発生すると、Web サイトの提供された JavaScript コードによって捕捉されるか、ウィジェット内で処理されます (既定)。

すべてのウィジェットのデフォルト動作の実装は、jQuery UI チームにより、各共通ウィジェットに対して十分に文書化されています。ただし、選択したウィジェットの 1 つまたは複数のイベントを処理するために、独自のコードを注入できます。以下は、イベントの受信を設定するコードの例です。

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

この例では、ダイアログボックスがドラッグされたときに発生する drag イベントをフックしています。例に示されている省略記号（…）は、イベントのコードを処理し実装するために個々のコードを配置することができる場所です。

ウィジェットメソッド

メソッド (使い慣れた言語と同様) はウィジェットに関連付けられ、特定のウィジェットであらかじめ書かれた機能を実行して特定のアクションを実行させることができるようにします。以下は、ウィジェットのメソッドを呼び出す例です。

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

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

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

Switching themes

コードは HTML と JavaScript ファイルに含めることができ、ドロップダウンメニューを使用してその場でテーマを切り替える機能を与えます。リスト 4 は、このような変更を行うための HTML ソースコードへの変更を示しています。

リスト 4. その場でテーマを変更する

リスト 5 は JavaScript のソースコードを示しています。テーマをその場で変更するための JavaScript ソースコード

$(document).ready(function(){ $('#switcher').themeswitcher();...});

図 3 は、これらの変更後のサンプルアプリケーションを示したものです。コード変更後のサンプルアプリケーション

View image at full size

HTML ページをブラウザで再度実行し、結果を表示します。今度はドロップダウンリストをクリックして、テーマを変更することができます。選択されたテーマは、必要に応じてバックグラウンドでダウンロードされます。

テーマスイッチャーツールの使用は、非運用サイト (テストおよび結果の表示用) では問題ありませんが、運用サイトではお勧めできません。このツールはテーマをホストするためにサードパーティのサーバーに依存しており、ユーザーが見る結果について確信が持てないからです。

JQuery UI テーマをテストするもう 1 つの方法は、Mozilla Firefox でのみ利用可能な ThemeRoller ツールを使用することです (リンク先は「関連トピック」を参照してください)。このツールを (Firefox のブックマークレットとして) インストールした後、ギャラリーを開き、テーマを選択して表示します。テーマを選び、ダウンロードリンクをクリックします。ダウンロードが完了したら、テーマフォルダを解凍し、jQuery UIフォルダに配置し、HTMLファイルをそこに向けてください。

このツールは、単にテーマを切り替えるだけでなく、もっと便利なものです。また、手作業で展開するよりも簡単にカスタムテーマを構築することができます。

独自のテーマを作成する

ThemeRoller Web サイト (ほとんどの一般的なブラウザで実行可能。リンクは関連トピックを参照) を使用して、既存の jQuery テーマ (出発点として) に変更を加えて独自のテーマを作成することが可能です。これにより、ゼロからテーマを作成する必要がなくなります。また、CSSの専門知識も必要なく、既存のテーマやウィジェットの変更をその場で確認できるツールでもあります。図4は、ThemeRollerのサイトです（Firefoxで動作するThemeRollerブックマークレットと混同しないでください）。

図 4. ThemeRoller サイト

View image at full size

ギャラリーをクリックすると、既存のテーマのいずれかを選択できるようになります。そうすることで、サンプルウィジェットが使用する CSS スタイルと画像が切り替わり、変更が反映されます。テーマに関連付けられた [編集] ボタンをクリックすると、[自分でロール] タブが表示され、テーマに関連付けられた CSS スタイルを変更することができます。編集するテーマを選択せず、”Roll Your Own “タブから始める場合は、単にゼロからテーマを構築していることになります。

最後に、[テーマのダウンロード] をクリックすると、選択したテーマが、テーマの変更内容をすべて含むカスタムテーマとしてダウンロードされます。 jQuery UI とそのテーマは多くの CSS3 機能をサポートしているので、すべての主要なブラウザがサポートされていることに注意してください (Windows Internet Explorer の以前のバージョンを除く)。

ThemeRoller の [Roll Your Own] タブは、探しているものをすぐに見つけて変更できるように、うまく整理されています。このタブには、次の重要なセクションがあります (他のセクションも同様です)。

フォント設定 – テーマ全体で使用されるフォントの一般的な変更を可能にします。
コーナー半径 – 各種ウィジェットの角の丸み（または不足）を制御します。
ヘッダー/ツールバー – 各種ウィジェットで使用するヘッダーに関する外観と感触を提供します。
Content – ウィジェットのメインボディを制御する設定を提供します。
Clickable – ウィジェットが使用するさまざまな状態を制御します。

オプションをクリックしていくと、これらのテーマの構築について、いくつかの興味深いことに気がつくでしょう。たとえば、jQuery UI テーマはテクスチャを利用しています。使用状況を確認するには、ThemeRoller で [ヘッダー/ツールバー] をクリックします。そして、真ん中の色のついたボタンをクリックします。ドロップダウンのパレットが表示され、その中からパターンを選択することができます。選択したテクスチャと背景色を組み合わせて、ヘッダーとツールバーが使用するパターンを生成します。これは、テクスチャの使い方の一例です。 jQuery UIテーマには、他にもさまざまなテクスチャがあります。例えば、「Clickable: default state」のテクスチャを変更して、選択したテーマのボタンにどのように影響するかを見てみましょう。

jQuery UI テーマの興味深い機能の 1 つに、ハイライトとエラー (視覚的な合図としても知られている) の使用があります。 ThemeRoller では、これらの視覚的な合図がユーザーにどのように表示されるかを完全に制御できます。テクスチャ、背景色、アウトラインコーナー、テキスト色、そしてアイコン色も変更できる（キューにアイコンが表示されている場合）。これらのスタイルの名前はThemeRollerに表示されているので、自分のウェブサイトでこれらの名前を使うだけで、ユーザーに表示するテキストにこれらのスタイルが必要に応じて適用されます。

さまざまな設定を変更すると、ブラウザの URL に変更が生じます。リスト 6 は例として URL を提供します。

リスト 6. ThemeRoller URL の例

保存して、後でこの URL を復元して、設定をさらに変更することができます。例えば、修正した後のURLをコピーして、どこかに貼り付けて保管しておきます。次に、ブラウザ（または ThemeRoller のサイトがあるブラウザのタブ）を閉じ、コピーした URL を使って再びブラウザを開いてください。ご覧の通り、修正した内容がすべて戻っており、さらに修正することができます。

結論

jQuery UI の内部についてはまだ多くのことが語られていますが、jQuery UI のテーマで実験を始めるために必要な基本的なことは理解できたと思われます。テーマを変更するためのフォルダーとファイルの構造はおわかりいただけたと思います。準備ができたら、これらのファイルを表示するか、独自のテーマを作成する出発点として使用することができます。

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

Downloadable resources

PDF of this content

jQuery UI platform: テストするために jQuery UI をダウンロードし、この記事と提供する例に従ってください。
ThemeRoller: jQuery UI プラットフォームの既存のテーマをテストしたり、既存のテーマをカスタマイズしたり、カスタムテーマを作成したりできる ThemeRoller の Web サイトをチェックしてください。
developerWorks Web開発ゾーン。さまざまな Web ベースのソリューションをカバーする記事を検索できます。 Web 開発テクニカル・ライブラリーでは、幅広い技術記事やヒント、チュートリアル、標準、IBM Redbooks をご覧いただけます。
IBM 製品評価版。 DB2、Lotus、Rational、Tivoli、WebSphereのアプリケーション開発ツールやミドルウェア製品をダウンロードして入手できます。
developerWorks on Twitter: 今すぐ参加して、developerWorks のツイートをフォローしましょう。