【Bubble】投稿時間からの経過時間を表示する方法！

ノーコードツールBubbleで、投稿時間からの経過時間を様々なフォーマットで表示する方法をご紹介。

以下の要件をBubbleで実現したい方向けの記事内容です！

• 投稿からの経過時間が１分以内の場合は、「１分以内」と表示させたい
• 投稿からの経過時間が１時間以内の場合は、「〇〇分前」と表示させたい
• 投稿からの経過時間が24時間以内の場合は、「〇〇時間前」と表示させたい
• 投稿から24時間経過後は、「〇月〇日」と投稿日を表示させたい
• もしくは、「〇〇日前」や「〇週間前」、「〇ヶ月前」、「〇年前」と表示させたい

上記の分岐はすべて、該当のTextエレメントのConditionalタブで設定します！

投稿からの経過時間が１分以内の場合は「１分以内」と表示させる方法

Current date/time – 〇〇's Creation Date formatted as minutes < 1

投稿からの経過時間が１分以内の場合は「１分以内」と表示させるには、上記のように設定します。

Current date/time（現在時刻）から該当データの作成日時（Creation Date）を引いたものを分（minutes）形式に変換した値が1よりも小さい場合、Textエレメントに表示する文言を「1分以内」にする、というCondition設定です。

投稿からの経過時間が１時間以内の場合は「〇〇分前」と表示させる方法

When（条件）

Current date/time – 〇〇's Creation Date formatted as minutes >= 1
and
Current date/time – 〇〇's Creation Date formatted as minutes < 60

Text（表示）

Current date/time – 〇〇's Creation Date formatted as minutes:floor 分前

投稿からの経過時間が１時間以内の場合は「〇〇分前」と表示させるには、上記のように設定します。

現在時刻から該当データの作成日時を引いたものを先程同様に分形式に変えた値が1以上かつ60未満の場合に、Textエレメントに表示する文言を引き算の結果の小数点を切り捨てた値に「分前」をつけて表示する、という内容のConditionです。

投稿からの経過時間が24時間以内の場合は「〇〇時間前」と表示させる方法

When（条件）

Current date/time – 〇〇's Creation Date formatted as minutes >= 60
and
Current date/time – 〇〇's Creation Date formatted as minutes < 1440

Text（表示）

Current date/time – 〇〇's Creation Date formatted as hours:floor 時間前

投稿からの経過時間が24時間以内の場合は「〇〇時間前」と表示させるには、上記のように設定します。

条件設定部のポイントは、1時間が60分で、24時間は1440分なので上記のような設定になります。

Textエレメントの表示文言の加工のポイントは、先程までは分単位で表示させたかったのでformatted as minutesを使用していましたが、今回は時間単位にしたいのでformatted as hoursを用いている点です！他はおおむね一緒。

投稿から24時間経過後は「〇月〇日」と投稿日を表示させる方法

When（条件）

Current date/time – 〇〇's Creation Date formatted as minutes >= 1440

Text（表示）

〇〇's Creation Date formatted as m月d日

投稿から24時間経過後は「〇月〇日」と投稿日を表示させるには、上記のように設定します。

1440（24時間を分にした数）以上の場合、単純に該当のデータ作成日をformatted asのCustomでm月d日（もしくはyyyy年m月d日）を指定してあげればOKです！

一応おさらいで、m月にすると、5月などの表示になり、mm月にすると、05月のような先頭に0がつく形式で表示できます。日にちも同様に、dd日にすると05日といった表示が可能です。

〇〇日前、〇週間前、〇ヶ月前、〇年前と表示させる方法

最後におまけです。より細かい条件で経過時間の表示を実装したい場合に参考にしてみてくださいませ。

〇〇日前の表示方法

When（条件）

〇〇's Creation Date +days:1 < Current date/time
and
〇〇's Creation Date +days:7 > Current date/time

Text（表示）

Current date/time – 〇〇's Creation Date formatted as days:floor 日前

〇週間前の表示方法

When（条件）

〇〇's Creation Date +days:7 < Current date/time
and
〇〇's Creation Date +months:1 > Current date/time

Text（表示）

((Current date/time – 〇〇's Creation Date) formatted as days / 7):floor 週間前

〇ヶ月前の表示方法

When（条件）

〇〇's Creation Date +months:1 < Current date/time
and
〇〇's Creation Date +years:1 > Current date/time
and
Current date/time:formatted as yyyy is 〇〇's Creation Date:formatted as yyyy

Text（表示）

Current date/time:formatted as m:converted to number – 〇〇's Creation Date formatted as m:converted to number ヶ月前

〇年前の表示方法

When（条件）

〇〇's Creation Date +years:1 < Current date/time

Text（表示）

((Current date/time:formatted as yyyymmdd:converted to number – 〇〇's Creation Date formatted as yyyymmdd:converted to number) / 10000):floor 年前