· 

AppSheet 使い方 | タスク管理アプリ(第5回)Format Rulesで条件を設定して文字色を変える

Format Rulesで条件を設定して文字色を変える

 

このブログではタスク管理アプリを通じてAppSheetの使い方を学びます。

 

前回(第4回)は、Viewを設定してカンバンボードを作成しました。

今回は、Format Rules を設定することで期日の色を変える方法を学びます。

1. 期日の色を変えたい

 

タスク管理アプリでは「期日」を各Viewで表示しています。

タスク管理では「期日まであと何日あるか」が気になると思います。

現在の設定では分かりにくいので、期日の色を変えることで「期日まであと何日あるか」を可視化しましょう。

 

「期日まであと何日あるか」は現在の設定では分かりにくい。

 

Format Rules で、列の値について文字色や太さなどの書式を設定できます。

ここでは「期日」の書式を

  • 期日まで5日以内:「そろそろ期日が近づいていますよ」→ オレンジ&太字
  • 期日当日:「今日が期日ですよ(警告)」→黄色&太字
  • 期日超過:「超過しました!(危険?)」→赤&太字

にしたいと思います。

 

2. Format Rules を設定する

 

Format Rules を作成してみましょう。

 

 

左側メニュー「UX」→ タブメニュー「Format Rules」をクリックします。

「New Format Rule」をクリックして新しいルールを作成します。

 

 

Format Rules を新規作成する。

期日まで5日以内

 

まずは「期日まで5日以内」のルールを作成します。

 

Format Rules は条件を設定して、条件に合致した場合にルールを適用することができます。

ルールは「If this condition is true」という項目で式を設定します。

 

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

 

「期日まで5日以内」のルールを作成する。

 

Expression Assistant が表示されるので、条件式を入力します。

式は、第3回で作成したスライス「期日まで5日以内」の条件式と同じです。

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

 

 

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

 

AND(

  HOUR( [期日] - TODAY() ) / 24 <= 5,

  0 < HOUR( [期日] - TODAY() ) / 24,

 [カンバン] <> "完了"

)

 

 

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

 

「期日まで5日以内」の条件式を設定する。

 

「期日まで5日以内」のルールを設定しましょう。

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

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

 

ここでは、「期日表示用」の値について書式を設定します。

以下のように設定しました。

  • Visual Format → Text color:「orange」
  • Text Format → Bold:チェックする
「期日まで5日以内」の書式を設定する。

 

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

プレビューで確認してみましょう。

 

「期日まで5日以内」の「期日表示用」の値がオレンジ、太字になる。

期日当日

 

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

「期限まで5日以内」をコピーすれば簡単に作れます。

 

「期日まで5日以内」をコピーする。

 

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

 

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

 

 

【「期日当日」の条件式】

 

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

 

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

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

  • Rule name:「期日当日」
  • For this data:「タスク」
  • If this condition is true:上の式
  • Format these columns and actions:「期日」と「期日表示用」の2つを選択
「期日当日」のルールを設定する。

 

ここでは、「期日表示用」の値について書式を設定します。

以下のように設定しました。

  • Visual Format → Text color:「yellow」
  • Text Format → Bold:チェックする
「期日当日」の書式を設定する。

 

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

プレビューで確認してみましょう。

 

「期日当日」の「期日表示用」の値が黄色、太字になる。

期日超過

 

最後に「期限超過」のルールを設定しましょう。

「期限当日」と同じようにコピーします。

 

「期日超過」の条件式も、第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 color:「red」
  • Text Format → Bold:チェックする
「期日超過」の書式を設定する。

 

「期日超過」のルールを設定しました。

プレビューで確認してみましょう。

 

「期日超過」の「期日表示用」の値が黄色、太字になる。

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。

 

 

以上、Format Rules を使って条件によって「期日」の書式を変更する設定を行いました。

これで「期日まであと何日か」が色の違いによって分かりやすくなりました。

「カンバン」と「期日」でタスク管理できるようになりました。

 

次回(第6回)は、Action によって「カンバン」と「進捗」のステータスを変更する方法を学びます。

Action ボタンを使うことでアプリの使い勝手がよくなり、より使いやすいアプリになります。