1.概要
ボタンは、タッチやクリックなどの画面操作から、あらかじめ設定した動作を呼び出すことができるアプリ操作の中心となるコントロールです。色や形を変更できるほか、画像を表示することでデザイン性の高いボタンにすることも可能です。
以下では、「2.開発の手引き」にて、ボタンでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、ボタンに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、ボタンを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。
2-1.三角形のボタンをつくる
ボタンを選択した状態で、プロパティーエリアの「データ」＞「内容」から、ボタンに表示する文字を空にします。デフォルトでは”ボタン”と表示されています。
ボタンの背景色を設定します。
プロパティーエリアの「デザイン」＞「色と形」から、形を選択します。
ボタンタイプをBにするとフラットタイプのデザインになります。
2-2.丸型で厚みのあるボタンをつくる
ボタンに文字を表示させます。プロパティーエリアの「データ」＞「内容」から設定します。
文字を中央揃え、塗りつぶしを青、形を〇、ボタンタイプをAにします。
プロパティーエリアの「デザイン」＞「色と形」で、ボタンタイプをAにすると、厚みと押した時の凹みと色反転が適用できます。
2-3.押すと画像が表示されるグラデーションボタンをつくる
2-3-1.グラデーションの設定
グラデーションは、プロパティーエリアの「デザイン」＞「色と形」の「塗りつぶし」＞「グラデーション」＞「グラデーションの設定」から設定します。
2-3-2.画像の設定
画像の設定は、プロパティーエリアの「デザイン」＞「画像」の「押下画像」から設定します。
ダイアログが開くので、設定したい画像ファイルを選択します。
また、ボタン内での画像の位置を設定できます。以下では画像が右下になるように設定します。なお、設定した画像は暗号化されてアプリ内に保存されます。
2-4.ボタンにリソース画像を表示する
2-4-1.リソースの登録
まずは、リソース画像を登録します。
リソース画像を登録しておくと、アプリのさまざまな場所で、登録した画像を呼び出すことができます。
TOPメニューから「プロパティー」を選択してプロパティー画面を開き、「リソース」タブを選択し、下図のように、キーワードと画像の設定をしてください。
2-4-2.ボタンとリソースの紐づけ
ボタンを選択して、プロパティーエリアの「データ」＞「リソース画像」から「リソース」に✔を付けたうえで、文字を"自宅"と入力してください。ここで入力した文字と一致するキーワードのリソース画像がボタンに表示されます。
この例では、リソースに”自宅”として登録した住居のアイコンが表示されるようになります。
2-4-3.ボタン操作による画像の変更
画像を変更する際はロジックを作成する必要があります。
処理設計機能を選択して、以下のロジックを作成します。
#1で、まずボタンの文字を取得します（例：自宅）。#2のIF分岐処理で、#1で取得した文字が自宅だった場合は#3のボタンの文字を自宅から出勤へ変更するロジックへ、それ以外の場合は#5の自宅以外から自宅へ変更するロジックへ移動します。
2-4-4.ボタンと処理の紐づけ
うえで作成したロジックをボタンに登録します。
「オブジェクト」＞「動作設定」＞「実行処理」に上で作成したロジックを設定することで、ボタンを押す度に、自宅⇔出勤 を切り替えることができるようになります。
2-5.ボタンを押した時間で処理を分岐させる
2-5-1.ロジックの作成
3パターンのロジックを作成します。
・ボタン右のラベルに表示された文字を「実行処理（完）」に変更します
・ボタン右のラベルに表示された文字を「長押し（完）」に変更します。
・ボタン右のラベルに表示された文字を「押下瞬間」に変更します。
2-5-2.ボタンと処理の紐づけ
「オブジェクト」＞「動作設定」にある「実行処理」、「長押処理」および「押下瞬間時処理」に、上で作成した3つのロジックをそれぞれ設定することで、ボタンを短く（1秒以内）押した後、ボタンを押した瞬間、ボタンを長く（1秒以上）押しした後で、ボタン右のラベルに表示されるテキストが変わります。
3.パラメーター
パラメーターを変更することで、簡単にボタンの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、画面操作時に呼び出す動作を設定することで、アプリユーザーがボタンをタッチしたりクリックしたりした際に、アプリにさまざまな動作を実行させることができます。
オブジェクト
ボタンの基本情報や動作設定は「オブジェクト」から設定します。ボタンを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるボタンを設置することも可能です。
基本情報
| 名称 | ボタンの名称です。処理ロジックからボタンに動作を持たせる場合などは、 この名称でボタンを指定します。デフォルトでは「ボタン＋連番数字」のように なります。 |
|---|---|
| サイズ | ボタンの幅と高さを1ピクセル単位で細かく指定することができます。 |
| 位置 | ボタンの位置を指定できます。画面の左上隅が起点になります。 |
| 余白 | ボタンにテキストや画像を表示させない余白領域をつくることができます。 ボタンの左右上下からの距離で指定します。 |
| 種類 | コントロールの種類が確認できます。変更はできません。 |
| スタイル | 予め用意されたスタイルから選択することで、色や罫線等のパラメーターを簡単 に設定できます。 |
ボタンのスタイル（例）
動作設定
| 遷移先 | 遷移先画面を設定することで、ボタン操作時に当該画面に遷移するように 設定できます。 遷移先画面をドラッグして対象のボタンにドロップする方法でも設定する ことができます。 |
|---|---|
| 実行処理 | ボタンをタッチまたはクリックし、離した後に実行される処理を設定しま す。 |
| 長押処理 | ボタンを長押し（1秒以上）した時に実行される処理を設定します。 |
| 押下瞬間時処理 | ボタンを押した瞬間に実行される処理を設定します。 |
可否
| 使用可 | このチェックを外すことでボタンを非活性化（操作無効）することができます。 一定の条件が満たされるまで押すことができないボタンを設置する際などに利用 します。 |
|---|---|
| 表示 | このチェックを外すと、ボタンを非表示にすることができます。 一定の条件が満たされるまで表示されないボタンを設置する際などに利用します。 |
データ
ボタンに表示させるテキストや画像に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出したテキストを表示させることもできます。
内容
値入力
ボタン内の文字表示を、直接入力する場合に設定します。
| 文字 | ボタンに表示されるテキストを入力できます。 |
|---|---|
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
フォーム
ボタン内の文字表示を、あらかじめ設定するのではなくデータフォームを用いて入力する場合に設定します。
| フィールド名 | フォームにセットしたテーブルから、表示内容の取得先となる フィールド（列）を選択します。 |
|---|---|
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
| 使用可 | サブフォームリストにボタンを配置した場合に、各行ごとの使用可設定の 取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにボタンを配置した場合に、各行ごとの表示設定の 取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにボタンを配置した場合に、各行ごとの前景色設定の 取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにボタンを配置した場合に、各行ごとの背景色設定の 取得先となるフィールドを選択します。 |
テーブル
ボタン内の文字表示を、あらかじめ設定するのではなくデータベースを用いて入力する場合に設定します。
| テーブル名 | 表示内容の取得先となるテーブルを選択します。 |
|---|---|
| フィールド名 | 表示内容の取得先となるテーブル内のフィールド（列）を選択します。 |
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
| 使用可 | サブフォームリストにボタンを配置した場合に、各行ごとの使用可設定の 取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにボタンを配置した場合に、各行ごとの表示設定の 取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにボタンを配置した場合に、各行ごとの前景色設定の 取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにボタンを配置した場合に、各行ごとの背景色設定の 取得先となるフィールドを選択します。 |
リソース画像
| リソース | リソースのチェックボックスにチェックをしたうえで、ボタンの表示内容として 別途設定したリソース画像のキーワード*を設定すると、 ボタンにリソース画像を表示させることができます。 |
|---|
*リソース画像については「2.開発の手引き ボタン4－リソース画像」参照
デザイン
スタイルによらずボタンの色や形、画像の設定を行うには「デザイン」を変更します。ボタンのデザインを細かく設定できます。
色と形
| フォント | フォントタイプを指定します。 |
|---|---|
| サイズ | フォントのサイズを指定します。 |
| 太字 | 文字を太字にする場合にチェックします。 |
| 影 | 文字に影をつける場合にチェックします。 |
| 下線 | 文字の下線を[無し][下線][二重下線]の何れかから選択します。 |
| 取り消し線 | 文字に取り消し線をつける場合にチェックします。 |
| 折り返し | 文字を折り返して表示する場合にチェックします。 |
| 複数行 | 表示内容の値を複数行で入力する場合にチェックします。 |
| 文字列を縮小して 全体を表示 |
表示内容がコントロール内に収まらない場合に |
| 縦配置 | ボタン内の文字位置を[上揃え][上下中央揃え][下揃え]の何れかから 選択します。 |
| 横配置 | ボタン内の文字位置を[左揃え][左右中央揃え][右揃え]の何れかから 選択します。 |
| 通常フォント | 通常時のフォント色を指定します。 |
| 通常塗りつぶし | 通常時の背景色を指定します。 |
| 通常罫線／枠線 | 通常時の罫線／枠線の色を指定します。 |
| 使用不可フォント | 操作無効時のフォント色を指定します。 |
| 使用不可塗りつぶし | 操作無効時の背景色を指定します。 |
| 使用不可罫線／枠線 | 操作無効時の罫線／枠線の色を指定します。 |
| 形 | ボタンの形を指定します。 |
| ボタンタイプ | ボタンに厚みを持たせた際のデザインタイプやボタンを押した際の 表現などを選択できます。 |
| 線の太さ | 線の太さを指定します。 |
| 丸み | ボタンの角の丸みを指定します。 |
| 厚み | ボタンの厚みを指定します。 |
変更イメージ
文字の縦配置／横配置（例）
文字：左上揃えの場合 文字：中央揃えの場合 文字：右下揃えの場合
|
|
|
|
通常塗りつぶしのグラデーション（例）
|
|
画像
| 標準画像 | 通常時に表示される画像を設定できます。 |
|---|---|
| 画像削除 | 標準画像の設定をクリアできます。 |
| 押下画像 |
ボタンを押している間に表示される画像を設定できます。 画像を削除する場合は画像削除ボタンをクリックします。 |
| 無効標準画像 |
操作無効時に表示される画像を設定できます。 画像を削除する場合は画像削除ボタンをクリックします。 |
| 無効押下画像 |
操作無効時にボタンを押している間に表示される画像を設定できます。 画像を削除する場合は画像削除ボタンをクリックします。 |
| 画像の表示位置(垂直) | ボタン内の画像表示位置を[上揃え][上下中央揃え][下揃え]の 何れかから選択します。 |
| 画像の表示位置(水平) | ボタン内の画像表示位置を[左揃え][左右中央揃え][右揃え]の 何れかから選択します。 |
| 単辺フィット | 画像がボタンの内側にフィットするようにサイズを変更します。 [設定なし][内接フィット][外接フィット][縦横フィット]の 何れかから選択します。 |
画像の表示位置（例）
|
|
|
|
画像の単辺フィット（例）
|
|
|
|
|
罫線
| 上種類 | 上罫線の種類を指定します。 |
|---|---|
| 上色 | 上罫線の色を指定します。 |
| 下種類 | 下罫線の種類を指定します。 |
| 下色 | 下罫線の色を指定します。 |
| 左種類 | 左罫線の種類を指定します。 |
| 左色 | 左罫線の色を指定します。 |
| 右種類 | 右罫線の種類を指定します。 |
| 右色 | 右罫線の色を指定します。 |
| ＼種類 | ＼罫線の種類を指定します。 |
| ＼色 | ＼上罫線の色を指定します。 |
| ／種類 | ／罫線の種類を指定します。 |
| ／色 | ／上罫線の色を指定します。 |