日付と時刻の例:単純なアナログ時計Flash Player 9 以降、Adobe AIR 1.0 以降 日付と時刻に関する次の 2 つの内容について、単純なアナログ時計の例を使って示します。
SimpleClock クラスの定義この時計のように単純なアプリケーションであっても、構造をわかりやすく整理しておけば、後で容易に拡張できて便利です。そこで、この SimpleClock アプリケーションの場合は SimpleClock クラスで起動時とタイマー制御の処理を扱い、時刻を実際に表示する処理には別の AnalogClockFace というクラスを使用しています。 次のコードでは、SimpleClock クラスの定義と初期化を行います(Flash バージョンでは、代わって SimpleClock が Sprite クラスを拡張することに注意してください)。 public class SimpleClock extends UIComponent { /** * The time display component. */ private var face:AnalogClockFace; /** * The Timer that acts like a heartbeat for the application. */ private var ticker:Timer; このクラスには、2 つの重要なプロパティがあります。
文字盤の作成次のコードでは、時刻の表示に使用する文字盤を作成します。 /** * Sets up a SimpleClock instance. */ public function initClock(faceSize:Number = 200) { // creates the clock face and adds it to the display list face = new AnalogClockFace(Math.max(20, faceSize)); face.init(); addChild(face); // draws the initial clock display face.draw(); initClock() メソッドに対して、文字盤のサイズを指定できます。faceSize の値を指定しない場合、デフォルト値の 200 ピクセルが使用されます。 次に、このアプリケーションでは文字盤を初期化し、DisplayObjectContainer クラスから継承した addChild() メソッドを使用して表示リストに文字盤を追加します。さらに、いったん現在の時刻で盤面を表示するために AnalogClockFace.draw() メソッドを呼び出します。 タイマーの開始文字盤を作成した後は、initClock() メソッドでタイマーをセットアップします。 // creates a Timer that fires an event once per second ticker = new Timer(1000); // designates the onTick() method to handle Timer events ticker.addEventListener(TimerEvent.TIMER, onTick); // starts the clock ticking ticker.start(); このメソッドは、1 秒(1000 ミリ秒)ごとにイベントを送出する Timer インスタンスを最初に作成します。 第 2 パラメーターの repeatCount を Timer() コンストラクターに渡していないので、この Timer はイベントの送出を無期限に繰り返します。 SimpleClock.onTick() メソッドは、timer イベントを受け取って 1 秒ごとに実行されます。 public function onTick(event:TimerEvent):void { // updates the clock display face.draw(); } AnalogClockFace.draw() メソッドは、単に時計の盤面と針を描画します。 現在時刻の表示AnalogClockFace クラスのコードのほとんどは、時計の盤面を構成する表示要素のセットアップに関するものです。AnalogClockFace が初期化される際には、丸い輪郭を描き、個々の定時目盛りの位置にテキストラベルで数字を配置し、さらに、時針、分針、秒針を表す 3 つの Shape オブジェクトを作成します。 SimpleClock アプリケーションが動作し始めた後は、次のように AnalogClockFace.draw() メソッドが 1 秒ごとに呼び出されます。 /** * Called by the parent container when the display is being drawn. */ public override function draw():void { // stores the current date and time in an instance variable currentTime = new Date(); showTime(currentTime); } このメソッドは、時計の針を描画している間に時刻が変化しないように、現在時刻を変数に保存します。それから、次のように showTime() メソッドを呼び出して針を表示します。 /** * Displays the given Date/Time in that good old analog clock style. */ public function showTime(time:Date):void { // gets the time values var seconds:uint = time.getSeconds(); var minutes:uint = time.getMinutes(); var hours:uint = time.getHours(); // multiplies by 6 to get degrees this.secondHand.rotation = 180 + (seconds * 6); this.minuteHand.rotation = 180 + (minutes * 6); // Multiply by 30 to get basic degrees, then // add up to 29.5 degrees (59 * 0.5) // to account for the minutes. this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5); } このメソッドでは、最初に現在時刻の時、分、秒それぞれの値を抽出し、 それらに基づいて 3 本の針の角度を計算します。 秒針は 60 秒で 1 周するので、1 秒につき 6 度(360/60)だけ進むことになります。 分針も 1 分につきこれと同じ角度だけ進みます。 分針が進むにつれて、時針も少しずつ動きます。 時針は 1 時間につき 30 度(360/12)だけ進みますが、その間も 1 分につき 0.5 度(30 度 / 60 分)ずつ変化していきます。 |
![]() |