壁紙チェンジャーWidget

Widget iPod Touch Theme

大体10分おきにHOME画面の壁紙をランダムに変更するテーマ。

適用画像(変わっていることがわからないので、意味が無い)



使用している背景画像はhttp://yakudatsu.livedoor.biz/archives/51660017.htmlからいくつか頂いた物

ファイル構成(/Library/Themes/以下の構成)

相対パス ファイル名 用途
MyTouchTheme/ Wallpaper.html ホーム画面を構成するHTML
MyTouchTheme/js WidgetBase.js javascript
MyTouchTheme/css WidgetBase.css スタイルシート
MyTouchTheme/bg bg_XXX.jpg 背景画像 XXXは0埋めの3桁の数字(001, 002など)

※"MyTouchTheme"はテーマ名。任意の名前でOK
※背景画像は960×640, 480×320混在でもOK

ソース

Wallpaper.html
<?xml version="1.0" encoding="UTF-8"?>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="JavaScript" src="js/WidgetBase.js" ></script>
    <link rel="stylesheet" href="css/WidgetBase.css">
  </head>

  <body>
    <script language="JavaScript">
      PageRefresh();
      setInterval('PageRefresh()', 5 * 1000 );
    </script>
  </body>
</html>
WidgetBase.js
var FIRSTTIME = 0;
var BGIMAGE_NUM = 15;			// 背景画像数
var TIME_CHG_BGIMAGE = 10;		// 背景の切り替え間隔(分)
var CHANGE_TIME = 0;

/**
 * ページの更新処理
 */
function PageRefresh()
{
  var now = new Date();

  if (FIRSTTIME == 0)
  {
    ChangeBackgroundImage();
    FIRSTTIME = 1;
    CHANGE_TIME = now.getTime();
  }
  else
  {
    // 前回更新時刻から10分経過していた場合は変更
    if ((CHANGE_TIME + TIME_CHG_BGIMAGE * 60 * 1000) < now.getTime())
    {
      ChangeBackgroundImage();
      CHANGE_TIME = now.getTime();
    }
  }
}

/**
 * 壁紙の切り替え
 */
function ChangeBackgroundImage()
{
  var imageArray = new Array();
  for (var i=0 ; i<BGIMAGE_NUM ; i++)
  {
    imageArray[i] = "url(" + "bg/bg_" + ("00" + (i + 1)).slice(-3) + ".jpg" + ")";
  }

  n = Math.floor(Math.random()*imageArray.length);
  document.body.style.backgroundImage = imageArray[n];
}
WidgetBase.css
body {
  background-repeat : no-repeat;
  margin            : 0;
  padding           : 0 0 0 0;
  height            : 480px;
  width             : 320px;
  background-size   : 320px 480px;
}

ポイント

ソースはすべてUTF-8で保存。
作成したところなので、しばらく様子を見る必要がある。