KulerAPIを力ずくでGETしてみた。

Kuler のAPI を使った 実験サイト kolor を 公開しました。
別に技術的に大した事はやってないのですが、kulerのAPIを取得することに奮闘した ある種の僕の作品です。

Kulerとは Adobeが公開している配色共有サービスです。URL( http://kuler.adobe.com/ )

一日に何百件もの美しい配色が 世界中のユーザーによって共有され、活用できる素晴らしいサービスです。配色に迷った時は、このサイトに来れば、ほぼ間違い無いです。色彩センスが無いと嘆いてる人は、こういうサービスの力を借りれる事を知っておくと楽しい人生が送れるかもしれませんね。

僕は最近PHPの勉強していて、PHPでTwitterのタイムラインやRSSを取得する知識を付けていました。
しかし、KulerのAPIを弄るのは一筋縄では行きませんでした。

1. XMLの取得は簡単
   

    

   PHPでXMLを取得してHTMLに出力する方法は、TwitterAPIなどで慣れていたため比較的容易にいきました。 タイトルや配色の数値情報 を取得してHTMLに表示をするまではさくっと行きました。 それがコレです。
   http://yohawing.com/exp/kulerAPI.phpちょっとてこずったのが、 XML のタグで <kuler:swatches>とかいう輩がいたことです。
   普通なら、<title> という具合に コロンは付いてません。しかし、このPHPでXMLのタグを指定する時はコロンを使うとエラーが出るので、使えません。

   $field = 'http://kuler.adobe.com/kuler/API/rss/';   
   
   $key2 = $key->children($field);
   $i=0;
   echo "<span class='spa".$j."'>";
   foreach ($key2->themeItem->themeSwatches->swatch as $col) {
   　print "<a name='col".$i."' >". $col->swatchHexColor . "</a>,";
   　$i++;
   }

   こういった具合に、 URL を子要素にぶち込んであげないと、：コロンの回避は出来ないみたいです。
   

2. クロスドメイン問題
   しかし、PHPのデータをいざJavascriptに持って行って 作品を作るとなった時に、Javascriptのデータの明け渡し方が分かりませんでした。
   TwitterはJSONに対応しているので、JSでも容易に弄ることができます。
   しかし、KulerAPIは JSONに対応しておらずXMLのみの配信だったため、XMLの読取を余儀なくされました。 しかし、 Javascript では 他ドメイン間のXmlHttpRequestは禁止されており（クロスドメイン制限） JSでは KulerのAPIを読み込む事が出来ませんでした。
   次に試した方法が、PHPで XML→配列→JSON に変換してそれをJavascript で読み取るという回りくどい方法でした。 これは一見上手くいくと思いきや、Jsonの表記に慣れていない僕は、 浅い階層構造しかなしていない その表記に データの取り出し方がさっぱり分からず、質問するアテもないので 諦めることにしました。
   つぎに、XMLの連想配列から読み取ってみたり、色々やってみたのですが、どれもしっくり来ず、疲れもピーク辺りに達していた僕は、力ずく作戦に出ることにしました。

   それが、PHPでHTMLに出力して、それを上手いことタグ付けして JSに明け渡すという、原始的な方法（それが一番わかり易かった） を取ることにしました。
   JSのコードは人に簡単に見られるので 、ちょっと嫌だったのですが、自分が未熟だということで諦めることにしました。
   欲しい情報の部分を<span>で囲って、クラス指定しました。
   それをjqueryで配列に格納して 取り出す という具合です。

3. Canvas要素
   
   あとは、Canvasに絵を描く楽しい時間…と思いきや、何回も書いているのに未だにCanvasは慣れません。 Jcanvasというライブラリを使って居るのですが、まぁ正直あっても無くてもあまり変わらないですね。今回はインタラクティブな要素を入れたかったので、マウスを動かすと描画されるという、テキトーな私用です。
   ランダム関数が弾きだす、アナログなゆらぎにが美しいです。
   そこに小宇宙を感じています。