2ヶ月ほど前に『リニューアルというわけではありませんが、jQuery を使ったアニメーションを…』という記事で、当サイトの Flash を使ったアニメーションを jQuery のプラグインを使って作り直したと書きました。
その中で、ブログトップのサイドバーにあるブログパーツのアナログ時計だけは Flash のままで、iPad、iPhone からのアクセスだと代替画像を表示するようにしていました。
といっても、iPhone などからアクセスすると WordPress の WPtouch プラグインを使っていますのでサイドバーが表示されないと思いますが…
WPtouch のスタイルを無効にする場合は、下の方に表示している『Mobile Theme』を『OFF』にすると通常のスタイルになりますので、PC のブラウザーで見たままの表示になります。
で、ちょっと空いた時間に jQuery のプラグインをあれこれ探していると『jQueryRotate.js』というプラグインを見つけましたので、「これを使えば比較的簡単にアナログ時計ができるかも。」と。
時計の針の動きというのは Flash も JavaScript も基本的には同じなので、その部分のスクリプトは難しくない。
ほとんど、Flash のスクリプトを流用できます。
もちろん、時刻の取得方法が違いますので、そっくりそのままというわけではないですけどね。
まぁ、皆さんご存知だと思いますが…
というわけで、JavaScript で作ってみたのが、下のアナログ時計です。
Flash バージョンとの違いは、カレンダーやアラーム機能がありません。
シンプルなアナログ時計です。
Flash バージョンと見た目を合わすために映り込みさせてみました。
もちろん、時計の針は逆回転です。
まぁ、ここまですると無駄なコーディングやスタイルが増えてしまいますので、もし参考にされる方がいましたらもっとシンプルにした方がいいと思います。
そうそう、png 画像を使っていますので IE6ではまともに見られないと思います。
いいかげん、IE6はもういいよねぇ…
ブラウザが限定されますが、Canvasを使ってもできるようなので、また時間があるときに作ってみよう。
ちょこっとサンプルを…
上のアナログ時計は無駄が多いので、いたってシンプルな時計を作りました。
まず、画像は背景になる文字盤、長針、短針、秒針の png 画像を用意します。
各画像のポジションを合わせやすいようにすべて同じ大きさで作ります。
今回のサンプルの場合は、4種類とも200px × 200px の大きさに合わせました。
あとは、jQuery と jQueryRotate.js を読み込んで準備 OK。
[html]
[/html]
スクリプト部分はこんな感じ。
各針の角度の計算方法は、これ以外でも色々とありますので、お好きな方法でどうぞ。
簡単に説明すると時刻を取得し、jQueryRotate.js を使って針（画像）を回転させているだけです。
[javascript]
function analog_clock(){
today = new Date();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
$(‘#clock_hours_hand’).rotate(hour*30+minute/2);
$(‘#clock_minutes_hand’).rotate(minute*6+second/10);
$(‘#clock_seconds_hand’).rotate(second*6);
setTimeout(“analog_clock()”,1000);
}
document.write(‘<div class=”clock_face”>’);
document.write(‘<div class=”clock_hours”><img src=”images/hogehoge/clock_hours_hand.png” id=”clock_hours_hand” /></div>’);
document.write(‘<div class=”clock_minutes”><img src=”images/hogehoge/clock_minutes_hand.png” id=”clock_minutes_hand” /></div>’);
document.write(‘<div class=”clock_seconds”><img src=”images/hogehoge/clock_seconds_hand.png” id=”clock_seconds_hand” /></div>’);
document.write(‘</div>’);
$(document).ready(function(){
analog_clock();
});
[/javascript]
で、スタイルシートはこんな感じ。
[css]
.clock_face {
width: 200px;
height: 200px;
background-image: url(“images/hogehoge/clock_face.png”);
position: relative;
}
.clock_hours,
.clock_minutes,
.clock_seconds {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
[/css]
ちなみに当サイトは XHTML 1.0 Strict なので、document.write は直接記述しておりません。
XHTML で記述している方は、適宜書き換えてくださいね。
ではでは、拙いサンプルですが…
