Dashboard Programming Topics: Appleボタンの使用

Appleは、ウィジェットインターフェイスにカスタムスタイルのボタンを簡単に追加できるJavaScriptクラスを提供しています。AppleButtonというクラスであり、Mac OS X v10.4.3以降に含まれているApple Classの1つです。

AppleButtonも含めて、すべてのApple Classの使用についての詳細は、“Apple Classの紹介”を参照してください。

In this section:

Appleボタンに関する作業

AppleButtonクラスは、たとえばクリックされるとボタンが押されたように見えたり、ボタンのラベルの幅に応じてサイズ調整されたりするなど、ボタンに期待される標準的な動作のすべてを提供しています。AppleButtonを使用するには、次のことを行う必要があります。

ボタンを作成したら、JavaScriptでボタンのパラメータを変更することもできます。

デベロッパの方がAppleButtonクラスを使うのは、ほとんどの場合、AppleGlassButtonサブクラスを使いたいからです。AppleGlassButtonは、ウィジェットの裏面でよく使われる標準スタイルのボタンであり、“Apple Glass Buttonサブクラス”で解説しています。

HTMLにおけるAppleボタン

AppleButtonを宣言してJavaScriptでこれを使うためには、自分のウィジェットのHTMLファイルにこのクラスを含め、ウィジェットの構造内でボタンを表す<div>を指定し、ウィジェットのHTMLがロードされるときに呼び出されるonloadハンドラを用意します。このハンドラは、JavaScript内でAppleButtonを作成するために使われます。

まず、AppleButtonクラスを自分のメインのHTMLファイルに含める必要があります。Mac OS X v.10.4.3以前のバージョンとの下位互換性を計画している場合は、“下位互換性のある使いかた”の指示に従い、次のパスを含めます。

ウィジェットの動作条件をMac OS X v.10.4.3以上にすることを計画している場合は、次のように、/System/Library/WidgetResources/の中の該当する場所にあるAppleButtonクラスを含めます。

AppleButtonクラスを含めたあとは、ボタンを表す<div>要素を宣言する必要もあります。

通常は、HTMLファイルの<body>部分の中のどこかで<div>要素を使います。この要素に必須の属性はidのみであり、ボタンを配置するためにCSSによって使われ、ボタンを作成するためにJavaScriptによって使われます。id属性を持つ要素にJavaScriptを使ってアクセスできるため、class属性よりもid属性のほうが必須です。

<body>タグ内のonloadハンドラの宣言にも注目してください。このハンドラは、ウィジェットのHTMLがロードされると呼び出され、前述のとおりJavaScriptでAppleButtonオブジェクトを作成するために使われます。

CSSにおけるAppleボタン

HTMLファイルにおいてボタンを正しく宣言できたので、次にこれらをCSSで配置する必要があります。これには、対象要素の名前を持つスタイルと、使用するのが妥当と考えられるそのほかの配置パラメータを使う必要があります。

JavaScriptにおけるAppleボタン

HTMLファイルでは、<body>タグの属性としてonloadヘッダをインクルードしました。そのハンドラは、DashboardがウィジェットのHTMLファイルをロードすると呼び出され、AppleButtonクラスのコンストラクタを呼び出すために使われます。AppleButtonのコンストラクタは次のように定義されます。

AppleButton(

    buttonElement,

    label,

    height,

    leftImage,

    leftImageDown,

    leftImageWidth,

    middleImage,

    middleImageDown,

    rightImage,

    rightImageDown,

    rightImageWidth,

    onclick

);

**Table 6** `AppleButton` コンストラクタのパラメータ
パラメータ	期待される値	例
`buttonElement`	DOMオブジェクト、すなわち、HTMLでボタンを含めるために宣言されている`<div>`。	`document.getElementById("myButton")`
`label`	文字列。ボタンに表示するラベル。	`"Click Me"`
`height`	数値。ボタンに使われる画像のすべての高さ。	`23`
`leftImage`	文字列。ボタンの左半分に使われる画像のパス。	`"button/buttonLeft.png"`
`leftImageDown`	文字列。クリックされている状態のボタンの左半分に使われる画像のパス。	`"button/buttonLeftDown.png"`
`leftImageWidth`	数値。ボタンの左半分の画像の幅。	`11`
`middleImage`	文字列。ボタンの中央部分に使われる画像のパス。	`"button/buttonMiddle.png"`
`middleImageDown`	文字列。クリックされている状態のボタンの中央部分に使われる画像のパス。	`"button/buttonMiddleDown.png"`
`rightImage`	文字列。ボタンの右半分に使われる画像のパス。	`"button/buttonRight.png"`
`rightImageDown`	文字列。クリックされている状態のボタンの右半分に使われる画像のパス。	`"button/buttonRightDown.png"`
`rightImageWidth`	数値。ボタンの左半分の画像の幅。	`11`
`onclick`	関数名。ボタンがクリックされたときに呼び出される関数。	`buttonClicked`

AppleButtonコンストラクタはHTMLで指定したonloadハンドラで使います。ハンドラはJavaScript内に置き、次のように書くことができます。

var gMyButton;

function setup()

    gMyButton = new AppleButton(

        document.getElementById("myButton"),

        "Click Me",

23,

        "button/buttonLeft.png",

        "button/buttonLeftDown.png",

11,

        "button/buttonMiddle.png",

        "button/buttonMiddleDown.png",

        "button/buttonRight.png",

        "button/buttonRightDown.png",

11,

        buttonClicked);

グローバル変数gMyButtonに注目してください。この変数はAppleButtonオブジェクトへの参照を保持しており、ボタンが作成されたあとはこれを使っていつでもボタンとやり取りすることができます。次のプロパティとメソッドを、やり取りに利用できます。

**Table 7** `AppleButton` オブジェクトのプロパティとメソッド
選択肢	型	説明
`gMyButton.onclick`	プロパティ	読み取り／書き込み。ボタンがクリックされると呼び出されるハンドラ。
`gMyButton.setDisabledImages(` `leftImageDisabled,` `middleImageDisabled,` `rightImageDisabled)`	メソッド	`setEnabled(FALSE)`を使ってボタンが無効にされたあと、このボタンを表す画像を設定します。
`gMyButton.enabled`	プロパティ	読み取り専用。ボタンがアクティブかどうかを示すブール値を返します。
`gMyButton.setEnabled(boolean)`	メソッド	ボタンがアクティブかどうかを設定します。`TRUE`または`FALSE`を受け取ります。
`gMyButton.remove()`	メソッド	ボタンを削除します。
`gMyButton.textElement`	プロパティ	読み取り／書き込み。ラベルテキスト要素。これを使ってラベルテキストをスタイル設定できます。

Apple Glass Buttonサブクラス

Appleは、AppleButtonのサブクラスでAppleGlassButtonというクラスを提供しており、これを使って、ウィジェットの裏面でよく使われる標準的なガラス風のボタンを簡単に使うことができます。

AppleGlassButtonを作成するには、前述の“HTMLにおけるAppleボタン”および“CSSにおけるAppleボタン”で述べた手順に従ってください。ただしJavaScriptでAppleGlassButtonを使うときには、次のようにAppleGlassButtonコンストラクタを使います。

このコンストラクタはAppleが提供しているアートを使ってウィジェット用に標準的なガラス風のボタンを描画します。パラメータは次のように定義されます。

**Table 8** `AppleGlassButton` コンストラクタのパラメータ
パラメータ	期待される値	例
`buttonElement`	DOMオブジェクト、すなわち、HTMLでボタンを含めるために宣言されている`<div>`。	`document.getElementById("myButton")`
`label`	文字列。ボタンに表示するラベル。	`"Click Me"`
`onclick`	関数名。ボタンがクリックされたときに呼び出される関数。	`buttonClicked`

Apple Buttonコンストラクタと同様に、Apple Glass ButtonコンストラクタはJavaScriptのonloadハンドラで使われ、次のように書かれます。

グローバル変数gMyGlassButtonに注目してください。この変数はAppleGlassButtonオブジェクトへの参照を保持しており、ボタンが作成されたあとはこれを使っていつでもボタンとやり取りすることができます。次のプロパティとメソッドを、やり取りに利用できます。

**Table 9** `AppleGlassButton` オブジェクトのプロパティとメソッド
選択肢	型	説明
`gMyGlassButton.onclick`	プロパティ	読み取り／書き込み。ボタンがクリックされると呼び出されるハンドラ。
`gMyGlassButton.enabled`	プロパティ	読み取り専用。ボタンがアクティブかどうかを示すブール値を返します。
`gMyGlassButton.setEnabled(boolean)`	メソッド	ボタンがアクティブかどうかを設定します。`TRUE`または`FALSE`を受け取ります。
`gMyGlassButton.remove()`	メソッド	ボタンを削除します。




	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