こんばんは。久しぶりにDean Edwards
のブログを覗いたら、MSIEでカラーキーワード(redとかtomatoとか)やらをHEX方式(#f01234とか)に変換するやり方が載ってました。
function toHex(color) {
var body = createPopup().document.body,
range = body.createTextRange();
body.style.color = color;
var value = range.queryCommandValue("ForeColor");
value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16);
value = value.toString(16);
return "#000000".slice(0, 7 - value.length) + value;
};
へぇ。これにも元ネタがあって、それはerik's weblogのコメント です。ppBlogには、cornerplay.jsというJavaScriptがあって、指定ボックスの角を丸くしたり凸凹にしたりできる動作を担当しています。具体的には以下のような感じです。
こんな感じで、コーナーをちょいと変えると、見た目のアクセントになります。
で、このボックスの背景色に、tomatoとかindigoとかlavenderなどのいわゆるカラーキーワード でも指定できるように、これらカラーキーワードをHEX方式に直した対応表も含めているんですよね(147色ぐらいある)。今、考えるとほかにもやりようがある気もしますが、当時は仕方ないなぁとその対応表をJSON配列にして含めてました。
このDean Edwardsのやり方なら、対応表なんていりませんね。記述が短くなってファイルサイズも小さくなるだろうし言うことないです。ただ、これはIE限定なので、Firefoxやその他のブラウザでも動くように改良してみましょう。Deanは、「ほかのブラウザは、getComputedStyle()が使えるからバッチリだぜ。」って述べています。
調べたところ、各ブラウザ（Firefox、Opera、Chrome・SafariなどのWebKit系）で結構動作が違っていて興味深かったです。ただ色の変換をしたいだけなのに、わざわざ既存のDOM構造に影響を与えるようなやり方(色を取得したいがために、document.createElementで新たに要素を作成して、それをdocument.body.appendChildしてDOM構造を改変した後で、getComputedStyle()にて色を取得)は、reflowの問題 もあり出来れば避けたいところ。
大体以下のような感じでいけそうです。
function ColorToHEX(color){
var d = document, ecolor, element = d.createElement("button");
element.style.color = color;
ecolor = element.style.color; // ポイント！
if(ecolor.indexOf("#") !== -1) return ecolor; // Operaの可能性が高い
if(d.uniqueID){ // IE向け
color = element.createTextRange().queryCommandValue("ForeColor");
color = ((color & 0x0000ff) << 16) | (color & 0x00ff00) | ((color & 0xff0000) >>> 16);
return "#" + ("000000" + color.toString(16)).slice(-6);
} else { // IE以外のブラウザ
if(/webkit/i.test(navigator.userAgent)){ // Google Chrome, Safariで基本カラーなら
var basicColors = {
"aqua" : "#00ffff", "black" : "#000000", "blue" : "#0000ff", "fuchsia" : "#ff00ff", "gray" : "#808080", "green" : "#008000",
"grey" : "#808080", "lime" : "#00ff00", "maroon" : "#800000", "navy" : "#000080", "olive" : "#808000", "orange" : "#ffa500",
"purple" : "#800080", "red" : "#ff0000", "silver" : "#c0c0c0", "teal" : "#008080", "white" : "#ffffff", "yellow" : "#ffff00"
}
for (var col in basicColors){
if(color.toLowerCase() === col) return basicColors[col];
}
}
if(ecolor.indexOf("rgb") !== -1){ // RGB形式で色を返した！
color = ecolor;
} else color = getComputedStyle(element, null).getPropertyValue("color");
return "#" + color.replace(/rgb¥((¥d+?),¥s*(¥d+?),¥s*(¥d+?)¥)/g, function(a, r, g, b){
return ("000000" + ((+r) * 65536 + (+g) * 256 + (+b)).toString(16)).slice(-6);
});
}
};
流れとしてはこうです。- IEでcreateTextRange()を使うのでBUTTON要素を作成。
- それに色を指定する。element.style.color = color
- 指定した色の取得。この時点で、OperaがHEX形式の値を返してくれる。Opera一抜け。
- 同様に、この時点で、IEはqueryCommandValue経由でBGR値を取得できるので、それをHEXに変換。
- IE以外でFirefoxは、ecolorは指定したままの値。getComputedStyleを使うとRGB値を返してくれる。
- WebKit系は振る舞いがややこしい。Webの基本17色、例えばredの場合、 ecolor = element.style.color にはredがそのまま入り、tomatoなどの拡張色ならRGB形式を返す。じゃ、getComputedStyleはどうかというと、まだDOMに組み入れていないので空の値を返す。
- なので、WebKit系で基本17色であれば、それはJSON対応させてHEX値を返すようにします。そうでなければ、RGB値を返してくれるのでHEX値に変換。
- 以上。document.body.appendChildなどでのDOM改変は必要ない点がポイントです。
WebKit系の振る舞いが独特で、特別な処理が必要になりますが、いずれにせよ、DOMの改変を伴わなくて良いかなぁと(まぁcreateElementはしますが)。ちなみに、OperaでもgetComputedStyleは使えますが、FirefoxやWebKitがRGB値を返すのに対して、OperaはHEX値を返します。RGB値からのHEX値への変換は、いくつか方法があるでしょう。上では正規表現を用いています。逆にHEXからRGBへの変換も色々あると思います。
function HEXToRGB(hex){
return hex.replace(/#?(¥w{2})(¥w{2})(¥w{2})/, function(a, r, g, b){
return "rgb(" + parseInt(r, 16) + ", " + parseInt(g, 16) + ", " + parseInt(b, 16) + ")"}
);
}
や
function HEXToRGB(hex){
var color = parseInt(hex.replace("#", ""), 16);
return "rgb(" + ((color >> 16) & 0xff) + ", " + ((color >> 8) & 0xff) + ", " + (color & 0xff) + ")";
}
などですかね。
ついでなので、カラーキーワードからRGB値に変換する関数も挙げておきます。考え方は基本的に同じです。DOMの改変は必要ないです。
function ColorToRGB(color){
var d = document, ecolor, element = d.createElement("button");
element.style.color = color;
element.style.display = "none";
ecolor = element.style.color;
if(ecolor.indexOf("rgb") !== -1) return ecolor; // WebKit系が一抜けする可能性あり。
if(ecolor.indexOf("#") !== -1){ // OperaはHEX値を返す
return ecolor.replace(/#?(¥w{2})(¥w{2})(¥w{2})/, function(a, r, g, b){
return "rgb(" + parseInt(r, 16) + ", " + parseInt(g, 16) + ", " + parseInt(b, 16) + ")"}
);
}
if(/webkit/i.test(navigator.userAgent)){ // WebKit系で、基本カラーの場合はRGB値を返さない
var basicColors = {
"aqua" : "rgb(0, 255, 255)", "black" : "rgb(0, 0, 0)", "blue" : "rgb(0, 0, 255)", "fuchsia" : "rgb(255, 0, 255)",
"gray" : "rgb(128, 128, 128)", "green" : "rgb(0, 128, 0)", "grey" : "rgb(128, 128, 128)", "lime" : "rgb(0, 255, 0)",
"maroon" : "rgb(128, 0, 0)", "navy" : "rgb(0, 0, 128)", "olive" : "rgb(128, 128, 0)", "orange" : "rgb(255, 165, 0)",
"purple" : "rgb(128, 0, 128)", "red" : "rgb(255, 0, 0)", "silver" : "rgb(192, 192, 192)",
"teal" : "rgb(0, 128, 128)", "white" : "rgb(255, 255, 255)", "yellow" : "rgb(255, 255, 0)"
}
for (var col in basicColors){
if(color.toLowerCase() === col) return basicColors[col];
}
}
if(d.uniqueID){ // IE用
color = element.createTextRange().queryCommandValue("ForeColor");
return "rgb(" + (color & 0xff) + ", " + ((color >> 8) & 0xff) + ", " + ((color >> 16) & 0xff) + ")";
} else { // FirefoxはこれでRGB値を返す
return getComputedStyle(element, null).getPropertyValue("color");
}
}
こんな感じですかねぇ。ファイルサイズが小さくなるなら、cornerplay.jsを書き換えても良いなぁ。
ちなみに、圧縮したら920バイトになりました。
function ColorToHEX(b){var g=document,a,e=g.createElement("button");e.style.color=b;a=e.style.color;if(a.indexOf("#")!==-1){return a}if(g.uniqueID){b=e.createTextRange().queryCommandValue("ForeColor");b=((b&255)<<16)|(b&65280)|((b&16711680)>>>16);return"#"+("000000"+b.toString(16)).slice(-6)}else{if(/webkit/i.test(navigator.userAgent)){var f={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",grey:"#808080",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",orange:"#ffa500",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00"};for(var c in f){if(b.toLowerCase()===c){return f[c]}}}if(a.indexOf("rgb")!==-1){b=a}else{b=getComputedStyle(e,null).getPropertyValue("color")}return"#"+b.replace(/rgb¥((¥d+?),¥s*(¥d+?),¥s*(¥d+?)¥)/g,function(h,j,i,d){return("000000"+((+j)*65536+(+i)*256+(+d)).toString(16)).slice(-6)})}};
Comments