1.概要
スライダーは、特定の数値に対して、最小値から最大値までの値にスムーズに変更するコントロールです。
ドラッグするなどの画面操作や、処理によって数値をセットすることで、スライダーのハンドルが動作します。
以下では、「2.開発の手引き」にて、スライダーでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、スライダーに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
スライダーを使いこなすうえで、よく使うパラメーター設定をサンプルプロジェクトにまとめました。ダウンロードしてご活用ください。
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.パラメーター
パラメーターを変更することで、簡単にスライダーの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、スライダーをスクロールバーにする対象のコントロールを設定することで、アプリユーザーがスライダーのハンドルをドラッグした際に、設定した表またはサブフォームをスクロールさせることができます。
オブジェクト
スライダーの基本情報や動作設定は「オブジェクト」から設定します。スライダーを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるスライダーを設置することも可能です。
基本情報
名称 | スライダーの名称です。処理ロジックからスライダーに動作を持たせる場合 などは、この名称でスライダーを指定します。 デフォルトでは「スライダー+連番数字」のようになります。 |
---|---|
サイズ | スライダーの幅と高さを1ピクセル単位で細かく指定することができます。 |
位置 | スライダーの位置を指定できます。画面の左上隅が起点になります。 |
余白 | スライダーにテキストや画像を表示させない余白領域をつくることができます。 スライダーの左右上下からの距離で指定します。 |
種類 | コントロールの種類が確認できます。変更はできません。 |
スタイル | 予め用意されたスタイルから選択することで、色や罫線等のパラメーターを 簡単に設定できます。 |
可否
使用可 | このチェックを外すことでスライダーを非活性化(操作無効)することができ ます。一定の条件が満たされるまで操作することができないスライダーを設置 する際などに利用します。 |
---|---|
表示 | このチェックを外すと、スライダーを非表示にすることができます。一定の条件 が満たされるまで表示されないスライダーを設置する際などに利用します。 |
データ
「処理/コントロール/内容取得」が取得できる値に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出した値を設定することもできます。
内容
値入力
スライダーから取得できる値を、直接入力する場合に設定します。
値 | スライダーの初期値の値を入力できます。 |
---|---|
水平 | 水平スライダーにする場合にチェックします。 |
垂直 | 垂直スライダーにする場合にチェックします。 |
最小値 | スライダーの最小値を指定します。 |
最大値 | スライダーの最大値を指定します。 |
移動量 | スライダーの最小移動量を指定します。 |
フォーム
スライダーから取得できる値を、データフォームを用いて入力する場合に設定します。
フィールド名 | フォームにセットしたテーブルから、データの取得先となる フィールド(列)を選択します。 |
---|---|
使用可 | フォームにセットしたテーブルから、スライダーの使用可不可を設定 する際に利用します。 |
表示 | フォームにセットしたテーブルから、スライダーの表示非表示を設定 する際に利用します。 |
前景色 | フォームにセットしたテーブルから、スライダーの前景色を設定 する際に利用します。 |
背景色 | フォームにセットしたテーブルから、スライダーの後景色を設定 する際に利用します。 |
水平 | 水平スライダーにする場合にチェックします。 |
垂直 | 垂直スライダーにする場合にチェックします。 |
最小値 | スライダーの最小値を指定します。 |
最大値 | スライダーの最大値を指定します。 |
移動量 | スライダーの最小移動量を指定します。 |
テーブル
スライダーから取得できる値を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
テーブル名 | データの取得先となるテーブルを選択します。 |
---|---|
フィールド名 | データの取得先となるテーブル内のフィールド(列)を選択します。 |
使用可 | テーブルからスライダーの使用可不可を設定する際に利用します。 |
表示 | テーブルからスライダーの表示非表示を設定する際に利用します。 |
前景色 | テーブルからスライダーの前景色を設定する際に利用します。 |
背景色 | テーブルからスライダーの背景色を設定する際に利用します。 |
水平 | 水平スライダーにする場合にチェックします。 |
垂直 | 垂直スライダーにする場合にチェックします。 |
最小値 | スライダーの最小値を指定します。 |
最大値 | スライダーの最大値を指定します。 |
移動量 | スライダーの最小移動量を指定します。 |
コントロール
スライダーのハンドルをドラッグした際に、選択した表またはサブフォームをスクロールさせるスクロールバーとして使用する場合に設定します。
画面コントロール名 | 画面内に配置されている表またはサブフォームを選択します。 |
---|---|
水平 | スライダーを横方向のスクロールバーにする場合にチェックします。 |
垂直 | スライダーを縦方向のスクロールバーにする場合にチェックします。 |
デザイン
スタイルによらずスライダーの色や形、画像の設定を行うには「デザイン」を変更します。スライダーのデザインを細かく設定できます。
色と形
通常ハンドル | 通常時のハンドル色を指定します。 |
---|---|
通常バー | 通常時の非選択部分のバー色を指定します。 |
通常罫線/枠線 | 通常時の罫線/枠線の色を指定します。 |
選択バー | 通常時の選択部分のバー色を指定します。 |
使用不可ハンドル | 操作無効時のハンドル色を指定します。 |
使用不可バー | 操作無効時のバー色を指定します。 |
使用不可罫線/枠線 | 操作無効時の罫線/枠線の色を指定します。 |
ボタンタイプ | スライダーの形状を選択します。 |
線の太さ | 線の太さを指定します。 |
丸み | スライダーの角の丸みを指定します。 |
厚み | スライダーの厚みを指定します。 |
画像
標準画像 | 通常時に表示される画像を設定できます。 |
---|---|
画像削除 | 標準画像の設定をクリアできます。 |
押下画像 |
スライダーを押している間に表示される画像を設定できます。 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
無効標準画像 | 操作無効時に表示される画像を設定できます。
設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
無効押下画像 | 操作無効時にスライダーを押している間に表示される画像を設定できます。
設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
画像の表示位置(垂直) | スライダー内の画像表示位置を[上揃え][上下中央揃え][下揃え] の何れかから選択します。 |
画像の表示位置(水平) | スライダー内の画像表示位置を[左揃え][左右中央揃え][右揃え] の何れかから選択します。 |
単辺フィット | 画像がスライダーの内側にフィットするようにサイズを変更しま す。[設定なし][内接フィット][外接フィット][縦横フィット]の 何れかから選択します。 |
変更イメージ
単辺フィット(例)