編集部からのお知らせ
Topic 本人認証の重要性
宇宙ビジネスの記事まとめダウンロード

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の内)







ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. ビジネスアプリケーション

    なぜ、2021年にすべてのマーケターが「行動経済学」を学ばねばならないのか?

  2. セキュリティ

    SIEMとEDRが担うべき正しい役割とは?企業のセキュリティ部門が認識しておくべき適切なツールの条件

  3. クラウドコンピューティング

    デザインシンキングによるAIと課題のマッチング!現場視点による真のデジタル改善実現へ

  4. 経営

    なぜ成長企業の経営者はバックオフィス効率化に取り組むのか?生産性を高めるための重要な仕組み

  5. 仮想化

    Microsoft 365を利用する企業が見逃す広大なホワイトスペースとは?

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]