美声時計.R をブラウザで動くようにしてみた

iPhoneのアプリに「美声時計」という色々な声優さんが時報をお知らせしてくれるアプリシリーズがあるのですが、iPhoneで起動させるよりもPCのブラウザで表示してくれたほうが使い勝手がいいと思ったので美声時計ビューアを作ってみた。
注意：Chrome14とInternet Explorer9で動作するのを確認。Safari、Firefox、Operaでは動きませんでした。

美声時計.R

使い方
1. ダウンロード
解説

使い方

美声時計アプリ（美声時計.R）を購入。
美声時計アプリのipaファイルを適当な場所に保存する（iTunesのApplicationからドラッグアンドドロップや直接ファイラーでコピー）。
ipaファイルはzipファイルなのでZIP解凍する。
下にあるダウンロードからHTMLファイル（index.html）をダウンロードし、ipaファイルを解凍したフォルダの中（iTunesMetadata.plist ファイルがある場所）に入れる。
index.htmlをブラウザで表示する。アクティブコンテンツ云々は自己判断で許可してください。

ダウンロード

index.html

ダウンロードできずに表示されちゃう場合は、コンテキストメニューとかAltキーを押しながらクリックとかで回避してね。

解説

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bisei tokei</title>
<style>
body{
    margin: 0;
    padding: 0;
    background: #000;
}
#bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}
#slide img{
    width: auto;
    height: 100%;
    position: absolute;
    margin: 0 50%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
/* ----- 設定 ----- */
var baseUrl = "Payload/Bisei-Tokei3.app/"; // index.htmlファイルからみた写真や音声があるフォルダの相対パス
var jihouFlag = true; // 1分ごとの時報。falseにするとオフ（true or false）
var serifuFlag = true; // 10分ごとのセリフ付き時報。falseにするとオフ（true or false）
var audio = new Audio("");
audio.autoplay = false;
$(function(){
    timer(1);
});
// ウィンドウをリサイズしたときに写真が中央になるように調整
$(window).resize(function(){
    $("#slide img").css("margin", "0 " + (window.innerWidth - window.innerHeight * 2 / 3) / 2 + "px");
});
// ループタイマー
function timer(initialFlag){
    var nowDate = new Date();
    var hour = ("0" + nowDate.getHours()).slice(-2);
    var min = ("0" + nowDate.getMinutes()).slice(-2);
    var number = "" + hour + min;
    if (initialFlag || nowDate.getSeconds() == 0){
        slide(number);
    }
    setTimeout(timer, 1000);
}
// 画像の入れ替え
function slide(number){
    $("#slide").fadeOut("fast", function() {
        $("#slide").find("img").attr("src", baseUrl + "t" + number + ".jpg");
        $("#slide img").css("margin", "0 " + (window.innerWidth - window.innerHeight * 2 / 3) / 2 + "px");
        $("#slide").fadeIn();
        $("#bg").css("background-image", "url(" + baseUrl + "t" + number + ".jpg)");
    });
    if(jihouFlag){
        audio.src = baseUrl + "ot" + number + ".mp3";
        audio.play();
        if(serifuFlag && number % 10 == 0){
            audio.src = baseUrl + "st" + number + ".mp3";
            audio.play();
        }
    }
}
</script>
</head>
<body>
<div id="bg">
</div>
<div id="slide">
<img src="" />
</div>
</body>
</html>

やってること

1秒おきに現在時刻を取ってくるタイマーをループ。
初期ロード時または秒針が0のときに画像を入れ替え（時報を鳴らす）。
画像の入れ替えは普通にフェードイン、フェードアウト。
画像は縦をブラウザサイズにあわせて最大にして、横は縦横比を合わせる（CSSの”#slide img”）
画像の位置を中心に持ってくるためにmarginで調整する。（画像のheight=ウィンドウのinnerHeight→画像のwidthは既知の縦横比から画像のheightの3分の2。これらから、画像サイズを出さなくてもどれだけずらせばいいかがわかる。）
画像の入れ替えと同時に時報を鳴らす。もし、分針が10で割り切れるならば10分ごとのセリフも鳴らす。
背景が寂しかったので、画像の横をブラウザサイズにあわせた同じ画像に透明度を設定して透ける感じで。CSSの background-size:cover で背景画像が全体をカバーするようになる。

音声はボリューム調整とか制御が色々できるみたいなので、本家iPhoneアプリより高機能な時計アプリにカスタマイズするのも面白いかも。

美声時計の1や2も同じようなファイル形式なのでちょっといぢれば対応できるかと。