2023年8月7日追記
現在こちらで紹介しているListShifterプラグインは公開が終了しており、サポートされておりません。
使用する場合は、有料プラグインを使うかBackendWorkflowを使う必要があります。
https://bubble.io/plugin/floppy-localstorage-list-shifter-1641501497659x706740039734263800
目次
前提条件
前提条件
- Bubbleのアカウント登録ができている
- WorkFlowやCustomStateなどの操作が理解できる
- ListShifterプラグインを触ったことがある
この章で学べること
この章で学べること
- 日付データの扱い方
- 曜日の取得方法
- ListShifterの使い方
作るもの
ホテル予約などで使用する平日と休日によって値段が変わる場合に範囲内の平日の数と休日の数を表示できるアプリになります。
動作フロー解説
- 開始日と終了日の入力
- ボタン押下で１の範囲内の日付データをリスト化
- リスト化した日付データを平日と休日に仕分け
- 仕分けた個数を表示
2023年1月11日〜2025年12月11日までの平日、休日数
平日＝762日
休日＝304日
祝日の取得の場合は、予め日付に紐づけておく必要があります。これで今作っている予約サイトは作れそう。 pic.twitter.com/SXzuOSCKq6— じょん-KoronCoron OÜ CEO (@john01tgmck) January 11, 2023
Bubbleで実装
以下の順番で実装していきます。
- プラグインの導入
- CustomStateの作成
- フロントの作成
- 繰り返し検索機能追加
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
- 平日、休日表示用のテキスト×２
- 取得日付リストを表示するRepeatingGroup
ListShifterの設置
ListShifterKWを２つ設置しましょう
１つ目のListShifterの設定（日付リストの作成用）
それでは範囲データから日付をリスト化する処理を作成します。
- Date Type of ListはNumber型：ListShifterKWの返すデータは数値を指定
- Make a Numeric List = Yes：任意のステップ数の反復処理を行うため
- Number of item = 添付画像参照（終了日ー開始日＋１日＝処理回数）
- Start at ＝処理を開始する数値
- Increment by ＝数値間隔
これで何ができるかというと、日付データの範囲から日数を取得し、その回数分開始日に+１してリストに保存します。
つまり、1月1日〜1月10日の範囲だった場合は以下のフローのように動きます。
ListShifterフロー①
- 1月10日 - 1月1日 + 1 = 1
- 以下の日付をリストに追加
1回目：1月1日+0日=1月1日
2回目：1月1日+1日＝1月2日
.
.
.
10回目：1月1日+9日 = 1月10日
２つ目のListShifterの設定（平日と休日の仕分け用）
- Date Type of Listはdate型：ListShifterKWの返すデータは日付を指定
- List to shift：１つ目のListShifterで取得した日付リストを指定
- Start at ＝処理を開始する数値
- Increment by ＝数値間隔
１つ目のListShifter分処理を回しているだけなので、詳しくはWorkFlow説明時に解説します。
WorkFlowの作成
最後にWorkFlowの作成をします。
ボタンクリック後のフローは以下のようになっています。
アクションフロー
- 日付範囲データをリストに保存
- リストデータを平日と休日に仕分け
文章にすると簡単ですが、少し処理が複雑なので、画像多めで解説します。
日付範囲データをリストに保存
Step1.set stateから仮データに開始日付＋List ShifterKWを加算しkari_dateに格納
Step2.kari_dateに格納した日付をリストに保存
※処理を分ける理由は、CustomStateに保存する際に計算できないから分けています。
Step3.kari_dateに保存しているデータをリセット
リストデータを平日と休日に仕分け
休日の場合のWorkFlow
OnlyWhen：日付データのday＝曜日が0か6の時（土曜か日曜）
参考：曜日データリスト(days)
- ０＝日曜日
- １＝月曜日
- ２＝火曜日
- ３＝水曜日
- ４＝木曜日
- ５＝金曜日
- ６＝土曜日
上記の条件がyesであればholiday_countに＋１を加算
平日の場合のWorkFlow
OnlyWhen：日付データのday > 1 and day < 5 （daysが1〜5の範囲内である）
上記の条件がyesであればweek_countに＋１を加算
処理の開始条件を追加
ListShifterを起動させるためには起動条件を追加する必要があります。
BEGIN ITERATE ListShifterKW
１つ目の条件はButtonクリック時
ListShifter KW created date listをElementに指定
これでボタンをクリックしたら、日付データをリストに格納する動作が起動します。
２つ目の条件
１つ目のListShifterが起動終了した後に起動したいので、
BEGIN ListShifterKW Completeを選択
BEGIN ITERATE ListShifterKW week&holidayに指定
これでボタンをクリックしたら、平日と休日に仕分ける動作が起動します。
まとめ
いかがだったでしょうか。
ListShifterを利用した日付データのリスト化から平日・休日の取得ができました。
この動作はホテルやイベントなど、曜日によって予約値段が変わるサービスに向いています。
試しに1000日間のデータを取得してみましたが、5秒弱で完了しました。
BackEndWorkFlowを使うことで、処理動作の負荷軽減にもつながると思うので、興味ある方は試してみてください。
