Bubble ブログ

Bubbleの日付範囲から日付リストを作成し、平日と休日の日数を数える方法

masahide

フィンランドへの移住を目指し、場所に縛られない働き方を模索中していたところ、NoCodeCampに出会い、朝活イベント毎日開催しています。 2022年3月よりコミュニティマネージャーとしてイベント運営にも携わっています。

スポンサーリンク

前提条件

前提条件

  • Bubbleのアカウント登録ができている
  • WorkFlowやCustomStateなどの操作が理解できる
  • ListShifterプラグインを触ったことがある

この章で学べること

この章で学べること

  • 日付データの扱い方
  • 曜日の取得方法
  • ListShifterの使い方

作るもの

ホテル予約などで使用する平日と休日によって値段が変わる場合に範囲内の平日の数と休日の数を表示できるアプリになります。

動作フロー解説

  1. 開始日と終了日の入力
  2. ボタン押下で1の範囲内の日付データをリスト化
  3. リスト化した日付データを平日と休日に仕分け
  4. 仕分けた個数を表示

Bubbleで実装

以下の順番で実装していきます。

  1. プラグインの導入
  2. CustomStateの作成
  3. フロントの作成
  4. 繰り返し検索機能追加

ListShifterプラグインのインストール

PluginタブのAddPluginからList Shifterをインストールします。

「list shifter」と検索し、installボタンを押下

これで今回の要である繰り返し機能に使うListShifterのインストールが完了しました。

CustomStateの作成

今回のアプリは保存機能がないので、データベースではなく、CustomStateに仮保存し表示するだけになります。

CustomStateは一番大外のGroupもしくはPageに作成すると、どこに行ったか分からなくなることがありません。

今回は大外のGroupに作成することにします。

以下のリストや写真を参考に作成してみてください。

作成するCustomState

  • date_list = date(list):日付範囲から取得したリストを保存する
  • holiday_count = number:休日の日数
  • kari_date = date:平日・休日を判別するための仮置き用
  • week_count = number:平日の日数

 

フロント側の作成

今回は機能メインなので、デザインは個々のお好きなデザインで構築してみてください。

必要Elements

  • 開始日付用Date/TimePicker
  • 終了日付用Date/TimePicker
  • トリガー用のButton
  • 平日、休日表示用のテキスト×2
  • 取得日付リストを表示するRepeatingGroup

ListShifterの設置

ListShifterKWを2つ設置しましょう

1つ目のListShifterの設定(日付リストの作成用)

それでは範囲データから日付をリスト化する処理を作成します。

  • Date Type of ListはNumber型:ListShifterKWの返すデータは数値を指定
  • Make a Numeric List = Yes:任意のステップ数の反復処理を行うため
  • Number of item = 添付画像参照(終了日ー開始日+1日=処理回数)
  • Start at =処理を開始する数値
  • Increment by =数値間隔

これで何ができるかというと、日付データの範囲から日数を取得し、その回数分開始日に+1してリストに保存します。

つまり、1月1日〜1月10日の範囲だった場合は以下のフローのように動きます。

ListShifterフロー①

  1. 1月10日 - 1月1日 + 1 = 1
  2. 以下の日付をリストに追加
    1回目:1月1日+0日=1月1日
    2回目:1月1日+1日=1月2日
    .
    .
    .
    10回目:1月1日+9日 = 1月10日

 

2つ目のListShifterの設定(平日と休日の仕分け用)

  • Date Type of Listはdate型:ListShifterKWの返すデータは日付を指定
  • List to shift:1つ目のListShifterで取得した日付リストを指定
  • Start at =処理を開始する数値
  • Increment by =数値間隔

1つ目のListShifter分処理を回しているだけなので、詳しくはWorkFlow説明時に解説します。

WorkFlowの作成

最後にWorkFlowの作成をします。

ボタンクリック後のフローは以下のようになっています。

アクションフロー

  1. 日付範囲データをリストに保存
  2. リストデータを平日と休日に仕分け

文章にすると簡単ですが、少し処理が複雑なので、画像多めで解説します。

日付範囲データをリストに保存

Step1.set stateから仮データに開始日付+List ShifterKWを加算しkari_dateに格納

Step2.kari_dateに格納した日付をリストに保存

※処理を分ける理由は、CustomStateに保存する際に計算できないから分けています。

Step3.kari_dateに保存しているデータをリセット

 

リストデータを平日と休日に仕分け

休日の場合のWorkFlow

OnlyWhen:日付データのday=曜日が0か6の時(土曜か日曜)

参考:曜日データリスト(days)

  • 0=日曜日
  • 1=月曜日
  • 2=火曜日
  • 3=水曜日
  • 4=木曜日
  • 5=金曜日
  • 6=土曜日

上記の条件がyesであればholiday_countに+1を加算

平日の場合のWorkFlow

OnlyWhen:日付データのday > 1 and day < 5 (daysが1〜5の範囲内である)

上記の条件がyesであればweek_countに+1を加算

処理の開始条件を追加

ListShifterを起動させるためには起動条件を追加する必要があります。

BEGIN ITERATE ListShifterKW

1つ目の条件はButtonクリック時

ListShifter KW created date listをElementに指定

これでボタンをクリックしたら、日付データをリストに格納する動作が起動します。

2つ目の条件

1つ目のListShifterが起動終了した後に起動したいので、

BEGIN ListShifterKW Completeを選択

BEGIN ITERATE ListShifterKW week&holidayに指定

これでボタンをクリックしたら、平日と休日に仕分ける動作が起動します。

 

まとめ

いかがだったでしょうか。

ListShifterを利用した日付データのリスト化から平日・休日の取得ができました。

この動作はホテルやイベントなど、曜日によって予約値段が変わるサービスに向いています。

試しに1000日間のデータを取得してみましたが、5秒弱で完了しました。

BackEndWorkFlowを使うことで、処理動作の負荷軽減にもつながると思うので、興味ある方は試してみてください。

 

スポンサーリンク

-Bubble, ブログ
-

© 2023 まさブログ Powered by AFFINGER5