今回は、プログレスバー（進捗バー）の作り方を解説していきます。最も簡単なのは、下画像のようなプログレスバーです。
進捗の割合に合わせて、関数を利用して黒い四角形と白い四角形の数を調整しています。また、バーの隣には割合を％形式で追記してありますが、こちらも調整可能です。
四角形以外の図形を用いたり、進捗部分だけ表示することも、もちろん可能です。こちらは四角形の代わりに矢印を用いたプログレスバーです。
このように、少しおしゃれなプログレスバーを作ることもできます。
目次
プログレスバーの作り方
プログレスバーを作るためには、まずはプログレス（進捗）の度合いを示すような数が必要です。通常は％表記するかと思いますが、まずはそれぞれの項目とそれぞれに対する進捗の数字をデータベースに追加しましょう。
次に、進捗の隣に新たな列「プログレスバー」を作ります。＋ボタンから列を追加し、プロパティの種類は「関数」を選択。
関数の中の「編集」をクリックすると、関数を編集する画面に移ります。その画面まで移ったら、以下の数式を入力してください。
slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(prop("進捗") * 10)) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(prop("進捗") * 10)) + " " + format(prop("進捗") * 100) + "%"
実際の画面では、こんな感じ。
そうすると、先ほどのように、四角形でできたプログレスバーが表示されます。
数式の解説
ここでは、数式の意味を少し細かく解説していきます。まず、こちらが関数に入力した数式です。
slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(prop("進捗") * 10)) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(prop("進捗") * 10)) + " " + format(prop("進捗") * 100) + "%"
このうち、最初の
slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(prop("進捗") * 10))
は、スライス関数を利用して▮を調整している数式です。スライス関数は、ある文字列を与えたうえで、その文字列の一部を切り取ることのできる関数です。どこから切り取るのか、何文字分切り取るのかも指定できます。
slice("文字列", 切り取り開始場所, 切り取り終了場所)
こう書いても分かりづらいと思うので、具体例を見てみましょう。
slice("notion", 0,6) = "notion" slice("notion", 0,3) = "not" slice("notion", 0,1) = "n" slice("notion", 0,0) = "" slice("notion", 1,3) = "ot" slice("notion", 3,6) = "ion"
スライス関数含めて関数について詳しくはこちらの記事で解説しています。
https://shknote.com/notion/tutorial/formulas/
またここで、切り取り終了場所の値は
floor(prop("進捗") * 10)
としています。
この関数は、まずprop(“進捗”)で「進捗」の値を取り出しています。ただし、進捗の値は0.33や0.7といった値なので、これを10倍して、3.3や7にしたうえで、floor()によって切り捨てています。
例えばプロジェクトCであれば、進捗は33％。0.33*10の切り捨てで3、この値が切り取り終了位置となっています。切り取り開始位置は0なので、結局最初の3つの四角形が切り取られずに残る計算となります。
slice("▮▮▮▮▮▮▮▮▮▮", 0, 3) = "▮▮▮"
同じ要領で白い四角形についてもスライス関数を応用してあげれば、こちらは10から黒い四角形の数だけ引いてやればよいので、
slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(prop("進捗") * 10))
となります。
また、数式の最後の
" " + format(prop("進捗") * 100) + "%"
はとても簡単。最初の” “はプログレスバーと％表記の間にスペースを開ける意味があります。その後の prop("進捗") * 100) は0.33や0.7などの割合の値を百分率に変換しています。ただし、文字列同士を組み合わせる際に数値があってはいけないので、format()を用いて数値を文字列に変換しています。
プログレスバーをカスタマイズする
矢印にする
関数の数式を以下のように変更します。
slice("⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯", 0, floor(prop("進捗") * 10)) + "⯈" + " " + format(prop("進捗") * 100) + "%"
すると、矢印のプログレスバーになります。
長方形や三角形など、普通に入力してもなかなか出しずらい文字を使いたい場合は、こちらのサイトが便利です。
>>Search for character(s) in Unicode 13.0.0
ドットにする
水平のラインとドットをうまく使えば、一本の線をドットが左右に動いているようにも見せることができます。
slice("⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯", 0, floor(prop("進捗") * 10)) + "●" + slice("⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯", 0, 10-floor(prop("進捗") * 10))+ " " + format(prop("進捗") * 100) + "%"