【Notion】締切までの残り日数を関数でカウントダウンして表示する方法

プランナーの上にコーヒーを入れた白い陶器のマグカップ

今回は、Notionの関数機能を利用して締切などまでの残り日数を表示する方法を解説します。最終的に、このように締め切りの日数を表示すること目指します。お好みで締め切りまでの時間をバーで表示することもできます。

残り日数を表示する方法

まず、このように、締め切り一覧を並べたデータベースをテーブルビューで作ります。

「名前」には締め切りの名前を、タグは、日付に変更して、締め切りの日付を入力します。

そうしたら、その隣に新たなプロパティを「関数」で作ります。

編集をクリックして、以下の数式をコピペします。

dateBetween(prop("締切"),now(),"days")

すると、このように残り日数が表示されるようになります。

関数の解説をすると

dateBetween(date1, date2, unit)

で、date1とdate2をunitの単位で計算する数式となっています。date1に締め切りの日付を、date2にnow()で現在時刻を取得して代入しています。unitは”days”としていますが、お好みで”months”や”minutes”などにすることも可能です。

また、単に残り日数を表示するだけでは味気ないと感じたのであればconcat関数を利用して文字列同士を繋げることで、「締め切りまであと○○日」といった表記にすることも可能です。以下の関数をコピペしてみてください。

concat("締め切りまであと",format(dateBetween(prop("締切"), now(), "days")),"日")

すると、このように、残り日数が文字列の中で表示されるようになります。

Notionは、関数を覚えればいろいろなカスタマイズができるようになります。Notionの関数については、こちらをご覧ください。

Notionの関数(Formula)一覧と使い方

プログレスバーで残り日数を分かりやすくする

このままでも十分分かりやすいとは思いますが、プログレスバーの機能を作って、残り日数を分かりやすく見せることもできます。まずは、作成日時を取得するための新たなプロパティ「作成日時」を作ります(非表示にして構いません)。

「作成日時」プロパティを作れば、新たなデータを追加したときに、追加したときの時刻が自動で追加されます。毎回自動で作成日時を入力しなくてもいいので、便利です。(ただし今回は説明のため、「作成日時」プロパティは使わず、手動で作成日時を入力しています)。

次に、新たな関数のプロパティを作り、以下のコードを入力します。

slice("----------", 0, floor(10 * dateBetween(prop("締切"), now(), "days") / dateBetween(prop("締切"), prop("作成日時"), "days"))) + "●" + slice("----------", 0, 10 - floor(10 * dateBetween(prop("締切"), now(), "days") / dateBetween(prop("締切"), prop("作成日時"), "days")))

そうすると、下画像のように、現時点でタスクが追加されてからどれくらいの時間が経過し、締め切りまでにどれくらいの距離があるのかが可視化されるようになります。

プログレスバーを作るためには、slice関数という関数を使っていまs。今回使った詳しい関数の仕組みについてはこちらをご覧ください。

【Notion】プログレスバー(進捗バー)の作り方

締め切りの順番でデータを並び替える

最後に、ソート機能を利用して締切の順番でデータを並び替えるのがおすすめです。

「並び替え」>「締切」>「昇順」とすると、このように締め切りの早い順番にデータが並び替えられます。

 

 

【Notion】カウンターとカウントダウンのウィジェットを作って埋め込む方法【Indify】

今回は、このようなカウンターやカウントダウンのウィジェットを作成してNotionのページに埋め込む方法を紹介します。

カウンターのウィジェットを埋め込む方法

1 Indifyに行く

ウィジェットを作るためには、Indifyというサービスを使います。登録は無料で、基本の機能は無料で使うことができます。

>>Indify

メールアドレスを入力して、リンクをクリックすれば登録が完了します。

2 カウンターのウィジェットを作る

Indifyにログインしたら、次のような画面になります。作ることのできるウィジェットの一覧が表示されています。Volume 2の中に、CounterとCountdownがあるのが分かります。今回はこの2つを使います。

カウンターを作るためには、まずCounterのカードをクリック。タイトルも適当に決めておきます。特にカスタマイズすべきポイントはないですが、タイトルを表示したい場合は「Counter title」に文字を入力できます。またプラス・マイナスボタンの代わりに矢印を使うこともでき、Preferred iconsから変更できます。

3 リンクをコピーして貼り付ける

サイドバー左下のCOPY LINKのコピーボタンを押して、クリップボードにURLをコピーします。そうしたら、カウンターを埋め込みたいNotionのページを開いて、次のように貼り付けます。

「埋め込みを作成する」を選ぶと、下画像のように、カウンターが表示されます。プラス・マイナスボタンをクリックすると、数字を増減させられます。また「reset」を押すと、数値がリセットされます。

カウントダウンのウィジェットを埋め込む方法

1 Indifyに行く

カウントダウンのウィジェットも、カウンターと同様のやり方で作ることができます。Volume 2 の中のCountdownを今回は選びます。

2 カウントダウンのウィジェットを作成する

先ほどと同様にウィジェットを作成していきます。

まず、左サイドバーの「Event title」に日にちを数えたいイベントや出来事の名前を入力。その下に日付を入力します。

そうすると、このような見た目になります。

これだと分秒まで表示されていて、少しわかりづらいので、年月日表示のオンオフを切り替えます。このように「Day(日)」だけ表示にし、それ以外は非表示にするのがおすすめ。

また、「to go」が余計だと感じたら、その下の「Style」から「Show “ago/togo” text」をオフにしておくのがおすすめ。

すると、このように最終的にはカスタマイズできます。シンプルでいい感じです。

そうしたら、先ほどと同様に左下のリンクをコピーして、貼り付けたいページに貼り付けます。これで、完成です。

【Notion】天気ウィジェットを埋め込む方法【Indify】

今回は、このように、1週間分の天気をページ内に表示するやり方を紹介します。

手順としては、①Indifyというサービスに登録(無料)し、②ウィジェットを作成し、③リンクをNotionのページに埋め込みます。手順はとても簡単です。

天気ウィジェットを埋め込む方法

Indifyに登録する

Indifyは、Notionに埋め込むことのできる様々なウィジェットを作成できるサービスです。

>>Indify.co

メールアドレスを入力して、Sign upを押すとこのような画面になります。

メールアドレスの受信箱を確認して、リンクをクリックすると登録が完了し、ダッシュボード画面に移ります。ダッシュボードの画面はこんな感じ。今回はVolume 1の「Weather」を使います。

ウィジェットを作成する

先ほどのダッシュボードの中から「Weather」を選び、タイトルを入力して作成画面に移ります。初期設定画面ではこのようにサンフランシスコの天気が華氏で表示されています。

これでは使い物にならないので、設定を変更していきます。まずWeather locationをサンフランシスコから東京に変更し、Preferred unitsをMetricに変更します。また、初期設定では5日分の天気しか表示されていないのを、7日分(1週間分)表示できるようにしておくのがおすすめです。

これで基本の設定は完了ですが、いくつかのカスタマイズのオプションも紹介しておきます。下画像のように、サイドバーをスクロールするとSTYLEを変更できます。

Animate iconはデフォルトではオンです。アニメーションをなくしたいバイアは、オフにすればOK。またアイコンにはデフォルトでカラーがついていますが、グレー(モノクロ)にしたい場合は、Greyscale iconsをオンにします。その他の設定は基本的にはデフォルトのままでOK。

ウィジェットのリンクを埋め込む

左サイドバーの一番下から、埋め込み用のリンクがコピーできます。このURLをコピーします。

あらかじめ作っておいたNotionのページに行き、URLをペーストします。その際に、「URLをそのまま貼り付ける」ではなく「埋め込みを作成する」を選択。

すると、下画像のように、先ほど作った天気のウィジェットがNotionのページに埋め込まれています。

このままだと配置のバランスが悪いので、少し調整してあげるとこんな感じになります。

これで、天気のウィジェットの埋め込みが完了しました。

【簡単】Notionの目次の作り方【カスタマイズ付き】

今回は、Notionで目次を作る方法を解説していきます。目次の作り方はとても簡単で、あらかじめ用意されているブロックを呼びだせばすぐに出来上がります。しかし、デフォルトの目次デザインはとても地味なので、最終的にはこちらのような、よくブログやWebサイトにありそうな目次を作ることを目指します。

目次の作り方の基本

まずは、新しいページを作成します。見出し1,見出し2,見出し3のすべてがあるようなページを想定してください。

このようなページの目次を作りたい場合は、一番上の行(タイトルと大見出し1の間の行)にスペースを開け、/table of contentsと入力。そうすると、目次を表示させるオプションがあります。

そこから「目次」をクリック。すると、目次が自動で生成されます。

目次をおしゃれにするカスタマイズ

このままでは目次があまりにも地味なので、少しカスタマイズを加えることをおすすめします。

コールアウトを利用した目次カスタマイズ

/call outから、コールアウトを作ります。

アイコンを、電球から目次っぽいものに変更しましょう。デフォルトではあまりいいものがないので、flaticon.comへ行き、良さそうなアイコンを探します。

>>flaticon.com

こんなものが見つかりました。目次っぽくて、良さそうです。

アイコンを右クリックして、画像のアドレスをコピー。コピーしたものをアイコンに貼り付けて、このような感じになりました。使用したアイコンはこちら

このコールアウトの部分に、目次全体を動かすと、こんな感じになります(太字で「目次」とも書いておきます)。これで、目次としての体裁は整っています。

トグルリストを利用した目次カスタマイズ

先ほど作ったコールアウトの「目次」の文字をクリックして、「ブロックタイプの変換」から「トグルリスト」を選択します。すると、開いた状態ではこうなります。

トグルリストを閉じた状態だと、こうなります。どちらにしてもよさそうです。

引用を利用した目次カスタマイズ

コールアウトの代わりに、引用のブロックを利用することもできます。その場合、このようになります。

目次をサイドバーに設置するカスタマイズ

サイトを2カラムにすることで、目次をサイドバーに設置することもできます。こんな感じになります。

作り方は簡単で、目次の引用ブロックまたはコールアウトブロック全体を左側のカラムに、本文全体を右側のカラムにドラッグするだけ。個人的には目次はこのようにサイドバーに置くのが非常に見やすくておすすめです。

【Notion】Mermaidを使ったフローチャートの作り方

Notionでは、Mermaidを利用して簡単にフローチャート作ることができます。Mermaidの機能は本当に豊富で、この記事には収めようと思っても収まりません。Mermaidについてもっと学びたいという方は、公式のドキュメントを読んでみてください。

>>About Mermaid

今回は、Mermaidを利用してこのような簡単なフローチャートを作る方法を紹介していきます。

Mermaidを入力する方法

新しいページが容易できたら、まずはコードスニペットを表示させます。

左上からプログラミング言語を選択するのですが、ここではMまで下がって「Mermaid」を選びます。

Mermaidを選んだら、このようなスニペットになります。

コードの編集はここから行っていきます。

フローチャートの作り方

フローチャートを作るのはとても簡単です。試しに、こちらのコードを打ってみます。

flowchart LR
T(東京)-->O(大阪)

すると、こんな感じで簡単に枠と矢印が表示されます。

コードの解説を加えると、flowchart LRは「左から右のフローチャートを書く」という意味です。T(東京)で東京、O(大阪)で大阪を表示させています。もうTとOはそれぞれ名前が定義されていますので、これから先に使いまわすことがあれば、単にTやOと略して書くことができます。

flowchart LR
T(東京)-->O(大阪)
O-->H(博多)

%% または %%

flowchart LR T(東京)-->O(大阪)-->H(博多)

すると、こんな感じ。3都市が矢印で繋がれます。

また、今回は左から右に書きたかったためflowchart LRとしましたが、右から左に書きたければ、florchart RLとすればOK。

東から西に動くという意味で、今回はこちらの方が自然かもしれません。

さて、ここまでの知識を応用して、もう少ししっかりしたフローチャートを作ってみましょう。こちらのコードをコピーして、ペーストしてみてください。

flowchart TB
S(開始)-->P(処理)-->D(判断)
D-->P1(処理A)-->F(終了)
D-->P2(処理B)-->F

すると、上から下に流れる、このようなフローチャートができあがります。Dから2つの分岐を作っているほか、TB(Top to bottom)を指定しているのが特徴です。

このままでは味気ないので、もう少しカスタマイズしていきます。まずは判断の後で、「はい」なら処理A、「いいえ」なら処理Bに進めるようにします。そのために、処理AとBの直前にコメントを追加します。

flowchart TB
S(開始)-->P(処理)-->D(判断)
D-->|はい|P1(処理A)-->F(終了)
D-->|いいえ|P2(処理B)-->F

すると、このようにコメントが追加されます。

枠の形を変更することもできます。

flowchart TB
S([開始])-->P(処理)-->D{判断}
D-->|はい|P1(処理A)-->F([終了])
D-->|いいえ|P2(処理B)-->F

すると、このように枠の形が変わります。

枠の形ですが、よく使われるものはこの8つでしょう。

P(処理)
P[処理]
P{処理}
P((処理))
P[[処理]]
P{{処理}}
P([処理])
P[(処理)]

色を付けることもできます。まずclassDefで色をコードで指定します。

flowchart TB
classDef blue fill:#87CEEB
S([開始])-->P(処理)-->D{判断}:::blue
D-->|はい|P1(処理A)-->F([終了])
D-->|いいえ|P2(処理B)-->F

すると、こんな感じで枠を塗りつぶすことができます。

フローチャートの応用

矢印を通常の直線に変えれば、系統樹のようなものを作ることができます。次のコードを試してみてください。

flowchart LR
I(印欧祖語)---G(ゲルマン語系)
I---L(ラテン語系)
L---S(スペイン語)
L---P(ポルトガル語)
L---IT(イタリア語)
L---F(フランス語)
G---WG(西ゲルマン語群)
WG---GE(ドイツ語)
WG---D(オランダ語)
G---NG(北ゲルマン語群)
NG---SW(スウェーデン語)
NG---DE(デンマーク語)

すると、このようにヨーロッパの言語の系統樹を作ることができます。

作成したフローチャートを使う

コードスニペットの左上をクリックして、表示方法を「分割」から「プレビュー」に変更します。

すると、フローチャート全体が綺麗に見えるようになります。

また、それぞれのブロックにリンクを設定することも可能です。試しに、下記のコードを追記してみましょう。

click D "https://google.com"

すると、「判断」をクリックしたときに指定したURL先にジャンプルするようになっています。今回は個別のページは作りませんでしたが、この機能を活用する場合は、個別のデータベースを作ってリンクで飛ばす形になると思います。

Notionの関数(Formula)一覧と使い方

Notionのデータベースでは、関数を入力することができます。+ボタンから新たなプロパティを追加し、「プロパティの種類」で「関数」を選びます。

関数を編集する際は、「編集」をクリックすると編集画面に移ることができます。

最も基本的な関数

prop()

propはproperty(プロパティ)の略です。prop()でプロパティの名前を指定すれば、そのプロパティを呼び出せます。

prop("点数")

データタイプを変換する関数

format()

数値、真理値、日付を文字列に変換する関数です。

format(3) = "3"

toNumber()

真理値、日付、文字列を数値に変換する関数です。

format("3") = 3

formatDate()

日付の表示方法を変えることのできる関数です。

now() = 2022年7月11日 午後 11:44

formatDate(now(),"YYYY年M月D日HH時mm分") = 2022年7月11日23時44分

formatDate(now(), "YYYY/MM/DD hh:mm A") = 2022/07/11 11:44 PM

論理関数

trueかfalseを返す関数です。最も分かりやすい使い方はチェックボックスへの応用です。チェックボックスは命題がtrueであればチェックがつき、falseであればチェックが外れます。

and(), or()

and()は、2つの引数の論理積を求める関数です。2つの引数がともに真である場合にTrueを、そうでない場合にはFalseを出力します。

and( 1 == 1, 2 == 2 ) = true

and( 1 == 1, 2 == 3 ) = false

and( 1 == 2, 2 == 3 ) = false

or()は、2つの引数の論理和を求める関数です。どちらかの引数が真である場合にTrueを出力します。

or( 1 == 1, 2 == 2 ) = true

or( 1 == 1, 2 == 3 ) = true

or( 1 == 2, 2 == 3 ) = false

empty()

値が空白であるかをテストします。

empty("") = true

empty("notion") = false

equal(), unequal()

equal()は、2つの引数が同じであるかをテストする関数です。

equal("notion","notion") = true

equal("notion","hello") = false

equal(1,1) = true

equal(1,2) = false

unequal()はその逆で、2つの引数が異なる場合にtrueを出力します。

equal("notion","notion") = false

equal("notion","hello") = true

equal(1,1) = false

equal(1,2) = true

if()

条件式を作る関数です。

if(条件,条件が正しい時の分岐 , 条件が正しくないときの分岐)

if(1==1, "○", "×") = "○"

if(1==2, "○", "×") = "×"

実際には、このような感じで条件分岐をします。点数が80点以上であれば合格、そうでなければ不合格と出力されます。prop(“点数”)は、「点数」という列の値を取得するための数式です。

if(prop("点数") >= 80, "合格", "不合格")

「条件が正しい時」「正しくない時」に、さらに条件分岐を付け加えることもできます。例えばテストの点数に応じて「優」「良」「可」と条件分岐させたいときは、このようにします。

if(prop("点数") >= 80, "優", if(prop("点数") >= 60, "良", "可"))

上の数式では、まず点数が80点以上であるかを判定し、そうであれば「優」を出力します。もし点数が80点未満であれば、次の条件分岐に移ります。もし点数が60点以上であれば「良」が出力され、もしそれも満たすことができなければ「可」が出力される仕組みになっています。

数値を操作する関数

add()

与えられた数値の和を求めます。

add(2,3)  = 5

subtract()

与えられた数値の差を求めます。1番目の引数から2番目の引数を引いた値です。

add(2,3)  = -1

add(3,2)  = 1

multiply()

与えられた数値の積を求めます。

multiply(2,3) = 6

divide()

divide(割られる数, 割る数) = 商

divide(8,2) = 4

round()

四捨五入の関数です。最も近い整数に丸められます。

round(1.28) = 1

ceil(), floor()

ceil()は与えられた数値の切り上げを、floor()は与えられた数値の切り捨てをする関数です。

ceil(1.2) = 2

ceil(1.2) = 1

max(), min()

max()は与えられた引数の中で最大のものを、min()は最小のものを出力する関数です。

max(1,3,5,7,9) = 9

min(1,3,5,7,9) = 1

mod()

余りの値を求めます。

mod(割られる数, 割る数) = あまり

mod(4, 3) = 1

mod(4, 2) = 0

abs()

与えた数値の絶対値(absolute value)を返します。

abs(-10) = 10

abs(10) = 10

pow()

1番目の引数の2番目の引数乗を求めます。

pow(2,3) = 8

sqrt()

与えられた数値の平方根を求めます。

sqrt(1) = 1

sqrt(4) = 2

sqrt(9) = 3

cbrt()

与えられた数値の立方根を求めます。

cbrt(1) = 1

cbrt(8) = 2

exp()

自然対数eの数値乗を求めます。

exp(0) = 1

exp(1) = 2.718...

exp(2) = 7.389...

ln()

自然対数を取る関数です。

ln(1) = 0

ln(2) = 0.693...

log2(), log10()

それぞれ2と10を真数に持つ対数の値を計算します。

log2(8) = 3

log10(100) = 2

sign()

符号の正負を求める関数です。正であれば1を、負であれば-1を、0であれば0を返します。

sign(8) = 1

sign(-8) = -1

sign(0) = 0

テキストを操作する関数

concat()

テキスト同士をつなぎ合わせる関数です。

concat("こん"+"にち"+"は"+"!") = "こんにちは!"

contains()

1番目の引数の文字列に2番目の引数の文字列が含まれているかどうかを判定します。

contains("おはようございます", "は") = true

contains("東京都港区", "神奈川県")  = false

join()

テキスト同士を指定した連結文字列を使ってつなぎ合わせる関数です。concat()と似ていますが、連結文字列を指定できる点が異なります。

join(" ", "My", "name", "is", "John.") = My name is John.

join(",", "リンゴ", "バナナ", "ミカン") = リンゴ,バナナ,ミカン

len()

テキストの長さを数えます(スペース含む)。

len("こんにちは") = 5

len("Hong Kong") = 9

replace()

文字列の一部を置換する関数です。

replace(文字列, 置換前の文字列, 置換後の文字列)

replace("私は東京都出身です", "東京都", "大阪府") = "私は大阪府出身です"

置換前の文字列と一致するものが複数ある場合は、一番最初に出てくる文字列のみが置換の対象となります。

replace("青森県・秋田県・山形県", "県", "市") = "青森市・秋田県・山形県")

replaceAll()

文字列中のすべての文字列を置換の対象にしたい場合は、replace()ではなくreplaceAll()を用います。使い方はreplace()と同様ですが、一致するすべての文字列が置換されます。

replaceAll("青森県・秋田県・山形県", "県", "市") = "青森市・秋田市・山形市")

slice()

文字列を切り取ってくれる関数です。

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"

日付を操作する関数

now()

現在の日時を出力します。

now() = 2022年7月11日 午後 11:44

dateAdd()

日時の足し算をする関数です。1番目の引数で開始日時を、2番目の引数で足し算したい時間を、3番目の引数でその単位を指定します。単位は複数形でなければいけない点に注意。

dateAdd(開始日時, 足したい時間, 足したい時間の単位)

now() = 2022年7月11日 午後 11:44

dateAdd(now(), 1, "minutes") = 2022年7月11日 午後 11:45

dateAdd(now(), 1, "hours") = 2022年7月12日 午前 0:44

dateAdd(now(), 1, "days") = 2022年7月12日 午後 11:44

dateAdd(now(), 1, "weeks") = 2022年7月18日 午後 11:44

dateAdd(now(), 1, "months") = 2022年8月11日 午後 11:44

dateAdd(now(), 1, "years") = 2023年7月12日 午後 11:44

dateSubtract()

日時の引き算をする関数です。基本的な仕組みはdateAdd()と同様です。

dateAdd(開始日時, 引きたい時間, 引きたい時間の単位)

now() = 2022年7月11日 午後 11:44

dateAdd(now(), 2, "months") = 2022年5月11日 午後 11:44

dateBetween()

1番目の引数と2番目の引数の与えられた日時の差を計算します。単位は3番目の引数で指定します

dateBetween(prop("現在日時"), prop("作成日時"), "minutes") = 35

dateBetween(prop("現在日時"), prop("作成日時"), "seconds") = 2100

minute()

分を出力します。

now() = 2022年7月11日 午後 11:44

minute(now()) =44

hour()

時間を出力します。

now() = 2022年7月11日 午後 11:44

hour(now()) =11

date()

日を出力します。

now() = 2022年7月11日 午後 11:44

date(now()) =11

day()

曜日を出力します。日曜日が0で、土曜日が6となっています。

now() = 2022年7月11日 午後 11:44

day(now()) = 1

day(dateAdd(now(),5,"days")) = 6

month()

月を出力します。1月が0、12月が11となっているので、1つ数値がずれる点には注意。

now() = 2022年7月11日 午後 11:44

month(now()) =6

year()

年を出力します。

now() = 2022年7月11日 午後 11:44

year(now()) =2022

timestamp()

タイムスタンプを返します。

now() = 2022年7月11日 午後 11:44

timestamp(now()) = 1657594980000

start(), end()

範囲のある日時データの、開始日時と終了日時をそれぞれ取得します。

prop("期間") = 2022年7月10日 → 2022年7月12日

start(prop("期間")) = 2022年7月10日

end(prop("期間")) = 2022年7月12日

【Notion】プログレスバー(進捗バー)の作り方

今回は、プログレスバー(進捗バー)の作り方を解説していきます。最も簡単なのは、下画像のようなプログレスバーです。

進捗の割合に合わせて、関数を利用して黒い四角形と白い四角形の数を調整しています。また、バーの隣には割合を%形式で追記してありますが、こちらも調整可能です。

四角形以外の図形を用いたり、進捗部分だけ表示することも、もちろん可能です。こちらは四角形の代わりに矢印を用いたプログレスバーです。

このように、少しおしゃれなプログレスバーを作ることもできます。

プログレスバーの作り方

プログレスバーを作るためには、まずはプログレス(進捗)の度合いを示すような数が必要です。通常は%表記するかと思いますが、まずはそれぞれの項目とそれぞれに対する進捗の数字をデータベースに追加しましょう。

次に、進捗の隣に新たな列「プログレスバー」を作ります。+ボタンから列を追加し、プロパティの種類は「関数」を選択。

関数の中の「編集」をクリックすると、関数を編集する画面に移ります。その画面まで移ったら、以下の数式を入力してください。

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"

スライス関数含めて関数について詳しくはこちらの記事で解説しています。

Notionの関数(Formula)一覧と使い方

またここで、切り取り終了場所の値は

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) + "%"