1.概要
チェックボックスは、ON/OFFの切り替えを行うことであらかじめ指定した値を返したり、あらかじめ設定した動作を呼び出すことができるコントロールです。
以下では、「2.開発の手引き」にて、チェックボックスでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、チェックボックスに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、チェックボックスを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。
2-1.チェックボックスの初期値を設定する
チェックボックスの初期値を設定し、最初からチェックの入ったボックスを作成します。
2-1-1.チェックボックスを配置し、初期値を確認する
コントロールバーの「チェック」を選択し、画面上でドラッグしてチェックボックスを配置します。このとき横長に配置するとラベルを表示できます。
チェックボックスを選択した状態で、プロパティーエリアの「オブジェクト」＞「動作設定」を選択し、「ON値」と「OFF値」を確認します。デフォルトではON値が"1"、OFF値が"0"として設定されています。
今回はデフォルト設定のままとします。
2-1-2.初期値を設定する
チェックボックスを選択した状態で、プロパティーエリアの「データ」＞「内容」＞「値入力」の「文字」欄に上で確認したON値またはOFF値を記入することでチェックボックスの初期値を設定できます。
「文字」欄にOFF値である"0"を指定すると、チェックが外れた状態で表示され、ON値である"1"を指定すると、最初からチェックが入った状態で表示されます。
なお、ON値でもOFF値でもない任意の内容を入力した場合も、チェックボックスはOFFとなりますので注意ください。
2-1-3.デザインを変更する
チェックボックスを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からチェックボックスのデザインを変更できます。
「通常」の「罫線／枠線」で指定した色が、チェックボックスの枠色となり、「チェック」の「フォント」で指定した色が、チェックマークの色となります。また、「丸み」を調整することで、チェックボックスの角に丸みをつけたりなくしたりすることができます.
2-2.チェックボックスとデータベースを連携する
テーブルを作成し、チェックボックスのON値、またはOFF値をテーブルに登録します。サンプルプロジェクトでは、チェックボックスの下にテーブル内容をリアルタイムに表示するための表を配置しています。
2-2-1.ON値とOFF値を変更する
各チェックボックスを選択した状態で、以下プロパティを設定します。
プロパティーエリアの「オブジェクト」＞「動作設定」から「ON値」と「OFF値」を変更します。
今回はON値をA、OFF値をBに設定します。
2-2-2.テーブルを作成する
DB設計画面から新規のテーブルを作成します。サンプルプロジェクトでは。「tbl_check」として作成しています。
作成したテーブルの「設計」で「項目名」と「物理項目名」と「型」をそれぞれ以下の要領で登録します。ここで設定した各項目に、チェックボックスから取得した値を格納します。
2-2-3.データフォームを設定する
画面設計画面からフォームをクリックし、プロパティーエリアの「データ」＞「内容」からテーブル名に上記「2-2-2.テーブルを作成する」で作成したテーブルを選択します。
次に、チェックボックスコントロールを選択したうえで、プロパティーエリアの「データ」＞「内容」から「フォーム」を選択し、「フィールド名」の欄に選択しているチェックボックスから取得する値をどの項目（フィールド）のデータと連動させるかを選択します。
サンプルプロジェクトでは、以下の通り3つのチェックボックスに、それぞれ「列1」「列2」「列3」の項目を設定しています。
なお、このように、コントロール（チェックボックス等）の親であるフォーム（画面全体）に対してテーブルを紐づけ、さらに、コントロールに対して項目を割り当てる設定をデータフォームと呼びます。
データフォームを使うことで、コントロールからデータベースへの入出力において、特別なロジックを実装せずとも実現することができます。
2-2-4.デザインを変更する
チェックボックスを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からチェックボックスのデザインを変更できます。
サンプルプロジェクトでは、「丸み」を30程度とすることで、正円に近い形にしています。また、厚みを4に設定し、奥行きを持たせています。
3.パラメーター
パラメーターを変更することで、簡単にチェックボックスの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、画面操作時に呼び出す動作を設定することで、アプリユーザーがチェックボックスをタッチしたりクリックしたりした際に、アプリにさまざまな動作を実行させることができます。
オブジェクト
チェックボックスの基本情報や動作設定は「オブジェクト」から設定します。チェックボックスを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるチェックボックスを設置することも可能です。
基本情報
| 名称 | チェックボックスの名称です。処理ロジックからチェックボックスに動作を 持たせる場合などは、この名称でチェックボックスを指定します。 デフォルトでは「チェック＋連番数字」のようになります。 |
|---|---|
| サイズ | チェックボックスの幅と高さを1ピクセル単位で細かく指定することができ ます。 |
| 位置 | チェックボックスの位置を指定できます。画面の左上隅が起点になります。 |
| 余白 | チェックボックスにテキストや画像を表示させない余白領域をつくることができ ます。チェックボックスの左右上下からの距離で指定します。 |
| 種類 | コントロールの種類が確認できます。変更はできません。 |
| スタイル | 予め用意されたスタイルから選択することで、色や罫線等のパラメーターを 簡単に設定できます。 |
動作設定
| 実行処理 | チェックボックスをタッチまたはクリックし、離した後に実行される処理 を設定します。 |
|---|---|
| 長押処理 | チェックボックスを長押し（1秒以上）した時に実行される処理を設定し ます。 |
| 押下瞬間時処理 | チェックボックスを押した瞬間に実行される処理を設定します。 |
| ON値 | チェックボックスのチェックがONの状態の値を設定します。 |
| OFF値 | チェックボックスのチェックがOFFの状態の値を設定します。 |
可否
| 使用可 | このチェックを外すことでチェックボックスを非活性化（操作無効）することが できます。一定の条件が満たされるまで押すことができないチェックボックスを 設置する際などに利用します。 |
|---|---|
| 表示 | このチェックを外すと、チェックボックスを非表示にすることができます。 一定の条件が満たされるまで表示されないチェックボックスを設置する際などに 利用します。 |
データ
チェックボックスに表示させるテキストや「処理/コントロール/内容取得」が取得できる値に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出したテキストを表示させることもできます。
内容
値入力
チェックボックスから取得できる値を、直接入力する場合に設定します。
| 文字 | チェックボックスのデータの値を入力できます。 |
|---|
フォーム
チェックボックスから取得できる値を、データフォームを用いて入力する場合に設定します。
| フィールド名 | フォームにセットしたテーブルから、データの取得先となるフィールド （列）を選択します。 |
|---|---|
| 使用可 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 使用可設定の取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 表示設定の取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 前景色設定の取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 背景色設定の取得先となるフィールドを選択します。 |
テーブル
チェックボックスから取得できる値を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
| テーブル名 | データの取得先となるテーブルを選択します。 |
|---|---|
| フィールド名 | データの取得先となるテーブル内のフィールド（列）を選択します。 |
| 使用可 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 使用可設定の取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 表示設定の取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 前景色設定の取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにチェックボックスを配置した場合に、各行ごとの 背景色設定の取得先となるフィールドを選択します。 |
表示ラベル
値入力
チェックボックス内の文字表示を、直接入力する場合に設定します。
| 文字 | チェックボックスに表示されるテキストを入力できます。 |
|---|
テーブル
チェックボックス内の文字表示を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
| テーブル名 | 表示内容の取得先となるテーブルを選択します。 |
|---|---|
| フィールド名 | 表示内容の取得先となるテーブル内のフィールド（列）を選択 します。 |
| フィルター／直接入力 | テーブルから表示内容を取得するときの抽出条件を直接入力する 場合に選択します。 |
| フィルター／リスト選択 | テーブルから表示内容を取得するときの抽出条件をリストから 選択する場合に選択します。 |
デザイン
スタイルによらずチェックボックスの色や形、画像の設定を行うには「デザイン」を変更します。チェックボックスのデザインを細かく設定できます。
色と形
| フォント | フォントタイプを指定します。 |
|---|---|
| サイズ | フォントのサイズを指定します。 |
| 太字 | 文字を太字にする場合にチェックします。 |
| 影 | 文字に影をつける場合にチェックします。 |
| 下線 | 文字の下線を[無し][下線][二重下線]の何れかから選択します。 |
| 取り消し線 | 文字に取り消し線をつける場合にチェックします。 |
| 折り返し | 文字を折り返して表示する場合にチェックします。 |
| 文字列を縮小して 全体を表示 |
表示内容がコントロール内に収まらない場合に |
| 縦配置 | チェックボックス内の文字位置を[上揃え][上下中央揃え][下揃え]の 何れかから選択します。 |
| 横配置 | チェックボックス内の文字位置を[左揃え][左右中央揃え][右揃え]の 何れかから選択します。 |
| 通常フォント | 通常時のフォント色を指定します。 |
| 通常塗りつぶし | 通常時の背景色を指定します。 |
| 通常罫線／枠線 | 通常時の罫線／枠線の色を指定します。 |
| チェック | チェックマークの色を指定します。 |
| 無効チェック色 | 操作無効時のチェックマークの色を指定します。 |
| 使用不可フォント | 操作無効時のフォント色を指定します。 |
| 使用不可塗りつぶし | 操作無効時の背景色を指定します。 |
| 使用不可罫線／枠線 | 操作無効時の罫線／枠線の色を指定します。 |
| 線の太さ | 線の太さを指定します。 |
| 丸み | チェックボックスの角の丸みを指定します。 |
| 厚み | チェックボックスの厚みを指定します。 |
変更イメージ
縦配置／横配置（例）
文字：左上揃えの場合 文字：中央揃えの場合 文字：右下揃えの場合
|
|
|
|
画像
| 標準画像 | 通常時に表示される画像を設定できます。 |
|---|---|
| 画像削除 | 標準画像の設定をクリアできます。 |
| 押下画像 |
チェックボックスのチェックがONの状態の間に表示される 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 無効標準画像 |
操作無効時の通常時に表示される画像を設定できます。 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 無効押下画像 |
操作無効時のチェックボックスのチェックがONの状態の間に 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 画像の表示位置(垂直) | チェックボックス内の画像表示位置を[上揃え][上下中央揃え] [下揃え]の何れかから選択します。 |
| 画像の表示位置(水平) | チェックボックス内の画像表示位置を[左揃え][左右中央揃え] [右揃え]の何れかから選択します。 |
| 単辺フィット | 画像がチェックボックスの内側にフィットするようにサイズを 変更します。[設定なし][内接フィット][外接フィット][縦横フ ィット]の何れかから選択します。 |
画像の表示位置（例）
|
|
|
|
画像の単辺フィット（例）
|
|
|
|
|
罫線
| 上種類 | 上罫線の種類を指定します。 |
|---|---|
| 上色 | 上罫線の色を指定します。 |
| 下種類 | 下罫線の種類を指定します。 |
| 下色 | 下罫線の色を指定します。 |
| 左種類 | 左罫線の種類を指定します。 |
| 左色 | 左罫線の色を指定します。 |
| 右種類 | 右罫線の種類を指定します。 |
| 右色 | 右罫線の色を指定します。 |
| ＼種類 | ＼罫線の種類を指定します。 |
| ＼色 | ＼上罫線の色を指定します。 |
| ／種類 | ／罫線の種類を指定します。 |
| ／色 | ／上罫線の色を指定します。 |