明日もデザインで食べていこう！［10］CSS3グラデーションのコードを書き出すエディタの改良版のご紹介
── 秋葉秀樹 ──

Webkit系とMozilla系のCSS3グラデーションの記述が、下記の規定に統一されるらしく、記述がひとつにまとまるって話を聞きました。
< http://dev.w3.org/csswg/css3-images/
>

ありがたい話です、実は2つのレンダリングエンジンでグラデーションの記述が全く異なるのです。

【Webkit系】
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff7400), color-stop(0.00, #ffa443));

【Mozzila(Gecko)系】
background: -moz-linear-gradient(top, #ffa443 0%, #ff7400 100%);

これは上から下の縦方向に#ffa443から#ff7400のグラデーションをひきます。

今後は【Mozzila（Gecko）系】の方に近くなるらしいです。
自作のエディタも近いうち、吐き出されるコードを見直す必要があるんです。
タイミングが難しいな、と。

以前、CSS3グラデーションを生成するサイト「Grad? Gradient!」を作って公開しましたが、使ってみると非常に使いづらい点がいくつかあり、悶々としていました。そこで、以下の点を改善点として新しく作り直しました。

・スライダーをダブルクリックしても、カラーピッカーのデフォルトの色がスライダーの色にならない。
・そもそも色が選びにくい！　色を編集するには使いたくない。
・無駄にborderプロパティとか色々ソースが吐き出されるけど、大抵そこは自分で書くだろう。

で、以下のように手段を変更しました。

・カラーピッカーは有名でしっかりしてるプラグイン「Farbtastic: jQuery color picker plug-in」があるので、使わせていただく。
・グラデーションスライダーのドラッグは「jQuery UI Draggable plug-in」を使わせていただく。
・スライダーは前回canvasで全部を描画していたが、今回はp要素であるHTMLを使う。
・今回はグラデーションのソースだけ吐き出させる。
といったように、jQueryさまさま。

Farbtasticカラーピッカーはすばらしくって、ホントにしっかりしています。
< http://acko.net/dev/farbtastic
>
もちろん、色をget / setするためにプロパティやメソッドも用意されているので、「このスライダーがクリックされたから、スライダーが持っている色をカラーピッカーにセットする」ということが楽にできます。

設定はこんな感じです。

// HTML側

<p><input type="text" id="colorCode" name="color" value="#123456"></p>
<div id="colorPicker"></div>

// JavaScript側

var picker = $.farbtastic('#colorPicker'); // div#colorPickerにカラーピッカーを生成させる
picker.linkTo($("#colorCode")); // input#colorCode内とリンクしてカラー値を表示させる

これだけで、カラーピッカー単体はもう完成です。
すごい。

で、あとはセットするために

var val = "#ff0000";
picker.setColor( val );

とすると、その色の場所にカラーピッカー内のアイコンが移動します（つまり赤を指す）。今現在ピッカーの色の何色が選択されているかを知りたい場合

picker.color

で、カラー値が返ってきます。

もうこれだけで使える！　と思ったんですが、独自のイベント（例えばマウスドラッグ中のイベントとか）については公式サイトには詳しく触れてなくてちょっと困ってました。中身のソースを読めるほどの知識がないもんだから、どうしようと。。

要は色を選んでいる最中、mousemoveのようなイベントがあれば使いたかったんですが、どうやら取れず、別の方法を使ってマウスを押しながら動かしている間はcolorプロパティを取得し続けて、ボタンの色にリアルタイムに反映させることにしました。

今回はjQueryプラグインを使わせていただきました、2つともとても安定していてさすがだな、って思います。というわけで、一度試してみてください、どうぞよろしくお願いします！！

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。