アナログ時計を自分流に改造しよう

最後に、今回のアナログ時計を自分流に改造する手順を紹介します。アナログ時計は、デザインをちょっと入れ替えるだけで、ずいぶん違ったものになります。デザインによってずいぶん印象が変わります。特にアナログ時計の背景を変えるだけで、自分流の時計に変えることができるでしょう。

アナログ時計の背景の作り方

アナログ時計の背景を作る時は、デザインセンス以上に、時刻を表す文字や点を正しく配置できるかがカギとなります。そこで、スクリプトを作った時に見た時計の1周が360度で、1時間が30度であるという部分が大切になります。

時計の文字盤を作る時は、まず、正円を描いておきます。そして直線を描いた後、線を30度の角度に回転させます。Adobe の Illustrator や Fireworks など、ドローソフトでは、オブジェクトを数値で指定して回転させる機能が必ずついていますので、これを利用します。同様にして、60度、90度、120度…と線を引いていくことで、この線を文字を配置する時のガイドにすることができます。

Fireworks でガイドの線を引いたところ

時計の背景を変える

背景を変えるには、プロジェクトのフォルダに、作成した画像をコピーして、HTML の のファイル名の部分を変えるだけです。

縦横300ピクセルで作った場合は、プログラムを書き換える必要はありません。もし、それ以外のサイズで作った場合には、<script>タグの直後にある「clockWidth」と「clockHeight」を書きかえます。もし、縦横200ピクセルにするには、次のようにします。

    var clockWidth  = 200;
    var clockHeight = 200;

時計の針の色や太さを変える

時計の針の色や太さを変えるには、プログラムの中央付近にある「drawLineRad()」を呼び出している箇所を書き換えます。この関数は、drawLineRad(針の角度, 長さ, 色, 太さ) という形式で使います。例えば、針の色を全部白色にするには、次のように書き換えます。

    // 針を描画する
    drawLineRad(hour_deg, 0.5, "#FFFFFF", 7);
    drawLineRad(min_deg,  0.7, "#FFFFFF", 5);
    drawLineRad(sec_deg,  0.9, "#FFFFFF", 1);

ここでは、背景をオレンジ色にして、針を白色にしてみました。

背景をオレンジにしました

まとめ

以上、AIRを使ってアナログ時計の作り方を紹介しました。今回のポイントとしては、<canvas>タグを使うことで、JavaScript で線の描画が可能になること、AIRの設定ファイルを変更することで背景を透過することができることなどを紹介しました。また、アナログ時計の制作で言えば、時計の針の角度を計算して描画する部分が一番の肝になりますので、角度の計算方法も簡単に解説しました。今回作成した完成サンプルはこちらに用意しましたので、必要な方はダウンロードしてください。

加えて、簡単にカスタマイズできるようにしていますし、その方法も紹介しましたので、ぜひ自分なりのアナログ時計を作ってみてください。そして、余力があれば、そこにアラーム機能などを追加していくともっと楽しめると思います。それでは、ぜひ、自分のアナログ時計を作ってみてください。