前回の最後でFlashとして動作するものが作れたが、以下のような課題も残った。
今回は次の部分のうち、1.と2.への対処を行う。
- 数字で表現されている曜日(2行目)をアルファベットにしたい。
- 時、分、秒など、1桁の時には、「0」を頭に付けたい。
- フォントの有無にかかわらず同じ見た目を維持したい。でないと折り返しが発生したりして見苦しい。
曜日の数字を文字に置き換える
Dateオブジェクトが示す曜日の値(Date.day)は、0～6の数を示す。表示したいのは、SUN～SATまでの文字なので(下表参照)、その数値を文字に置き換えるために「if」という主に変数の内容を比較するための命令を使用する。
曜日を表す数値と文字
| 数値 | 意味(曜日) |
|---|---|
| 0 | 日曜日(Sunday) |
| 1 | 月曜日(Monday) |
| 2 | 火曜日(Tuesday) |
| 3 | 水曜日(Wednesday) |
| 4 | 木曜日(Thurthday) |
| 5 | 金曜日(Friday) |
| 6 | 土曜日(Satuaday) |
※if文は、次の様に使用する(if文のことを条件文と呼ぶこともある)。
var now:Date = new Date()
var day:Number = now.day
var dayStr:String = ""
if (day == 0){
dayStr = "SUN"
}
trace(dayStr)
これは、もし、変数day(=now.day)の値が0と等しい(==は等しい)ときは変数dayStrに"SUN"という文字列を代入し、そのdayStrの内容を出力パネルに表示(trace())しなさいという命令になる。まとめると、変数dayの内容を0と比較し、そうであれば、"SUN"をdayStrに代入するだけだ。これを利用して、1週間分のif文を書くと、次のようになる。
//dayStrは、文字列（String型）の変数として""(空白)にする。
var dayStr:String = ""
//ここからが1週間分のチェック。
if (day == 0){
dayStr = "SUN"
}
if (day == 1){
dayStr = "MON"
}
if (day == 2){
dayStr = "TUE"
}
if (day == 3){
dayStr = "WED"
}
if (day == 4){
dayStr = "THR"
}
if (day == 5){
dayStr = "FRI"
}
if (day == 6){
dayStr = "SAT"
}
trace(dayStr)
基本は同じで、dayを比較する==の右にある数値とdayStrに代入する曜日を表す文字が、それぞれ異なるバリエーションになっている。これを、htmlを表示する前に記述して、htmlには曜日を3文字のアルファベットで表現しよう。そのためには、dayだったところを、dayStrに変更する。次のようになる。
htmlCode += day → htmlCode += dayStr
こちら(ダウンロード )ソース(digitalwatch06.fla)を開いてソースを確認してほしい。曜日の表示が数字から、3文字のアルファベットに変わったはずだ。
|
|
水曜日を表す「3」がアルファベット表記の「WED」に変化した |
日時を常に2桁にする
now.hours が1のときは「01」と日時表示を2桁になるようにしたい。これもif文を使えば、簡単に解決できる。次がそのスクリプトだ。
var hoursStr:String =""
if (hours <=9 ){
hoursStr = "0" + hours
}else{
hoursStr = "" + hours
}
この意味は、「hours(now.hours)の値が、9以下だったら1桁なので前に"0"を追加する」ということだ。曜日のチェックではif文と「==」の組み合わせだったが、今回は「<=」となっている。この記号よりも小さいか、この記号により、if文は、「9以下か？」という表現になる。この部分を比較演算子と呼ぶ。もっともよく使う代表的なものを紹介しておこう。
代表的な比較演算子
| 記号 | 意味 | 例 |
|---|---|---|
| == | 等しい | A == B (AとBは等しい) |
| != | 等しくない | A!=B (AとBは等しくない) |
| <= | 以下 | A<=B (AはB以下である) |
| < | 未満 | A |
| >= | 以上 | A<=B (AはB以上) |
| > | より大きい | A>B (AはBより大きい) |
その他の演算子に興味が湧いたら、オンラインヘルプ演算子 - ActionScript 3.0 コンポーネントリファレンスガイドを参照して欲しい。
また、このif文では、条件に当てはまらない場合（この場合10以上、つまり、2桁）の処理も記述している。それが、else文以降の内容になる。この場合は、hoursには空白文字を足して、hoursStrに代入している。htmlテキストに使用するのは、hoursStrに統一するため、何も変化がなくてもhoursの値をhoursStrに代入しているわけだ。
この方法を、1桁の数字になる可能性のあるもの、month、date、minutes、secondsにも応用した(※ソースファイル digitalwatch07.fla)。
|
|
秒などひと桁表示のものがふた桁になった |
次回でデジタル時計もいよいよ完成。今回の冒頭で出した課題の3つ目。Flashでフォントがない環境で再生された場合にも、見た目を維持するために「フォントの埋め込み」を行う。その方法を紹介しよう。
伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。ロクナナワークショップ講師。Flashアクセシビリティを得意とし、ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでも解説。共著の「ActionScript3.0辞典」が発売中。また、先頃、写真家として初の写真集「Snap or Nothing写真集」(iTunes AppStoreにて)が発売された。内容のリクエストはTwitter(nori_togoru)まで。
