プログレスバーを表示するには?: Notion Formula 解説 (36)

はじめに

Notion Formula の第36回目は、「プログレスバーを表示するには?」を解説します。プログレスバー自体は数値プロパティに用意されましたが、いまだに文字で作成するプログレスバーは人気です。この例については、こちらの逆引きで紹介しています。

○と●

最も簡単な○と●のプログレスバーは以下のようになります。rate を10倍して floor で切り捨てることで、99% でも全てが黒にならないようにしています。Formula 2.0 から追加された repeat メソッドのおかげで、substring を使う必要がなくなりました。

/* rate の値を10段階の数値に変換し、変数 x に代入 */
let(x, floor(prop("rate") * 10), 
 /* x 個の黒丸と 10-x 個の白丸を連結 */
 "●".repeat(x) + "○".repeat(10 - x)
)
rate rate * 10 x "●".repeat(x) "○".repeat(10 - x) 最終
0 0 0 ○○○○○○○○○○ ○○○○○○○○○○
0.09 0.9 0 ○○○○○○○○○○ ○○○○○○○○○○
0.1 1 1 ○○○○○○○○○ ●○○○○○○○○○
0.2 2 2 ●● ○○○○○○○○ ●●○○○○○○○○
0.3 3 3 ●●● ○○○○○○○ ●●●○○○○○○○
0.4 4 4 ●●●● ○○○○○○ ●●●●○○○○○○
0.5 5 5 ●●●●● ○○○○○ ●●●●●○○○○○
0.6 6 6 ●●●●●● ○○○○ ●●●●●●○○○○
0.7 7 7 ●●●●●●● ○○○ ●●●●●●●○○○
0.8 8 8 ●●●●●●●● ○○ ●●●●●●●●○○
0.9 9 9 ●●●●●●●●● ●●●●●●●●●○
0.99 9.9 9 ●●●●●●●●● ●●●●●●●●●○
1 10 10 ●●●●●●●●●● ●●●●●●●●●●

色付け

レベルに応じて●の色を変えた例です。7以上で緑、5以上で黄色、それ以下は赤になります。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って丸の色を選択し、変数 s に代入 */
 s, ifs(x >= 7, "🟢", x >= 5, "🟡", "🔴"),
   /* x 個の s と 10-x 個の白丸を連結 */
   s.repeat(x) + "○".repeat(10 - x)
)
rate rate * 10 x 最終
0 0 0 ○○○○○○○○○○
0.09 0.9 0 ○○○○○○○○○○
0.1 1 1 🔴○○○○○○○○○
0.2 2 2 🔴🔴○○○○○○○○
0.3 3 3 🔴🔴🔴○○○○○○○
0.4 4 4 🔴🔴🔴🔴○○○○○○
0.5 5 5 🟡🟡🟡🟡🟡○○○○○
0.6 6 6 🟡🟡🟡🟡🟡🟡○○○○
0.7 7 7 🟢🟢🟢🟢🟢🟢🟢○○○
0.8 8 8 🟢🟢🟢🟢🟢🟢🟢🟢○○
0.9 9 9 🟢🟢🟢🟢🟢🟢🟢🟢🟢○
0.99 9.9 9 🟢🟢🟢🟢🟢🟢🟢🟢🟢○
1 10 10 🟢🟢🟢🟢🟢🟢🟢🟢🟢🟢

月の満ち欠け

こちらは色ではなく、月の満ち欠けの絵文字に変えたものです。

lets(
 /* rate の値を10段階の数値に変換し、変数 x に代入 */
 x, floor(prop("rate") * 10),
 /* x の値に従って丸の色を選択し、変数 s に代入 */
 s, ifs(x == 10, "🌕", x >= 7, "🌔", x >= 4, "🌓", "🌒"),
   /* x 個の s と 10-x 個の新月を連結 */
   s.repeat(x) + "🌑".repeat(10 - x)
)
rate rate * 10 x 最終
0 0 0 🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.09 0.9 0 🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.1 1 1 🌒🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.2 2 2 🌒🌒🌑🌑🌑🌑🌑🌑🌑🌑
0.3 3 3 🌒🌒🌒🌑🌑🌑🌑🌑🌑🌑
0.4 4 4 🌓🌓🌓🌓🌑🌑🌑🌑🌑🌑
0.5 5 5 🌓🌓🌓🌓🌓🌑🌑🌑🌑🌑
0.6 6 6 🌓🌓🌓🌓🌓🌓🌑🌑🌑🌑
0.7 7 7 🌔🌔🌔🌔🌔🌔🌔🌑🌑🌑
0.8 8 8 🌔🌔🌔🌔🌔🌔🌔🌔🌑🌑
0.9 9 9 🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
0.99 9.9 9 🌔🌔🌔🌔🌔🌔🌔🌔🌔🌑
1 10 10 🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕

月の満ち欠け(グラデーション)

月のグラデーションに合わせて、20文字の文字列を作成しています。計算した x の場所から10文字ぶんだけ取得することで、グラデーションを示す10文字の数値列を得ます。その後、それぞれの数値に対応する月の絵文字に変換します。これは絵文字の文字列に対して substring がうまく切り出しができないためです。

/* rate の値を10段階の数値に変換し、変数 x に代入 */
let(x, floor(prop("rate") * 10),
 /* 連結した文字列から該当する部分を切り出し */
 "00000000001112223334".substring(x, x + 10)
 /* 各数値を月の状態に置き換え */
 .replaceAll("0", "🌑")
 .replaceAll("1", "🌒")
 .replaceAll("2", "🌓")
 .replaceAll("3", "🌔")
 .replaceAll("4", "🌕")
)
rate rate * 10 x 切り出した数値 最終
0 0 0 0000000000 🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.09 0.9 0 0000000000 🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
0.1 1 1 0000000001 🌑🌑🌑🌑🌑🌑🌑🌑🌑🌒
0.2 2 2 0000000011 🌑🌑🌑🌑🌑🌑🌑🌑🌒🌒
0.3 3 3 0000000111 🌑🌑🌑🌑🌑🌑🌑🌒🌒🌒
0.4 4 4 0000001112 🌑🌑🌑🌑🌑🌑🌒🌒🌒🌓
0.5 5 5 0000011122 🌑🌑🌑🌑🌑🌒🌒🌒🌓🌓
0.6 6 6 0000111222 🌑🌑🌑🌑🌒🌒🌒🌓🌓🌓
0.7 7 7 0001112223 🌑🌑🌑🌒🌒🌒🌓🌓🌓🌔
0.8 8 8 0011122233 🌑🌑🌒🌒🌒🌓🌓🌓🌔🌔
0.9 9 9 0111222333 🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
0.99 9.9 9 0111222333 🌑🌒🌒🌒🌓🌓🌓🌔🌔🌔
1 10 10 1112223334 🌒🌒🌒🌓🌓🌓🌔🌔🌔🌕

おわりに

今回は「プログレスバーを表示するには?」を解説しました。数値のプログレスバーができてからわざわざここまでする人は少なくなりました。しかし、見た目のインパクトが大きいので好きで使っている人はまだいるようです。