PR

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

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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