haraです。

今週の時計はkulerで背景に色をつける時計です。

kulerは、人気のある色の組み合わせを集めているwebサービスで、最近ではAdobe製品のプラグインとしてkulerから色を拾える機能とかがついています。

kuler

 このサービスでは、非商用であれば無料でAPIを利用できるようになっているので、今回はこれを利用してみました。

時計を開くと、最初にAPIに接続して、ランダムな色をキーにして色の組み合わせを検索し、10件の検索結果を拾ってきます。（ロード画面の背景色がキーの色です）

時計の角度に合わせて画面を分割し、取得した色で塗りつぶし。

分が変わるたびに色の組み合わせをスライドさせます。

さて、kuler APIを利用するには、

・Adobe IDの作成

・Kuler API KEYの作成

が必要になります。

APIを利用して、新着や人気のカラースキーム一覧を取得したり、ユーザidや色を指定してカラースキームを検索し、結果一覧を取得することができます。

こちらに解説があります。

B. Feeds - Kuler - Adobe Learning Resources

Getting Startedではmust be include your Serviceとあるので、このサービスを利用する場合は必ずどこかにKulerロゴを入れておく必要があります。

A. Kuler API Documentation - Kuler - Adobe Learning Resources

今回の時計では、KulerのAPIはURLLoaderで呼び出して読み込み完了の後、

col = 0xFFFFFF*Math.random();
KULER_API = "http://kuler-api.adobe.com/rss/get.cfm?listType=random&startIndex=1&itemsPerPage=10&timeSpan=6000&hex="+col+"&key=yourKeyXXXXXXXXXX";
urlLoader.load(new URLRequest(KULER_API));
			

XMLを取得して、swatch.kuler::swatchHexColorを抜き出して配列に入れてく、という感じで利用しています。 

var xml:XML = new XML(URLLoader(e.target).data);
for each(var items:XML in xml[0].channel[0].item) {
	var arr:Array = new Array();
	for each(var swatch:XML in swatches.kuler::swatch) {
		swatches =items.kuler::themeItem[0].kuler::themeSwatches[0];		 
			arr.push(Number("0x"+swatch.kuler::swatchHexColor));
	}
	colorArray.push(arr);
}

Kuler、なかなか面白いAPIなので、みなさんも使ってみてはいかがでしょう？

ではまた来週〜