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

投稿:  著者:  読了時間:7分(本文:約3,100文字)


こんにちは、秋葉です。

「まもなく登場IE9とWP7!─加速するHTML5」

告知なんですが、今月、マイクロソフトのエバンジェリストの一人、春日井良隆さんと、わたし秋葉が共演するイベントが、東京(新宿)と大阪(堺筋本町)の2ヶ所で開催されます。

◎かぷっと秋葉が聞く「IE9はどうなるの? WP7(Windows Phone 7)はスゴイの? 教えて春日井さん!」
< http://seminar.fsv.jp/program/110219.html >

こないだ春日井さんにWindows Phone 7の実機を見せてもらい、触ってみたんですがなんともおしゃれ! マイクロソフトらしくない!(誤爆)
うそうそ、最近のMSがおしゃれなんでいいなと思ったり。。
IE9のRC版を見つつ、僕が春日井さんに「IE9のここって大丈夫なの?」ってツッコミを入れながらトークするというものです。

◎CSS Nite in OSAKA, Vol.26 with Microsoft ─HTML5+IE9 Web Camp1─
< http://osaka.cssnite.jp/vol26/ >

さらに今月27日は、HTML5で有名な羽田野太巳さんにお話をしていただきます。
会場も大阪のマイクロソフト株式会社関西支店さん、いつもお世話になります!!
で、僕は今ある書籍を執筆中なんですが、その関連のCSS3の事を話します。
あんまり技術的な話より、案件でどう使うかの話を交えたいと思っています。

さて、本題です。

先日CSS3 Easy Gradation Editor "Grad2" を公開しました。
< http://grad2.ecoloniq.jp/ > 。

なのに、、、気になる記事を見かけました、
[FirefoxとWebKit、CSS3グラデーションの指定方法統一|エンタープライズ|マイコミジャーナル]
< http://journal.mycom.co.jp/news/2011/01/21/017/index.html >



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標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。