AppSheetで爆速ノーコードアプリ開発 その６ - Format Rulesで画面を装飾する

カカト@ノーコード開発推しです。

「AppSheetで爆速ノーコードアプリ開発」と題して、ノーコードアプリ開発ツール 「AppSheet」の基本的な使い方の説明を連載形式で投稿しています。

前回、検温結果の一覧画面を作りましたが、見た目が味気ないのでAppSheetのFormat Rulesという機能を使い、画面に表示されるデータに少し装飾を付けたいと思います。

それでは早速実装していきましょう。

Format Rulesとは？

Format Rulesを使うことで、レコード行やデータに対し文字を大きくしたり、色を変えたりすることができます。

”Rules"という名前の通り、AppSheetの関数を使ってルール（条件）を作成すると、その条件に一致したものに対して定義したフォーマット適用してくれます。

見た方が早いので、早速ルールを作ってみましょう。

検温履歴の"調子"のFormat Ruleを作る

検温履歴の "調子" に対してルールを作っていきます。

まずはAppSheetの「UX」メニューをクリックし、「Format Rules」タブをクリックします。

New Format Ruleをクリックします。

ルール作成の画面が表示されるので、以下の内容で入力していきます。

・Rule name：調子（良好）
・For this data：検温履歴
・If this condition is true： = [調子] = "良好"
・Format these columns and actions : 調子

解説すると、調子（良好）というルール名で、"検温履歴"表の"調子"列に対し、値が "良好" だった際のルールを定義しています。

続いて下にスクロールし、「Visual Format」→「Icon」 に、"smile" のアイコンを検索してクリックします。

併せて、Highlight colorとText colorに青を選択します。

検温履歴の一覧を表示してみると、調子列の値の表示が以下のように変わりました。
※調子が良好以外を選択している場合は変わりませんので、データ追加するなどしてみてください。

これで、調子に"良好"が選択されたときのルールとフォーマットの作成は完了です。

簡単ですね。

"少し悪い"、"かなり悪い"にも同様にルールを作成していきましょう。

今作ったルールに表示されている、「Copy」ボタンをクリックします。

すると、"調子（良好）"のルールがコピーされ新しいルールが作成されますので、各項目を以下で入力します。

・Rule name：調子（少し悪い）
・For this data：検温履歴
・If this condition is true： = [調子] = "少し悪い"
・Format these columns and actions : 調子

Visual FormatのIconには、"frown"のアイコンをセットし、Highlight colorとText colorにはオレンジをセットします。

同じように、調子（かなり悪い）も作成しましょう。

Iconや色は以下としました。

はい、これで調子のFormat Rule作成は完了です。

検温履歴の調子の表示が、Format Ruleに設定した内容で表示されるか確認してください。

検温履歴の"体温"が37.5度以上の場合のFormat Ruleを作る

次に、体温の方もルール作成してみます。

体温が37.5度以上の場合は目立つようにしたいので、以下の内容でFormat Ruleを新規作成してください。

・Rule name：体温が37.5以上
・For this data：検温履歴
・If this condition is true： = [体温] >= 37.5
・Format these columns and actions : 体温

フォーマットですが、Iconは設定せず、Text colorを赤にして、「Text Format」→「Text size」を1.5（倍）、「Bold」をONにしてみます。

このあたりでSAVEしておきましょう。

さて、表示が変わったか見てみると、

体温が38度ですので、37.5度を超えたため表示が変わったのが確認できました。

試しに、37.5度未満で入力してみると、

Format Ruleが適用されないことも確認できました。

Format Rulesですが、App関数を使うことで色々なパターンの条件とそれに応じた装飾をすることができますので、上記であげた例以外も試してみてください。

次回予告

次回の投稿は以下の内容を予定しています。

・Slice機能を使い、データを絞り込み表示する

最後までお読みいただき、ありがとうございました。