JavaScriptカラーピッカーの実装 （colorjack）
2007年4月16日(月) 10:25
Webコンテンツ上で色を選択する機能を実装する際にhex入力よりも、カラーピッカーを設置したほうがユーザビリティが向上する。colorjack.comで紹介されている2種類のカラーピッカーは何れも、JavaScriptで実装できる。
カラーパレットはPNGなどのイメージを利用する。色の選択以外にも、Widgetの移動が可能になっている。また、Sphere Color Picker（円形）はリサイズにも対応している為、カラーパレットを選択しやすいサイズにユーザが変更できる利点がある。
DHTML Color Picker
Sphere Color Picker
サンプルコードとして紹介されているため、細かなドキュメントなどは無い。ある程度JavaScript、CSSなど知識は必要になる。ソースコードを参考にしながら、カラーパレットや色の選択ツールを作成したい方には参考になる。
colorjack.comのメインコンテンツでは上記のカラーパレットを利用したWebサービスがあり、選択した色からグラデーションなど作成できるツールがあります。Photoshopパレットデータ（act)などに出力できるなど便利なので、是非参照していただきたい。（IEでの表示はレイアウトが崩れます）
関連する記事
- マウス操作で写真にズームするギャラリーswf（PostcardViewer）
- CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
- 透明感のあるデザインをJavaScriptで実装する（glassbox.js）
- MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript （JSValidate）
- CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
- ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
- フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
- 半透明の角まるツールチップを表示するJavaScript （CoolTips）
- JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
- JavaScriptコード圧縮して盗用から守る （packer）
- iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
- 画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
- Ajaxでサクサク動くWebファイルマネージャ （Relay）
- アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
- MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
- HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
- 使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）
