Apple Developer Connection
Advanced Search
Member Login Log In | Not a Member? Contact ADC
ADC Home > Reference Library > Guides > Apple Applications > Dashboard > Dashboard Programming Topics >

Appleスライダの使用

Appleは、スライダコントロールとして機能し、ユーザが選択できる値の範囲の描写に使用できるJavaScriptクラスを提供しています。AppleSliderというクラスであり、Mac OS X v10.4.3以降に含まれているApple Classのクラスです。

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

In this section:

Appleスライダに関する作業
HTMLにおけるAppleスライダ
CSSにおけるAppleスライダ
JavaScriptにおけるAppleスライダ


Appleスライダに関する作業

AppleSliderを使用するには、次のことを行う必要があります。

デフォルトでは、AppleSliderはAppleによって提供されているアートワークを使ってスライダのさまざまなパーツを表現します。独自のアートワークを指定することもできます。

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

HTMLにおけるAppleスライダ

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

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

<script type='text/javascript' src='AppleClasses/AppleSlider.js' charset='utf-8'/>

重要: ウィジェットへのAppleSlider.jsファイルのコピーに加え、Imagesディレクトリを/System/Library/WidgetResources/からウィジェットのバンドルへコピーし、画像のパスへのすべての参照がローカルコピーを指すようにAppleSlider.jsを書き換える作業も必要です。パスは現在、次のように書かれています。

this.thumbPath = "file:///System/Library/WidgetResources/AppleClasses/Images/slide_thumb.png";
これらのパスを、次のようにローカルパスに置き換える必要があります。

this.thumbPath = "file://AppleClasses/Images/slide_thumb.png";

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

<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleSlider.js' charset='utf-8'/>

AppleSliderクラスを含めたあとは、スライダを表す<div>要素を宣言する必要もあります。

<body onload="setup();">
    ...
    <div id="mySlider"></div>
    ...
</body>

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

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

CSSにおけるAppleスライダ

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

#mySlider {
    position:absolute;
    top: 20px;
    left: 20px;
    width: 100px;    /* 垂直スライダの高さを使用 */
}

ここでは、水平スライダに必要なwidth属性を指定しています。垂直スライダを使うことを計画している場合は、代わりにheight属性を指定します。

JavaScriptにおけるAppleスライダ

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

Table 4  AppleSlider サブクラス

水平スライダのコンストラクタ

垂直スライダのコンストラクタ

AppleHorizontalSlider(slider, onchanged)

AppleVerticalSlider(slider, onchanged)

どちらのコンストラクタも次の2つのパラメータを受け取ります。すなわち、スライダを作成する場所を表すDOMオブジェクトと、スライダの値が変化すると呼び出されるハンドラです。DOMオブジェクトは、HTMLで定義し、CSSで配置した<div>です。水平スライダの場合、onloadハンドラコードは次のようになります。

var gMySlider;
 
function setup()
{
    gMySlider = new AppleHorizontalSlider(
        document.getElementById("mySlider"),
        sliderChanged
    );
}

onchangedハンドラは、デベロッパによって提供される関数です。このハンドラは、スライダが変更されると呼び出され、引数を1つ受け取ります。ハンドラが呼び出されると、スライダの現在の値が渡されます。スライダの値は常に、0から1までの浮動小数点数です。

function sliderChanged(currentValue)
{
    // 渡されたcurrentValueを使って何か処理をする
}

setup()関数内で使われているグローバル変数のgMySliderに注目してください。この変数はAppleSliderオブジェクトへの参照を保持しており、スライダが作成されたあとはこれを使っていつでもスライダとやり取りすることができます。次のプロパティとメソッドを、やり取りに利用できます。

Table 5  AppleSlider オブジェクトのプロパティとメソッド

選択肢

型

説明

gMySlider.onchanged

プロパティ

読み取り／書き込み。スライダが移動すると呼び出されるハンドラ。

gMySlider.continuous

プロパティ

読み取り／書き込み。スライダサムが移動している間にonchangedハンドラを呼び出すか(true)、または移動が終了した時点で呼び出すか(false)を指定するブール値。デフォルトはtrue。

gMySlider.padding

プロパティ

読み取り／書き込み。スライダコントロールを含んでいる<div>要素の境界内の、スライダコントロールの周囲のパディングをピクセル数で示した整数。

gMySlider.value

プロパティ

読み取り専用。スライダの現在の値。

gMySlider.size

プロパティ

読み取り専用。スライダの高さまたは幅（ピクセル単位）。

gMySlider.trackStartPath

プロパティ

読み取り専用。水平スライダのトラックの左端、または垂直スライダのトラックの上端に使われている現在の画像のパス。

gMySlider.trackStartLength

プロパティ

読み取り専用。水平スライダに使われている場合は、trackStartPathに指定されている画像の幅。垂直スライダに使われている場合は、trackStartPathに指定されている画像の高さ。

gMySlider.trackMiddlePath

プロパティ

読み取り専用。スライダのトラックの中央に使われている現在の画像のパス。

gMySlider.trackEndPath

プロパティ

読み取り専用。水平スライダのトラックの右端、または垂直スライダのトラックの下端に使われている現在の画像のパス。

gMySlider.trackEndLength

プロパティ

読み取り専用。水平スライダに使われている場合は、trackEndPathに指定されている画像の幅。垂直スライダに使われている場合は、trackEndPathに指定されている画像の高さ。

gMySlider.thumbPath

プロパティ

読み取り専用。スライダのサムに使われている現在の画像のパス。

gMySlider.thumbLength

プロパティ

読み取り専用。水平スライダに使われている場合は、thumbPathに指定されている画像の幅。垂直スライダに使われている場合は、thumbPathに指定されている画像の高さ。

gMySlider.remove()

メソッド

ウィジェットのインターフェイスとDOMからスライダを削除します。

gMySlider.refresh()

メソッド

スライダのコポーネントを再描画します。スライダの表示のいずれかの外観や状態を、プログラムによって変更する場合に使います。

gMySlider.slideTo(position)

メソッド

スライダのサムをpositionまで移動します。0からスライドの高さ（垂直方向の場合）、または幅（水平方向の場合）までのピクセル数を表す整数を受け取ります。

gMySlider.setSize(size)

メソッド

スライダの幅（水平方向の場合）または高さ（垂直方向の場合）をピクセル数でsizeに設定します。

gMySlider.setTrackStart(imagePath, length)

メソッド

水平スライダのトラックの左端の画像と幅（ピクセル単位）、または垂直スライダのトラックの上端の画像と幅（ピクセル単位）を設定します。

gMySlider.setTrackMiddle(imagePath)

メソッド

スライダのトラックの中央部分に使う画像を設定します。

gMySlider.setTrackEnd(imagePath, length)

メソッド

水平スライダのトラックの右端の画像と幅（ピクセル単位）、または垂直スライダのトラックの下端の画像と幅（ピクセル単位）を設定します。

gMySlider.setThumb(imagePath, length)

メソッド

水平スライダのサムの画像と幅（ピクセル単位）、または垂直スライダのサムの画像と高さ（ピクセル単位）を設定します。

gMySlider.setValue(value)

メソッド

スライダの値をvalueに設定し、サムをvalueまで移動します。0からスライドの高さ（垂直方向の場合）または幅（水平方向の場合）までのピクセル数を表す整数を受け取ります。




Last updated: 2006-08-07

Did this document help you?
Yes: Tell us what works for you.

It’s good, but: Report typos, inaccuracies, and so forth.

It wasn’t helpful: Tell us what would have helped.
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