第1回　今すぐブログパーツ編【特集サンデープログラミング】

myLab IDをお持ちでない方

>> デスクトップウィジェット

>> ウェブウィジェット

>> 携帯ウィジェット・その他

>> 機能分類

トップ>特集

第1回　今すぐブログパーツ編

ブログパーツを作ってみよう！　初めてのブログパーツ作成講座！

「widgetown」のオープン記念として、ウィジェットの更なる発展のため、第一回目の特集は、ウィジェットの作り方。今回は、ステップ1。ブログパーツを作ってみましょう。

Flashを用いたブログパーツの作成方法をお届けします。
なお、本講座の対象としては、「Flashを触った経験はあるけどスクリプトは殆ど書いたことがない」という方を想定しています。ウィジェットやブログパーツ制作の第一歩を踏み出すきっかけになれば幸いです。

題材ですが、「時計」で行ってみたいと思います。
構造はシンプルですが、それ故に発展のさせ甲斐があります。まさに題材にうってつけ。
Flashで「時計」を実装するための基本的な方法を、サンプルとともに解説していきます。

今回の題材：時間に追われる現代人への警鐘、「ゆる時計（仮）」

今回、サンプルとして用いるのが「ゆる時計（仮）」（左イメージ）です。

時間に追われ、縛られ、囚われている現代人が、せめてもの心休めにと覗いたブログにまで、キッカリとした時計が貼ってあったんじゃ、それこそ悲惨というモノです。
そこでこの「ゆる時計（仮）」。

詳細説明のつづきはコチラ
今回は、この「ゆる時計（仮）」を……全部作っていたら長くなってしまいますので、アナログ時計部分のみを切り出して作ってみようと思います。

ついでに、「ゆる時計（仮）」Windowsサイドバーガジェット版も作ってます。
こちらの作り方は、また後日。。。（？！）

アナログ時計の作り方

さて、アナログ時計を実装するにはどうすればいいのか？
やるべきことは至ってシンプルです。

「現在時刻を取得して、それに合うように針の角度を設定する」を行なえばいいのです。
ただしこれを1回実行しただけでは針が止まりっぱなしなので、この処理を定期的に実行してやる必要があります。

つまるところ、アナログ時計を作るために必要な知識は、
・現在時刻の取得方法
・針を時刻に合った角度に設定する方法
・一定時間間隔で処理を繰り返す方法
の3つです。では順に見ていきましょう。

＜現在時刻の調べ方＞

現在時刻（PCのローカル時刻）は以下のようにして取得します。

var now :Date = new Date();

var hour :Number = now.getHours(); // 時
var minute :Number = now.getMinutes(); // 分
var second :Number = now.getSeconds(); // 秒

trace(hour + ':' + minute + ':' + second); // 試しに出力してみる

まずは最初の
var now :Date = new Date();
の部分の説明から。ここでは、日付や時刻を表す「Dateオブジェクト」を新しく生成しているのですが、上のコードのように「new Date()」と記述することで、呼び出した瞬間の日付・時刻を表す Dateオブジェクトが作れます。
こうやって新しく生成した「Dateオブジェクト」を、以降「now」という名前で参照できます。

あとは今生成したDateオブジェクトインスタンス、「now」に対して、
.getHoursで時を
.getMinutesで分を
.getSecondsで秒を
取得できます。これで現在の時刻が得られるわけです。

ちなみに、Dateオブジェクトは、時・分・秒の他にも、年、月、日、曜日などのデータも取得できます。詳しくはこの辺りを参照してください。
http://livedocs.macromedia.com/flash/8_jp/main/00002128.html

＜針の角度を時刻に合わせる＞

次に、取得した時刻に合わせて針の角度を設定する方法を説明します。まずは算数のおさらいから。「h時 m分 s秒」のときの時針、分針の角度（度単位）は、それぞれ何度になるでしょうか？
あ、算数では「0度」というと時計の3時の方向を指しますが、ここでは12時の方向を0度として考えてください。

特に引っ掛けもひねりもないので正解を発表しますと、
時針の角度：　h×30 ＋ m×0.5
分針の角度：　m×6 ＋ s×0.1
です。
あとは時針・分針それぞれのムービークリップの角度を設定してやれば完了です。

スクリプトからムービークリップを回転させるには、ムービークリップインスタンスの_rotation属性を設定します。
_rotation属性に設定した数値が、そのままそのムービークリップの角度になります。
ここで注意すべき点ですが、スクリプトから_rotation属性を弄って回転させた場合は、オーサリング時の「中心点」は無視され、必ず原点を中心とした回転になります。
ですので回転させるシンボルは、回転の中心点が原点に来るようにしておきましょう。

さて、ここまで理解すれば「現在時刻を針で表示」まではできることになります。
さっそくやってみましょう。

まずは適当に時針と分針のシンボルを作ったあと、それをステージに配置して、それぞれに「hourHandMC」、「minuteHandMC」というインスタンス名を付けましょう。
その上で、以下のコードを書きます。

// 現在の時刻を取得
var now :Date = new Date();

// 時・分・秒を取得
var hour :Number = now.getHours();
var minute :Number = now.getMinutes();
var second :Number = now.getSeconds();

// 時針と分針の角度を合わせる
hourHandMC._rotation = (hour * 30) + (minute * 0.5);
minuteHandMC._rotation = (minute * 6) + (second * 0.1);

これでプレビューしてみましょう。現在の時刻が針で表示されましたか？

＜一定時間間隔で処理を繰り返す方法＞

ここまで来たならあと一息、今やった処理を定期的に（一定時間間隔で）繰り返し実行してやればいいのです。
Flashで定期的に繰り返し処理を行なう方法として、代表的な2つの方法を以下に挙げます。

1. onEnterFrameを使う方法

// 毎フレーム呼び出される処理
function enterFrameTask () :Void
{
// ここに毎フレーム呼び出される処理を
}

// 毎フレーム呼び出されるように設定
onEnterFrame = enterFrameTask;

こう書くことで、毎フレーム、enterFrameTaskの処理が呼び出されます。

2. _global.setIntervalを使う方法

// 定期的に呼び出される処理
function timerCallBack () :Void
{
// ここに書いた処理が定期的に呼び出される
}

// 約1000ミリ秒（＝1秒）ごとに呼び出すように設定
var timer_id :Number = _global.setInterval(timerCallBack, 1000);

こう書くことで、約1秒間に1回、timerCallBackの処理が呼び出されます。

今回の「ゆる時計（仮）」では秒針を動かしませんので、10秒に1回程度の頻度で針を動かせば充分です。
というわけで、_global.setIntervalの方を採用したいと思います。

ここで注意点ですが、上記の両者の方法とも精度はピッタリではありません。
つまり、30fpsに設定したswfで onEnterFrameが1秒間に30回ピッタリ呼ばれるとは限りませんし、setIntervalで100ミリ秒に設定したタイマが、ピッタリ100ミリ秒後に処理を行なうとは限りません。その点に注意してください。

というワケで、ソースコード

これでアナログ時計の実装に必要な基本事項は全て説明しました。では早速実装してみましょう。コードは以下のものになります。



stop();


//	針のムービークリップ
//	ステージ上に、以下の2つの名前でシンボルを配置しておいて下さい
var hourHandMC		:MovieClip;	// 時針ムービークリップ
var minuteHandMC	:MovieClip;	// 分針ムービークリップ


/**
 * 時刻を取得して正確な時間に合わせる
 */
function adjustTime () :Void
{
	//	現在の時刻を表すDateオブジェクトを取得
	var now :Date = new Date();
	
	//	現在の 時・分・秒を取得
	var hour :Number = now.getHours();
	var minute :Number = now.getMinutes();
	var second :Number = now.getSeconds();
	
	//	時針の角度を計算＆設定
	hourHandMC._rotation = (hour * 30) + (minute * 0.5);
	
	//	分針の角度を計算＆設定
	minuteHandMC._rotation = minute * 6;
}


//	10秒ごとに時刻合わせをする
setInterval(adjustTime, 10 * 1000);

//	最初の1回
adjustTime();

おわりに

というわけで、今回は時計の作り方でした。
基本が分かればあとは応用。アイディア一発で素敵に無敵なブログパーツが誕生するかもしれません。
「夜は使えない日時計ブログパーツ」とか！…ダメか。

面白いブログパーツができたら、是非ともwidgetownに投稿して下さいね！

今回の特集や「ゆる時計（仮）」のご意見・ご感想がありましたら、
「ゆる時計（仮）」詳細ページの下部にあるコメント欄まで、どしどしお寄せください。
「ゆる時計（仮）」詳細ページはコチラ

文：widgetown編集部
2007年12月4日

特集 : 昼下がりのレポート