1.概要

スライダーは、特定の数値に対して、最小値から最大値までの値にスムーズに変更するコントロールです。
ドラッグするなどの画面操作や、処理によって数値をセットすることで、スライダーのハンドルが動作します。
以下では、「2.開発の手引き」にて、スライダーでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、スライダーに設定するパラメーターのリファレンスを記載しています。

2.開発の手引き

スライダーを使いこなすうえで、よく使うパラメーター設定をサンプルプロジェクトにまとめました。ダウンロードしてご活用ください。

control_slider.zip

2-1.横型の矩形スライダーを作成する

横型のスライダーを作成します。

2-1-1.スライダーを配置し、初期値や最大値などを設定する

コントロールバーの「スライダー」を選択して画面上でドラッグしてスライダーを配置します。
スライダーを選択した状態で、プロパティーエリアの「データ」＞「内容」にて、下図のように設定します。
「値」に入力された設定が初期値となります。サンプル例では 50 を設定しています。
「方向」で 水平 を選択しているので、横型のスライダーとなります。
「最小値」を 0 と設定しています。スライダーのつまみが左端の状態の時の値となります。
「最大値」を 100 と設定しています。スライダーのつまみが右端の状態の時の値となります。
「移動量」を 1 と 設定しています。スライダーをクリックした時の移動量となります。
今回のサンプル例では、最小0 最大100に対して、50を初期値として設定しているため、つまみの位置は中央から始まります。

2-1-2.デザインを変更する

スライダーを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からスライダーのデザインを変更できます。
①スライダーのつまみの色となります。
②スライダーの右側のバーの色となります。
③スライダー全体の枠線の色となります。
④スライダーの左側のバーの色となります。
⑤スライダー全体の枠線の太さとなります。
⑥スライダーのつまみの角の丸さとなります。
⑦スライダーの右側のバーの厚み（太さ）となります。
また、「ボタンタイプ」を B と設定することで、つまみが矩形のスライダーとなります。

2-2.縦型の丸型スライダーを作成する

縦型のスライダーを作成します。

2-2-1.スライダーを配置し、初期値や最大値などを設定する

コントロールバーの「スライダー」を選択して画面上でドラッグしてスライダーを配置します。
スライダーを選択した状態で、プロパティーエリアの「データ」＞「内容」にて、下図のように設定します。
「値」に入力された設定が初期値となります。サンプル例では 0 を設定しています。
「方向」で 垂直 を選択しているので、縦型のスライダーとなります。
「最小値」を 0 と設定しています。スライダーのつまみが左端の状態の時の値となります。
「最大値」を 500 と設定しています。スライダーのつまみが上端の状態の時の値となります。
「移動量」を 50 と 設定しています。スライダーをクリックした時の移動量となります。
今回のサンプル例では、最小0 最大500に対して、0を初期値として設定しているため、つまみの位置は上端から始まります。

2-2-2.デザインを変更する

スライダーを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からスライダーのデザインを変更できます。
「ボタンタイプ」で A を選択すると、下図のような丸型スライダーとなります。
なお、タイプAのデザインを選択した場合、ボタンタイプ以外のパラメーターは全て無効となります。

2-3.スライダーの移動時に値を取得する

スライダーを動かした時に値を取得するために、タイマーロジックを利用する方法を紹介します。

2-3-1.ロジックで値を取得する

スライダーの値を取得するロジックを作成します。

処理設計機能から新しいファイルを作成し、以下の要領でロジックを作成します。サンプルプロジェクトでは「011_スライダー値取得とテキスト描画」という処理名で作成していますので、ご参照ください。

#1 「コントロール/内容取得」スライダー1の現在つまみの値を取得します
#2 「コントロール/内容取得」スライダー2の現在つまみの値を取得します
#3 「コントロール/内容セット」#1の結果をテキスト1に出力します
#4 「コントロール/内容セット」#2の結果をテキスト2に出力します

2-3-2.値を取得するロジックを繰り返し実行するためのロジック

上記とは別のロジックを作成し、上記ロジックを繰り返して実行します。

以下の要領でロジックを設定します。サンプルプロジェクトでは「010_タイマー」という処理を作成していますのでご参照ください。

ロジックのパラメーター設定の内容は以下のとおりです。

「タイマー名」任意の名称です。
「ウェイト時間」と「単位」で設定した時間の間隔で、「実行処理」に登録したロジックが繰り返し実行されます。「非アクティブ時」を”スキップする”に設定することで、アプリが非アクティブのときはロジックの実行が中断されます。

上記の設定をすることで、2-3-1で作成したロジックが100ミリ秒間隔で繰り返し実行されます。

2-3-3.ロジックを登録する

最後に、タイマー処理がそのものが実行されるタイミングを設定します。

今回は、アプリ画面が表示された時にタイマーが起動するように設定します。

スライダーを配置した画面のコントロールが何も配置されていない箇所を選択した状態で、プロパティーエリアの「オブジェクト」＞「動作設定」を選択し、「オープン時処理」に2-3-2で作成したタイマーロジックを設定します。

3.パラメーター

パラメーターを変更することで、簡単にスライダーの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。

また、スライダーをスクロールバーにする対象のコントロールを設定することで、アプリユーザーがスライダーのハンドルをドラッグした際に、設定した表またはサブフォームをスクロールさせることができます。

オブジェクト

スライダーの基本情報や動作設定は「オブジェクト」から設定します。スライダーを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるスライダーを設置することも可能です。

基本情報

可否

データ

「処理/コントロール/内容取得」が取得できる値に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出した値を設定することもできます。

内容

値入力

スライダーから取得できる値を、直接入力する場合に設定します。

フォーム

スライダーから取得できる値を、データフォームを用いて入力する場合に設定します。

テーブル

スライダーから取得できる値を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。

コントロール

スライダーのハンドルをドラッグした際に、選択した表またはサブフォームをスクロールさせるスクロールバーとして使用する場合に設定します。

デザイン

スタイルによらずスライダーの色や形、画像の設定を行うには「デザイン」を変更します。スライダーのデザインを細かく設定できます。

色と形

変更イメージ

単辺フィット（例）