AppSheetでタスク管理アプリ（第5回）Format Rulesで文字色を変える

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第4回）は、Dashboard（ダッシュボード）Viewを設定してカンバンボードを作成しました。
今回は、Format Rulesで文字色を変える方法を学びます。
AppSheetではFormat Rulesを使用して文字の書式を設定するので、今回の内容も必須のテクニックです。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

1. AppSheetではFormat Rulesで書式を設定できる

AppSheetでは、Format Rulesという機能で文字の書式を設定したり、先頭にアイコンを追加したりします。
Format Rulesに条件を設定すると、条件に合致したときにAppSheetが文字色やアイコンを変更してくれます。
例えば、

• 重要度が高い案件や期日超過の案件 → 赤で警告したい
• 完了した案件や成立した契約 → 緑で分かりやすくしたい

のような時にFormat Rulesで書式を設定すると、見た目に分かりやすくなります。

タスク管理アプリでは「期日」を各Viewで表示しています。
現在の設定をAppSheetのプレビューで確認すると、期日に書式を設定していないのでぱっと見では分かりにくい感じがしますね。

タスク管理では「期日まであと何日あるか」が気になると思います。
そこで、期日の色を変えることで「期日まであと何日あるか」を可視化しましょう。
ここでは「期日」の書式を

• 期日まで5日以内：「そろそろ期日が近づいていますよ」→ オレンジ＆太字
• 期日当日：「今日が期日ですよ（警告）」→黄色＆太字
• 期日超過：「超過しました！（危険？）」→赤＆太字

にしたいと思います。

2. 「期日まで5日以内」のFormat Rulesを設定する

Format Rules を作成してみましょう。
まずは「期日まで5日以内」のルールを作成します。

AppSheetエディタの左側メニュー「UX」→ タブメニュー「Format Rules」をクリックします。
「New Format Rule」をクリックして新しいルールを作成します。

Format Rules は条件を設定して、条件に合致した場合にルールを適用することができます。
ルールは「If this condition is true」という項目で式を設定します。

「If this condition is true」の三角フラスコアイコンをクリックします。

Expression Assistant が表示されるので、条件式を入力します。
式は、第3回で作成したスライス「期日まで5日以内」の条件式と同じです。
以下の式をコピペして使いましょう。

「期日まで5日以内」の条件式

AND(
 HOUR( [期日] - TODAY() ) / 24 <= 5,
 0 < HOUR( [期日] - TODAY() ) / 24,
 [カンバン] <> "完了"
)

Expression Assistant に入力して「Save」をクリックします。

「期日まで5日以内」のルールを設定しましょう。
各項目は以下のようにします。

• Rule name：「期日まで5日以内」
• For this data：「タスク」
• If this condition is true：上の式
• Format these columns and actions：「期日」と「期日表示用」の2つを選択

Visual FormatとText Formatで書式を設定します。
以下のように設定しました。

• Visual Format → Text color：「orange」
• Text Format → Bold：チェックする

これで「期日まで5日以内」ルールの設定は完了です。
AppSheetのプレビューで確認してみましょう。

3. 「期日当日」のFormat Rulesを設定する

続けて「期限当日」のルールを設定しましょう。
「期限まで5日以内」をコピーすれば簡単に作れます。

「期日当日」の条件式も、第3回で作成したスライス「期日当日」の条件式と同じです。

以下の式をコピペして使いましょう。

「期日当日」の条件式

AND(
 [期日] = TODAY(),
 [カンバン]<> "完了"
)

「期日当日」のルールを設定しましょう。

各項目は以下のようにします。

• Rule name：「期日当日」
• For this data：「タスク」
• If this condition is true：上の式
• Format these columns and actions：「期日」と「期日表示用」の2つを選択

Visual FormatとText Formatで書式を設定します。
以下のように設定しました。

• Visual Format → Text color：「yellow」
• Text Format → Bold：チェックする

「期日当日」のルールを設定しました。
AppSheetのプレビューで確認してみましょう。

4. 「期日超過」のFormat Rulesを設定する

最後に「期限超過」のルールを設定しましょう。
「期限当日」と同じようにコピーします。

「期日超過」の条件式も、第3回で作成したスライス「期日超過」の条件式と同じです。
以下の式をコピペして使いましょう。

「期日超過」の条件式

AND(
 HOUR( [ 期日 ] - TODAY() ) / 24 < 0,
 [カンバン] <> "完了"
)

「期日超過」のルールを設定しましょう。
各項目は以下のようにします。

• Rule name：「期日超過」
• For this data：「タスク」
• If this condition is true：上の式
• Format these columns and actions：「期日」と「期日表示用」の2つを選択

Visual FormatとText Formatで書式を設定します。
以下のように設定しました。

• Visual Format → Text color：「red」
• Text Format → Bold：チェックする

「期日超過」のルールを設定しました。
AppSheetのプレビューで確認してみましょう。

以上、Format Rules を使って条件により「期日」の書式を変更する設定を行いました。
これで「期日まであと何日か」が色の違いによって分かりやすくなりました。
これで「カンバン」と「期日」でタスク管理できるようになりました。

次回（第6回）は、Actionを使って「カンバン」と「進捗」のステータスを変更する方法を学びます。
Actionボタンを使うことでアプリの使い勝手がよくなり、より使いやすいアプリになります。