builder Top
HTML/CSS
- Firefox
- Internet Explorer
- Photoshop
- XHTML
- XHTML
- ...

Color Picker Control：強力AjaxライブラリYahoo! UI Library

沖林正紀

2007/09/14 08:00

今回から、YUI2.3.0で新しく追加されたコンポーネントについて解説していく。まずは色を選択するコンポーネントColor Picker Controlを取り上げる。

　ベータ版（beta）なので、対応するブラウザや利用条件に配慮した上でご利用いただきたい。また、実行環境となるWebブラウザはJavaScriptを実行可能にしておかなくてはならない。

コンポーネントの概要

　これは、色の設定をWebブラウザ上で行うGUIコンポーネントだ。デスクトップアプリケーションのお絵かきソフトなどでお馴染みだろう。画面1は、これを用いて表示領域の一部の色を実際に設定している例である。画面の「YUI 2.3.0のColorPicker」と「選択された色」との間の部分が実際のコンポーネントだ。ここで設定された色が「選択された色」の下の領域に設定される。

画面1 Color Picker Controlによる色の設定

画面の操作

　このコンポーネントは、マウスやキーボードによる画面操作の方法が豊富に用意されている。

　まず、左半分の正方形と、その右の縦長のグラデーションが配された長方形には、それぞれ白丸と横長のスライダーが表示されているが、これらはドラッグしてその位置を移動させることができるし、ダブルクリックした地点に移動させることもできる。右上の小さな四角には、表示できる色の数が少ない環境でも表示可能な近似色が表示されるので、より多くの環境に対応した色を設定したい場合は、ここをクリックする。

　また、RGBやHSVの値が表示されている右側のフォームには、値を直接入力することができる。入力後にフォーカスが離れると、白丸やスライダーの位置がその値に応じて移動する。フォームは「パラメータを隠す」をクリックすると非表示になり、同じ場所の「パラメータを表示」をクリックすれば再び表示される。

　後述するが、「パラメータを隠す」「パラメータを表示」という表示はデフォルトではなく、筆者が設定したものだ。デフォルトは英文で、それぞれ「Hide color details」「Show color details」である。また、右上のTooltip「Web環境に適した色～クリックで選択」は「Closest websafe color ～ Click to select」である。より適切な訳を思いついたら、それを設定してほしい。

ロードするCSSとJavaScript

　コンポーネントの表示と動作を決めるCSSやJavaScriptは、YUIの本体が展開されたディレクトリのbuildディレクトリ以下に存在する。リスト1にそれらを示す。ファイル名についての説明は割愛するが、colorpicker-beta-min.jsがColor Picker Controlの本体だ（ソースコードはこちら）。最低でもこの4種類はロードしなければならないので、忘れないようにしよう。

リスト1 CSSやJavaScriptの設定（HTMLの<head>内）

<!-- このソースコードはFirefox 2.0.0.6で実行確認 -->
<base href="YUIが展開されているディレクトリを設定" />
<link rel="stylesheet" type="text/css"
      href="build/colorpicker/assets/skins/sam/colorpicker.css" />
<script type="text/javascript" src="build/utilities/utilities.js"></script>
<script type="text/javascript" src="build/slider/slider-min.js"></script>
<script type="text/javascript" src="build/colorpicker/colorpicker-beta-min.js"></script>