身近なアプリケーションの自作は楽しい

Adobe AIR (HTML/JavaScript)を使って、週末プログラミングにぴったりのデスクトップアプリケーションを作っていきます。前回は電卓を作ってみましたが、今回はアナログ時計を作ってみます。

電卓や時計など、普段から身近に使うアプリケーションを自作するのはとても楽しいものです。アナログ時計の制作は、これからプログラミングを始めようという人には、ちょっとした腕試しにぴったりの題材ですし、プログラマーの人でもプログラミングの楽しさを思い出すことができるでしょう。

また、ゼロから作る方法に加えて、今回は、アナログ時計の文字盤だけを差し替えたり、針の色や太さをカスタマイズする方法も解説していますので、スクリプトはちょっとという人も楽しめると思います。

アナログ時計の作り方～Flashを使わなくてもJSだけでもできる

アナログ時計の作り方でWebを検索すると、FlashやJavaアプレットを使って作る方法がいろいろ出てくることでしょう。しかし、HTMLとJavaScriptの技術を使うことで、もっと気軽にアナログ時計を作ることができます。(これには、最近実装された<canvas>タグの機能を使います。)

アナログ時計の仕組み自体は、とてもオーソドックスなものです。時計の針を描画するために、数学で習った三角関数を使うことになりますが、それほど難しいものではありませんし、一度覚えてしまえば、他にもいろいろ応用ができます。

今回も前回と同様、無料の開発環境である Aptana Studioを使って開発を行います。ぜひ一緒に挑戦してみましょう。

今回作るもの

ここで作るのは、オーソドックスなアナログ時計です。背景を変えたり針の色や太さをカスタマイズすることができます。AIRの不定形ウィンドウの機能を使って背景を透明にしています。

オーソドックスなアナログ時計