ビューの行に色をつける

みなさま、こんにちは。
今回の台風21号、なかなか大きな被害をもたらしてくれたようですが、皆様支障ございませんでしたでしょうか。
神戸は夜中3時ころまで、かなり強い風に見舞われ、寝不足で本日を迎えることになりました。
会社のあるポートアイランドは海上ということで、さらに強い風だったようで、樹木が折れて歩道をふさいでいたり、信号が全く違う方向を向いていたりと、復旧には少しかかりそうです。

さて余談が長くなりましたが、先日はビュー列にアイコンを表示する手順を掲載致しました。
今回はビューの行に色をつける機能について、記載致します。

今回は下記のような勤怠に関わるビューについて、内容によって色を分けてみたいと思います。

具体的には、

　遅刻・早退⇒　　文字列　
　直行・直帰⇒　　文字列　
　休暇等　　⇒　　文字列　

設定手順ですが、ビューの先頭に1列追加し、式で色を設定します。
列の列情報にある「色で値を表示」に、詳細タブで「列を非表示」にそれぞれチェックします。

色の指定はRGBの値で行い、以下のように文字色のみ変更する場合と、文字色と背景色の両方を変更する場合があります。

つまりRGBの値が3項目の場合は文字色のみ、6項目になると、前半3項目で背景色、後半3項目で文字色を設定します。

なお背景色のみの設定は不可能ですが、6項目を使い設定は可能です。

それでは実際に先のビューに組み込んでみましょう。
ビューの最初に1列追加し、色で値を表示」「列を非表示」にチェックしてください。

ひとつひとつの色をRGBで指定してもいいのですが、列を汎用的に使用するために、以下のように色の名称を設定します。

red := 255:0:0; blue := 0:0:255; yellow := 255:255:0; green := 0:255:65; white := 255:255:255; black :=  1:1:1; plain:= 0:0:0;

以上で主要な色を定義しました。

もし他の色を使われるようでしたら、同じように追加ください。

あとは列式を@ifで定義するだけです。

3条件をネストしますので、少し長くなりますが、先の定義に続き、下記のように記載してみました。

@If (@Contains(riyuu;"遅刻")|@Contains(riyuu;"早退");yellow:black;@if(@Contains(riyuu;"直");green:blue;@If(@Contains(riyuu;"休");red:yellow;plain)))

以上で先のビューをプリビューしてみましょう。

かなり派手ですね。アイコンもみにくくなってしまいました。

ということで、アイコン部分は色が設定されないようにしてみます。

このビューの場合、「終了日」と「承」の間に列を追加します。

先と同様、「色で値を表示」に、詳細タブで「列を非表示」にそれぞれチェックします。

式には、

255:255:255:255:255:255

と入力し、文字も背景色も「白」に設定します。

以上でプリビューすると、

このようにアイコン部分の背景が白になり、見やすくなります。

つまり色を設定したい列の前に「色で値を表示」設定した列を追加することで、それ以降の列の色が変化することがご理解頂けるかと思います。

これらの列はコピーして他のアプリケーションでも流用できますので、ひとつ作っておけば以降は簡単に設定できるはずです。

さてここからは先日とある方の記事を教えて頂いた内容を実践してみたいと思います。

先日のビューアイコンや、本日の行の色。

実はカレンダービューでも適用されるんです。

ということで、試してみましょう。

先のアプリケーションのカレンダービューは以下のようになっております。

設計は至って簡単で、下記のようになっております。

早速ですが、先に作成したビューの色設定を行った1列目をコピーし、カレンダービューの3列目(名前が表示されている列の前)に追加します。

少し色に違和感がありますね。

それではNotesでプリビューしてみましょう。

このように設定した色でカレンダーが表示されました。

次にビューアイコンを試してみましょう。

先の色設定列の前に1列追加し、「値をアイコン表示」にチェックします。

今回は休みの場合のみアイコンを表示するように、以下の式を設定してみました。

@If(@Contains(riyuu;"休");87;"")

早速ですが、プリビューしてみます。

少し見にくいですが、青丸内に病気っぽい顔アイコンが表示されました。

このように色やアイコンを使うことで、簡単にユーザーにわかりやすいアプリケーションにアップグレードすることが可能です。

弊社では特に注意しなければいけない行等に、背景：黒/文字：黄　といった超目立つ設定を施したものもあります。

もっとも今回は例ですので、もう少しやさしい色にしたほうがいいかと思いますが・・・

ぜひ1列追加して、さらに使いやすいアプリケーションに進化させてください。