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

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

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

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

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

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

タスク管理アプリでは「期日」をビュー（View）で表示しています。
アプリエディタのプレビュー画面で確認すると、ぱっと見では分かりにくい感じがします。

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

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

にしたいと思います。

そのために、期日管理用のタスクを数件、追加しておきましょう。
タブメニュー「タスク」を選択して、「+」ボタン（Add）をクリックしてタスクを追加します。
関連ファイルのアップロードは不要です。タスクだけ数件、追加しましょう。

「期日」は、

• 今日の日付の1日前（期日超過用）
• 今日の日付から3日後（期日5日以内用）

の2種類を作っておくとよいと思います。

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

Format Rulesを作成してみましょう。
はじめに「期日超過」のルールを作成します。

アプリエディタ左側メニューのスマホアイコンにカーソルを合わせて、「Format Rules」をクリックします。

Format Rulesナビゲーションの右上にある「+」アイコン（Add Format Rule）をクリックします。

「Create a new format rule」ボタンをクリックします。

メインパネルに新しいルールの設定パネルが表示されます。
はじめに、ルールの名前とルールを適用するテーブルを決めます。

• Rule name：期日超過
• For this data：タスク

Format Rulesでは条件を設定して、条件に合致した場合にルールを適用することができます。
If this condition is trueの入力フィールドをクリックしましょう。

Expression Assistant が表示されるので、条件式を入力します。
以下の式をコピペして使いましょう。

「期日超過」の条件式

この式の意味は、

• 「ステータス」が「完了」ではない、かつ
• 「期日」が今日の日付よりも前（期日超過）

という意味になります。
ステータスが「完了」の場合を除き、期日超過しているタスクが対象になります。

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

Format these columns and actionsは、ルールを適用する列を選択します。
ここでは、「期日」列を選択します。

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

• Text color：red
• Text Format： BoldをON

これで「期日超過」ルールの設定は完了です。

AppSheetのプレビューで確認してみましょう。
「着手前」または「作業中」ステータスのタスクで、「期日」が今日現在よりも前の場合、ルールが適用されて赤字で表示されます。

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

続けて「期日5日以内」のルールを設定します。

「期日超過」を複製して作成しましょう。
メインパネル右上にある3点ドットアイコン（More）をクリック、「Duplicate」をクリックします。

「期日超過」ルールが複製されるので、ルールの名前を変更します。

• Rule name：期日5日以内
• For this data：タスク

If this condition is trueに「期日5日以内」ルールを設定します。
入力フィールドをクリックして、Expression Assistantに以下の式をコピペして使いましょう。

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

この式の意味は、

• 「ステータス」が「完了」ではない、かつ
• 期日が今日の日付と同じかそれ以後、かつ
• 期日が今日の日付から5日以内

という意味になります。
日付計算にHOUR関数を使って、24で割ることで日数の数値計算をしています。

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

Visual Formatを以下のように設定します。

• Text color：yellow

これで「期日5日以内」ルールの設定は完了です。

AppSheetのプレビューで確認してみましょう。
「着手前」または「作業中」ステータスのタスクで、「期日」が今日の日付から5日以内の場合、ルールが適用されて黄色で表示されます。

画面右上の「SAVE」をクリックして設定を保存してください。

 

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

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