Banco Japon de Mesa Verde
最近の主な話題-iPhone-FPS-デジタル一眼-PC自作-Mac-PS3-グルメ-ファッション-etc.-
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[タグ未指定]

人気blogランキング
[iPhone 3G] ローカルの画像をランダムに表示する壁紙
一定時間でランダムに切り替わる壁紙

 前回の「Webの画像をランダムに表示する壁紙」に続いて。
 今回はiPhoneローカルの画像をランダムに表示する壁紙(テーマ)を作ります。

 ■実施内容
 テーマ内の任意フォルダに複数の画像を配置し、一定時間毎に切り替えてiPhoneホーム画面の壁紙として表示します。画像の選択はランダム。

 ■準備
 ベースのWinterBoard(SummerBoard)テーマはこちらの「壁紙観賞用」です。壁紙画像はWebから拾ったり自作したり、とりあえず20枚用意しました。スクリプトで処理するときの利便性を考えてファイル名は連番に。これをテーマ内の/Wallpapersフォルダ(フォルダ名は任意)に保存。後はWallpaper.html(JavaScript)の作成だけです。
テーマのフォルダ構成

 ■Wallpaper.html・スクリプトのソース
『Wallpaper.html』のソース
(青字部分が該当箇所)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="Wallpapers/"/>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
<!--
    imgTbl = new Array();
    imgTbl[0] = "img_1.png";
    imgTbl[1] = "img_2.png";
    imgTbl[2] = "img_3.png";
    imgTbl[3] = "img_4.png";
    imgTbl[4] = "img_5.png";
    imgTbl[5] = "img_6.jpg";
    imgTbl[6] = "img_7.jpg";
    imgTbl[7] = "img_8.jpg";
    imgTbl[8] = "img_9.png";
    imgTbl[9] = "img_10.jpg";
    imgTbl[10] = "img_11.png";
    imgTbl[11] = "img_12.jpg";
    imgTbl[12] = "img_13.jpg";
    imgTbl[13] = "img_14.png";
    imgTbl[14] = "img_15.png";
    imgTbl[15] = "img_16.png";
    imgTbl[16] = "img_17.png";
    imgTbl[17] = "img_18.png";
    imgTbl[18] = "img_19.jpg";
    imgTbl[19] = "img_20.png";
function chgwall() {
    num = Math.floor(Math.random()*imgTbl.length);
    document.wall.src = imgTbl[num];
}
//-->
</script>

<style>
    body {
        background-color: black;
        margin: 0;
        padding: 0 0 0 0;
        height: 480px;
        width: 320px;
    }
    img {
        position: absolute;
        width: 320px;
        height: auto;
    }
</style>
</head>
<body style="color: black" onLoad="setInterval('chgwall()',10*60*1000)">
    <img src="Wallpaper.png" name="wall" onerror="this.src='error.png'">
</body>
</html>


 head内の<base href="Wallpapers/"/>は必須ではありません。省いた場合下部の配列(ファイル名)で「Wallpapers/img_1.png」などとパスを指定する必要があります。
 前半の青字部分が画像選択のスクリプトです。
   ・Arrayで画像20個分の配列を指定
   ・0~19の乱数を発生させ画像(配列)の番号とする
   ・配列で得たファイル名をオブジェクトの名前wallとして定義
後半の青字が画像表示用です。
   ・onLoad=でhtmlロード時にスクリプトを実行、setInterval(10分)で繰り返し
   ・imgタグ(名前wall)で画像を表示
   ・ロード時はWallpaper.pngを表示
   ・エラー時は別の画像(error.png)を表示

 ■結果と問題点
 前回同様切り替えが安定しません。やはりスリープ中にカウントが停止しているようなのでインターバルを変えて確認してみました。

 ■再度動作確認
 setInterval(10秒)
   ・動作OK
   ・この間スリープなし(常時ホーム画面を表示)
 setInterval(1分)
   ・動作OK
   ・この間スリープなし(常時ホーム画面を表示)
 setInterval(5分)
   ・動作NG(画像が切り替わらない)
   ・1分でスリープ
 setInterval(5分)
   ・設定でスリープ(オートロック)「なし」を指定
   ・動作OK
 今回の結果を見ても、JavaScriptのsetIntervalを利用した場合、スリープ中の安定した計時は望めないようです。
 ただし中断であって停止ではないため起動/スリープを繰り返していれば「いずれ、いつかは」切り替わります。また、スリープによる中断時間イコール消灯時間ではないようで・・・多分ユーザーが意図的にスリープボタンを押した直後や、スリープ中どこかのタイミングで処理が行われているようです(点灯後突然切り替わったり、スリープ中なのに変わっていたことがあるため)。

 ■まとめ
 またもや表示される画像がランダムだけでなく、切り替わる時間もランダムになってしまいました。その方が意外性があっていいかもしれません。そういうことにしておきます。
スポンサーサイト

テーマ:iPhone - ジャンル:携帯電話・PHS


人気blogランキング
コメント
この記事へのコメント
いつもみています
はじめまして、いつも見に来てます。また遊びにきますね。
2008/10/23 (Thu) 22:40:41 | URL | はなえ #-[ 編集]
こんにちは
ぜひまた遊びにきてくださいね
2008/10/24 (Fri) 14:38:07 | URL | イ~ジェイ #mQop/nM.[ 編集]
ありがとうございます。一ヶ月がんばって、思うように設定できました。苦労したかいがあり、壁紙がランダムで表示した時は感動しました。まだまだ、いじってみます
2008/12/30 (Tue) 18:00:54 | URL | 夏海のパパ #-[ 編集]
どうも夏海のパパさん、ありがとうございます
私も時に失敗しながら楽しんでいます。うまくいったときの満足感がたまらないですよね。これからもまだまだ遊べますよiPhoneは
2008/12/31 (Wed) 00:36:10 | URL | イ~ジェイ #mQop/nM.[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005-2011 Banco Japon de Mesa Verde all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。