アナログ時計を作ってみよう!

2008年5月29日(木)
羽田野 太巳

作成するアナログ時計

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

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

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

変数名の重複に注意

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

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

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

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

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

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

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

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています