ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS でデジタル時計の開発に挑戦しよう

デジタル時計の作成を通して、CreateJSの理解を深めましょう。

テキストの表示

デジタル時計の作り方ですが、createjs.Textクラスを使います。見栄えはさておき、現在時刻を表示させてみましょう。

ポイントとしては、createjs.Textインスタンスは一度だけ作成し、そのインスタンスのtextプロパティーを変更することです。詳しくはテキストの解説の「テキストの文言を変更する」段落を参照ください。

// Text インスタンスを作成
var label = new createjs.Text("", "80px sans-serif", "red");
// Text インスタンスは一度だけしか stage に追加しない
stage.addChild(label);

// 時間経過のイベント
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  // (省略)
  // Text インスタンスの文字列を更新
  label.text = ◯◯◯;
  // (省略)
}

時・分・秒の文字列を結合したい場合は+演算子を使って記述します。コロン(:)は文字列として表示させたい場合は、ダブルクオテーションを使って":"と記述します。

// 現在時間を取得
var now = new Date();

// 時間の数値を取得
var h = now.getHours(); // 時(0〜23)
var m = now.getMinutes(); // 分(0〜59)
var s = now.getSeconds(); // 秒(0〜59)

// 表示文言を作成
var time = h + ":" + m + ":" + s;
// Text インスタンスの文字列を更新
label.text = time;

ありがちな失敗例も紹介しましょう。tickイベントでcreatejs.Textインスタンスを追加し続けると、残像効果のような表示になってしまいます。文言を変化させたいときはtextプロパティーを更新するようにしましょう。

失敗例のコード

// 時間経過のイベント
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  // (省略)
  // Text インスタンスを作成
  var label = new createjs.Text(◯◯◯, "80px sans-serif", "red");
  stage.addChild(label);
  // (省略)
}

アナログ時計の記事へ