【Bubble】チェックリストでAND検索を実装する方法

こんにちは、あき(@akihito_kobe)です。

オーストラリアのシドニーに学生として滞在をする傍ら、Webcamperという会社を立ち上げ、そこでエンジニアとして働いております。

本日は、ノーコードツール「.bubble」にて、チェックリストを使ってAND検索をする方法について解説します。

ホテルやゲストハウスなどを検索するときの条件指定などの際に、非常に便利かと思います。

職歴なしの30歳が、オーストラリアで起業した話

Audible 完全版、Kindle版

Amazonで見る

【Bubble】チェックリストでAND検索を実装する方法

今回は、宿泊施設の検索機能を例に解説していきます。

登録されている宿泊施設の内、チェックボックスでチェックした設備がある施設のみを表示する、という機能です。

まずはデータベースの準備

まず、データベースに「Accommodation」タイプを作成し、「Name(ホテル名)」と「Facilities(設備)」フィールドを、両方テキスト型で用意します。



そしてFacilitiesタイプに入力する項目を、Option Setsにて用意します。今回は、オプションセット名を「Checklist (Option Sets)」とし、これら5つのオプションを準備しました。

これらを後に、チェックボックスとして検索に使用します。



設備には複数項目が入りますが、便宜上、リスト型にはしていません。項目同士は、「, 」で区切ることとします。

そして、このような5つのデータを入力しておきました。



これらを一旦、わかりやすくRepeating Groupを使って一覧表示させておきましょう。

複数ある設備を改行させて表示するには、「:find & replace」を使い、「, 」を改行に置き換えます。

改行させるには、Replace by内で、普通にEnterキーを押すだけでOKです。何も書かれていないように見えますが、しっかりと改行されます。



この状態をプレビューすると、こんな感じ。

検索用チェックリストの配置

では、検索する際に必要なチェックボックスを、Option Setsから配置します。

Repeating Groupを使い、「Type of Content」と「Data Source」に、「Checklist (Option Sets)」を指定します。


そして、その中にチェックボックスを配置し、「Label」を「Current Cell’s Checklist (Option Sets)’s Display」に指定します。

すると、オプションセットに設定した項目が、チェックリストとして表示されました。


カスタムステートに値をセット

ここからが、この記事で一番解説したかった部分。

チェックボックスにチェックが入っている設備がある宿泊施設のみを、表示させるような処理を加えていきます。

たとえば、Free Wi-Fiとlaundryにチェックを入れれば、「Coogee Room」と「Darlinghust Flat」のみが表示されるような処理です。

まず、チェックリストが入っているRepeating Groupに、Custom Stateを作成します。そして、チェックが入っている項目を、そのCustom Stateにセットしていきます。このCustom Stateは、リストにしておいてください。



そして、チェックボックスにチェックが入ったタイミングで、それをカスタムステートに追加していきます。

チェックボックスからは、右クリックをするとワークフローページに飛べます。



そして、Only Whenに「This checkbox is checked」を指定し、カスタムステートに値を追加します。

Element Actions「Set State」
→ Element「RepeatingGroup Checklist (Option Sets)」
→ Custom State「Facilities」
→ Value「RepeatingGroup Checklist (Option Sets)’s Facilities:plus item Current cell’s Checklist (Option Sets)’s Display」



これで、チェックボックスにチェックが入った際に、それがカスタムステートに追加されました。

同様に、チェックが外れた際にそれを消す、という処理も加えていきます。このワークフローをコピー&ペーストし、以下の部分を修正します。

Only When「This checkbox isn’t checked
Value「RepeatingGroup Checklist (Option Sets)’s Facilities:minus item Current cell’s Checklist (Option Sets)’s Display」

これで、チェックが外れた際の動作も実装できました。

検索機能の実装

さて、ここからいよいよ検索機能の実装です。先程セットしたカスタムステートを、検索に使用します。

アコモデーションリストのRepeating Groupの検索条件を、「Facilities contains keyword(s) RepeatingGroup Checklist (Option Sets)’s Facilities」とします。



これで実装は完了です。ここでは「contains keyword(s)」を使うということがポイントです。

試しに、Free Wi-Fiとlaundryにチェックを入れます。



ちゃんと「Coogee Room」と「Darlinghust Flat」のみが表示されていますね。うまく動いています。

今回は、チェックボックスにチェックが入っている設備がある施設のみを表示しなければならないので、「is」や「contains」だとうまく動きません。

「contains keywords(s)」を使うという所がミソです。

リスト表示を少しだけ改善

今の状態だと、全てのチェックが外れている状態では、アコモデーションリストが表示されません。

これでは少し不自然なので、何もチェックが入っていないときには、全ての宿泊施設を表示させておきましょう。

アコモデーションリストのリピーティンググループに、カスタムステートを利用して、以下のようなConditionalを設定します。

When「RepeatingGroup Checklist (Option Sets)’s Facilities:count is 0
Data Source「Search for Accommodation」(Constraintは指定しません)



これでスッキリとした検索機能が実装できました。

お疲れ様でした

今回は、チェックボックスを使ってAND検索を実装する方法について解説しました。

ちなみに、チェックボックスに関するカスタムステートの扱い方やデータベースへの登録方法などは、jansnapさんという方が書かれている記事が非常に参考になります。

こちらから、ぜひご参照ください。

僕は、シドニーに「Webcamper Pty Ltd」という会社を立て、ウェブ制作を中心としたお仕事をしています。何かご相談等があれば、いつでもご連絡ください。

先日、僕の人生を書き下ろした書籍【職歴なしの30歳が、オーストラリアで起業した話】を、Amazon Kindle、そしてAudibleにて出版しました。よければこちらも、ぜひ、どうぞ😌

職歴なしの30歳が、オーストラリアで起業した話

Audible 完全版、Kindle版

Amazonで見る

Audible 無料会員登録