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

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

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

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

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

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

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

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

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

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

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

    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時間以内の場合は「〇〇分前」と表示させるには、上記のように設定します。

    現在時刻から該当データの作成日時を引いたものを先程同様に分形式に変えた値が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 年前

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      日中繋がりやすい電話番号

      お問い合わせ詳細 ※分かる範囲でご記入ください

      フォームの送信によりGoogleのプライバシーポリシー利用規約に同意したものとみなされます。

      日本最大級のノーコード開発実績!アプリ・システム開発サービス
      「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
      ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
      1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
      著者・監修者
      大熊滉希
      日本最大級のノーコード開発実績を誇るEPICs株式会社の代表。株式会社DRAFT役員として新規事業のコンサルティングに従事した後、EPICsを創業。ノーコード開発の顧問として上場企業に支援も行っている。
      監修者
      石森裕也
      EPICs株式会社CTO。サイバーエージェントのグループ会社での経験を経てEPICsに参画した。これまでで100件以上のノーコード開発に従事。開発経験は10年。
      目次