1.概要
ラベルは、文字や画像、背景色などを表示する際に用いる極めて使用頻度の高いコントロールです。ラベルコントロールを上手に活用することで様々な表現が実現できますので、ぜひここを読んで基本を押さえたうえでいろいろと工夫してみてください。
以下では、「2.開発の手引き」にて、ラベルでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、ラベルに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、ラベルを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。
2-1.長方形ラベルを作成する
以下のようなシンプルな長方形のラベルを作成します。
2-1-1.形を長方形にする
ラベルを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」から「形」を選択し、下図のように四角型を選択することでラベルの形を長方形にすることができます。
2-1-2.枠線なし
ラベルに枠線を付けたくない場合は、「デザイン」＞「色と形」から、罫線/枠線を選択し、表示されたカラーパレットから下図の要領で透明色を選択します。
補足： ラベルはデフォルトで長方形、枠線なしとなっております。
2-2.枠線付きのひし型ラベルを作成する
ラベルのかたちはさまざまに変更することができます。ここではひし形のラベルを作成します。
2-2-1.形をひし型にする
ラベルを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」から「形」を選択し、下図のようにひし型を選択することでラベルの形をひし形にすることができます。
2-2-2.枠線あり
枠線を付けたい場合は、同じくプロパティーエリアの「デザイン」＞「色と形」から「罫線／枠線」を選択し、好みの色を設定します。
同時に「色と形」下部の「線の太さ」を0以外の任意の数値とすることで枠線が表示されます。
2-3.ラベルにリソース画像を表示する
画像を表示させる際にもラベルを活用します。デザイン性の高いアプリをつくることができます。
2-3-1.リソース画像を表示
まずは、ラベルに表示させたい画像をリソースに登録します。リソースに登録しておくことで、その画像をいろいろな場面で活用できるようになるため、便利です。
リソース画像を登録する際はTOPメニューの「プロパティー」から「リソース」タブを選択します。「参照」からダイアログを開き登録したい画像ファイルを指定してください。「キーワード」欄で指定したテキストで、リソース画像を呼び出します。
再びラベルを選択し、「データ」＞「リソース画像」で「リソース」にチェックを入れたうえで、「内容」の「文字」欄に、先ほど設定したリソース画像のキーワードを指定します。
これによって、ラベルにリソース画像を表示させることができます。
2-4.カメラで撮影した結果をラベルに表示する
デバイスのカメラで撮影した写真を、直接ラベルに表示させることができます。
2-4-1.ボタンの作成
カメラを立ち上げるためのボタンを作成しましょう。コントロールバーからボタンを選択してボタンを配置します。”撮影”などわかりやすい名前をつけます。
2-4-2.撮影用ロジックの作成
カメラを起動し、その結果をラベルに表示するロジックを作成します。
処理設計機能で、以下の通りロジックを設定します。
#1でデバイスのカメラを起動し、#2で撮影結果をラベルにセットします。
パラメーター設定などの詳細は以下のとおりです。
2-4-3.ロジックの登録
最後に、ボタンにロジックを登録します。ボタンを押すと、作成したロジックが実行されるようになります。
2-4-1で作成したボタンを選択し、プロパティーエリアの「オブジェクト」＞「動作設定」から「実行処理」に、2-4-2で作成したロジックを割り当てます。
ボタンにロジックが登録されます。アプリの実行モードでボタンの動作をテストしてみましょう。
3.パラメーター
パラメーターを変更することで、簡単にラベルの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
オブジェクト
ラベルの基本情報や動作設定は「オブジェクト」から設定します。ラベルを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるラベルを設置することも可能です。
基本情報
| 名称 | コントロール名を入力します。 |
|---|---|
| サイズ | コントロールの幅と高さを指定します。 |
| 位置 | コントロールの位置を左と上から指定します。 |
| 余白 | コントロールの余白を左と右と上と下から指定します。 |
| 種類 | コントロールの種類を表示します。 |
| スタイル | 予め用意された定義を選択することで、色や罫線等の各種プロパティを一括で 設定できます。 |
可否
| 使用可 | コントロールを使用可能にする場合にチェックします。 |
|---|---|
| 表示 | コントロールを表示する場合にチェックします。 |
| ... | 省略文字を使用する場合にチェックします。 |
データ
内容
値入力
ラベル内の文字表示を、直接入力する場合に設定します。
| 文字 | ラベルに表示されるテキストを入力できます。 |
|---|---|
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
フォーム
ラベル内の文字表示を、データフォームを用いて入力する場合に設定します。
| フィールド名 | フォームにセットしたテーブルから、表示内容の取得先となる フィールド（列）を選択します。 |
|---|---|
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
| 使用可 | サブフォームリストにラベルを配置した場合に、各行ごとの使用可設定の 取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにラベルを配置した場合に、各行ごとの表示設定の 取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにラベルを配置した場合に、各行ごとの前景色設定の 取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにラベルを配置した場合に、各行ごとの背景色設定の 取得先となるフィールドを選択します。 |
テーブル
ラベル内の文字表示を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。
| テーブル名 | 表示内容の取得先となるテーブルを選択します。 |
|---|---|
| フィールド名 | 表示内容の取得先となるテーブル内のフィールド（列）を選択します。 |
| 書式 | 表示されるテキストのフォーマットルールを設定します。 |
| 使用可 | サブフォームリストにラベルを配置した場合に、各行ごとの使用可設定の 取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにラベルを配置した場合に、各行ごとの表示設定の 取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにラベルを配置した場合に、各行ごとの前景色設定の 取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにラベルを配置した場合に、各行ごとの背景色設定の 取得先となるフィールドを選択します。 |
リソース画像
| リソース | 表示内容にリソースのキーワードを入力してチェックすると、 コントロールにリソースを貼り付けることができます。 |
|---|
デザイン
色と形
| フォント | フォントを指定します。 |
|---|---|
| サイズ | フォントのサイズを指定します。 |
| 太字 | 文字を太字にする場合にチェックします。 |
| 影 | 文字に影をつける場合にチェックします。 |
| 下線 | 文字の下線を[無し][下線][二重下線]の何れかから選択します。 |
| 取り消し線 | 文字に取り消し線をつける場合にチェックします。 |
| 折り返し | 文字を折り返して表示する場合にチェックします。 |
| 複数行 | 表示内容の値を複数行で入力する場合にチェックします。 |
| 文字列を縮小して 全体を表示 |
表示内容がコントロール内に収まらない場合に |
| 縦配置 | 表示内容の文字位置を[上揃え][上下中央揃え][下揃え]の 何れか選択します。 |
| 横配置 | 表示内容の文字位置を[左揃え][左右中央揃え][右揃え]の 何れか選択します。 |
| 通常フォント | 通常時の前景色を指定します。 |
| 通常塗りつぶし | 通常時の背景色を指定します。 |
| 通常罫線／枠線 | 通常時の罫線と枠線の色を指定します。 |
| 使用不可フォント | 無効時の前景色を指定します。 |
| 使用不可塗りつぶし | 無効時の背景色を指定します。 |
| 使用不可罫線／枠線 | 無効時の罫線と枠線の色を指定します。 |
| 形 | コントロールの形を指定します。 |
| 角度 | コントロールの角度を指定します。 |
| 線の太さ | 線の太さを指定します。 |
| 丸み | 丸みを指定します。 |
| 厚み | 厚みを指定します。 |
変更イメージ
表示内容の文字位置（例）
|
|
|
|
グラデーション（例）
|
|
|
|
|
|
|
|
画像
| 標準画像 | コントロールに画像を貼り付けます。 |
|---|---|
| 画像削除 | コントロールから画像を削除します。 |
| 無効標準画像 | コントロールに無効時画像を貼り付けます。 |
| 画像の表示位置(垂直) | 画像の表示位置を[上揃え][上下中央揃え][下揃え]の 何れか選択します。 |
| 画像の表示位置(水平) | 画像の表示位置を[左揃え][左右中央揃え][右揃え]の 何れか選択します。 |
| 単辺フィット | 画像がコントロールにフィットするようにサイズを変更します。 [設定なし][内接フィット][外接フィット][縦横フィット]の 何れか選択します。 |
画像の表示位置（例）
|
|
|
|
単辺フィット（画像サイズがコントロールよりも小さい場合）
|
|
|
|
|
|
|
|
|
|
罫線
| 上種類 | 上罫線の種類を指定します。 |
|---|---|
| 上色 | 上罫線の色を指定します。 |
| 下種類 | 下罫線の種類を指定します。 |
| 下色 | 下罫線の色を指定します。 |
| 左種類 | 左罫線の種類を指定します。 |
| 左色 | 左罫線の色を指定します。 |
| 右種類 | 右罫線の種類を指定します。 |
| 右色 | 右罫線の色を指定します。 |
| ＼種類 | ＼罫線の種類を指定します。 |
| ＼色 | ＼上罫線の色を指定します。 |
| ／種類 | ／罫線の種類を指定します。 |
| ／色 | ／上罫線の色を指定します。 |