例 : 単純なアナログ時計

ここでは、単純なアナログ時計の例を使って、この章で述べた日付と時刻に関する内容のうち次の 2 つについて示します。

このサンプルのアプリケーションファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。SimpleClock アプリケーションのファイルは、"Samples/SimpleClock" フォルダにあります。アプリケーションは、次のファイルで構成されています。

ファイル	説明
SimpleClockApp.mxml または SimpleClockApp.fla	Flash (FLA) または Flex (MXML) のメインアプリケーションファイル。
com/example/programmingas3/simpleclock/SimpleClock.as	メインアプリケーションファイル
com/example/programmingas3/simpleclock/AnalogClockFace.as	時計の丸い文字盤と時間に合わせた時針、分針、秒針を描画するコード

サブトピック

SimpleClock クラスの定義

この時計のように単純なアプリケーションであっても、構造をわかりやすく整理しておけば、後で容易に拡張できて便利です。そこで、この SimpleClock アプリケーションの場合は SimpleClock クラスで起動時とタイマー制御の処理を扱い、時刻を実際に表示する処理には別の AnalogClockFace というクラスを使用しています。

次のコードでは、SimpleClock クラスの定義と初期化を行います (Flash バージョンでは、代わって SimpleClock が Sprite クラスを拡張することに注意してください)。

public class SimpleClock extends UIComponent
{
    /**
     * 時刻表示コンポーネント
     */
    private var face:AnalogClockFace;
    
    /**
     * このアプリケーションにとって心臓の鼓動のような役割を持つ Timer
     */
    private var ticker:Timer;

SimpleClock クラスではデフォルトのコンストラクタを使用します。initClock() メソッドでは実際のセットアップ処理を担当し、文字盤を作成して Timer インスタンスの動作を開始します。

文字盤の作成

次のコードでは、時刻の表示に使用する文字盤を作成します。

    /**
     * SimpleClock インスタンスをセットアップする
     */
    public function initClock(faceSize:Number = 200) 
    {
        // 文字盤を作成して表示リストに追加する
        face = new AnalogClockFace(Math.max(20, faceSize));
        face.init();
        addChild(face);
        
        // 時計の初期表示を描画する
        face.draw();

initClock() メソッドに対して、文字盤のサイズを指定できます。faceSize の値を指定しない場合、デフォルト値の 200 ピクセルが使用されます。

次に、このアプリケーションでは文字盤を初期化し、DisplayObject クラスから継承した addChild() メソッドを使用して表示リストに文字盤を追加します。さらに、いったん現在の時刻で盤面を表示するために AnalogClockFace.draw() メソッドを呼び出します。

タイマーの開始

文字盤を作成した後は、initClock() メソッドでタイマーをセットアップします。

        // 1 秒ごとにイベントを送出する Timer を作成する
        ticker = new Timer(1000); 
    
        // Timer イベントを処理する onTick() メソッドを指定する
        ticker.addEventListener(TimerEvent.TIMER, onTick);

        // 時間の計測を開始する
        ticker.start();

このメソッドは、1 秒 (1000 ミリ秒) ごとにイベントを送出する Timer インスタンスを最初に作成します。第 2 パラメータの repeatCount を Timer() コンストラクタに渡していないので、この Timer はイベントの送出を無期限に繰り返します。

SimpleClock.onTick() メソッドは、timer イベントを受け取って 1 秒ごとに実行されます。

    public function onTick(event:TimerEvent):void 
    {
        // 時計の表示を更新する
        face.draw();
    }

AnalogClockFace.draw() メソッドは、単に時計の盤面と針を描画します。

現在時刻の表示

AnalogClockFace クラスのコードのほとんどは、時計の盤面を構成する表示要素のセットアップに関するものです。AnalogClockFace が初期化される際には、丸い輪郭を描き、個々の定時目盛りの位置にテキストラベルで数字を配置し、さらに、時針、分針、秒針を表す 3 つの Shape オブジェクトを作成します。

SimpleClock アプリケーションが動作し始めた後は、次のように AnalogClockFace.draw() メソッドが 1 秒ごとに呼び出されます。

    /**
     * 表示を描画する際に親コンテナから呼び出される
     */
    public override function draw():void
    {
        // 現在の日付と時刻をインスタンス変数に格納する
        currentTime = new Date();
        showTime(currentTime);
    }

このメソッドは、時計の針を描画している間に時刻が変化しないように、現在時刻を変数に保存します。それから、次のように showTime() メソッドを呼び出して針を表示します。

    /**
     * 指定された日付/時刻を、アナログ時計のスタイルで表示する
     */
    public function showTime(time:Date):void 
    {
        // 時刻を構成する値を取得する
        var seconds:uint = time.getSeconds();
        var minutes:uint = time.getMinutes();
        var hours:uint = time.getHours();

        // 6 を掛けて角度を求める
        this.secondHand.rotation = 180 + (seconds * 6);
        this.minuteHand.rotation = 180 + (minutes * 6);

        // 30 を掛けて基本の角度を求め、さらに
        // 最大 29.5 度 (59×0.5) までの角度を
        // 分の値に応じて加える
        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 分) ずつ変化していきます。