• 03-01 Dateクラスを使って時刻を調べる
• 03-02 クラスとインスタンス
• 03-03 Dateクラスを使った時計の針のアニメーション
• 03-04 Dateクラスで日付を調べる
• 03-05 Stringクラスで文字列を操作する
• 03-06 数値を指定桁数の文字列で返す関数


• Column 03 LiveDocsオンラインヘルプ


• PNG画像: ActionScript30_03.zip(約1.8MB)
  Column 02: ActionScript30_03_Column.zip(約677KB)

○03-01 Dateクラスを使って時刻を調べる
前章「スクリプトによるアニメーション」では、クリックで秒針が動き出すストップウォッチ風のアニメーションを作成しました。本章では時分秒の針で時刻を示し、さらに日付も表示するアナログ風の時計をつくってみましょう。

●Dateクラスのインスタンスをつくる
時刻や日付の情報を処理するには、Dateクラスを使います。そこでまず初めにやるべきことは、Dateクラスのインスタンスをつくることです。

ムービークリップインスタンスのプロパティ(たとえば、x/yやrotation)は、インスタンスをターゲットにして値の取得や設定を行う必要がありました。メソッド(たとえば、gotoAndPlay()についてTips 02-005「前のフレームに戻る」参照)を呼出す際にも、やはりインスタンスを参照します。

つまり、ムービークリップインスタンスを操作するには、そのインスタンスをターゲットとして、プロパティやメソッドにアクセスしました。Dateクラスを使って処理する場合にも、まずDateクラスのインスタンスが作成されていなければならないのです。ムービークリップインスタンスは、[ツール]パネルやメニューを使って、インスタンスをつくることができました。Dateクラスの場合には、インスタンスの作成はActionScriptで行う必要があります。

クラスのインスタンスは、つぎのようにnew演算子を使って、クラス名と同じ名前の特別なメソッドである「コンストラクタ」を呼出して作成します。引数はクラスに不要なこともあれば、オプションとされる場合もあります(角括弧[]は、ヘルプやリファレンスではオプションであることを示します。また、引数はクラスによっては、複数指定できることもあります)。

new クラス名([引数0, 引数1, ..., 引数n]);

Dateクラスでは、つぎの構文でインスタンスが作成できます。

new Date();

もっとも、このステートメントでは、インスタンスが作成できても、それを使うことができません。なぜなら、インスタンスがメモリに残らないので、ターゲットに指定することができないからです。丁度つぎのステートメントと同じです。

1;

文法的な誤りはなく、エラーにもなりません。しかし、この数値1は変数などのメモリに保持されませんので、後のステートメントで使いたくても、使いようがないのです。クラスのインスタンスも、それを参照してプロパティやメソッドにアクセスするには、何らかのメモリに格納する必要があります。メモリの代表は、変数です。したがって、クラスのインスタンスは、通常つぎのように作成します。

var 変数:クラス = new クラス名([引数0, 引数1, ..., 引数n]);

Dateクラスのインスタンスを格納する変数として、接尾辞_dateを使ってmy_dateと定めた場合、インスタンスを作成するステートメントはつぎのようになります。

var my_date:Date = new Date();

以下のサンプルスクリプト03-001は、Dateクラスのインスタンスを作成し、その作成時の日時の情報をtrace()関数により[出力]パネルに表示します。

new演算子に続けてDateクラスのコンストラクタを引数なしで呼出すと、その作成時の日時情報をもったインスタンスが作成されます。たとえば、上記スクリプト03-001を2007年1月1日午前0時丁度に実行すると、[出力]パネルにはつぎのように表示されます(図03-001)。

Thu Feb 1 00:00:00 GMT+0900 2007

このDateインスタンスが格納された変数をターゲットに(参照)して、Dateクラスのプロパティやメソッドにアクセスすることができます。

Maniac! 03-002■trace()関数はインスタンスのtoString()メソッドを呼出す trace()関数の引数に文字列以外のデータを渡すと、「そのデータ型に関連付けられたtoString()メソッドが呼び出されます」(ヘルプ[ActionScript 3.0コンポーネントリファレンスガイド] > [トップレベル] > [グローバル関数] > [trace()関数])。このtoString()が、インスタンスを文字列表現に変換するメソッドなのです。 ヘルプでDateクラスのtoString()メソッドを引くと、戻り値は文字列で、「Dateオブジェクトのストリング表現」を返すとされています(ヘルプ[ActionScript 3.0コンポーネントリファレンスガイド] > [Date] > [toString()メソッド])。ここでいうオブジェクトは、インスタンスと同じ意味です。 図03-002■[ヘルプ]におけるDateクラスのtoString()メソッドの解説 「戻り値」はStringすなわち文字列で、「Dateオブジェクトのストリング表現」とされている。

●Dateインスタンスから時刻情報を取得する
Dateインスタンスを使って、日時情報の取得や設定ができます。この日時は、ふたつの基準を指定してアクセスすることが可能です。いわゆる日本時間つまりローカル時と、協定世界時(UTC)です。今回の時計は、ローカル時で作成することにします。

Dateインスタンスを使って取得・設定できるおもな時刻のプロパティは、下表03-001のとおりです。

つぎのフレームアクション(スクリプト03-002)は、Dateインスタンスから取出したhoursとminutes、secondsプロパティの値をそれぞれtrace()関数に渡して、インスタンスを作成した時分秒を[出力]パネルに表示します。

たとえば、このスクリプト03-002を実行したのが9:30丁度であれば、[出力]パネルにはつぎのように表示されます(図03-003)。

9
30
0

ひとつ注意すべきなのは、Dateインスタンスの日時のプロパティ値は、あえて変更しないかぎり、もとの値がずっと保持されるということです。Microsoft ExcelのNOW()関数などとは異なり、時間が経つにしたがって、刻々と時刻の値がアップデートされることはありません。たとえば、Dateインスタンスを9:00丁度に作成して、10分後にminutesプロパティを調べても値は10にはならず、相変わらずインスタンス生成時の値0を示します。

ですから、これから作成しようとしている時計のように、刻々変わる今現在の時刻を取得するには、そのたびごとに新たなインスタンスを生成する必要があります。ここで、ヘルプのDateクラスについての説明([ActionScript 3.0コンポーネントリファレンスガイド] > [Date])を確認してみます。その冒頭には、つぎのように解説されています(図03-004参照)。

Dateクラスは日時のデータを表します。Dateクラスの1つのインスタンスは特定の一時点を表します。この特定の一時点について、月、日、時、秒などのプロパティを照会および変更できます。Dateクラスを使用すると、世界時(グリニッジ標準時。現在の呼称は世界標準時またはUTC)またはローカル時間を基準にした日付と時刻の値を取得できます。ローカル時間は、FlashPlayerを実行しているオペレーティングシステムに設定されているローカルタイムゾーンによって決定されます。

Dateクラスのインスタンスが日時のデータをもつことは、もはやご説明の必要はないでしょう。「1つのインスタンスは特定の一時点」を示すというのは、前述のとおり、ひとたび作成したインスタンスの日時データつまりプロパティ値は、時間が経ってもその値のまま保持されることを意味します。アクセスする日時の基準として、UTC(協定世界時)とローカル時が選べることも、すでに解説しました。ローカル時のタイムゾーンは、オペレーティングシステム(OS)の設定によって決まります。Flash Playerは日時をOSから取得しているので、これは当然でしょう。

ヘルプの見方や読み方を理解することは、スクリプティングが上達するうえで大切です。語学の学習と同じで、辞書やリファレンスをこまめに引くことで、その言語の理解が深まるからです。ですから、本書では適宜リファレンスを始めとするヘルプやFlashのドキュメントを引用し、必要に応じてその読み方を解説します。

○03-02 クラスとインスタンス
ここで、「クラス」と「インスタンス」という用語について、簡単にそれらの意味をご説明しておきましょう。もっとも、この段階では、大まかなイメージがつかめれば構いません。後の章で自作のクラスを定義する段階になれば、具体的な意義は明らかになります。

まず、「クラス」は、関連するプロパティとメソッドの定義を、ひとつにまとめたものです。実際[ヘルプ]の[ActionScript 3.0コンポーネントリファレンスガイド]を見ると、各クラスのプロパティとメソッドが解説されています。たとえば、[MovieClipクラス]の中の見出しは、特別なメソッドである[コンストラクタ]と、[メソッド]および[プロパティ]に分類されています(図03-005)。

[*筆者用参考] Wikipedia「クラス (コンピュータ)」、IT用語辞典バイナリ「クラス」、e-Words「クラス」。

つぎに、クラスをひな形としてつくられ、プロパティやメソッドで操作するターゲットとなるのが「インスタンス」です。ActionScriptその他のプログラミング言語では、原則としてクラスからインスタンスを作成し、そのインスタンスを参照してプロパティやメソッドにアクセスします。

プログラミングのテキストでは、クラスは「設計図」で、インスタンスが「製品」に当たると例えられたりします。あるいはFlashで、[ライブラリ]の「シンボル」が画面の表示データを定義し、ステージ上にドロップした個々の「インスタンス」が実際にムービー内で動作するという仕組みも、プログラミングのクラスとインスタンスの関係と似ています。

また筆者は、クラスを「レシピ」だとしたら、インスタンスは「料理」だと考えています。レシピ(クラス)は、材料や調理方法を定義したもので、食べられません。レシピ(クラス)の定義にしたがって作成した料理(インスタンス)が、実際に私たちの口にするものです。ひとつのレシピ(クラス)から、料理(インスタンス)はいくつでもつくれます。また、味つけ(プロパティ値)を変えて、個々の料理(インスタンス)にバリエーションを与えることも可能です。

クラスやインスタンスに関連する用語に「オブジェクト」があります。このオフジェクとは、さまざまな意味で使われます。まず、インスタンスと同じ意味に用いられることが多いです。たとえば、new演算子でDateコンストラクタを呼出して生成したインスタンスは、Dateオブジェクトと呼ばれることがあります。

つぎに、クラスやインスタンスの備えた性質を論じるとき、オブジェクトという概念的が用いられます。たとえば、クラスを定義し、インスタンスを使って処理を構成する技法が、オブジェクト指向プログラミングとして説明されます。

さらに、オブジェクトはクラスの意味で使われることもあります。実際、Flash MX/ActionScript 1.0のリファレンス(「ActionScript辞書」)では、MovieClipやDateクラスが「MovieClipオブジェクト」「Dateオブジェクト」と表記されていました。

[*筆者用参考] e-Words「オブジェクト」、Wikipedia「オブジェクト(プログラミング)」

実際に「オブジェクト」ということばが出てきたとき、以上のようなさまざまな意味のうちどれに当たるのかは、その文脈から判断するほかありません。しかし、「クラス」と「インスタンス」が理解できれば、自然と違いもわかるようになります。ここまでの段階では、クラスとインスタンスの意味について、大まかなイメージがつかめれば結構です。

ところで、[ムービークリップ]や[ボタン]、[グラフィック]のインスタンスは、[ライブラリ]に格納されたそれぞれのシンボルのインスタンスです(図03-006)。一方ActionScriptのクラスで考えると、[ムービークリップ]はMovieClip、[ボタン]はSimpleButtonクラスのインスタンスです([グラフィック]はスクリプトで制御することはできず、ActionScriptのクラスのインスタンスではありません)。

本書ではこの節以降、ActionScriptを論じる観点から、[ムービークリップ]と[ボタン]インスタンスは、それぞれMovieClipおよびSimpleButtonインスタンスと呼ぶことにします。[テキストツール]で作成したダイナミックテキストフィールドまたはテキスト入力フィールドも、同様にTextFieldインスタンスと称します。

○03-03 Dateクラスを使った時計の針のアニメーション
それでは、話をDateクラスに戻します。Dateインスタンスのプロパティ(表03-001)を使って、時計の針のアニメーションを作成してみましょう。まずは、秒針からです。

前章02-05「イベントリスナーを使う」以下で学習したとおり、アニメーションの処理は、Event.ENTER_FRAMEイベントに対するリスナー関数を登録して実行します。秒針のMovieClipシンボルのフレームアクションとして、つぎのスクリプトを記述します。

Event.ENTER_FRAMEイベントのリスナー関数では、第1に現在時刻を調べるためにDateインスタンスを生成します。第2に、現在時刻の秒の値は、nSecondsプロパティで取得することができます。そして第3に、秒針のMovieClipインスタンスを、1秒あたり6度(=360度/60秒)回転させます。

[ムービープレビュー]を見ると、MovieClipインスタンスが秒を刻みます。もっとも、それが正しくシステム時刻と合っているかどうかは、アニメーションを見ただけでは確かめられません。そこで、Windowsでは[コントロールパネル]の[日付と時刻]、Macintoshは[システム環境設定]の[日付と時刻]を表示して、比較するとよいでしょう(図03-007)。

このスクリプト03-003で現在時刻から取得するのをminutesプロパティの値に変更すれば、そのまま分針(長針)のアニメーションになります(スクリプト03-004)。[ムービープレビュー]で、秒針と分針の動きを確認しましょう(図03-008)。

時針(短針)も同じ要領で、取得するプロパティをhoursに変更すれば、一応正しい時刻が示されます。ただし、アニメーションがアナログ時計としては、少し不自然です。プロパティsecondsもminutesもhoursも、すべて値は整数です。したがって、秒針は1秒ごと、分針(長針)は1分ごとに値が更新され、それぞれのMovieClipインスタンスが6度(=360度/60)ずつ回転します。

時針(短針)もhoursプロパティを使って秒針や分針(長針)と同じ処理にすると、1時間経つごとに一気に30度(=360度/12)回転してしまうことになります。これではデジタル時計のような値の変化の仕方で、アナログ時計の滑らかなアニメーションになりません。

これを修正するには、minutesプロパティの分数も角度に加えればよいでしょう。1時間で30度回転する訳ですから、1分につき1/2度(30度/60)加えます。したがって、時針(短針)のMovieClipシンボルに設定するフレームアクションはつぎのようになります(スクリプト03-005)。

hoursブロパティから取得した時数の値に対する30度ずつの回転に、minutesプロパティの分数値を調べて1分当たり1/2度を加えています。これでアナログ時計の針は、すべてできあがりました。[ムービープレビュー]で、動作を確認してみましょう。

○03-04 Dateクラスで日付を調べる
前述03-01「Dateクラスを使って時刻を調べる」でも確認したとおり、Dateインスタンスは日付の情報ももっています。たとえば、Dateクラスのコンストラクタを引数なしに呼出してインスタンスを作成(new Date())し、trace()関数でそのインスタンスを[出力]したとします(前掲スクリプト03-001)。その処理が2007年1月1日午前0時丁度に行われたとすると、[出力]パネルにはつぎのように表示されます。

Thu Feb 1 00:00:00 GMT+0900 2007

●Dateクラスの日付のプロパティを使う
Dateインスタンスをtrace()関数で[出力]して表示されたのは、ひとかたまりの文字列です。年月日などの日付の値をそれぞれ数値で取得したいときには、時刻の情報のときと同じく、Dateクラスのプロパティを用いてアクセスします(表03-002)。

つぎのフレームアクションは、DateインスタンスからfullYearとmonth、date、dayプロパティの値を取得して、それぞれをtarce()関数で[出力]します。[出力]パネルには、インスタンスを作成した年月日と曜日の情報が、数値で表示されます。

たとえば、このスクリプト03-006を2007年1月1日に実行したとすると、[出力]パネルにはつぎのように表示されます。

2007
0
1
1

注意しなければならないのは、月のmonthと曜日のdayプロパティが、0から始まる整数値を返すということです。したがって、それぞれ1月が0で、日曜日は0になります。とくに、monthプロパティから何月かを調べるときは、プロパティ値に1を加算しなければなりません。つい忘れたり、間違えたりしがちですので、気をつけましょう。

●日付のプロパティ値をフォーマットされた文字列で表す
前節までにつくった時計に、日付も表示してみましょう。2007年1月1日であれば、"2007/1/1"という文字列にして、これをTextFieldインスタンスに設定することにします。まずは、"2007/1/1"といった形式の文字列をつくる必要があります。

Dateインスタンスから取出したfullYearとmonth、dateプロパティの値を、それぞれnYearおよびnMonth、nDateという変数に格納したとします。そこでつぎのような式を記述しても、意味のない数値になるだけです。

nYear/nMonth/nDate

プロパティ値は数値ですし、/は割り算の演算子です。したがって、上記の式は無意味な割り算を実行してしまうのです。

ですから第1に、数値は文字列に変換しなければなりません。数値を文字列に変換するには、String()関数を使います。たとえば、Number型の変数nMyNumberに入っている数値を文字列に変換して、String型の変数my_strに代入するステートメントはつぎのとおりです。

var my_str:String = String(nMyNumber);

そして第2に、文字列と文字列を連結するには、+演算子を用います。年月日の数字の間に挿入するスラッシュ(/)は、文字列ですのでダブルクォーテーション(")で括ります(Word 02-001「文字列」参照)。したがって、今日の日付を"2007/1/1"というフォーマットで[出力]するスクリプトはつぎのようになります(スクリプト03-007)。

たとえば、このスクリプト03-007を2007年1月1日に実行したとすると、[出力]パネルにはつぎのように表示されます。

2007/1/1

それでは、時計に日付を表示するために、メインタイムラインにTextFieldインスタンスを配置します。TextFieldインスタンスは[テキストツール]で作成し、表示するテキストがスクリプトで設定できるように[テキストの種類]は[ダイナミックテキスト]を選択します。ActionScriptでコントロールするには、TextFieldにもインスタンス名が必要です。接尾辞"_txt"をつけて、"my_txt"としましょう(図03-010)。

Tips 03-008■[テキストの種類] [テキストの種類]には、[静止テキスト]と[ダイナミックテキスト]、[テキスト入力]の3つがあります(図03-011)。 図03-011■[プロパティ]インスペクタの[テキストの種類] [静止テキスト]と[ダイナミックテキスト]、[テキスト入力]の3つがある。 [静止テキスト]は、SWF再生(ランタイム)時にスクリプトでコンテンツを操作することができません。[ダイナミックテキスト]は、スクリプトで自由にコンテンツをコントロールできます。ただし、ユーザーが入力することはできません。[テキスト入力]は、コンテンツをスクリプトで操作することも、ユーザーが入力して変更することも可能です(ヘルプ[ActionScript 3.0のプログラミング] > [テキストの操作] > [テキストの操作の基礎]参照)。

Maniac! 03-007■[テキスト入力]という名称 [静止テキスト]と[ダイナミックテキスト]は「テキスト」の文字が後につくのに、なぜ[テキスト入力]は前にくるのでしょう。実際英語版では、[Static Text]と[Dynamic Text]、そして[Input Text]と"Text"の文字は後ろに置かれています(図03-012)。 図03-012■英語版の[テキストの種類] [Static Text]と[Dynamic Text]、[Input Text]の3つがある。 ヘルプでも、たとえば前述Tips 03-008に引用した[テキストの操作の基礎]には、「静止テキストフィールド」「ダイナミックテキストフィールド」「入力テキストフィールド」と記載している箇所があります。関連する用語の統一性および日本語としての意味からも、「入力テキスト」とすべきだったでしょう。ただ、すでに数バージョンにわたって使われている用語ですので、これから変更するのは難しいかもしれません。

TextFieldインスタンスに表示したいテキスト(文字列)は、textプロパティに設定します。もちろん、設定先のTextFieldインスタンスを、ターゲットとして参照しなければなりません。前掲スクリプト03-007で作成した日付の文字列を、メインタイムラインに置いたTextFieldインスタンスmy_txtに設定して表示しましょう。

まず、メインタイムラインにスクリプト03-007を、フレームアクションとして記述します。そしてつぎに、TextFieldインスタンスmy_txtのtextプロパティに文字列を設定するため、つぎのようにステートメントを1行追加します(スクリプト03-009)。

[ムービープレビュー]で確認すると、TextFieldインスタンスに実行時の日付が表示されます(図03-013)。もっとも、このままでは時計のアニメーション開始時にしか、日付が設定されません。再生したまま午前0時を経過しても、日付は変わらないことになります。この日付の値を更新する処理は、次節で追加します。

●Dateインスタンスの日時データを設定・変更する
Dateインスタンスの日時のデータは、コンストラクタ呼出し時に指定したり、インスタンス作成後に値を変更することができます。

まず、インスタンス作成時に日時を指定するには、コンストラクタに引数としてそれらの値を渡します。[ヘルプ]で、[Dateクラス]の[Date()コンストラクタ]を確認してみましょう。シンタックスが、つぎのように示されています。

public function Date(yearOrTimevalue:Object, month:Number, date:Number = 1, hour:Number = 0, minute:Number = 0, second:Number = 0, millisecond:Number = 0)

引数(パラメータ)は最大7つで(図03-014)、すべてオプション、つまり省略が可能です。すべてを省略した場合は、すでに見たように、Dateインスタンスにはコンストラクタ呼出し時の日時が設定されます。

Date()コンストラクタに対する引数の指定の仕方は、その数とデータ型により、4種類のシンタックスがあります。その内容は、下表03-003のとおりです。

ここで、[ヘルプ]の[Date()コンストラクタ]のシンタックスの読み方について、2点補足を加えておきます。

第1に、第1引数yearOrTimevalueが、Objectで型指定されていることです。上記の表03-003に示したとおり、第1引数のデータ型はNumber(数値)かString(文字列)です。しかし、ActionScript 3.0の文法上、ふたつのデータ型をひとつの引数に指定することはできません。ところがObject型は、どのようなデータでも受入れることができます。そこで、複数の型のデータを受取る場合には、Objectで型指定されるのです。

第2に、第3引数以降には、型指定の後に代入演算子の=に続けて数値が記載されています。これはデフォルト値を示します。たとえば、つぎのように第1引数と第2引数の年月のみを指定してDate()コンストラクタを呼出した場合、1日の0:00:00の0ミリ秒の日時のインスタンスが作成されます。

var _date:Date = new Date(2007, 0);
trace(_date);   // 出力: Mon Jan 1 00:00:00 GMT+0900 2007

つぎに、Dateインスタンスの日時データを、後から変更する場合について考えましょう。Dateインスタンスの日付(表03-002)や時刻(表03-001)を示すプロパティは、値を調べるだけでなく、設定することも可能です。これらのプロパティを使えば、任意の日時のDateインスタンスを作成することができます。

たとえば、今日の0:00:00の0ミリ秒のDateインスタンスを作成するには、つぎのようなフレームアクションを記述します(スクリプト03-010)。

なお、Date()コンストラクタに引数を指定する方法でも、同じ結果を得ることは可能です(スクリプト03-011)。

○03-05 Stringクラスで文字列を操作する
前節03-04「Dateクラスで日付を調べる」で行った、文字列の日付をフォーマットする処理(スクリプト03-007)にもう少し手を加えてみましょう。

●年を2桁にする
まず、たとえば"2007"という4桁の西暦を、"07"のように2桁に変更します。文字列の操作は、Stringクラスのプロパティやメソッドを使って行います。今回は、substring()メソッドを使って、指定した範囲の文字を文字列から取出します。4桁の文字列から末尾の2桁を取出すスクリプトは、つぎのとおりです(スクリプト03-012)。

さて、2点解説を加えます。第1は、substring()メソッドのターゲットです。メソッドを呼出すには、そのクラスのインスタンスをターゲットとして参照します(03-02「クラスとインスタンス」参照)。ということは、文字列("2007")は、Stringクラスのインスタンスであることを意味します。

クラスのインスタンスは、通常new演算子によりコンストラクタを呼出して作成します。実際、Stringクラスのインスタンスは、設定したい文字列を引数として渡し、コンストラクタを呼出しても生成することができます。つまり、上記スクリプト03-012の第1ステートメントをつぎのように書替えても、同じ処理になります。

var year0_str:String = new String("2007");

文字列(String型)や数値(Number/int/uint型)など一部のクラスでは、コンストラクタを呼出すことなく、値を直接記述してインスタンスを作成することができます。文字列は、設定したい値となるテキストをダブルクォーテーション(")で括ることにより、ステートメント内において文字列の値として認識され、Stringインスタンスが作成されます。また、すでに見てきたように数値は、値をそのままステートメント中に記載します。このように直接記述された値を「リテラル」と呼びます(Word 03-003)。

とくに文字列や数値では、コンストラクタを使ってインスタンスを生成する利点は思いつきません。これらの値は、リテラルで記述することが通常です

スクリプト03-013でご説明すべき第2は、substring()メソッドの引数の指定です。メソッドのシンタックスはつぎのとおりで、ふたつの数値を引数として渡します。どちらも取出す文字の位置を示し、第1引数startIndexが開始位置、第2引数endIndexが終了位置です。

function substring(startIndex:Number = 0, endIndex:Number = 0x7fffffff):String

そして、気をつけなければならないのは、文字位置の数え方です。まず、第1引数startIndexの開始位置を指定する場合、カウントは0から始まります。そして、第2引数endIndexの終了位置は、ヘルプには「抽出するサブストリングの最後の文字のインデックスに1を加えた整数」と説明されています。この1を加えるというのが、理解しにくいかもしれません。そのような場合は、文字でなく文字の間に仕切をイメージして、それを数えるとよいでしょう。

文字列先頭の文字の左端から、最後の文字の右端まで、文字と文字の間に仕切を置き、0から文字数の値までの連番を振ります。たとえば、前記スクリプト03-012の例とした西暦の"2007"であれば、下図03-015のように先頭の文字の左端を0で始め、仕切に整数の連番を順につけていくと、最後の文字の右端が文字数と同じ4で終わります。取出したいのが最後の"07"であれば、仕切番号2から4の間の文字ですから、このふたつの整数をsubstring()メソッドに引数として指定すればよい訳です。

文字列に置いた仕切の最後の番号は、文字列の文字数と一致します。文字列の文字数は、Stringクラスのlengthプロパティで取得することができます。したがって、substring()メソッドで取出したい文字が文字列の最後までであれば、第2引数としてlengthプロパティの値を指定すればよいことになります。すると、前記スクリプト03-012の第2ステートメントは、つぎのように書替えることが可能です。

var year1_str:String = year0_str.substring(2, year0_str.length);

さらに、ヘルプでsubstring()メソッドの内容を調べると、第2引数は省略可能であることがわかります。そして、「このパラメータを省略すると、String.lengthが使用され」ると解説されています。String.lengthというのは、Stringクラスのlengthプロパティを意味します。ですから、前記スクリプト03-012の第2ステートメントは、以下のように第2引数を省略してしまうことが可能です(スクリプト03-014)。

なお、ヘルプを始めとするドキュメントでは、クラスのプロパティやメソッドをString.lengthやString.substring()のように、「クラス.プロパティ」あるいは「クラス.メソッド()」のかたちで表記することがあります。

ただし、実際にスクリプトとして記述する際には、Stringクラスのlengthプロパティやsubstring()メソッドはStringインスタンスをターゲットにする必要があります。よって、この表記のまま記述しても動作しません。もっとも、Math.floor()のような静的なメソッドや静的なプロパティは、クラスを直接参照しますので、結果として表記と同じ記述で使われることになります(Tips 03-004「静的プロパティ・メソッド」参照)。

本書でも、以降は適宜この表記を用いることにします。

●月日を2桁に揃える
年を2桁にしたら、月日も2桁に揃えましょう。月日の値が1桁のときは、頭に0を加えることにします。このような処理にも、やり方はいくつか考えられます。ひとつは、値が1桁あるいは10未満であることを条件判定して、0を加える処理を行う方法です。しかし、今回はString.substring()メソッドを応用して、対処してみます。

1桁の数値に100を加えると、3桁の数値になります。たとえば、1は100を足せば101です。1桁目は必ず1、2桁目には0が入り、3桁目がもとの数値です。したがって、この数値を文字列に変換したうえで、下2桁を取出せば、以下のように2桁の"01"にすることができます。この手法の利点は、もとの数値が2桁であっても、処理を変える必要がないことです。つまり、もとの数値が1桁か2桁かを判別せずに処理できます。

var n:Number = 1;
var n_str:String = String(n+100).substring(1);
trace(n_str);   // 出力: 01

前に作成した、日付の文字列をTextFieldインスタンスに設定するスクリプト03-009に修正を加えて、日付の年月日をすべて2桁に揃えましょう(スクリプト03-015)。たとえば、2007年1月1日であれば、"07/01/01"という文字列が日付として表示されます。

この後、日付の設定は最初に1度だけでなく、つねに更新されるようスクリプトに処理を加えていきます。しかしその前に、時計の針と同じように、画面に表示するエレメントであるTextFieldインスタンスと、それを操作するスクリプトを、ひとつのMovieClipシンボルにまとめておきましょう。

まず、メインタイムラインに配置された日付のTextFieldインスタンスmy_txtを、MovieClipシンボルに変換します。そしてつぎに、メインタイムラインの日付表示のフレームアクション(スクリプト03-015)を、MovieClipシンボルの第1フレームアクションに移行します。スクリプトを記述したフレームからTextFieldインスタンスへのターゲットパスは変わりませんので、フレームアクションはメインタイムラインからMovieClipシンボル内にコピー&ペーストするだけで結構です(図03-016)。

[ムービープレビュー]で、日付が変わりなく表示されることを確認しておきましょう(図03-017)。

●日付の更新処理を加える
日付表示のMovieClipシンボルに設定したフレームアクションに、処理を追加します。日付の設定を最初に1度だけでなく、午前0時を回ったら値が更新されるようにしましょう。

まず、どのような処理方法を採るかです。24時間に1度しか行われない日付の更新を、Event.ENTER_FRAMEイベントにリスナー登録して処理するのは無駄が多いでしょう(Tips 03-009「更新の頻度」参照)。

setInterval()関数を使えば、更新する時間間隔を指定できます。ただ、この関数は、ActionScript 2.0/1.0の同名の関数とほぼ同じ仕様を採用しているため、3.0標準のイベントリスナーの仕組みを取入れていません。手軽に使える反面、応用性や拡張性には乏しいといえます。

そこで、ActionScript 3.0から実装されたTimerクラスを使うことにします。Timerクラスは、addEventListener()メソッドで登録したリスナー関数を、指定した時間間隔で繰返し呼出すことができます。この場合の処理の手順は、つぎのとおりです。

1. Timer()コンストラクタでインスタンスを生成する。
2. addEventListener()メソッドでTimerEvent.TIMERイベントにリスナー関数を登録する。
3. start()メソッドでTimerインスタンスの動作を開始する。

MovieClipシンボルのフレームアクションに記述した日付設定の処理は、関数(function)xSetDate()として定義することにします。そして、Timerクラスを使って1秒間隔で日付の更新を行おうとすれば、処理の大枠はつぎのとおりです。

var myTimer:Timer = new Timer(1000);   // Timerインスタンスの生成
myTimer.addEventListener(TimerEvent.TIMER, xSetDate);   // TimerEvent.TIMERイベントにリスナー関数登録
myTimer.start();   // Timerインスタンスの動作開始
function xSetDate(eventObject:TimerEvent):void {   // リスナー関数定義
  // ここに日付更新の処理を記述する
}

MovieClipシンボルのフレームアクション(図03-016)として記述した日付設定の処理は、そっくりそのまま日付更新の処理として関数xSetDate()の本体{}内に移行すれば結構です。したがって、フレームアクションはつぎのように修正されます(スクリプト03-016)。

[1]Timerインスタンスの生成については、Timer()コンストラクタのシンタックスを確認しておきましょう。

public function Timer(delay:Number, repeatCount:int = 0)

第1引数のdelayには、イベントの発生間隔をミリ秒値で指定します。1000を指定すれば、TimerEvent.TIMERイベントに登録したリスナー関数を、1秒(=1000ミリ秒)ごとに呼出すことになります。

第2引数のrepeatCountは、イベントが繰返し発生する回数を整数で指定します。たとえば、3と指定すると、リスナー関数を3回呼出したら、イベントの発生は停止します。繰返し回数を無制限にしたいときは、0を指定します。第2引数を省略すれば、デフォルト値として0が設定されます。

[2]Timerインスタンスによる繰返し処理のイベントにリスナーを登録するには、addEventListener()メソッドの第1引数としてTimerEvent.TIMERイベントを指定します。

[3]Timerインスタンスの繰返し処理は、開始時期を任意に決められる仕様になっています。そのため、処理を開始するには、Timer.start()メソッドを呼出す必要があるのです。

これで、日付表示も含めて、時計がひととおり完成しました。[ムービープレビュー]で、動作を確認してみましょう。

○03-06 数値を指定桁数の文字列で返す関数
前節のスクリプト03-016で、日付を設定する処理の中には、数値を2桁の文字列に変換する処理が何度かありました。この処理を関数として定義してみましょう。何度か同様に行われる処理は、関数にすると見やすくわかりやすくなります。そうすると、問題が生じたとき発見しやすいうえに、機能を拡張して汎用化することも可能になります。

●数値を2桁の文字列に変換して返す関数
まず、スクリプト03-016のつぎの2行のステートメントを考えてみます。

var month_str:String = String(nMonth+100).substring(1);
var date_str:String = String(nDate+100).substring(1);

変数nMonthもnDateも2桁以下の数値です。上記2ステートメントの代入式右辺は、いずれも2桁以下の数値を2桁の文字列に変換する処理です。これをどのように関数として定義したらよいでしょう。関数を使えるようになるコツは、呼出し方を先に考えてしまうことです。上記2ステートメントであれば、つぎのような関数xSetDigits()があればいいと思いませんか?

var month_str:String = xSetDigits(nMonth);
var date_str:String = xSetDigits(nDate);

xSetDigits()は、2桁以下の整数を渡すと、2桁に揃えた文字列を返してくれる関数です。もちろん、まだそんな関数は存在しません。けれど、あたかもすでにあるかのように、希望を具体的に記述してしまうことで、関数の備えるべき大枠つまり仕様が決まります。そして関数定義は、いわば夢をかたちにする作業になるのです。

関数の呼出し方を明らかにすると、具体的には最低ふたつ、最大で4つの基本項目が決まります。

1. 関数名[必須]
2. 関数の定義場所(タイムライン)[必須]
3. 引数の要否、あればその数やデータ型[オプション]
4. 戻り値の有無、あればそのデータ型[オプション]

上記のステートメントに記述した関数xSetDigits()の呼出し方により、これら4つの項目が仕様として明らかになりました。

第1に、関数名はxSetDigitsです。第2に、関数のターゲットが省略されていますので、定義はこのステートメントと同じタイムラインに行うべきことになります。通常は、第1フレームアクションでしょう。この2項目は、関数を定義するときには、必ず定められなければなりません。

第3に、数値の引数がひとつあります。具体的には、2桁以下の正の整数です。第3に、戻り値として文字列が返されます。これは、引数の数値を2桁に揃えた文字列の数字になります。これらの2項目はオプションで、必要な場合もあれば、不要なこともあります。

上記4項目から、関数xSetDigits()は、つぎのようなかたちになります。引数はint、戻り値はStringで型指定しています。戻り値を返すには、returnステートメントを用います。

function xSetDigits(n:int):String {
  var n_str:String;
  // 引数nを2桁の文字列に変換して変数n_strに設定する処理
  return n_str;
}

returnステートメントは、関数を終了し、returnの後に指定した式の値を返します。上記では、変数n_strの値が、戻り値として返されます。

Tips 03-015■returnの後の()が[自動フォーマット]で消える Flash CS3 Professionalでは、returnステートメントの後の戻り値に括弧()を使った式が指定されていると、[自動フォーマット]したとき括弧()が消去されてしまいます。 たとえば、以下の関数xTest()では、returnステートメントの後の戻り値に、(a + b) * cという括弧を使った式が指定されています。xTest(1, 2, 3)を実行すると、括弧()の中が先に計算されますので、9が戻り値として返ります。 図03-018■returnステートメントの後の戻り値に括弧()を使った式が指定 xTest(1, 2, 3)を実行すると、9が返される。 ところが、[自動フォーマット]を行うと、returnの後の括弧()が消滅します。同じxTest(1, 2, 3)を実行すると、掛け算が先に計算されますので、戻り値は7になってしまいます。 図03-019■[自動フォーマット]でreturnステートメントの後の括弧()が消滅 xTest(1, 2, 3)を実行すると、7が返される。

2桁以下の数値を渡して、2桁の文字列の数字に変換する関数xSetDigits()は、以下のように定義されます(スクリプト03-017)。たとえば、引数に数値1を渡してxSetDigits(1)を呼出せば、"01"という文字列が返されます。

var _str:String = xSetDigits(1);
trace(_str);   // 出力: 01

●任意の桁数の数値から末尾2桁を文字列に変換して返す
つぎに、スクリプト03-016の以下の1行のステートメントについて考えます。具体的には、4桁の西暦の年から下2桁を取出して、文字列に変換している処理です。

var year_str:String = String(nYear).substring(2);

この処理も、関数xSetDigits()を以下のように呼出して対応できるようにしましょう。

var year_str:String = xSetDigits(nYear);

末尾の2文字を取出すというxSetDigits()の処理の基本は変わりません。ただし、3桁以上の任意の数値が扱えるように修正します。それには、String.substring()メソッドに渡す引数を、数値の桁数より2少ない値にすればよいでしょう。桁数は、文字列に変換した後、String.lengthプロパティで取得することができました。

すると、上記スクリプト03-017は、以下のように書替えればよいでしょう。今度は、渡す数値が1桁でも4桁でも、下2桁の文字列が返されます。

var _str:String;
_str = xSetDigits(1);
trace(_str);   // 出力: 01
_str = xSetDigits(2007);
trace(_str);   // 出力: 07

関数xSetDigits本体{}内の最初のステートメントで100を加えている処理は、引数として3桁以上の数値が渡されたときは意味がありません。けれども、最終的に取出す下2桁の値にはとくに影響がないので、取りあえずこのままにしておきます。

●任意の桁数の数値から指定桁数の文字列に変換して返す
関数xSetDigits()をさらに汎用化します。文字列として取出す桁数を、任意に指定できるようにしましょう。xSetDigits()の定義に第2引数を追加して、必要な桁数を指定し、つぎのような結果が得られることを目指します。

var _str:String;
_str = xSetDigits(1, 4);   // 1を4桁で表す
trace(_str);   // 出力: 0001
_str = xSetDigits(2007, 2);   // 2007の下2桁を取出す
trace(_str);   // 出力: 07

1桁の数値を2桁に揃えるためには、数値に100を足しました。3桁ほしい場合には、1000を加えます。すると、n桁必要なときは、いくつを加算すればよいでしょう。

2桁: +100 = +10²
3桁: +1000 = +10³
  ：
n桁: +10ⁿ

足す数値の0の数が、取出す桁数と等しいことに着目すれば、10ⁿを加えればよいことがわかります。べき乗は、Math.pow()メソッドで求めることができます。10ⁿは、つぎのとおりです。ただし、変数nには3を代入しました。

var n:int = 3;
var nAnswer:int = Math.pow(10, n);
trace(nAnswer);   // 出力: 1000

これで、関数xSetDigits()に手を加える準備が整いました。けれど、ここでもうひとつStringクラスのメソッドをご紹介しましょう。それは、String.substr()メソッドで、シンタックスはつぎのとおりです。

function substr(startIndex:Number = 0, len:Number = 0x7fffffff):String

String.substring()メソッドと同じく、文字列から指定された文字を取出します。第1引数startIndexは、String.substring()メソッドと同じ、取出す文字の開始位置です。ただし、第2引数lenは取出す文字数になっています。つまり、何文字目の位置(startIndex)から何文字(len)取出すという指定をします。

さらに、第1引数は、String.substring()メソッドと異なり、文字の末尾から逆に数えることができます。その場合、最後の文字を-1として、負の整数で指定します(図03-020)。たとえば、文字列"2007"の末尾から2文字"07"を取出したいときは、開始文字位置を-2と指定できるのです。そして、第2引数を省略すると、文字列の最後まで取出すことになります。

すると、String.substr()メソッドを使って文字列の末尾から数えてn文字取出したいときは、文字列の長さがn以上でさえあれば、引数に-nを指定すればよいということです。

var _str:String = "2007";
var n:int = 2;
_str = _str.substr(-n);
trace(_str);   // 出力: 07

以上をもとにして、関数xSetDigits()に修正を加え、第2引数として取出す数字の桁数を指定できるようにしたのが以下のスクリプト03-019です。所期の目的どおり、xSetDigits(1, 4)やxSetDigits(2007, 2)といった呼出しにより、それぞれ"0001"や"07"という文字列が返るかどうか確認しましょう。

この関数xSetDigits()は、時計のTextFieldインスタンスに日付を表示させるスクリプト03-016に組込んで完成させます(スクリプト03-020)。

関数xSetDigits()には、1点追加があります。それは、第2引数nExpの宣言に、デフォルト値2を指定したことです。int型指定の後の=2という記述がそれです。デフォルト値が指定してあると、関数呼出し時にその引数が省略されたとき、デフォルト値が引数値として扱われます。

つまり、関数xSetDigits()の第2引数を省略すると、2が指定されたものとして扱われ、2桁の文字が返されるということです。ですから、年月日の数字をすべて2桁で揃えて表示する関数xSetDate()からのxSetDigits()の呼出しは、第2引数が省略されて第1引数のみとなっています。

○Column 03 LiveDocsオンラインヘルプ
AdobeサイトにおけるFlash CS3 Professionalの技術情報として、「Flashリソース」(<http://www.adobe.com/support/documentation/jp/flash/>)があります(図Column 03-001)。その中でも、「LiveDocsオンラインヘルプ」は、ぜひ活用することをお勧めします。

LiveDocsは、Flash CS3アプリケーションの[ヘルプ]のコンテンツをAdobeサイトに掲載したものです。ドキュメントの構成も、[ヘルプ]と同じです。しかし、アプリケーションの出荷後も、適宜情報の更新・追加が行われています。

たとえば、前掲図03-014で指摘した[Dateコンストラクタ]の項で、邦訳する必要のない"function"の語を「関数」としていた点も、LiveDocsでは正しく修正されています(図Column 03-002)。

また、米国のAdobeサイトには、英語版のLiveDocsがあります(「Flash resources」<http://www.adobe.com/support/documentation/en/flash/>)。アップデートの頻度は英語版の方が高く、たとえば前掲Tips 03-010「Date()コンストラクタに指定する文字列のフォーマット」で補足した、[Date()コンストラクタ]の項の誤った文字列フォーマットの例は、英語版では削除されています(本稿執筆時点では、日本語版は修正されていません)。

さらに、日本語版・英語版のLiveDocsには、ともにblogのようにユーザーからコメントを加えられる機能があります(ただし、Adobeによる投稿の承認が必要です)。このコメントも、閲覧者数の違いから、英語版の方が多く、さまざまな補足・修正の情報が加えられています。さらに、英語版LiveDocsには、米国Adobeスタッフがコメントすることもあります(図Column 03-004)。

ですから、日本語版LiveDocsと併せて英語版も参照すると、より多くのアップデート情報が手に入るでしょう。なお、Flash CS3ヘルプの中で筆者が気づいた誤りは、FumioNonaka.comに「正誤表」(<http://www.fumiononaka.com/TechNotes/Flash/Errata_HelpFlashCS3.html>)として掲載しています。

[Prev/Next]

作成者: 野中文雄
更新日: 2008年1月24日 Maniac! 03-001の解説を修正。
更新日: 2008年1月20日 AS1&2 Note 03-003を追加。
作成日: 2007年9月1日