JSXによるガジェット開発 ー時計編ー

ガジェット開発にもJSX

JSXでのプログラミングにもだいぶ慣れてきたので，今回はちょっとしたアプリを作ってみたいと思います．俗に言うガジェットですね．手始めにガジェットの中でも定番と言える，時計を紹介します．

時計を作ろうとして，こちら*1のtimer.jsx（タグ）を見ながらTimerを試し，その勢いでWeb版を開発しました．あまりに簡単で拍子抜けしました．これだけだと面白く無いので，さらに勢いに乗ってアナログ時計も開発しました．

ディジタル時計

あまり解説するような内容はありませんが，強いて言えば，繰り返す内容をまとめた関数を用意してください．上記プログラムでは7行目から15行目です．そして，16行目で関数fを100 [msec]毎に実行するよう設定しています．単純に動作させたいだけならsetIntervalの中に無名関数を定義しても構いません．後で繰り返し動作を止めたい場合は，関数にしておいてください．

「時計は1秒に1回動けば良いので，100[msec]は過剰じゃないか？」と思われるかもしれませんが，実際にはちょっとずつずれる可能性があるので念には念を入れています．・・・と思っていたのですが，こちら*2によるとほとんどずれないみたいですね．

肝心の表示ですが，8行目で時刻を取得し，10〜12行目で時・分・秒に分け，14行目でmainに渡された要素に表示しています．これだけのシンプルな仕組みなので，数字が1桁の場合は左詰めになります．Timerのサンプルということでご容赦ください．

デモです．

アナログ時計

こちらは，あまりにディジタル時計が簡単だったので作成した副産物です．例によって手抜きできるだけシンプルを心がけています．

11行目で繰り返す関数を，変数watchに入れています．書式がディジタルと異なるのは，まだ私がJSXに慣れていないためです．

watch内では，12行目で描画領域をクリアして，14〜17行目で1時から12時の印を描いています．この辺は，前回紹介だけした仮想座標をサポートした描画ライブラリを使用して，描画領域をX, Y共に-1〜1にしています．そして，ディジタル時計同様，19〜23行目で時刻の取得と時・分・秒・ミリ秒への分割を行っています．

さらに，25〜27行目で，表示すべき角度を計算しています．数学的な角度は時計で言う3時から反時計回りなので，その分の調整を行っています．さらに29行目〜33行目で短針・長針・秒針の描画を行っています．

近くにあった時計の秒針が赤でスルスル動くタイプだったので，こちらのプログラムでも赤く，かつ，スルスル動くようにしています．スルスルと動かすため，36行目で動作間隔を100[msec]にしています．

デモです．

github上のソースコード

以下のリンクからソースコードを参照できます．バグがあったらこっそり教えていただけると助かります．

gitigal_watch.html：ディジタル時計を表示するhtmlファイル．

digital_watch.jsx：ディジタル時計のソースコード．

digital_watch.jsx.js：コンパイルされたディジタル時計のコード．ブログに載せる都合上，最終行に var dw = JSX; を追加しています．

analog_watch.html：アナログ時計を表示するhtmlファイル．

analog_watch.jsx：アナログ時計のソースコード．

digital_watch.jsx.js：コンパイルされたアナログ時計のコード．ブログに載せる都合上，最終行に var aw = JSX; を追加しています．

vcanvas.jsx：先日から変更なしですが念のため掲載しておきます．仮想座標をサポートしたグラフィック描画クラス．まだメソッドが揃っていません．

参考にしたサイト

*1：timer.jsx ( タグ ) - Code/JSX - CODE CODIUM.

*2：setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵

貴重な情報をありがとうございました．

ツイート