Section 3.10　時計を動かす

function ClockWindow()
{
    super.Window();  // スーパークラスのコンストラクタを呼び出します

    add(new Layer(this, null));  // プライマリレイヤを作ります

    // プライマリレイヤに画像を読み込みます
    with(primaryLayer)
    {
        .loadImages("frame.png");   // プライマリレイヤに frame.png を読み込みます
        .setSizeToImageSize();      // プライマリレイヤのサイズを画像サイズに合わせます

        // ウィンドウのクライアント領域のサイズをプライマリレイヤのサイズに合わせます
        setInnerSize(.width, .height);
    }

    // 日時を書くためのレイヤを作ります
    messageLayer = new Layer(this, primaryLayer);
    add(messageLayer);
    with(messageLayer)
    {
        .setPos(22, 22, 114, 68);        // サイズを 114×68、位置を (22, 22) にします
        .font.face = "ＭＳ Ｐゴシック";  // フォントを「ＭＳ Ｐゴシック」にします
        .font.height = 24;               // フォントの高さを 24 ピクセルに設定します
        .visible = true;
    }

    // タイマーオブジェクトを作ります
    timer = new Timer(this);
    add(timer);  // タイマーオブジェクトをウィンドウに管理してもらいます
    timer.interval = 1000;  // イベントの発生周期を１秒（1000ミリ秒）に設定します
    timer.enabled = true;   // タイマーをオンにします

    drawTime();  // 日時を表示するメソッドを呼び出します

    visible = true;
}

function action(ev)
{
    if(ev.target == timer)
    {
        if(ev.type == "onTimer")
            drawTime();  // タイマーイベントが発生するたびに、現在の日時表示を更新します
    }
}

function drawTime()
{
    var d = new Date();
    var day_of_week = ["日", "月", "火", "水", "木", "金", "土"];

    // 日付と曜日の文字列を作ります
    var date = (d.getMonth() + 1) + "/" + d.getDate() + "(" + day_of_week[d.getDay()] + ")";

    // 指定の書式で時刻の文字列を作ります
    var time = "%d:%02d:%02d".sprintf(d.getHours(), d.getMinutes(), d.getSeconds());

    with(messageLayer)
    {
        // 上段の文字列の幅と高さを取得します
        var dateWidth = .font.getTextWidth(date);
        var dateHeight = .font.getTextHeight(date);
        // 下段の文字列の幅と高さを取得します
        var timeWidth = .font.getTextWidth(time);
        var timeHeight = .font.getTextHeight(time);
        // 上段の文字列の y 座標（＝赤い矢印の高さ）を計算します
        var dateTop = (.height - dateHeight - timeHeight) \ 3;

        // レイヤに書いてある文字を消すために、透明色で塗りつぶします
        .fillRect(0, 0, .width, .height, 0x00000000);
        // 余白の幅、高さをそろえて上段の文字列を書き込みます
        .drawText((.width - dateWidth) \ 2, dateTop, date, 0x000000);
        // 余白の幅、高さをそろえて下段の文字列を書き込みます
        .drawText((.width - timeWidth) \ 2, dateHeight + 2 * dateTop, time, 0x000000);
    }
}