Fader

以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。このウィジェットは、BlankWidgetで解説したことは繰り返しませんので、そちらを参照してください。また、このサンプルで使われている Apple クラスのうち Animator は Stretcher で説明したので、その部分も繰り返しません。

1　ウィジェット

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

「EAT」という文字列が表示されていますが、これは時間とともに中央の「AT」、右側の「JOE'S」に移り変わります。また右下に情報ボタンが表示されているのに注意してください。これはマウスカーソルがウィジェット内に入ると表示され、さらに近づくと「i」のまわりに円が表示されます。クリックすると、裏面の環境設定が表示されます。

上の「Fade speed (ms):」（フェード速度）というフィールドでは、大きい数字を入力すれば移り変わりの速度が遅くなります。「Fade delay (ms):」(フェードの遅れ）というフィールドでも、大きい数字を入力すればフェードインとフェードアウトの間の時間が長くなります。「Done（完了）」をクリックして、再び環境設定に戻ったとき、前の数値が保存されていることに注意してください。

2　ファイル構成

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

AppleClasses 内には、AppleAnimator.js、AppleButton.js、AppleInfoButton.js という 3 つの JavaScript ファイルがあります。Apple クラスの組み込みと Info.plist、そして AppleAnimator.js については、Stretcher を見てください。主要 HTML は Fader.html に指定されています。

Default.png は、ウィジェットの背景が含まれている画像です。back.png はウィジェット裏面の背景の画像です。EATNeon.png、ATNeon.png、JOESNeon.png は、それぞれ表示される文字列の画像です。

CSS ファイルは Fader.css です。スクリプトファイルは FaderMain.js と Fader.js の 2 つあることに注意してください。

3　Fader.html

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

構造は単純です。body 要素には、3 つの div 要素 front、back、debugDiv があります。このデバッグ用領域である debugDiv とそれに関する説明については、Stretcher を見てください。ここでは説明しません。front は表面、back は裏面を表しています。このように、環境設定を裏面にもつウィジェットは body 要素直下に表面・裏面の div 要素をもち、表示を切り替えているのがよくある形です。

表面の div 要素内には表示される 3 つの文字列の画像の img 要素と、flipper という div 要素があります。最後のものは読み込み完了時のハンドラ内で情報ボタンと関連付けられています。

裏面の div 要素内には、入力フィールドのタイトルとなる 2 つの div 要素と、入力フィールドである 2 つの input 要素があります。そして Apple のガラスボタンに関連付けられている doneButton という div が置かれています。

4　Fader.css

スタイルシートを見てみましょう。

表面と裏面の幅と高さに同じ数値が設定されているのに注意してください。それぞれ背景画像を設定し、繰り返しなしに設定しています。裏面は表示しないように指定されています。また、faderDiv クラスセレクタで不透明度が 0、すなわち完全に透明で目に見えないようになっていることに注意してください。初期値では 3 つの文字列とも透明で見えません。

5　FaderMain.js

FaderMain.js では、読み込み完了時のハンドラなどウィジェット全体の JavaScript が収められています。Fader.js では、実際のフェードを行うオブジェクトが実装されています。まず、FaderMain.js を見てみます。

情報ボタンが格納される flipper、フェードを行う TransitionFader オブジェクトが格納される transFader、Done ボタンが格納される glassButton という 3 つの変数が宣言されています。

その後に、このファイルが読み込まれた時に実行される関数外のコードがあります。Dashboard 内で起動されたなら、表示された場合と隠された場合のハンドラを設定します。

つぎに body 要素の読み込み完了時のハンドラを見てみます。

まず表面の flipper が情報ボタンと関連付けられ、作成されたボタンをグローバル変数内に格納しています。情報ボタンのコンストラクタの引数は、順番に、ボタン要素、前面要素、前景色、背景色、裏面表示の際のハンドラです。くわしいことは後の情報ボタンの説明を見てください。

つぎに裏面の doneButton がガラスボタンと関連付けられ、作成されたボタンをグローバル変数内に格納しています。コンストラクタの引数は、順番に、ボタン要素、タイトル、クリックされた場合のハンドラです。くわしいことは後のガラスボタンの説明を見てください。

それから fades という配列を作成し、そこに表示される文字列の img 要素であった 3 つの要素を格納しています。これはフェードを行うオブジェクトにおいて順番に表示される対象となります。それから TransitionFader オブジェクトを作り、グローバル変数に格納しています。コンストラクタの引数は、対象、フェード速度、フェードの遅れです。これについては、Fader.js の説明を見てください。

最初の表示されるときと隠される場合のハンドラは簡単なので先に見ます。

単純に変数に格納されているフェードオブジェクトに対して一時停止と再開を指示しているだけです。

それから情報ボタン、ガラスボタンに設定されたハンドラが実装されています。まず、情報ボタンに設定されたハンドラです。

まず、表裏の切り替えを準備します。これは表示を凍結します。こうしなければ、以下の表示変更が反映されてしまい、見ぐるしい表示になるでしょう。

表示が凍結されたので、自由に表示内容を変更できます。まずフェードを一時停止し、表面と裏面の表示設定を行い、それから裏面が表示されたときに現在の値として表示される値を設定します。準備がすべて終わったら、切り替えを実行するように指示しています。

ここで、setTimeout を使って、performTransition を呼び出しています。遅れが 0 なのですぐに実行されることになります。これは『Dashboard プログラミングトピック』>「ウィジェットの裏面と環境設定」でも書かれていて、両面を正しく反転するための処理です。

つぎは裏面から表面に戻るときのハンドラです。

切り替え準備をした後で、各種設定値を設定します。それからフェードを再開させ、切り替えを実行しています。

これで、このファイル内の関数はすべて説明しました。後は Fader.js で実装されているフェードオブジェクトについて理解すれば、このサンプルの動作はほとんどわかります。

6　Fader.js

このファイル内では、単一の要素をフェードさせる Fader オブジェクトと、複数の要素をフェードさせながら切り替える TransitionFader オブジェクトの 2 つが実装されていることに注意してください。このうち、このサンプルで外部から使用されているのは後の TransitionFader だけです。前者は後のオブジェクト内でフェードを行うために利用されています。

まず単一要素をフェードさせる Fader オブジェクトから見ていきます。

説明がない残りの引数は、最小と最大の不透明度です。指定しなければ 0 と 1 になります。基本的に各種変数を初期化しているだけです。タイマーコールバック内で呼ばれるハンドラを特権メソッドとして設定しています。

フェード時間はメソッドを使って設定されています。

メソッドを使っているのは、単に最小時間を 250 にするためです。

こうして作成された Fader オブジェクトは、fadeIn/fadeOut メソッドを使って、出現と消滅のどちらかに設定されます。

すでにフェードアウトならそのまま戻ります。開始値を最大不透明度にしますが、すでに既存の不透明度があるならそちらを使います。それから終了値を最小とし、フェードアウトであることを示すようにします。

フェードアウトの場合と設定値が違う以外は同じ構造です。

こうして設定されたフェードは fadeTo メソッドを使って実行されます。

アニメーションを行う Apple クラスの使い方については、 Stretcher の解説、あるいは『Dashboard プログラミングトピック』>「アニメーションの使用」を見てください。

アニメーターがあるなら停止して削除し、新規アニメーターを設定値で作成し、終了ハンドラを設定した後で実行しているだけです。あとのことは Apple クラスが行ってくれます。

これで Fader オブジェクトのメソッドはすべてです。つぎは サンプルから呼ばれていた TransitionFader オブジェクトを見てみましょう。まずはコンストラクタです。

最初にプライベート変数に自身を格納しています。次は、コンストラクタ作業というより、特権メソッドの定義です。この prepNextFade は、フェードインの完了ハンドラとして指定され、フェードインが完了した後で、次の遷移の組を作成します。割った余りを使うことで、任意サイズの配列を循環させることができます。フェードインにおいて、完了ハンドラとして prepNextFaded が指定されていることに注意してください。遷移が中止されまで、これがずっと繰り返されることになります。そして setTimeout を使って、delay 後にフェードを実行させることで、フェードインからフェードアウトが開始されるまでの遅れを管理しています。

その後で、実際のコンストラクタ呼び出し時の作業が続きます。最初に使われるフェードの組を作成します。最初は表示がないので、片方がフェードインされるだけです。それから渡された引数等をパブリック変数に設定しています。

単に遅れを 500ms 以上にするためにメソッドを使っているだけです。持続時間の設定は少し違います。

フェードイン・アウトの両 Fader オブジェクトのメソッドを使って持続時間を設定しています。

さて、FaderMain.js の loaded において、オブジェクトが作成された後で start() が呼ばれていました。これを見てみます。

これだけです。最初はフェードインから始まるので、単にフェードインを行っているだけです。

毎回の prepNextFade では、fade が setTimeout を使って実行されていました。これを見てみましょう。

フェードは setTimeout で遅れて実行されるため、実行までの間に一時停止された場合に備えて paused フラグをチェックしています。問題なければ、フェードイン、フェードアウトを行います。

では、一時停止メソッドを見てみましょう。

単に paused フラグを設定しています。では再開の場合どうなるのでしょう。

コメントで十分わかると思います。pause が呼ばれた後、すでに fade が呼ばれていたら、interrupted が設定されているので、これが設定されていたら、実行されずに終わったフェードがあるので、それをすぐに実行します。そうでなければ、paused フラグを設定しているだけです。

7　まとめ

このサンプルでは、情報ボタンを使い、裏面の環境設定を使っていますが、設定値は保存されるわけではありません。オブジェクトが維持している変数の値を使って表示し、修正値をオブジェクトに設定しているだけです。ファイルに書き出して、システム起動ごとに同じ設定を使えるようにするには、設定値をウィジェットのメソッドを使い格納する必要があります。これについては、『Dashboard プログラミングトピック』>「ウィジェットの裏面と環境設定」、もしくは、Framing Gallery サンプルを見てください。

8　AppleButton.js

サンプルは理解できましたが、さらに Apple クラスである AppleButton.js を調べてみます。このファイルでは、一般的なボタン動作を実装する Apple ボタンと、そのサブクラスである裏面で使われている Apple ガラスボタンが実装されています。まず、Apple ボタンから見ていきます。

コンスラクタには、非常に多くの引数があります。このうち多くは _init メソッドに渡されています。ほとんどが画像のパスとサイズなので、理解するのは簡単です。button は、ボタンと関連付けられる DOM 要素で、通常は div 要素です。text は、ボタンに表示されるラベルです。height はボタンで使われる画像すべての高さです。imgLeft はボタン左側で使われる画像を示すパスです。imgLeftClicked は、クリックされた時にボタン左側で使われる画像を示すパスです。imgLeftWidth は、左側で使われる画像に共通の幅です。imgMiddle は、ボタン中間部分で使われる画像のパスです。imgMiddleClicked は、クリックされた時の中間部分で使われる画像のパスです。幅の指定はありませんが、ボタンの中間部分はテキスト表示幅にもとづいて繰り返されることになります。そのため、画像を作成するときは、横に並べても大丈夫なようにすべきです。imgRight はボタン右側で使われる画像を示すパスです。imgRightClicked は、クリックされた時にボタン右側で使われる画像を示すパスです。imgRightWidth は、右側で使われる画像に共通の幅です。最後の onclick は、ボタンがクリックされた時に呼ばれる関数です。

画像については、システム>ライブラリ>WidgetResources>button 内のガラスボタンの画像を参考にしてください。クリックされた時の画像がより濃い灰色になっています。

構造は簡単です。まずボタン要素が渡されなければすぐに戻ります。次にテキスト要素を null に初期化し、クリックハンドラを渡されたものに設定し、ボタンが有効であるようにします。それから _init で初期化を行い、最初にテキスト要素の内部 HTML に渡されたラベルを設定しています。

コンストラクタから呼ばれていた _init メソッドは以下のようになります。

長いですが、構造は簡単です。最初に渡された画像パスを保存しておきます。次にボタン要素の子となり、以後作られる div 要素の親となる div 要素を作ります。マウスダウンハンドラもこの要素に対して追加されます。

それからしばらくは、プライベート変数作成と、それを使うイベントハンドラ設定です。

その後、先ほど作った div 要素の子として、ボタン各部を作成していきます。右・真ん中・左という順番です。真ん中はラベル表示も兼ねていることに気をつけてください。また、テキスト要素として真ん中の要素を保存しています。右側画像の幅として左側の値が使われているのに注意してください。これはバグで、Mac OS X v10.4.11 のシステム内のファイルでは修正されています。

最後は、マウスダウン時のハンドラを設定しています。これらのハンドラは後でひとつずつ見ています。これでボタン作成はわかったと思います。あとは、こうして作られたボタンがどう動作するかですが、その前にパブリックなメソッドを見ていきます。

つぎは、ボタンを除去するメソッド remove です。

単にボタン要素から部品をまとめている div 要素を除去しているだけです。

つぎは無効時のボタン表示に使われる画像を設定するメソッドです。

単に画像パスを保存しているだけです。

つぎはボタンの有効・無効を設定するメソッドです。

まず有効・無効状態を変数に保存します。それから有効なら、画像を有効状態のものにして、コントロール領域としてヒタイル設定します。無効で、しかも無効画像が設定されていたら、それを設定します。コントロール領域には設定せず、通常の動作を行います。画像が存在しなかった場合は、コントロール領域のままなので、イベント時に設定した独自ハンドラが呼ばれることになります。そのため、ハンドラで有効・無効の状態をチェックしています。画像設定によって、このような動作の違いが起こるので気をつけたほうがいいでしょう。

さて、このクラスの残りはプライベートなハンドラメソッドです。マウス移動ハンドラは _init 内で、単にイベントを伝播しないものとしてその場で実装されていたことに注意してください。残りのものは関数として他の場所に実装されています。

マウスダウンハンドラは、_init の最後でイベントハンドラとして設定されていました。この時、3 番目の引数が true だったので、このハンドラはイベントが起こった時すぐに呼ばれることになることに注意してください。

まず無効かどうかをチェックして、無効なら何も行わず戻ります。

つぎに画像をクリック状態へと変更します。これには別の関数を使っています。

true が渡された場合、クリックされた画像に、false なら通常画像に設定します。

それから一時的なイベントハンドラを設定しています。その後 _inside を true にし、それ以上のイベントの伝播を防いでいます。

ここで設定されたイベントハンドラを見てみます。移動については、_init 内で実装されていました。ボタンを離した場合は、最終動作となるので最後に説明します。まず上にある場合のハンドラを見てみます。

マウスダウンからコードを除去した形になっています。つぎはマウス退出です。

_inside を false にしています。これによって、ボタンをクリックした後で、ボタンの外にマウスを動かしてから離せば、クリックをキャンセルできるようになっています。それを示すために、画像も通常の状態に戻します。最後はマウスが離された時のハンドラです。

上で書いたように、ボタン内にある場合だけコントスラクタで変数に保存されていたコールバックを呼び出しています。あとは、ダウンメソッドの逆なのでわかると思います。

これで AppleButton クラスのメソッドは全て解説しました。わかってみると簡単な実装だと思うでしょう。このクラスのサブクラスとして実装されている AppleGlassButton を見てみましょう。まずコンストラクタと継承関係です。

プロトタイプを継承しているため、そこに設定されたメソッドが使えます。コンストラクタの引数は、画像がシステムのものを使うため簡単になっています。ボタン要素、表示されるラベル、クリックされた時に呼ばれる関数です。

後の設定は AppleButton クラスを思い出せばほとんど説明は必要ないと思います。

このクラスでは、1 つのメソットだけをオーバーライドしています。

通常の AppleButton と違って、無効画像の設定を反映せず、無効状態を文字色を灰色にすることで示しています。無効の場合、画像設定の有無に関わらず、コントロール領域ではなくなっていることに注意してください。

これで AppleButton.js は終わりです。ファイルを見れば、けっこう長く複雑に見えますが、ひとつひとつ見てみると本当に単純に実装されていることがわかります。

9　AppleInfoButton.js

AppleInfoButton は、画像を設定したり、ユーザーが自由にスタイル変更するのではなく、システム画像を使って、一定の見た目と動作を提供することが目的です。そのため、多くのメソッドがコンストラクタ内の特権メソッドとして実装されています。コンストラクタのソースが長くなるため、特権メソッド部分を抽出して各個に説明することにします。

特権メソッド定義部分をはぶくとすっきりして判りやすくなったと思います。まずクリック時のハンドラを保存します。それから内部変数に親要素とボタン要素を代入します。つぎに「i」のラベル部分の img 要素を作成し、その周囲に描かれる円の div 要素を作成し、それぞれをボタン要素の子にします。AppleButton と違って直接の子にされていることに注意してください。そして最初はラベル（すなわちボタン）を表示しないように設定しています。

その後、自身をプラベート変数に格納し、それを扱える特権メソッドを定義しています。この部分のメソッドは後で説明します。

その後で、各部分のスタイルを設定しています。ラベル部分、周囲の円の順で設定します。ここで setCircleOpacity と setStyle はこのファイルで実装されているメソッドです。

単に円の部分のスタイルの不透明度を渡されたものに設定しているだけです。これは外部からアクセスできるようメソッドにされています。コンストラクタではデフォルトで 0.25 という薄い不透明度を使っています。

単に前景色と背景色にしたがってシステム内の画像パスを設定しているだけです。実際にシステムを見てみると、これは「black」もしくは「white」のいずれかを使用するようになっています。これ以外の色を使いたいなら、独自の画像を用意して、この部分のパスを置き換え、システムの Apple クラスを使わないように設定すればいいでしょう。

最後にハンドラを設定しています。前面要素に対して、マウス移動とマウス退出イベントハンドラを設定していることに注意してください。これにより、マウスがウィジェット外にある場合に情報ボタンを表示しないようにしたりしています。

ボタン要素に対しては、マウスクリック、マウスが上に来たとき、マウス退出のイベントハンドラが設定されています。

コンストラクタが理解できたと思うので、まず親要素のイベントハンドラから見てみます。

マウスが進入したとき、アニメーション表示で情報ボタンを表示します。そのための設定が行われます。

まず、_outdelay が存在すれば、タイマーを削除します。つぎに from と duration 値を初期化し、現在アニメーション中なら、from と duration を調整しなおします。それからラベル表示状態であるようにします。最後にアニメーターとアニメーションを作成し、情報ボタン表示アニメーションを開始します。ここでアニメーションのハンドラとして呼ばれているのが _updateOpacity てす。

単純に情報ボタンのラベルの不透明度をアニメーションの現在値にしています。また、アニメーション完了時のハンドラとして、_animationComplete が設定されていました。

単にアニメーターとアニメーションを削除しているだけです。

さて、つぎはマウス退出イベントです。

単に遅れなしで _frontOut を実行するタイマーを _outdelay に設定しています。ただ、タイマーのような繰り返し作業を使うのもどうかと思いますが、これは Mac OS X v10.4.11 で修正されています。_frontOut は以下のようなものです。

移動の場合とほとんど同じなので、説明しなくてもわかると思います。

では、ラベルのハンドラに移ります。まずマウス進入イベントです。

ラベルのまわりの円の部分を見えるようにしています。逆の退出イベントを見てみます。

まわりの円の部分を隠しています。では、クリックされた時のハンドラを見てみます。

最初に円の部分を見えなくします。次にハンドラが設定されていたらそれを実行し、最後にイベントの伝播を防いでいます。例外処理が使われているのは、ここで呼ばれるハンドラがユーザーが定義するもので、Apple クラス内で処理がうまくいくことを保証できないからでしょう。これでイベントハンドラは終わりです。マウスにともなうボタンの表示の変化などが理解できたと思います。

あとは外部からボタンを除去するときに呼ばれる remove が残っているだけです。

まずコンストラクタで追加したイベントハンドラを除去しています。それから親要素を取得し、そこから円の部分とラベルの部分を除去しています。

これで情報ボタンの実装についてわかったと思います。細かい所を見れば、もう少し他の実装もできそうな気がしますが、それについては触れないことにします。

10　その後の修正

10.1　Mac OS X v10.4.11

Mac OS X v10.4.11 において、Apple クラスが修正されています。そのため、ここでの解説で使っているものと少し違っています。変更点を調べてみます。これはもっと前のバージョンで修正されているのだと思いますが、正確にどのバージョンからかは不明です。

まず、AppleButton.js ですが、これはバグ修正です。説明のときにも触れました。

ちゃんと右側の画像幅で作られるように修正されています。

AppleInfoButton.js は、いくつかの場所が修正されています。まず _outdelay 関連です。

_outdelay が未定義の場合だけ、setTimeout で一度だけ関数を呼び出しています。これにともなって、他のハンドラも修正されています。

frontOut も全く同様に修正されています。

さらに、イベントハンドラが追加されています。

クリックハンドラがコメントアウトされ、マウスダウンハンドラに切り替えられ、クリックハンドラがイベントを伝播しないものにされています。その結果、_tempLabelDown というメソッドが追加されています。これに対応して、remove のイベントハンドラ除去部分も修正されていますが、すぐわかると思うのでここには示しません。

マウスボタンが離された場合のハンドラを追加し、イベントの伝播を防いでいるだけです。ここで追加されたハンドラは以下のようになっています。

一時的なイベントハンドラである自身を除去します。次に _tempMouseOver が未定義でなければ、それを削除し、ラベルがクリックされた場合のイベントハンドラを呼び出します。

ここで _tempMouseOver がありましたが、これも追加されています。

マウスが上にきた時のハンドラで値を設定しています。退出の時は除去します。

10.2　Mac OS X v10.5.1

Mac OS X v10.5.1 でも、さらに修正されています。

AppleButton.js では、垂直揃えがスタイルとして設定されています。3か所修正されていますが1つだけ示します。

AppleInfoButton.js は、v10.4.11 と同じです。

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