JavaScript++かも日記: 【jKamo】カラーコードマッチング用JSリテラル

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年01月06日

【jKamo】カラーコードマッチング用JSリテラル

【jKamo 】

ブックマーク-- Hatena

/ Livedoor

こんなことをしていたら、backgroundColorの戻り値が、そういえばブラウザごとにバラバラだったことを思い出したので、ColorNameをColorCodeに変換するための~~JSON~~ JSリテラルを作ってみました。サイズは~~3.17k~~ 2.8k です。(JSONで作ると "orange" とかのプロパティ名にも付けるダブルクオート280個が無駄なのでやめました。一応、JavaScriptだけで使う想定なので。)

サンプルとソース
http://jsgt.org/lib/colorname2code/

ColorNameをプロパティ、ColorCodeを値として持つオブジェクトです。たとえば、

alert(oj.orange); alert(oj['orange']);

なら「#ffa500」が返ります。Win IE6やFirefoxのように色を調べたらColorNameが返ってくる場合に、ColorCodeへ変換できるようになります。たいしたものではありませんが、一度作っておけば、作業を多少は節約できるかと。

とりあえず、colorname2code140.js内では、

ColorName2Code140({white:"#ffffff",snow:"#fffafa",......});

という書式で、コールバック関数ColorName2Code14の引数として渡すJSONPのような半スクリプト状態にしてあります。（ちなみに「140」は140色版という意味です）

これによって、あらかじめ関数ColorName2Code140を自分のページへ定義しておいて読み込めば、次のように、このJSONを読み込んだタイミングあるいはロード後に処理を起こすことができるようになります。ま、たぶん、そんなに意味は無いですが。

<script>
var colorOj;
function ColorName2Code140(oj){
  colorOj=oj;
  alert("orangeは、"+colorOj['orange']);
};
</script>
<!-- ここで読み込む -->
<script src="./colorname2code140.js"></script>

当然ながらPublic Domainですが、間違いがあったらごめんなさい。例によって、切り貼りもかまいませんし、連絡も不要ですが、使う場合はスクリプトを自分のサーバーに置いてください。そろそろjsgt.orgもいっぱいなので。

/*ColorName2Code140(Public Domain)@see http://jsgt.org/mt/archives/01/001481.html*/ ColorName2Code140({white:"#ffffff",snow:"#fffafa",ghostwhite:"#f8f8ff",whitesmoke:"#f5f5f5",floralwhite:"#fffaf0",linen:"#faf0e6",antiquewhite:"#faebd7",papayawhip:"#ffefd5",blanchedalmond:"#ffebcd",bisque:"#ffe4c4",moccasin:"#ffe4b5",navajowhite:"#ffdead",peachpuff:"#ffdab9",mistyrose:"#fff4e1",lavenderblush:"#fff0f5",seashell:"#fff5ee",oldlace:"#fdf5e6",ivory:"#fffff0",honeydew:"#f0fff0",mintcream:"#f5fffa",azure:"#f0ffff",aliceblue:"#f0f8ff",lavender:"#e6e6fa",black:"#000000",darkslategray:"#2f4f4f",dimgray:"#696969",gray:"#808080",darkgray:"#a9a9a9",silver:"#c0c0c0",lightgrey:"#d3d3d3",gainsboro:"#dcdcdc",lightslategray:"#778899",slategray:"#708090",lightsteelblue:"#b0c4de",steelblue:"#4682b4",royalblue:"#4169e1",midnightblue:"#191970",navy:"#000080",darkblue:"#00008b",mediumblue:"#0000cd",blue:"#0000ff",dodgerblue:"#1e90ff",cornflowerblue:"#6495ed",deepskyblue:"#00bfff",lightskyblue:"#87cefa",skyblue:"#87ceeb",lightblue:"#add8e6",powderblue:"#b0e0e6",paleturquoise:"#afeeee",lightcyan:"#e0ffff",cyan:"#00ffff",aqua:"#00ffff",turquoise:"#40e0d0",mediumturquoise:"#48d1cc",darkturquoise:"#00ced1",lightseagreen:"#20b2aa",cadetblue:"#5f9ea0",darkcyan:"#008b8b",teal:"#008080",seagreen:"#2e8b57",darkolivegreen:"#556b2f",darkgreen:"#006400",green:"#008000",forestgreen:"#228b22",mediumseagreen:"#3cb371",darkseagreen:"#8fbc8f",mediumaquamarine:"#66cdaa",aquamarine:"#7fffd4",palegreen:"#98fb98",lightgreen:"#90ee90",springgreen:"#00ff7f",mediumspringgreen:"#00fa9a",lawngreen:"#7cfc00",chartreuse:"#7fff00",greenyellow:"#adff2f",lime:"#00ff00",limegreen:"#32cd32",yellowgreen:"#9acd32",olivedrab:"#6b8e23",olive:"#808000",darkkhaki:"#bdb76b",palegoldenrod:"#eee8aa",cornsilk:"#fff8dc",beige:"#f5f5dc",lightyellow:"#ffffe0",lightgoldenrodyellow:"#fafad2",lemonchiffon:"#fffacd",wheat:"#f5deb3",burlywood:"#deb887",tan:"#d2b48c",khaki:"#f0e68c",yellow:"#ffff00",gold:"#ffd700",orange:"#ffa500",sandybrown:"#f4a460",darkorange:"#ff8c00",goldenrod:"#daa520",peru:"#cd853f",darkgoldenrod:"#b8860b",chocolate:"#d2691e",sienna:"#a0522d",saddlebrown:"#8b4513",maroon:"#800000",darkred:"#8b0000",brown:"#a52a2a",firebrick:"#b22222",indianred:"#cd5c5c",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightcoral:"#f08080",salmon:"#fa8072",lightsalmon:"#ffa07a",coral:"#ff7f50",tomato:"#ff6347",orangered:"#ff4500",red:"#ff0000",crimson:"#dc143c",mediumvioletred:"#c71585",deeppink:"#ff1493",hotpink:"#ff69b4",palevioletred:"#db7093",pink:"#ffc0cb",lightpink:"#ffb6c1",thistle:"#d8bfd8",magenta:"#ff00ff",fuchsia:"#ff00ff",violet:"#ee82ee",plum:"#dda0dd",orchid:"#da70d6",mediumorchid:"#ba55d3",darkorchid:"#9932cc",darkviolet:"#9400d3",darkmagenta:"#8b008b",purple:"#800080",indigo:"#4b0082",darkslateblue:"#483d8b",blueviolet:"#8a2be2",mediumpurple:"#9370db",slateblue:"#6a5acd",mediumslateblue:"#7b68ee"});

【コメント】