カラーピッカーを作ってみる

はてな JavaScript

はてなハイクのパレットを変更するグリモン - gan2 の Ruby 勉強日記でパレットのデータを作るのに
ハイクで色を置いてからColorZilla :: Firefox Add-onsを使って色情報を取得してそれをコピペして
ってやって作っていたのだけどこのやり方は普通にめんどくさい。
なのでカラーピッカーで色を取得してそれをパレットのデータに出力できるツールを作ってみる。
Color Picker for HHCP
「HHCP」は「Hatena Haiku for Custom Pallet」の略。
全部書くと for が2回出てくる上に長すぎるので省略した。
Color Picker も Custom Pallet も頭文字とると CP になるしあまりいい名前ではないかも。


まだ作りかけだけど
参考にしたページとかをまとめておかないと有耶無耶になっちゃいそう(しちゃいそう)なので
とりあえず自分用にまとまらないなりにまとめておく。

ロゴ

タイトルロゴはWeb2.0 Logo Creator by Alex Pで作った。
前にも使ったことがあったけど色を変える方法は初めて使った。
Web 2.0 なロゴジェネレーター - trial and errorで詳しく紹介されている。
思い通りのロゴができなくて少し苦戦。
デフォルトだと語尾に「r」が付くとそこだけ「ピンク」になりそれ以外は「水色」になるっぽい。
ん？そうだもないのか？よくルールが分からない。
「Color Picker for Hatena Haiku」で出力するとこんな感じになる。
(ちょっと画像の幅がありすぎるな。。)
http://www.h-master.net/web2.0/image/Color%20Picker%20for%20Hatena%20HaikuBETA.png
なんで最後の「Haiku」の前で区切れるのかよく分からない。
手前の方にスペース2個入れたりしてみたけど調節できなかったので
あきらめてタイトルを今のに変更した。

ライブラリ

jQuery

jQuery は Google がホスティングしてるのを使った。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

公式ドキュメント → AJAX Libraries API - Google Code
ダウンロードして手元に持ってこようかとも考えたけど
ホスティングされているのを使った方がアップロードの手間とか減って楽なのでそうすることにした。


ぐぐって一番最初に出てきた
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果 | エンタープライズ | マイコミジャーナルにはこんなサンプルがのっている。

<script type="text/javascript" src="http://www.google.com/jsapi"\></script\>
<script type="text/javascript"\>google.load("prototype", "1.6.0.2");</script\>
AJAX Libraries APIとPrototypeの使用例その2 - Prototypeブログより抜粋

でもこれ動かないよ。
なんでタグの終わりが「\>」ってなってるんだろう？
「\」が余計だ。
あと「Prototypeブログ」ってなんだ…。
ちゃんと正式名称で書いてほしい。
せめてリンク貼ってほしい。

Yahoo UI

Yahoo UI は Yahoo がホスティングしてるのでそれを使った。
Serving YUI Files from Yahoo! Serversを使うと
必要なライブラリを読み込む HTML を自動生成してくれる。便利だなー。
でもライブラリのドキュメントページにも必要な HTML はのってるので
複数使うのでなければドキュメントから持ってくるのが早い。
っていうか Yahoo は親切ですね。


今回はYahoo! UI Library: Color Picker Controlを使った。
YUI でカラーピッカーが使えるというのはおそらくはてブ経由で過去に見た記憶があった。
自分でやろうとしたらかなり時間かかると思うので YUI 様々。
そしてソースはここのを大分参考にした。
Color Picker Control：強力AjaxライブラリYahoo! UI Library - builder by ZDNet Japan

キーバインド

パレットのセルの選択をマウスでやるのが若干面倒なので
「A」と「S」でセルを左右に移動できるようにした。
jQueryでキーバインド (でぃべろっぱーず・さいど)で紹介されている jQuery のプラグインを使った。

// a を押したときに関数 fn を呼ぶ処理
$.hotkeys.add('a', fn);

// ただし上の書き方で fn に引数を渡すとエラーになるので
// fn に引数を渡したい場合は無名関数で囲む
$.hotkeys.add('a', function() { fn(arg); });

チェックリスト

□ は未実装 ■ は実装済
最終更新 2008/07/05

状態 内容
■ 「A」と「S」でセルを移動
■ セルのデータのインプット
□ セルの色をコピー
□ セルの移動 (ドラッグ & ドロップ)
□ アンドゥ
□ リドゥ

その他

追記

気付いてしまった。
CollorZilla のカラーピッカー機能でもデータの出力までできることに…。
これは開発終了かなぁ (´▽｀；)