第5回 アナログ時計を作ってみよう！

作成するアナログ時計

　さて、最終回の今回はこれまで学んできたCanvasのテクニックを応用して、アナログ時計のjsライブラリを作ってみましょう。図1に完成図を示します。

　まず時計の文字盤を画像ファイルとして用意し、それをCanvasに組み込み表示させます。そして、短針、長針、秒針を、Canvasの直線を使って表現します。これら一連の処理をsetIntervalを使って1秒おきに描画しなおします。

　ここで解説するjsライブラリは、どのページにも問題なく簡単に組み込めるように作成します。Canvasのテクニックだけではなく、jsライブラリ作成のポイントも一緒に学んでいきましょう。

変数名の重複に注意

　JavaScriptは、jsファイルとして機能ごとに分離することができます。しかし、ファイルを分離したからといって、グローバル変数や関数がそれぞれのjsファイル内に隠ぺいされているわけではありません。

　もし複数のjsファイルをページにロードした場合を想定してみましょう。それぞれのjsファイルで同じ名前のグローバル変数や関数を使っていた場合、予期せぬ結果となってしまいます。

　近年、さまざまなJavaScriptライブラリをページにロードして多彩な機能を提供したり、見栄えの良いデザインに仕立てることが多くなりました。そのため、グローバル変数や関数の扱いには十分に考慮しなければいけません。

　具体的には、自身のスクリプト内で変数を隠ぺいし、他のスクリプトからは読み出せない状況を作ることです。今回作成するアナログ時計は、これ単独で動作するように作成します。また、他のスクリプトに対して機能を提供することはありませんので、変数や関数を完全に隠ぺいするようにします。これを実現する方法はいたって簡単です。

(function () {
/* この中に、いつも通りにコードを記述する。 */
})();

　jsファイルを上記のような構成にするだけで、この中に記述された変数や関数は、他のスクリプトから隠ぺいすることができます。詳しい解説は本連載のテーマと離れてしまいますので割愛しますが、ここでは、コード全体を、「(function () { ... })();」で囲めば良いということを覚えておいてください。

次のページでは、もう1つの注意点である「loadイベント」について解説します。