出直し!! ドミノ塾: ビューで条件に応じて色を設定する方法

ビューで特定の文書だけを目立たせたいことはよくありますよね。今回は、条件に応じて、ビューの文字や背景色を設定する方法についてまとめます。以下のサンプルビューでは、10000 円以上の商品を赤、1000 円以上の商品を黄色で表示しています。

ビューの色の設定は、列のプロパティの［色で値を表示］を使用して設定します。少々クセのある設定ですので、順に確認しましょう。

初期状態

まず、作業前のビューの確認です。

文字色は、商品名を青、それ以外の項目をグレーで表示しています。ビューの背景は白で、一行おきの色に薄いグレーを設定しています。

単価のフィールド Price の値に応じてビューに色を設定します。

文字色の指定

色を指定する列を一番左に追加します。列式には表示する文字色を決定する式を記述します。

@If(
  Price >= 10000;
    128:0:0;
  Price >= 1000;
    128:128:0;
    ""
)

10000 円以上は赤、1000 円以上は黄色を指定します。色の指定は R G B の順でリスト値で指定します（それぞれ 0 ～ 255）。色を変えない場合は、null 文字列を指定しています。このあたりはいかにも Notes らしいですね。

列のプロパティとしては、［色で値を表示］にチェックを入れ、列を非表示に設定ます。

これで、行全体の文字色が金額に応じて変化します。

背景色の指定

もう少し目立たせたい場合には、背景色を設定することができます。一列目の列式を以下のように変更します。

@If(
  Price >= 10000 ;
255:240:240:128:0:0;
  Price >= 1000 ;
    255:255:240:128:128:0;
    ""
)

色の指定が 6 つのリスト値となっています。この場合、前の 3 つが背景色、後ろの 3 つが文字色として利用されます。この式ではそれぞれ、薄い赤と薄い黄色を背景色として追加して、文字の色はそのままです。

特定の列だけ色を指定

色を指定する列は先頭である必要はありません。例えば 2 列目に移動するとそれ以降の列にだけ反映されます。

商品名の列だけに色を付けたい場合には、商品名の後ろの列でも色を指定します。

今回のビューは後ろの列はすべて、文字がグレーで背景は白なので、試しにその色を指定してみました。

@If(
  Price >= 10000 ;
    255:255:255:128:128:128;
  Price >= 1000 ;
    255:255:255:128:128:128;
    ""
)

すると、ビューの一行ごとの色が "白" に強制されてしまいました。赤の行でわかる通り、縞々の設定が微妙で、文字の背景が白なのに、余白は背景色の薄いグレーです。これでは中途半端で美しくないですね。

これを回避するためには、-1 を指定すると元の色で表示できるようです。

指定した式は次の通りです。

(-1):(-1):(-1):(-1):(-1):(-1)

なお、-1 をそれぞれ ( ) でくくっているのは、符号の演算子であるマイナスより、リスト連結の演算子であるコロンの方が優先順位が高いことから、確実に符号を処理させるためです。

応用技

元の列色で表示する技を応用すると、冒頭のような色設定が可能となります。

具体的には、次のように設定ます。色を指定する列は合計 3 つ作成し、背景色は条件に一致する場合には色を変えます。文字色は商品名だけ色を変え、それ以外の列は列のプロパティの色に従う設定としています。

各 ”(色を値で表示)” 列の式は左から順に以下のように設定します。

@If(
  Price >= 10000 ;
    255:240:240:(-1):(-1):(-1);
  Price >= 1000 ;
    255:255:240:(-1):(-1):(-1);
    ""
)

@If(
  Price >= 10000 ;
    255:240:240:128:0:0;
  Price >= 1000 ;
    255:255:240:128:128:0;
    ""
)

@If(
  Price >= 10000 ;
    255:240:240:(-1):(-1):(-1);
  Price >= 1000 ;
    255:255:240:(-1):(-1):(-1);
    ""
)

こうしておけば、将来、金額やカテゴリの色を変えたくなっても自由に設定できますね。

まとめ

今回はビューで条件に応じて色を設定する方法について、紹介しました。

途中で登場した、-1 を指定して元の色を表示する方法は、デザイナーヘルプやテクニカルサポートに確認して記載したものではありません。きっとインプリされているだろうと思い、トライ＆エラーで確認した結果となります。正しい方法か確認できておりませんので、あらかじめご了承ください。

なお、動作検証は Notes 14.5 を使用して行いました。

出直し!! ドミノ塾