Dashboard Programming Topics: スクロール領域の使用

Appleは、スクロール領域とそのスクロールバーを宣言できるJavaScriptクラスを提供しています。AppleScrollAreaおよびAppleScrollbarというクラスで、Mac OS X v10.4.3以降に含まれているApple Classのクラスです。

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

In this section:

スクロール領域に関する作業

スクロール領域を使用するには、次のことを行う必要があります。

デフォルトでは、AppleScrollbarはAppleが提供しているアートワークを使ってスクロールバーのさまざまなパーツを表現します。独自のアートワークを指定することもできます。

利用可能なスクロールバーには、垂直方向と水平方向の2つのタイプがあります。ウィジェットのデザインとコーディングを行う場合は、どちらのタイプのスクロールバーを使うかを検討する必要があります。どちらもAppleScrollbarクラスのサブクラスであり、目的のタイプのスクロールバーを作成するためにJavaScriptで使われます。

HTMLにおけるスクロール領域とスクロールバー

スクロール領域を宣言し、JavaScriptで使用するためには、AppleScrollAreaクラスとAppleScrollbarクラスをウィジェットのHTMLファイルに含め、ウィジェットの構造内でスクロール可能なコンテンツとスクロールバーを表す<div>要素を指定し、ウィジェットのHTMLがロードされると呼び出されるonloadハンドラを用意します。このハンドラは、スクロール領域とスクロールバーを作成するためにJavaScriptで使われます。

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

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

AppleScrollAreaクラスとAppleScrollbarクラスを含めたら、スクロール可能なコンテンツとスクロールバーを表す<div>要素を宣言する必要もあります。

どちらの<div>要素にも必須の属性はidのみであり、スクロール領域とスクロールバーを配置するためにCSSによって使われ、これらを作成するためにJavaScriptによって使われます。id属性を持つ要素にJavaScriptを使ってアクセスできるため、class属性よりもid属性のほうが必須です。

<body>タグ内のonloadハンドラの宣言にも注目してください。このハンドラは、ウィジェットのHTMLがロードされると呼び出され、“HTMLにおけるスクロール領域とスクロールバー”で説明するように、JavaScript内でAppleScrollAreaオブジェクトとAppleScrollbarオブジェクトを構成するために使用されます。

CSSにおけるスクロール領域とスクロールバー

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

スクロールバーのwidth属性に注目してください。Appleがスクロールバー用に提供しているデフォルトのアートワークは幅が19ピクセルであるため、ここでは19pxの値が使われています。スクロールバー用にカスタムアートワークを用意している場合は、そのアートワークの幅を使います。

スクロール領域で水平スクロールバーを使う場合は、width属性の代わりにheight属性を使います。Appleが提供しているアートワークを使う場合は、スクロールバーの高さを19ピクセルとして指定します。

JavaScriptにおけるスクロール領域とスクロールバー

HTMLファイルでは、<body>タグの属性としてonloadヘッダを含めました。そのハンドラは、DashboardがウィジェットのHTMLファイルをロードすると呼び出され、AppleScrollAreaクラスとAppleScrollbarサブクラスのコンストラクタを呼び出すために使われます。まず、スクロールバーを作成します。

使用するスクロールバーのタイプに応じて、AppleHorizontalScrollbarまたはAppleVerticalScrollbarのコンストラクタを呼び出します。コンストラクタは次のように定義されます。

**Table 1** `AppleScrollbar` サブクラス
水平スクロールバーのコンストラクタ	素直スクロールバーのコンストラクタ
`AppleHorizontalScrollbar(scrollbar)`	`AppleVerticalScrollbar(scrollbar)`

どちらのコンストラクタも、スクロールバーを作成すべき場所を表すDOMオブジェクトを受け取ります。DOMオブジェクトは、HTMLで定義し、CSSで配置した<div>です。

AppleScrollAreaコンストラクタもDOMオブジェクトを受け取ります。これは、HTMLでスクロール可能なコンテンツとして指定された<div>です。

JavaScriptでは、onloadハンドラはAppleScrollAreaコンストラクタとAppleScrollbarのサブクラスのコンストラクタを使う必要があります。垂直スクロールバーの場合、onloadハンドラコードは次のようになります。

setup()関数の最後の行でaddScrollbarメソッドが呼び出されます。これにより、作成したスクロールバーとスクロール領域が関連付けられます。つまり、このスクロールバーでの対話はすべて、対応するスクロール領域に対して作用します。

addScrollbarを通じてスクロール領域とスクロールバーを関連付けたり、これらをAppleScrollAreaコンストラクタへの引数として追加したりできます。

AppleScrollAreaコンストラクタは、任意の数のスクロールバーを受け付けることができます。

次のメソッドとプロパティもAppleScrollAreaオブジェクトで利用でき、それにより、オブジェクトの動作を変更することができます。

**Table 2** `AppleScrollArea` オブジェクトのプロパティとメソッド
選択肢	型	説明
`gMyScrollArea.scrollsVertically`	プロパティ	読み取り／書き込み。スクロール領域が垂直方向にスクロールするかどうかを決定します。
`gMyScrollArea.scrollsHorizontally`	プロパティ	読み取り／書き込み。スクロール領域が水平方向にスクロールするかどうかを決定します。
`gMyScrollArea.singlepressScrollPixels`	プロパティ	読み取り／書き込み。矢印キーが押されたときのスクロール領域のピクセル数。
`gMyScrollArea.viewHeight`	プロパティ	読み取り専用。スクロール領域の高さ。
`gMyScrollArea.viewToContentHeightRatio`	パラメータ	読み取り専用。表示されているコンテンツ全体の高さに対する、表示領域の高さの比率。
`gMyScrollArea.viewWidth`	プロパティ	読み取り専用。スクロール領域の幅。
`gMyScrollArea.viewToContentWidthRatio`	プロパティ	読み取り専用。表示されているコンテンツ全体の幅に対する、表示領域の幅の比率。
`gMyScrollArea.addScrollbar(scrollbar)`	メソッド	スクロールバーとスクロール領域を関連付けます。
`gMyScrollArea.removeScrollbar(scrollbar)`	メソッド	スクロールバーとスクロール領域の関連付けを解除します。
`gMyScrollArea.remove()`	メソッド	ウィジェットからスクロール領域を削除します。
`gMyScrollArea.refresh()`	メソッド	スクロール領域のスクロールバーを再描画します。コンテンツに変化が生じるたびに呼び出されます。
`gMyScrollArea.reveal(element)`	メソッド	DOM要素を受け取ります。表示領域をスクロールしてその要素を表示します。
`gMyScrollArea.focus()`	メソッド	スクロール領域にキーフォーカスを置きます。スクロール領域は、ウィジェットにフォーカスがある間はキーイベントに応答します。
`gMyScrollArea.blur()`	メソッド	スクロール領域からキーフォーカスを取り除きます。スクロール領域はキーイベントに応答しなくなります。
`gMyScrollArea.verticalScrollTo(position)`	メソッド	整数を受け取ります。スクロール領域内でコンテンツを`position`まで移動します。
`gMyScrollArea.horizontalScrollTo(position)`	メソッド	整数を受け取ります。スクロール領域内でコンテンツを`position`まで移動します。

さらに、AppleScrollbarをサブクラス化しているオブジェクトはすべて、次のメソッドとプロパティを利用できます。

**Table 3** `AppleScrollbar` オブジェクトのプロパティとメソッド
選択肢	型	説明
`gMyScrollbar.minThumbSize`	プロパティ	読み取り／書き込み。可能なスクロールサムの最小サイズ。
`gMyScrollbar.padding`	プロパティ	読み取り／書き込み。スクロールバー上のパディング。
`gMyScrollbar.autohide`	プロパティ	読み取り専用。スクロールバーを常に表示するか、またはスクロール可能なコンテンツがある場合にのみ表示するかを示します。
`gMyScrollbar.hidden`	プロパティ	読み取り専用。スクロールバーを隠す場合は`TRUE`、スクロールバーを表示する場合は`FALSE`。
`gMyScrollbar.size`	プロパティ	読み取り専用。垂直スクロールバーの高さまたは水平スクロールバーの幅（ピクセル単位）。
`gMyScrollbar.trackStartPath`	プロパティ	読み取り専用。水平スクロールバーのトラックの左端、または垂直スクロールバーのトラックの上端に使われている現在の画像のパス。
`gMyScrollbar.trackStartLength`	プロパティ	読み取り専用。水平スクロールバーに使われている場合は、`trackStartPath`に指定されている画像の幅。垂直スクロールバーに使われている場合は、`trackStartPath`に指定されている画像の高さ。
`gMyScrollbar.trackMiddlePath`	プロパティ	読み取り専用。スクロールバーのトラックの中央に使われている現在の画像のパス。
`gMyScrollbar.trackEndPath`	プロパティ	読み取り専用。水平スクロールバーのトラックの右端、または垂直スクロールバーのトラックの下端に使われている現在の画像のパス。
`gMyScrollbar.trackEndLength`	プロパティ	読み取り専用。水平スクロールバーに使われている場合は、`trackEndPath`に指定されている画像の幅。垂直スクロールバーに使われている場合は、`trackEndPath`に指定されている画像の高さ。
`gMyScrollbar.thumbStartPath`	プロパティ	読み取り専用。水平スクロールバーのスクロールサムの左端、または垂直スクロールバーのスクロールサムの上端に使われている現在の画像のパス。
`gMyScrollbar.thumbStartLength`	プロパティ	読み取り専用。水平スクロールバーに使われている場合は、`thumbStartPath`に指定されている画像の幅。垂直スクロールバーに使われている場合は、`thumbStartPath`に指定されている画像の高さ。
`gMyScrollbar.thumbMiddlePath`	プロパティ	読み取り専用。スクロールバーのスクロールサムの中央に使われている現在の画像のパス。
`gMyScrollbar.thumbEndPath`	プロパティ	読み取り専用。水平スクロールバーのスクロールサムの右端、または垂直スクロールバーのスクロールサムの下端に使われている現在の画像のパス。
`gMyScrollbar.thumbEndLength`	プロパティ	読み取り専用。水平スクロールバーに使われている場合は、`thumbEndPath`に指定されている画像の幅。垂直スクロールバーに使われている場合は、`thumbEndPath`に指定されている画像の高さ。
`gMyScrollbar.remove()`	メソッド	スクロール領域からスクロールバーを削除します。
`gMyScrollbar.setScrollArea(scrollArea)`	メソッド	スクロール領域とスクロールバーを関連付けます。
`gMyScrollbar.refresh()`	メソッド	スクロールバーを再描画します。
`gMyScrollbar.setAutohide(display)`	メソッド	スクロールバーが不要な場合はスクロールバーを隠すかどうかを決定します。スクロールバーを自動的に隠す場合は`TRUE`を渡し、スクロールバーを常に表示する場合は`FALSE`を渡す。
`gMyScrollbar.hide()`	メソッド	スクロールバーを隠します。
`gMyScrollbar.show()`	メソッド	スクロールバーを表示します。
`gMyScrollbar.setSize(size)`	メソッド	スクロールバーの幅（水平方向の場合）または高さ（垂直方向の場合）をピクセル数で`size`に設定します。
`gMyScrollbar.setTrackStart(path, size)`	メソッド	水平スクロールバーのトラックの左端の画像と幅（ピクセル単位）、または垂直スクロールバーのトラックの上端の画像と幅（ピクセル単位）を設定します。
`gMyScrollbar.setTrackMiddle(path)`	メソッド	スクロールバーのトラックの中央部分に使う画像を設定します。
`gMyScrollbar.setTrackEnd(path, size)`	メソッド	水平スクロールバーのトラックの右端の画像と幅（ピクセル単位）、または垂直スクロールバーのトラックの下端の画像と幅（ピクセル単位）を設定します。
`gMyScrollbar.setThumbStart(path, size)`	メソッド	水平スクロールバーのスクロールサムの左端の画像と幅（ピクセル単位）、または垂直スクロールバーのスクロールサムの上端の画像と幅（ピクセル単位）を設定します。
`gMyScrollbar.setThumbMiddle(path)`	メソッド	スクロールバーのスクロールサムの中央部分に使う画像を設定します。
`gMyScrollbar.setThumbEnd(path, size)`	メソッド	水平スクロールバーのスクロールサムの右端の画像と幅（ピクセル単位）または垂直スクロールバーのスクロールサムの下端の画像と幅（ピクセル単位）を設定します。




	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