5.3.1. プロパティの詳細と設定¶

エレメントの見た目や大きさ、各エレメントごとに設定するべき情報を「プロパティ」といいます。 エレメントごとに設定できるプロパティは異なります。

プロパティの設定手順は以下の通りです。設定の流れは全エレメント共通です。

1. プロパティを設定したいエレメントをクリックします。コンテナ全体に対するプロパティを設定したい場合、エレメントまたはコンテナの選択状態を解除してください。選択状態の解除方法は「アプリケーション画面で利用するエレメントを配置する」を参照してください。

2. 「プロパティ」をクリックし、エレメントのプロパティ設定欄を表示します。

   

3. プロパティ種別名をクリックすると、プロパティの詳細が表示されます。

   

4. ヘルプを参照し、設定内容を確認します。

   

5. ヘルプの内容を確認し、プロパティの値を入力します。

   

• ツールバーの「コンテナを選択」アイコンをクリックします。

  この方法は、2020 Spring(Yorkshire) 以降のバージョンで使用可能です。
  

• ユーザが操作しているPCのOSがWindowsの場合、コンテナページをクリックして選択後、「Ctrl」キーを押しながら再度コンテナページをクリックします。

• ユーザが操作しているPCのOSがMacintoshの場合、コンテナページをクリックして選択後、「command/control」キーを押しながら再度コンテナページをクリックします。

コンテナに設定できるプロパティ種別は以下の通りです。

1. コンテナ設定

   アプリケーション画面のメインページやページタイトルを設定するプロパティです。

2. イベント

   アプリケーション画面の読み込み時、または離脱時に発生させる動作を設定するプロパティです。

エレメントに設定できるプロパティ種別は以下の通りです。

1. エレメント固有

   各エレメントごとに内容は異なります。詳しくはプロパティのヘルプを参照してください。

   コラム

   入力系のエレメントに入力規則を設けたい場合、変数の入力規則を利用してください。 入力規則の設定方法は「変数の設定方法」の「変数の設定」を参照してください。

2. 共通

   設定できるプロパティは以下の通りです。

   • エレメントのID
   • エレメントの表示/非表示
   • ツールチップ

3. イベント

   アクションタブで設定したアクションを実行するきっかけとなる動作を設定するプロパティです。

   例えば「クリック時」にアクションを設定すると、設定対象のエレメントをクリックしたときに設定したアクションが動作します。

   アクションの設定方法は「アクションエディタ画面の操作方法」を参照してください。

4. CSSクラス

   エレメントに独自のクラスを付与できます。クラスを付与することで、クラスに対してCSSを設定できます。

5. 文字色・背景色

   エレメントの色に関する事項を設定するプロパティです。

6. フォント

   エレメントのフォントに関する事項を設定するプロパティです。

7. テキストスタイル

   エレメントのテキストに関する事項を設定するプロパティです。

8. 幅・高さ

   エレメントの幅・高さに関する事項を設定するプロパティです。

9. 余白

   エレメントの余白に関する事項を設定するプロパティです。

   コラム

   CSSエディタを利用すると、エレメントに対し直接CSSを設定することも可能です。

   以下の事例に当てはまる場合、CSSエディタを利用してください。

   • エレメントに対しCSSを詳細に設定したい場合
   • 複数のエレメントに対し、まとめて同じプロパティを設定したい場合

プロパティの値は「固定値」と「変数値」が設定できます。それぞれの役割は以下の通りです。

1. 固定値

   画面デザインの時点であらかじめ値を決定する場合に選択します。

   画面表示時の初期値として入力値が使用され、ユーザ操作によって値が変更されても他のエレメントの動作には影響しません。

2. 変数値

   画面表示時の状況によって値が変わるなど、画面デザインの時点では決定できない変数値を採用する場合に選択します。

   変数を直接指定、または、固定値と変数値を組み合わせた式を指定できます。

   コラム

   プロパティによって、「固定値」「変数値」のいずれかのみ指定できます。

「変数値」は、指定方法によってさらに「変数パス表現」と「式表現」が設定できます。それぞれの役割は以下の通りです。

1. 変数パス表現

   使用する変数のツリー上の位置を「$variable.foo」などのパスで指定します。

   画面表示後のユーザ操作によってこのプロパティ値に変更があった場合、指定した変数の値と連動し、同じ変数を使用した他のエレメントの動作に影響します。

2. 式表現

   「=（イコール）」から始めることで、固定値と変数値を混在させた「=$variable.foo+123」などの式を指定できます。

   式に変数が含まれていても、同じ変数を使用した他のエレメントの動作には影響しません。

   • 固定値

     使用可能な固定値

     null	データなし
     true	真偽値型：はい
     false	真偽値型：いいえ
     123	数値型（浮動小数点数型）
     'ABC' "ABC"	文字列型

   • 変数値

     変数値を使用する場合は、変数パス表現を指定します。

     型は、変数に設定されている型に準じます。

   • 四則演算子

     四則演算子

     +	加算	A+B：A＋B の結果を返します。 A, Bのいずれかが「データなし」の場合は、「データなし」ではない方の値を返します。 A, Bのいずれかが文字列型の場合は、文字列化して結合します。 A, Bのいずれかが日付型の場合は、数値化した結果をミリ秒として扱い、日付型に戻します。 上記以外の場合は、数値化して演算します。 数値化できない場合は、「データなし」として返します。
     -	減算	A-B：A－B の結果を返します。 Bが「データなし」の場合は、Aを返します。 A, Bのいずれかが日付型の場合は、数値化した結果をミリ秒として扱い、日付型に戻します。 上記以外の場合は、A, Bそれぞれ数値化して演算します。 数値化できない場合は、「データなし」として返します。
     *	乗算	A*B：A×B の結果を返します。 A, Bのいずれかが「データなし」の場合は、「データなし」ではない方の値を返します。 上記以外の場合は、A, Bそれぞれ数値化して演算します。 数値化できない場合は、「データなし」として返します。
     /	除算	A/B：A÷B の結果を返します。 A, Bのいずれかが「データなし」の場合は、「データなし」ではない方の値を返します。 上記以外の場合は、A, Bそれぞれ数値化して演算します。 Bが0の場合や数値化できない場合は、「データなし」として返します。
     %	余り	A%B：A÷B の余りを返します。 A, Bのいずれかが「データなし」の場合は、「データなし」ではない方の値を返します。 上記以外の場合は、A, Bそれぞれ数値化して演算します。 Bが0の場合や数値化できない場合は、「データなし」として返します。

     コラム

     • 「数値化」について

       数値化のルールについては、後述の「数値化の変換ルール」を参照してください。

   • 論理演算子

     論理演算子

     &&	論理積	A&&B：A and B の結果を返します。 Aの値を真偽値化した結果、真偽値：いいえ の場合は、変換前のAを返します。 それ以外の場合は、Bを返します。 これにより、A, Bの両方が 真偽値：はい を示す値の場合、真偽値：はい と同等の値を返すとみなすことができます。 最終的にA, Bのいずれかが返ることから、A, Bでどちらか有効な値（B優先）を取得する目的として使用することもできます。
     ||	論理和	A||B：A or B の結果を返します。 Aの値を真偽値化した結果、真偽値：はい の場合は、変換前のAを返します。 それ以外の場合は、Bを返します。 これにより、A, Bのいずれかが 真偽値：はい を示す値の場合、真偽値：はい と同等の値を返すとみなすことができます。 最終的にA, Bのいずれかが返ることから、A, Bでどちらか有効な値（A優先）を取得する目的として使用することもできます。
     !	否定	!A：Aの値を真偽値化して、真偽値：はい と いいえ を入れ替えて返します。 例えばAの値が 真偽値：はい と同等である場合は 真偽値：いいえ（false）を返し、真偽値：いいえ と同等である場合は 真偽値：はい（true）を返します。

     コラム

     • 「真偽値化」について

       真偽値化のルールについては、後述の「真偽値化の変換ルール」を参照してください。

   • 比較演算子

     比較演算子

     ==	一致	A==B：AとBが一致する場合は 真偽値：はい（true）を返し、一致しない場合は 真偽値：いいえ（false）を返します。 A, Bの両方が文字列型の場合、文字列で比較します。 上記以外の場合は、A, Bそれぞれ数値化して比較します。
     !=	不一致	A!=B：AとBが一致しない場合は 真偽値：はい（true）を返し、一致する場合は 真偽値：いいえ（false）を返します。 A, Bの両方が文字列型の場合、文字列で比較します。 上記以外の場合は、A, Bそれぞれ数値化して比較します。
     < >	大小比較	A<B：AがBより小さい場合は 真偽値：はい（true）を返し、大きいか一致する場合は 真偽値：いいえ（false）を返します。 A>B：AがBより大きい場合は 真偽値：はい（true）を返し、小さいか一致する場合は 真偽値：いいえ（false）を返します。 いずれもA, Bそれぞれ数値化して比較します。
     <= >=	大小一致比較	A<=B：AがBが小さいか一致する場合は 真偽値：はい（true）を返し、大きい場合は 真偽値：いいえ（false）を返します。 A>=B：AがBが大きいか一致する場合は 真偽値：はい（true）を返し、小さい場合は 真偽値：いいえ（false）を返します。 いずれも最初に 「一致」のルールで比較を行い、不一致判定の場合は「大小比較」のルールで比較を行います。

     コラム

     • 「数値化」について

       数値化のルールについては、後述の「数値化の変換ルール」を参照してください。

   • 三項演算子

     A?B:C：Aの結果によって、BまたはCが選択される演算子です。

     Aを真偽値化した結果、真偽値：はい の場合は、Bを返します。

     Aを真偽値化した結果、真偽値：いいえ の場合は、Cを返します。

     真偽値化の変換ルール

     データなし（null）	真偽値：いいえ（false）
     配列（型は任意）	真偽値：はい（true）
     文字列型：空文字	真偽値：いいえ（false）
     整数型・浮動小数点数型・高精度小数型：0（ゼロ）	真偽値：いいえ（false）
     真偽値型	無変換
     上記以外	真偽値：はい（true）

   • 括弧計算

     各演算子よりも括弧の中が優先され、括弧中に括弧がある場合は最も深い階層を最優先で演算します。

     例えば A+(B*(C+D)) の場合、最初に C+D の演算を行います。

   • 数値化

     +A：Aの結果を強制的に数値として扱うために、数値変換を行います。

     数値化の変換ルール

     データなし（null）	無変換（null）
     配列（型は任意）	配列の件数（要素数）
     文字列型	構文解析して数値に変換（JavaScriptの仕様に準ずる）
     整数型・浮動小数点数型	無変換
     高精度小数型	浮動小数点数に変換
     真偽値：はい（true）	1
     真偽値：いいえ（false）	0
     マップ型	キー数

     コラム

     • 高精度小数の数値化

       式の計算において数値は内部的に高精度小数として扱うため、割り切れない数は「1/3」などの分数表記で取り扱われます。

       常に数値表記（0.33333...）を使用したい場合は、「+（プラス）」を使用して、浮動小数点数に変換してください。

       ただし、桁落ちが発生するため、数値の精度は劣ります。 また、変数と直接マッピングは行わないため、エレメントから変数の書き換えはできません。

     • 演算子との組み合わせ

       演算や比較が含まれる場合は、「=+($variable.foo/$variable.bar)」のように、式全体を括弧で囲んでから「+（プラス）」を付けてください。

   • validate 関数

     validate(A)：変数パスAの入力規則エラーをチェックし、エラーがある場合は true、エラーがない場合は false を返却する関数です。

     入力規則エラーの結果によって、表示・非表示や画面上の色などを動的に切り替える場合に使用すると便利です。

     変数パスAが配列、または、マップ型の場合、配下の全ての変数も含めて入力規則エラーの有無を確認します。

     配列やマップ型自体に入力規則エラーがなくとも、配下の変数に入力規則エラーがある場合は true を返却します。

   • keys 関数

     keys(A)：変数パスAのキーまたはインデックスの配列を返却します。

     keys 関数の返却値

     null	null
     配列（型は任意）	配列の長さ分だけインデックス（0, 1, 2, ...）を取得し、それぞれ文字列化した値の配列
     文字列型	文字列の長さ分だけインデックス（0, 1, 2, ...）を取得し、それぞれ文字列化した値の配列
     マップ型	変数が持つ各キーの配列
     その他	空配列

   • values 関数

     values(A)：変数パスAの値部分の配列を返却します。

     values 関数の返却値

     null	null
     配列（型は任意）	同じ内容の配列
     文字列型	1文字ずつ格納した配列
     マップ型	変数が持つ各要素の配列
     その他	空配列

   • encodeURI 関数

     encodeURI(A)：変数パスAの値を文字列化し、パーセントエンコーディングを行った結果を返却する関数です。

     URLを文字列結合で組み立てる際、変数に記号等が含まれることが想定されている場合、この関数を使用することで正しくブラウザ・サーバ側に解釈されます。

     例えば bloommaker/users/<A> のA部分を変数 $variable.userCd の値に置き換える場合、 ="boommaker/users/"+encodeURI($variable.userCd) と記述することで、ユーザコード部分をエンコードしたパスを生成できます。