Kuler でストライプな壁紙

net

既にブームの過ぎ去った感が否めない adobe の Kuler。当初は air 導入の先駆けとあってもてはやされてたのに、今ではあまり話題に上ることすら少ないという現実。

しかしながら、肝心のコンテンツであるカラーマップとでも呼ぶべき色相環は結構クオリティが高く、そのまま放っておくのはもったいない、というわけで、RSSで公開されているデータを元に、5色のストライプを壁紙として利用できるようにした html を書いてみた。

使ったのは、

の三つ。Active Desktop は98以降の Windows なら標準装備のはず。こいつが凄くて、ローカルに置いてあるスクリプトからだとクロスドメインなんて何のその、外部からスクリプトにしろデータにしろ取得できまくりで、久々に扱うと普段の Javascript の制限のきつさに比べて便利だと思う反面、怖いなぁという感じ。ちなみに、Active Desktopで外部ファイルを参照する場合、ローカルのファイル名＋パス名がばっちりリファラとして残っちゃうので気をつけて。

本来なら JKL ライブラリも別途ローカルに置かなきゃならないんだが、ややこしいのでとりあえず Coderepos に置いてある開発版へリンクしています。問題があれば外します。

Kuler の rss は一週間のうち人気だったテーマの一覧を指定していますが、他にもフィルタリングの手段があるのでお好みで。詳しくはリファレンスを参照してください。

あと、Active Desktop まわりが結構不安定、というか Kuler のサーバーからのレスポンスがあまりよくないようで、時折読み込もうとしたまましばらくフリーズというかホワイトアウトしてしまう場合がありますが、しばらく待てばレスポンスが返ってくると思います。

縦ストライプ＋ヘッダにタイトル表示にしていますが、横ストライプがいいとか、ヘッダは要らないとかの場合は適当にコードを書き換えてもらえばいいかと。そこまでスパゲティなコードではないし、表示部は単純に div を並べて css で制御してるだけなので。

ライセンスは、とか思ったけど、この程度のスクリプトにライセンスもなにもないと思うので煮るなり焼くなりお好きにどうぞ。これをコピーしてHDDの適当な場所に .html で保存し、壁紙の設定画面から指定してやれば使えるはず。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Kuler Wall Paper</title>
<style type="text/css">
  body { margin: 0; padding: 0; }
  #container { height: 100 %; width: 100%; margin: 0; padding: 0; overflow: auto; }
  #header { clear: both; height: 2%; width: 100%; margin: 0; padding: 0;
            font: italic small tahoma; background-color: #000; text-align: right; color: #fff; }
  .wall { float: left; height: 98%; width: 20%; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="http://svn.coderepos.org/share/lang/javascript/jkl/jkl-parsexml.js"></script>
<script type="text/javascript">

////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Kuler Wall Paper Script
//
// 2008 (C) RobinEgg - http://d.hatena.ne.jp/RobinEgg/

//
// You can freely redistribute, modify, copy, etc... this code without any restriction.

//
////////////////////////////////////////////////////////////////////////////////////////////////////

function kwp(){

  // Kuler Data URL
  //var url = "http://kuler.adobe.com/kuler/API/rss/get.cfm?timeSpan=7&listType=rating";
  var url = 'http://kuler.adobe.com/kuler/API/rss/get.cfm?timeSpan=7&listType=random';

  // Use JKL.ParseXML
  var http = new JKL.ParseXML(url);
  var data = http.parse();

  // for HTML hexadecimal color code (5 elements)
  var hex = new Array();

  // Parse XML elements: selecting random theme.
  var rssitems = data.rss.channel.item;
  var rand = Math.floor(Math.random()*rssitems.length);
  var swatch = rssitems[rand]["kuler:themeItem"]["kuler:themeSwatches"]["kuler:swatch"];

  // get 5 color codes.
  for(i=0;i<swatch.length;i++){
    hex[swatch[i]["kuler:swatchIndex"]] = swatch[i]["kuler:swatchHexColor"];
  }

  var walldivs = document.getElementsByTagName('div');

  for(i=0;i<walldivs.length;i++){
    div = walldivs[i];
    if (div.className == 'wall'){
      div.style.backgroundColor = '#' + hex[div.id.substr(1,1)];
    }
  }

  document.getElementById('header').innerHTML = rssitems[rand].title;

}

</script>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="w0" class="wall"></div>
<div id="w1" class="wall"></div>
<div id="w2" class="wall"></div>
<div id="w3" class="wall"></div>
<div id="w4" class="wall"></div>
</div>
<script type="text/javascript">
  kwp();
</script>
</body>
</html>