美声時計.R をブラウザで動くようにしてみた
2011/09/28 作ってみた
iPhoneのアプリに「美声時計」という色々な声優さんが時報をお知らせしてくれるアプリシリーズがあるのですが、iPhoneで起動させるよりもPCのブラウザで表示してくれたほうが使い勝手がいいと思ったので美声時計ビューアを作ってみた。
注意：Chrome14とInternet Explorer9で動作するのを確認。Safari、Firefox、Operaでは動きませんでした。
美声時計.R 
使い方
- 美声時計アプリ（美声時計.R）を購入。
- 美声時計アプリのipaファイルを適当な場所に保存する（iTunesのApplicationからドラッグアンドドロップや直接ファイラーでコピー）。
- ipaファイルはzipファイルなのでZIP解凍する。
- 下にあるダウンロードからHTMLファイル（index.html）をダウンロードし、ipaファイルを解凍したフォルダの中（iTunesMetadata.plist ファイルがある場所）に入れる。
- index.htmlをブラウザで表示する。アクティブコンテンツ云々は自己判断で許可してください。
ダウンロード
ダウンロードできずに表示されちゃう場合は、コンテキストメニューとかAltキーを押しながらクリックとかで回避してね。
解説
ソース
1: <!DOCTYPE html>
2: <html lang="ja">
3: <head>
4: <meta charset="UTF-8">
5: <title>bisei tokei</title>
6: <style>
7: body{
8: margin: 0;
9: padding: 0;
10: background: #000;
11: }
12: #bg {
13: width: 100%;
14: height: 100%;
15: position: absolute;
16: background-size: cover;
17: background-position: center;
18: opacity: 0.3;
19: }
20: #slide img{
21: width: auto;
22: height: 100%;
23: position: absolute;
24: margin: 0 50%;
25: }
26: </style>
27: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>1:2: <script>3: /* ----- 設定 ----- */4: var baseUrl = "Payload/Bisei-Tokei3.app/"; // index.htmlファイルからみた写真や音声があるフォルダの相対パス5: var jihouFlag = true; // 1分ごとの時報。falseにするとオフ（true or false）6: var serifuFlag = true; // 10分ごとのセリフ付き時報。falseにするとオフ（true or false）7:8: var audio = new Audio("");9: audio.autoplay = false;10:11: $(function(){12: timer(1);13: });14:15: // ウィンドウをリサイズしたときに写真が中央になるように調整16: $(window).resize(function(){17: $("#slide img").css("margin", "0 " + (window.innerWidth - window.innerHeight * 2 / 3) / 2 + "px");18: });19:20: // ループタイマー21: function timer(initialFlag){22: var nowDate = new Date();23: var hour = ("0" + nowDate.getHours()).slice(-2);24: var min = ("0" + nowDate.getMinutes()).slice(-2);25: var number = "" + hour + min;26:27: if (initialFlag || nowDate.getSeconds() == 0){28: slide(number);29: }30:31: setTimeout(timer, 1000);32: }33:34: // 画像の入れ替え35: function slide(number){36: $("#slide").fadeOut("fast", function() {37: $("#slide").find("img").attr("src", baseUrl + "t" + number + ".jpg");38: $("#slide img").css("margin", "0 " + (window.innerWidth - window.innerHeight * 2 / 3) / 2 + "px");39: $("#slide").fadeIn();40:41: $("#bg").css("background-image", "url(" + baseUrl + "t" + number + ".jpg)");42: });43:44: if(jihouFlag){45: audio.src = baseUrl + "ot" + number + ".mp3";46: audio.play();47:48: if(serifuFlag && number % 10 == 0){49: audio.src = baseUrl + "st" + number + ".mp3";50: audio.play();51: }52: }53: }</script>
28: </head>
29: <body>
30: <div id="bg">
31: </div>
32: <div id="slide">
33: <img src="" />
34: </div>
35: </body>
36: </html>
やってること
- 1秒おきに現在時刻を取ってくるタイマーをループ。
- 初期ロード時または秒針が0のときに画像を入れ替え（時報を鳴らす）。
- 画像の入れ替えは普通にフェードイン、フェードアウト。
- 画像は縦をブラウザサイズにあわせて最大にして、横は縦横比を合わせる（CSSの”#slide img”）
- 画像の位置を中心に持ってくるためにmarginで調整する。（画像のheight=ウィンドウのinnerHeight→画像のwidthは既知の縦横比から画像のheightの3分の2。これらから、画像サイズを出さなくてもどれだけずらせばいいかがわかる。）
- 画像の入れ替えと同時に時報を鳴らす。もし、分針が10で割り切れるならば10分ごとのセリフも鳴らす。
- 背景が寂しかったので、画像の横をブラウザサイズにあわせた同じ画像に透明度を設定して透ける感じで。CSSの background-size:cover で背景画像が全体をカバーするようになる。
音声はボリューム調整とか制御が色々できるみたいなので、本家iPhoneアプリより高機能な時計アプリにカスタマイズするのも面白いかも。
美声時計の1や2も同じようなファイル形式なのでちょっといぢれば対応できるかと。
注意事項
アプリの注意事項にも書かれているように、個人で楽しむ目的以外でのご使用はお控え下さい。
GoogleでホスティングしてるjQueryライブラリを使っているため、ロード時にオフラインの場合、使用できません。フェード処理くらいにしか使ってないので削除するか、ローカルにライブラリを持ってくるかなどする必要があります。
タグ: JavaScript
訂正！
Firefox10では、音声も再生されません。
biseiviewerというフリーソフトが、どうにも動かなかったので
こちらを参考にさせていただきました。
美声時計2ですが、htmlを変更せずに、強引にBisei Tokei 2.app内の
ファイル構成とファイルネームをhtmlに合わせたところ、iMac上の
Safari5で動くようになりました。（htmlの知識が無いもので・・・）
Farefox10では画像が拡大したり縮小したりしの変な動作をしましたが、
音声は再生されました。
どうもありがとうございました。