2023.06.30 2023.06.30

URLをコピーしました！

bubbleで検索・フィルタ機能を作ろう！

2023 6/30

こんにちは！ファンリピートの加藤です。

今回はbubbleでフィルタ機能について紹介していきます。様々な情報が掲載されているサイトにおいて手動でその情報を探すのは困難を極めます。ページのトップに検索・フィルタ機能がついているだけでその手間が一気に省けて、ユーザーの使いやすさが向上します。

ぜひ参考にしてみてください!

＼年末までに限った無料特典／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム

【当社では、こんなデモアプリがすぐに作れます】

貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
ご興味のある方は下記のフォームよりお申し込みください

bubbleとは

bubbleとはノーコードツールの名前のことですが、有名で老舗なツールと認識されている方も多いかもしれません。

一般的にウェブアプリケーションを作成しようとするとサーバーサイドとフロントサイドに関する知識やhtml、CSS、Java scriptなどの多数の言語の習得が必要となります。ただでさえ工数も多く必要になり、追加機能を付ける度にデータ構造の見直しなどさらに多くの手間がかかってしまいます。

しかし、ノーコードツールを利用すれば多少の知識は必要になるものの多数の言語習得の必要がなく、工数の大幅な削減が期待できます。

bubbleについての詳細は「ノーコードツール「Bubble」って？特徴・料金・使い方を解説」という記事でも解説しておりますので、気になる方は一度ご覧になってみてください。

実装していく！

任意のページを用意します。ここでは「form」として開発を進めていきます。

データ構造を確認する

まずはデータ構造などの前提についてご説明します。

ItemというData typeにname(商品名)、status(商品ステータス)のFieldを用意します。Created Date(作成日)はbubbleに標準で用意されているデータなので特に操作は必要ありません。

Data → Option sets から新たなOptionを作成します。ここでは「通常品」、「不良品」、「修理中」を用意しました。

Option setsにStatusで「通常品」、「不良品」、「修理中」のオプションを追加

Data → Data typesから上記データ構造に沿ったtypeを作成していきます。

今回は以下、画像のようなテストデータを用意したのでこれを用いてテストを行います。

UI部分を紹介する！

今回用意したDesignは以下のようになっています。

今回はUIの細かい作成方法は省略しますが、Elements treeから各エレメントの内容について紹介します。

GroupFocus filterはフィルタを設定する画面になります。statusとCreated Dateの幅を選択し、「Filter」ボタンを押下するとそれに沿ったリストに変換されます。「Cancel」ボタンを押すと、すでに設定しているフィルタ項目を一括で削除できます。

header AではResuable elementとして作成したヘッダーです。ヘッダーの詳しい作成方法は以下のブログ記事に記載してあるので確認してみてください！

実装手順(検索ロジック)を解説！

機能の手順は以下の通りになっています。

「検索入力欄」にテスト1と入力する
「検索アイコン」をクリック
リストにname(名前)がテスト1のデータが表示される。

実際に実装が必要なのは2 → 3の部分となります。順を追って説明していきます。

入力した値(ここでは「テスト1」)をデータとして持つ必要があります。これをparameterとして持っておき、「検索アイコン」を押下する。
parameterに対応するデータをリストに表示させる。

1のparameterとして持たせる場合は、Workflow → Click here to add an event… → Custom → Create a custom event…からカスタムイベントを設定します。カスタムイベントを作る利点は同様のロジックを使いまわす場合に何度も同じ設定をしなおす必要がないことです。

次にEvent nameを任意の名前(ここでは「filter」)にし、Click here to add an action… → Go to page…から以下の赤枠の設定を行います。（赤枠以外はその他設定のため、この時点でできていなくても問題ありません。）

Go to page homeとしてname = Input search's valueを設定

ここでは「検索入力欄」に入力した値(ここでは「Input search’s value」)をnameというKeyでparameterとしてページに持たせます。

そして、これをボタン押下に対応させたいので「検索アイコン」(ここでは「MaterialIcon search」)をクリックし、「Start/Edit workflow」を選択してWorkflow画面に遷移します。

Click here to add an action… → Trigger a custom eventから以下の画像の赤枠部分の設定をします。Custom eventをfilterとすることによって先ほど作成したカスタムイベントがこのワークフローに適応されます。

2のparameterに対応するデータをリストに表示させる方法について解説していきます。次はリスト側に設定をします。

リスト(ここでは「RepeatingGroup item」)のData sourceをDo search for…とし、Typeをitemとします。

+Add a new constraintから「name contains Get data from page URL」と設定します。Parameter nameを「name」としますが、先ほどfilterで持たせたKeyと同じ名前をここに入力しています。そうすることで、ページのparameterであるnameの文字に含まれるnameを持つitemを表示させる制約が完成します。(同じKeyとデータのtypeの名前が同じなので混乱するかもしれませんが…)

Sort byにCreated Date、Descendingに”yes”を選択すると表示させるデータがリスト上で作成日が降順に並びます。

Ignore empty constrainsにチェックを入れると制約に対応するデータが空の時に設定した制約を無視します。これによって「検索入力欄」になにも入力されていない時はすべてのマスタデータをリスト上に表示させることができます。