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 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    Pマーク改訂で何が変わり、何をすればいいのか?まずは改訂の概要と企業に求められる対応を理解しよう

  2. セキュリティ

    従来型のセキュリティでは太刀打ちできない「生成AIによるサイバー攻撃」撃退法のススメ

  3. セキュリティ

    クラウド資産を守るための最新の施策、クラウドストライクが提示するチェックリスト

  4. セキュリティ

    最も警戒すべきセキュリティ脅威「ランサムウェア」対策として知っておくべきこと

  5. セキュリティ

    AIサイバー攻撃の増加でフォーティネットが提言、高いセキュリティ意識を実現するトレーニングの重要性

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

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

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

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