そんな訳で、ガジェットの画像を切り替えます。
最終的には、特定のURLからXMLデータを拾ってきて（画像ファイル一覧とか）、それにしたがって、ぐるぐると廻すのが良いのですが、ひとまず画像を切り替える部分だけ。
ガジェットの中身はDOMで、普通のブラウザのように扱えます。なので、背景画像を切り替える場合でも、src プロパティの値を変えるだけです。
ガジェット内での指定は、「url( images/photo.png )」のように指定しています。これを、http で指定すれば、そのまま外部サーバーから画像を持ってこれます。
<script type=”text/jscript” language=”jscript”>
var timerid;
var sec = 0;
var count = 0;
function start_timer()
{
timerid = setInterval( “interval()”, 5000 );
}
function interval()
{
sec += 5;
if ( sec >= 30 ) {
sec = 0;
count++;
if ( count >= 4 ) {
count = 0;
}
var oBackground = document.getElementById(“imgBackground”);
oBackground.src = “url(http://moonmile.net/images/photo”+count+”.png)”;
}
var dd = new Date();
var hour = dd.getHours();
var min = dd.getMinutes();
var s = dd.getSeconds();
var status = (“00″+hour).slice(-2,4) + “:” + (“00″+min).slice(-2,4)+”:”+(“00″+s).slice(-2,4);
var clock = document.getElementById(“clock”);
clock.innerText = status;
}
// ——————————————————————–
// Initialize the gadget.
// ——————————————————————–
function init()
{
var oBackground = document.getElementById(“imgBackground”);
oBackground.src = “url(http://moonmile.net/images/photo0.png)”;
interval();
start_timer();
}
</script>
</head>
<body onload=”init()”>
<g:background id=”imgBackground”>
<div id=”clock”>00:00</div>
<div id=”copyright”><a href=”http://bijo-linux.com”>bijo-linux.com</a></div>
</g:background>
</body>
</html>
あとは、タイマーを使って、一定間隔で呼び出されるようにすればOK。
上のソースでは、時刻も表示していますが、デバッグ用なので、後で消してしまいます。
あとは、コマンド検索ですね。これは、サーバーに対してxml-rpcとかが良いかな。
