太巳Tweet作成するアナログ時計さて、最終回の今回はこれまで学んできたCanvasのテクニックを応用して、アナログ時計のjsライブラリを作ってみましょう。図1に完成図を示します。時計の文字盤を画像ファイルとして用意し、それをCanvasに組み込み表示させます。Canvasの直線を使って表現します。これら一連の処理をsetIntervalを使って1秒おきに描画しなおします。ここで解説するjsライブラリは、どのページにも問題なく簡単に組み込めるように作成します。Canvasのテクニックだけではなく、jsライブラリ作成のポイントも一緒に学んでいきましょう。変数名の重複に注意JavaScriptは、jsファイルとして機能ごとに分離することができます。ファイルを分離したからといって、グローバル変数や関数がそれぞれのjsファイル内に隠ぺいされているわけではありません。複数のjsファイルをページにロードした場合を想定してみましょう。それぞれのjsファイルで同じ名前のグローバル変数や関数を使っていた場合、予期せぬ結果となってしまいます。近年、さまざまなJavaScriptライブラリをページにロードして多彩な機能を提供したり、見栄えの良いデザインに仕立てることが多くなりました。そのため、グローバル変数や関数の扱いには十分に考慮しなければいけません。具体的には、自身のスクリプト内で変数を隠ぺいし、他のスクリプトからは読み出せない状況を作ることです。今回作成するアナログ時計は、これ単独で動作するように作成します。他のスクリプトに対して機能を提供することはありませんので、変数や関数を完全に隠ぺいするようにします。これを実現する方法はいたって簡単です。この中に、いつも通りにコードを記述する。*/})();jsファイルを上記のような構成にするだけで、この中に記述された変数や関数は、他のスクリプトから隠ぺいすることができます。})();」で囲めば良いということを覚えておいてください。次のページでは、もう1つの注意点である「loadイベント」について解説します。futomi代表取締役。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。PerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。