Stretcher

以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。このウィジェットは、BlankWidgetで解説したことは繰り返しませんので、そちらを参照してください。

1　ウィジェット

Stretcher.wdgt は、以下のようなウィジェットです。

真ん中に「Click to Strech（伸ばすにはクリック）」と書かれています。クリックすると下のように広がります。

今度は「Click to Shrink（縮めるにはクリック）」となっていて、その下に「This text should only be visible when widget is streched（このテキストはウィジェットが伸ばされた時だけ見えるはずです）」と書かれています。この 2 つの状態は一瞬にして移り変わるのではなく、ある程度の時間をかけてアニメーションで動かされています。

アニメーションの様子をくわしく観察するには、シフトキーを押しながらクリックします。するとスローモーションで伸縮が行われます。

2　ファイル構成

このサンプルのファイル構成は以下のようになります。

AppleClasses というフォルダ内に AppleAnimator.js というファイルがあります。これは Apple クラスと呼ばれる Apple が提供している JavaScript クラスの 1 つです。このほかにスクロール用やスライダーなどがありますが、ここではアニメーション用のクラスだけが組み込まれています。Mac OS X v10.4.3 以降では、これはシステムに置かれていて、

Default.png は、最初の縮んだ状態での背景と同じです。Top.png と Bottom.png は、一番上と一番下の背景の角が丸くなった部分です。Center.png は高さ 1 ピクセルで、角が丸くなっている部分以外の幅が同じ部分の背景を埋めるための画像です。

Info.plist の最初に BackwardsCompatibleClassLookup キーが値 TRUE とともに置かれていることに注意してください。これはクラス参照において下位互換性がある（v10.4.3 より前にも対応できる）方法が使われていることが宣言されています。v10.4.3 以降のシステムでこのキーが指定されていれば、AppleClasses/... という形のスクリプト読み込みを見つけたとき、それが自動的にその時のシステムの Apple クラスで置き換えられます。すなわち、組み込まれているファイルではなく、動作するシステムの最新バージョンが使われることになります。これがうまく機能するために、Apple クラスのファイルはウィジェット直下の AppleClasses というフォルダに入れられている必要があります。

また、このサンプルの Info.plist では、BlankWidget のキー以外に、Height と Width というキーが指定されています。これは省略可能なキーで、それぞれ、ウィジェットの高さと幅を指定します。このサンプルで指定されているサイズは Default.png、すなわち縮んでいる時のサイズと同じです。他のキーは、BlankWidget と同じです。主要 HTML は Stretcher.html に指定されています。

3　Stretcher.html

それでは、主要 HTML ファイルを見てみます。

構造は単純です。スクリプトファイルが 3 つも読み込まれていることに注意してください。StretcherMain.js は独自のもので、loaded など 2 つの関数が実装されています。Stretcher.js も独自で、strecher オブジェクトが定義されていて、id 属性が front の div 要素に設定されている onclick ハンドラの strech(event) メソッドなどが実装されています。

body 要素には読み込まれた時に実行される loaded が設定されていて、そのなかに 2 つの div 要素があります。後のほうの div は debugDiv（デバッグ用 div）という id で、最初は空です。前の方の div 要素が本体で、これにクリックされた時のハンドラが設定されています。

最初の div 内には、一番上の部分を表す div、一番下を表す div、中央を表す div があります。中央の div 内には、「Click to Strech」という文字列が入っている span 要素と、伸ばされた時に見えることになるテキストが収められた span 要素があります。

4　Stretcher.css

スタイルシートを見てみましょう。通常と同じような設定の部分は省きます。

#center の ID セレクタ部分に注目してください。top が #topEdge の top と height を足した値に、bottom が # bottomEdge の bottom と height を足した値に設定されています。また、#topEdge と #bottomEdge の background-repeat プロパティが no-repeat（繰り返しなし）に設定されているのに比べて、#center は repeat-y（縦方向のみ繰り返し）に設定されています。また、はみ出した部分の表示方法の指定である overflow プロパティが hidden（表示しない）になっています。この設定によって、ctrContent という id 属性をもつ span 要素内の文字列が表示されないことになります。ちなみに overflow は、通常の設定（visible）だとはみ出して表示されます。また、scroll だとブラウザによるスクロール領域になります。また auto はブラウザまかせです。

display プロパティが none（表示しない）になっていることに注意してください。このため、デバッグ出力は表示されません。

5　StretcherMain.js

このスクリプトファイルには、変数と本体が読み込まれた時に呼ばれるものなど 2 つの関数が実装されています。

新しく Stretcher オブジェクトのインスタンスを作成して、それを変数 stretcher に格納しています。Strecher オブジェクトは Stretcher.js で実装されています。このコンストラクタについては後で説明しますが、最後の引数はオブジェクトが伸縮を終了したときに呼ばれるコールバック関数です。ここで指定されている changeText は、このファイルで実装されています。

id が ctrTitle という要素（span）の最初の子のノード値として、stretcher に伸縮状態を問い合わせ、それにもとづいてテキストを設定しています。

6　Stretcher.js

Stretcher オブジェクトはこのファイルで実装されています。まずコンストラクタを見てみます。

6.1　コンストラクタ

だいぶ複雑ですが、順番を追っていけば、わかるでしょう。

最初に各種インスタンス変数を設定しています。this.multiplier = 1; のような文で、オブジェクトのインスタンス変数（メンバー）を設定できます。この multiplier は後でわかりますがアニメーションの速度です。これより前の部分は引数を保存しているだけの変数なので、わかると思います。

つぎに最小位置と最大位置を設定しています。getComputedStyle は、Safari では document 以下のみ適用できる関数であることに注意してください。これは動的なスタイルを計算するので、その時の表示上のスタイル値を返してくれます。逆にいえば、スタイルが適用された状態でなければいけないので、コメントで注意されているわけです。このコンストラクタは読み込み完了後のイベントハンドラから呼ばれているので、これは大丈夫です。それから最大位置を最小位置に伸ばす距離を足したものにしています。それから、今計算した値を使って、最初の拡げる場合の変数を設定しています。positionFrom は元、positionTo は目標です。

つぎに注意してください。JavaScript ではオブジェクトは通常のパブリックな変数（this.XXX = ??? の形）とは別に、プライベート（そのオブジェクト内からのみ参照できる）な変数を設定できます。このようにオブジェクトのコンストラクタ内で var 指定で変数を作ると、それはプライベート変数となります。また、注意すべきはコンストラクタの引数も暗黙のプライベート変数であるということです。このコンストラクタでは、パブリックなインスタンス変数に引数をコピーしていましたが、プライベート使用のみなら、パブリックな変数にコピーする必要はありません。

プライベートな変数は、当然のことながらコンストラクタ内からアクセスできます。では、パブリックな関数など外部から操作するにはどうすればいいでしょうか。それが以下のコードとなります。ここでは、特権メソッド（プリビレッジドメソッド）(privileged method) という仕組みを使って、プライベート変数を操作できる関数を定義しています。この特権メソッドはパブリック関数内から呼びだせます。このようにプライベート変数を扱う、アクセサや内部関数はコントスラクタ内でオブジェクト作成時に定義します。

これが使われているのは、文脈によって、this がさまざまなものを表してしまうからです。コンストラクタ内でプライベート変数 self に this を代入することで、self がつねにこのインスタンスを示していることを確実にできます。

その後、アニメーション実行中でないので stretchAnimator を null に初期化しています。

これ以後は、特権メソッドの定義です。これらはアニメーション時のコールバック等として呼び出されます。

nextFrame は、伸縮対象の要素の高さを now で渡されたピクセルに設定しているだけです。

changeDirection は、対象位置が最大位置なら最小位置にして、そうでないなら逆にして、方向を切り替えています。

つぎに doneStretching は、伸縮完了処理をします。縮めた場合なら、取得した幅と最小の高さでウインドウをサイズ変更します。それから元の位置を設定し、方向変更をしています。そして設定したアニメーション実行オブジェクトを削除し、終了ハンドラが設定されていればそれを呼び出します。

6.2　Apple クラスによるアニメーション

実際にアニメーションを開始するメソッドを見る前に、Apple クラスのアニメーション使用について簡単にまとめてみます。くわしいことは『Dashboard プログラミングトピック』>「アニメーションの使用」を見てください。

アニメーションを使うには 2 つの方法があります。簡単なものは、コンストラクタ AppleAnimator(duration, interval, start, finish, handler) を使うもので、引数は、タイマー持続時間、発動間隔、開始値、終了値、ハンドラです。ハンドラは function handler(animation, current, start, finish) の形のもので、引数は、呼び出したアニメーション（下を参照）、現在値、開始値、終了値となっています。こうして作成したアニメーターを start() と stop() メソッドで開始・終了します。

もっと複雑な方法は、コンストラクタ AppleAnimator(duration, interval) を使うものです。引数はタイマー持続時間、発動間隔だけです。これだけでは何も起こらないので、アニメーションオブジェクトを作ってこれに追加します。コンストラクタ AppleAnimation(start, finish, handler) を使います。引数は、開始値、終了値、ハンドラです。ハンドラの形式は function animationHandler(animation, current, start, finish) で上と同じです。こうして作ったアニメーションオブジェクトを currentAnimator.addAnimation(currentAnimation); のような形で追加します。アニメーターに対して複数のアニメーションオブジェクトを追加できるので、同じ持続時間と発動間隔をもつ、異なる効果や対象を扱うアニメーションを複数同時実行できます。上の簡単な場合は、1つのアニメーションだけを持つ場合に相当します。

アニメーターはプロパティを持っていて、duration（持続期間）、interval（間隔）、animations（アニメーション配列）、timer（タイマーの現在値）、oncomplete（タイマー完了時のハンドラ）です。

アニメーションのプロパティは、from（開始値）、to（終了値）、now（現在値）、callback（ハンドラ）となっています。

また、AppleAnimator というクラスが既定義されています。これは長方形のサイズ変更アニメーションに対して簡単な方法を提供しています。

6.3　アニメーション開始

つぎは実際にアニメーションを開始する stretch メソッドを見てみます。

最初の prototype に注意してください。これは原型・鋳型という意味で、このオブジェクトのすべてのインスタンスに共通なパブリックメソッドを宣言するために使われています。オブジェクトにパブリックなメソッドを追加するには、このような形を使います。

まずシフトキーが押されていた場合にスローモーションを行うために、渡された event を調べています。シフトキーが押されていたら、multiplier（倍率）の値を 10 にします。

つぎに現在アニメーション実行中ならそれを停止し、終了ハンドラを null にした後で終了処理を呼び出し、それから再び終了ハンドラを設定しています。

それから伸ばす場合なら、ウインドウをサイズ変更しています。これを行わないと、ウインドウのサイズがそのままで内容だけが拡げられ残りの部分は隠れたままになってしまいます。

最後にアニメーターを作って実行しています。これは上で説明した簡単な場合です。持続時間に multiplier の値が掛けられていることに注意してください。これによりアニメーションが行われる時間が長くなります。発動間隔が一定であることに注意してください。このように Apple クラスのアニメーションでは、発動ごとの値を独自に計算するのではなく、開始値と終了値と持続時間を指定することで、ハンドラが呼ばれたときに設定する必要がある値を自動的に計算して、current 引数として渡してくれます。このため、複数の設定値の場合、複数のアニメーションを設定できるようになっているわけです。ハンドラのなかで呼ばれた回数などで処理を行わないように注意してください。

6.4　残りのメソッド

さて、他のメソッドも見てみます。

残りはデバッグ用コードです。

デバッグモード用変数を設定し、ウィジェットの時はコンソールに書き出されるように、alert を使い、そうでない場合は debugDiv 内に文字列を書き出しています。

これは debugMode 変数の値を変更し、Safari で開かれた場合には debugDiv が表示されるようにします。

6.5　デバッグ

さて、せっかくデバッグモードがあるので、それについて調べてみましょう。このサンブルを Safari で開いても何も起こりません。どうなっているのでしょうか。当然のことながら、最初の debugMode の値は false です。なので、これをいじってやらなければなりません。

Stretcher.html の body 要素の onLoad ハンドラ部分を onload='toggleDebug(); loaded();' に修正します。それから再び Safari で読み込みます。クリックして拡張すれば以下のような表示になります。

このように下の灰色の部分にデバッグ情報（DEBUG で書き出された文字列）が表示されるようになります。

この部分の表示はどこから来ているのでしょうか。付属の AppleClasses フォルダ内の AppleAnimator.js を見ると以下のような部分があります。

このように、このファイルのあちこちにデバッグ出力が埋め込まれていて、それが表示されるようになっています。

では、これをウィジェットとしてインストールしてみましょう。コンソールを開いて、ウィジェットをクリックした後に見てみます。しかし、alert() で出力されたはずのものは何もありません。

じつは、これはシステムに存在する Apple クラスにはデバッグ出力部分がないからなのです。システムのファイルとの差分をとってみれば、DEBUG 部分以外は同じであることがわかるでしょう。このサンプルでは、下位互換性のために BackwardsCompatibleClassLookup キーが値 TRUE に設定されていました。これが設定されていると、システムの Apple クラスが優先的に使われてしまいます。そこでウィジェット内の Info.plist を修正し、このキーを除去するか、FALSE にします。そしてウィジェットを再びインストールします。

今度は、Safari 上で表示されたのと同じような文字列がコンソールに出力されているのがわかります。

Mac OS X v10.5 以降では、Dashcode を使えば、このような複雑なデバッグ操作は必要ではありません。

7　AppleAnimator クラス

ここまでで、このサンプルの動作は十分わかったと思います。以下では、Apple クラスのほうを見てみます。アニメーションを利用したいだけの人は、以下の説明を読む必要はありません。

7.1　AppleAnimator オブジェクト

このサンプルに付いてる AppleAnimator.js には、上で説明したように DEBUG 文が入れられています。このファイルは Mac OS X v10.4.11 のシステムと DEBUG 文以外では同じで、Mac OS X v10.5 でもそのままです。まずコンストラクタを見てみましょう。

それほど難しくはないと思います。まず最初は引数 2 つだけとしてインスタンス変数を設定し、プライベート変数にこのインスタンス自身を保存しておきます。次は他から呼ばれる animate メソッドの定義です。最後に、引数がさらに渡されていれば、それを使ってアニメーションオブジェクトを自動作成しています。

特権メソッド animate では、開始時から現在時までを計算し、0 から持続時間内に収まるように修正し、それから曲線上の値として進み具合を計算し、配列内のアニメーションを実行し、持続時間以上なら停止して終了しています。実際のフレーム動作はアニメーションの doFrame で行われていることがわかります。

つぎはアニメーションを開始するメソッドです。

時間の設定を行って、JavaScript の繰り返し動作を行う関数を使っています。この関数の引数は、最初が呼び出される関数で、その次が間隔です。以下にさらに引数を渡すこともでき、その場合、その余分の引数がタイマー発動時に呼ばれる関数に渡されます。この関数の戻り値は個々のタイマーを識別するために使われます。そのため、必ず保存しておかなければなりません。

つぎはアニメーションを停止するメソッドです。

保存した戻り値を使って clearInterval を呼び出し、繰り返し動作をキャンセルしています。

つぎはアニメーションを追加するメソッドです。

単に配列にアニメーションを追加しているだけです。

7.2　Animation オブジェクト

実際のアニメーションを行うアニメーションクラスを見てみます。まずコンストラクタです。

簡単です。渡された開始値、終了値、ハンドラを保存しているだけです。その他のインスタンス変数を初期化しています。つぎは毎回のアニメーションを行うメソッドです。

アニメーターオブジェクトは時間範囲内の曲線によって進みぐあいの割合を計算していましたが、そうして渡された値をここで実際の値へと変換しています。最後の場合だけ割合にかかわらず終了値にしています。それから変数を設定して、設定されたコールバックを呼んでいるだけです。

このクラスはこれだけです。こうして、アニメーターとアニメーションの作業分担の様子が理解できたと思います。アニメーターは時間の進行を扱い、アニメーションは値の進行を扱い、ハンドラを呼び出します。

7.3　AppleRectAnimation オブジェクト

さて、長方形アニメーションを行うクラスが前もって定義されています。それを見てみます。

コンストラクタは初期値と終了値とハンドラを設定しているだけです。つぎはアニメーション実行です。

内部関数 computeNextRectangle は結局使われていないようです。from に対して、from と to の長方形の差に割合 ease を掛けた結果を now にしています。

このファイルには、AppleRect オブジェクトも実装されていて、これが AppleRectAnimation で使われています。このオブジェクトはいくつかのメソッドを定義していますが、長方形どおしの和や差、数値を掛けたりというメソッドで、それほど複雑なものではないので、ここでは取り上げません。こうしたメソッドを使って、中間的な長方形を計算し、それが AppleRectAnimation のフレーム動作で使われているわけです。

管理人：神吉 秀典　E-mail：