|
Log In | Not a Member? |
Contact ADC
|
ウィジェットには、環境設定の表示、記録、取得を行う機能があります。これによりユーザは、ウィジェットが提供するオプションに基づいてそのウィジェットをカスタマイズできます。環境設定はウィジェットの裏面に表示するべきです。“裏面の表示”のセクションで、各面に対してウィジェットを用意する方法と、該当するボタンとアニメーションを提供する方法を説明します。“環境設定の指定”では、環境設定の保存と取得について説明します。
注: 本章のコードのほとんどは、Xcode Toolsをインストールしたあと、ハードディスクの/Developer/Examples/Dashboard/にある“Goodbye World”で確認することができます。
Dashboardでは、再起動やログインをまたいで維持される環境設定を使用することができます。次の2つのメソッドを使用します。
widget.setPreferenceForKey(preference, key)
widget.preferenceForKey(key)
最初のメソッドでは、指定する任意のキーに対して環境設定値を設定できます。
if(window.widget) |
{ |
widget.setPreferenceForKey("Goodbye, World!","worldString"); |
} |
nullを渡すと現在の値がクリアされます。ウィジェットの環境設定が、ウィジェットを閉じたあとも維持されないようにするにはこれを行います。
2番目のメソッドは、指定されたキーの環境設定を取得し、キーに対してエントリがない場合はundefinedを戻します。
if(window.widget) |
{ |
var worldString = widget.preferenceForKey("worldString"); |
if (worldString && worldString.length > 0) |
{ |
worldText.innerText = worldString; |
} |
} |
ここでは環境設定を取得して、ウィジェットに設定しています。このコードを、ウィジェットが開くときに呼び出される関数の中に含めます。
注: ウィジェットが閉じたあとに、その環境設定値をウィジェットに記憶させたくない場合でも、ウィジェットを開いている間にユーザがログアウトしたり再起動したりする場合もあることを考慮に入れる必要があります。ユーザがログインし直し、Dashboardが自動的にウィジェットを開いたときに、ユーザはウィジェットが元のままであることを期待していることが考えられます。このようなケースのために、環境設定を使用して状態を保存し、ウィジェットが意識的に閉じられたときにはこれをクリアするようにします。
この仕組みを通じて保存され取得された文字列は、クリアテキストとして保存されるためセキュアではなく、パスワードやほかの機密情報の保存にはお勧めできません。
環境設定値を設定したり、ウィジェットに関する情報を表示したりするためのインターフェイスを提供することが賢明な場合があります。ウィジェットの裏面を使う場合には、裏面を考慮してウィジェットをデザインし、情報ボタンのグラフィックを組み込み、環境設定に移る手段を用意し、ウィジェットのメインインターフェイスに戻るようにする必要があります。
まず、作成するウィジェットのHTML本体に、2つの<div>レイヤを用意します。1つは表面用で、もう1つは裏面用です（裏面はCSSを通じて隠します）。ウィジェットの表面に配置するAppleInfoButtonの<div>と、ウィジェットの裏面に配置する「Done」ボタンの<div>を含める必要もあります。次に示すサンプルコードは、これらの要素をすべて含めた骨組みを提供しています。
<body onload='setup();'> |
<div id="front"> |
<!-- ウィジェットの表面がここに入る --> |
<div id='infoButton'></div> |
</div> |
<div id="back"> |
<!-- ウィジェットの裏面がここに入る --> |
<div id="doneButton"></div> |
</div> |
</body> |
onloadハンドラのsetup()に注目してください。“JavaScriptファイル”のセクションでは、setup()を使って、ウィジェットを裏面に反転させるときに使うAppleInfoButtonを提供するオブジェクトと、ユーザが環境設定を終えるときに使うAppleGlassButtonを提供するオブジェクトを作成します。setup()関数を正しく動作させる（つまり情報ボタンとガラスボタンを正しく作成する）には、これらのクラスを自分のウィジェットのHTMLに含める必要があります。
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleInfoButton.js' charset='utf-8'/> |
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleAnimator.js' charset='utf-8'/> |
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleButton.js' charset='utf-8'/> |
必須のApple ClassはMac OS X 10.4.3以上にあります。Mac OS X 10.4の以前のバージョンのウィジェットをターゲットとする場合は、“Apple Classの紹介”を読み、下位互換性を考慮に入れてこれらのクラスを含める方法を学習してください。
ウィジェットのJavaScript部分には、ウィジェットの表裏を反転させるコードと、情報ボタンおよび「Done」ガラスボタンを作成するコードを含める必要があります。
ウィジェットのonloadハンドラとしてHTMLファイルで宣言されるsetup()関数は、ウィジェットのHTML、CSS、およびJavaScriptファイルがロードされると呼び出されます。この関数内で、情報ボタンと「Done」ボタンのコンストラクタが呼び出されます。
var gDoneButton; |
var gInfoButton; |
function setup() |
{ |
gDoneButton = new AppleGlassButton(document.getElementById("doneButton"), "Done", hidePrefs); |
gInfoButton = new AppleInfoButton(document.getElementById("infoButton"), document.getElementById("front"), "white", "white", showPrefs); |
} |
setup()関数のほかに、2つのグローバル変数が宣言されていることに注目してください。これらの変数は、作成する2つのボタンに対応します。通常は、これらのボタンをグローバルオブジェクトとして保持しておくことができ、そうすることで、あとでボタンとやり取りができるようになります。
次に、setup()関数はAppleInfoButtonとAppleGlassButtonのコンストラクタを呼び出します。HTMLファイルにこれらのボタンをインスタンス化するために必要なクラスを含めたことを思い出してください。これらのクラスがロードされるとsetup()が呼び出され、newの呼び出しにより各クラスの新しいインスタンスが作成されます。newの呼び出しのあとに続くAppleGlassButton()関数とAppleInfoButton()関数は、ボタンが配置される場所となるDOM要素や、そのボタンのクリックに対するイベントハンドラなどのパラメータを受け取るコンストラクタです。どちらのコンストラクタにおいても、最後のパラメータはウィジェットを反転させるハンドラです。次の“裏表の反転”のセクションでこのハンドラを定義します。コンストラクタは、ボタンを表現するオブジェクトの参照を返します。結果のオブジェクトは、以前に指定したグローバル変数に代入されます。ボタンが作成されたので、以前に宣言したグローバル変数を使って、いつでもボタンとやり取りできます。たとえば、次のような呼び出しにより、AppleInfoButtonの色をいつでも変更することができます。
gInfoButton.setStyle("black","black"); |
AppleGlassButtonで利用できるメソッドの詳細については、“Apple Glass Buttonサブクラス”を参照してください。
次の関数は、ウィジェットを裏面に切り替えます。これは、前述の“Apple情報ボタンとガラスボタンの作成”のセクションで、ボタンのコンストラクタの中でApple Info Buttonのイベントハンドラとして指定されています。
function showPrefs() |
{ |
var front = document.getElementById("front"); |
var back = document.getElementById("back"); |
if (window.widget) |
widget.prepareForTransition("ToBack"); |
front.style.display="none"; |
back.style.display="block"; |
if (window.widget) |
setTimeout ('widget.performTransition();', 0); |
} |
情報ボタンをクリックすると（HTML内に<div id='infoButton'>として定義され、JavaScript内で作成されています）、この関数が呼び出され、裏面が表示されます。この関数において表と裏のレイヤが取得され、ローカル変数に代入されます。次に、widget.prepareForTransition("ToBack")は現在のインターフェイスを凍結します。つまり、以降、ウィジェットのユーザインターフェイスのいかなる変化も表示されません。その後、表面が隠され、裏面がアクティブになります。最後に、凍結されたユーザインターフェイスを表面とし、現在アクティブなユーザインターフェイスを裏面とする、ウィジェットを裏返す移行処理が実行されます。
（参考までに、setTimeout()を使用してperformTransition()を呼び出していることに気が付いたでしょうか。タイムアウトを0に設定することで、次のイベントループで移行が実行されるため、移行の実行前に表裏を反転できるようになっています。これは、反転時に両面を確実に正しく表示するための最適化処理です。）
環境設定を隠してメインのユーザインターフェイスに戻るには、同様の手順に従います。この関数は前述の“Apple情報ボタンとガラスボタンの作成”のセクションで、ボタンのコンストラクタの中で「Done」ボタンに割り当てられたものです。
function hidePrefs() |
{ |
var front = document.getElementById("front"); |
var back = document.getElementById("back"); |
if (window.widget) |
widget.prepareForTransition("ToFront"); |
back.style.display="none"; |
front.style.display="block"; |
if (window.widget) |
setTimeout ('widget.performTransition();', 0); |
} |
ただし今度は、裏面のレイヤを隠し、表面のレイヤを表示します。メソッドwidget.prepareForTransition("ToFront")は、現在のユーザインターフェイスを凍結して、環境設定の表示とは逆方向に反転が発生するようにします。
ウィジェットの表面と裏面の部品、および情報ボタンの部品を定義したので、次にCSSを使用してこれらの配置、表示／非表示の設定、その他のパラメータの設定を行う必要があります。
#infoButton { |
position:absolute; |
bottom:12px; |
right:40px; |
} |
#front { |
display:block; |
} |
#back { |
display:none; |
} |
#doneButton { |
position:absolute; |
bottom:20px; |
left:82px; |
} |
最初のスタイルは、情報ボタンに関するものです。このスタイルではボタンをウィジェットの右下角に配置しています。
また、frontとbackのスタイルにも注目してください。これらはウィジェットの各面の可視性を設定しています。ウィジェットが最初に開いたときには、表面が可視になるため、裏面は隠す必要があります。こららのスタイルで表面<div>が可視になるように設定し、裏面<div>を隠しています。可視の<div>は次のセクションでJavaScriptコードを使って変更されます。
最後に、「Done」ボタンを配置するスタイルが記述されています。
Last updated: 2006-08-07
 |
||
|
|
|
|
| ||
Get information on Apple products.
Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. | Terms of use | Privacy Notice |