ファンリピート社のブログFR note

bubbleのプラグインFuzzy search & Autocompleteを使ってあいまい検索機能を実装

bubbleのプラグインFuzzy search & Autocompleteを使ってあいまい検索機能を実装

bubbleには便利なプラグインが数多く存在します。

今回はbubbleに少し慣れてきた人に是非試してもらいたいプラグイン、「Fuzzy search & Autocomplete」を用いて、あいまい検索機能を実装してみます。

目次
「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある

Fuzzy search & Autocompleteとは

Zeroqode社が提供している無料のプラグインです。Zeroqode社はノーコードの利用者向けに様々なプラグインや開発ツールを提供しています。

こちらのページからプラグインを探してみると、他にも便利なプラグインが数多くあるので活用してみてください。

Zeroqode is a suite of no-code p...
Zeroqode is a suite of no-code products and services for launching your ideas fast and easy No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster

プラグインの準備

Bubble
Bubble | Build Powerful Full-Stack Apps Without Code Discover the future of software development with Bubble, a no-code platform used to build SaaS tools, marketplaces, CRMs, & more — hosted securely in the cloud.

bubbleのホームにアクセスし、新規アプリを作成します。

ここでは名前を「search_anythig」としています。

作成したらエディタ画面を表示させましょう。

画面左のサイドメニューの「plugin」を選択します。

完成アプリのElements Tree
図1. Elementsの構成

「+Add plugins」をクリックして表示される検索バーに「Fuzzy search & Autocomplete」と貼り付けます。一件ヒットすると思うのでインストールしましょう。

BubbleのPluginメニューからFuzzy search & Autocompleteを検索してインストール
図2. プラグインをインストール

レイアウト

こちらの動画のように、検索アイコンをクリックすると結果のポップアップが表示され、入力バーに応じて結果が変化するアプリを作ります。

完成アプリのデモ動作

検索バーはSearchboxではなく、Inputエレメントなので注意してください。

画面に検索アイコンを設置します。

ポップアップエレメントを配置して、以下のようにグループと文字エレメント、リピーティンググループ、Inputエレメントを配置します。

Popup Words内のElementの配置
図3. ポップアップ内のElementの配置

Search&autocorrectはVisual Elementsの末尾「Search &Autocorrect」から追加できます。

Elemets Tree上ではこのようになります。

Popup Words内にElementを配置した後のElements Treeの構造
図4. Elements Treeの階層構造

これでレイアウトは完成しました。

データベースの作成

デモの動画では英単語と意味が表示されていました。そこで、いくつかテスト用にデータベースを作成しておきます。

サイドメニューのDataから「Words」というタイプを作成し、単語の意味を保存するtextフィールド「mean」と単語を保存する「word」フィールドを作成しておきます。

App dataからデータベースの編集、追加ができます。

右の「New entry」から「Words」タイプに追加しましょう。有料版ではcsvからデータのアップロードが可能ですが、今回はFreeプランの利用を想定し、手入力します。

 Wordsタイプにmean,wordフィールドの値を追加する画面
図5. Wordsタイプにmean,wordフィールドの値を追加

テストなのでデータはなんでも良いのですが、こちらを参考にAから始まる英単語と意味を10個程度追加しています。

 Aから始まる英単語と意味Wordsタイプに追加した画面
図6. Aから始まる英単語と意味Wordsタイプに追加

Search&autocorrectの設定とID Attribute

Designタブに戻り、「Popup Words」を表示させます。

配置した「Search&Autocorrect」エレメントのプロパティタグでデータベースと紐付けます。

このエレメントを介してあいまい検索のデータとデータ元の設定を行うため、このエレメントに視覚情報はありません。

Search&Autocorrectのプロパティ設定画面
図7. Search&Autocorrectのプロパティ設定

Wordsタイプのデータのword、meanフィールドの情報を検索し5件取ってくるという設定です。

入力に対して一致するものを表示させたいので、「OR Set Text to Match from an Input Box」にはチェックを入れておきます。

どの入力から判別するか分かるように入力欄にIDをつけ、判別できるようにします。

「Input Box ID」は「SearchBox」と入力しておきましょう。

後で入力元のInputにも同様のIDを与え判別可能にしていきます。

Input Searchのプレースホルダーを設定し、Content formatはTextを選択します。

先ほど、識別用にID「SearchBox」を設定したので同じIDを「ID Attribute」欄に設定します。

これでデータの紐づけが完了しました。

Repeating Group内の設定

RepeatingGroup resultの設定をします。データタイプはWordsでデータソースは「Search for Wordss」にします。併せてRowsを4にしておきます。

設定したあいまい検索と入力した文字が一致するデータを表示させたいので、以下のようにConditionalを設定します。

RepeatingGroup result の条件定義をする画面
図8. RepeatingGroup result の条件定義

Repeating Group内に表示する部分は、Current cellsからそれぞれwordとmeanを設定し、二つの要素を選択したまま右クリックの「Group elements in」からグループに内包します。そうすると自動で「Parent group’s…」に表示が変わります。

ポップアップを表示させるワークフロー

検索アイコンをクリックした場合にポップアップを表示させたいので、検索アイコンにワークフローを追加します。

Add workflowより、「Element Actions」の「Show」を選び、表示させるエレメントをPopup Wordsに設定します。

検索アイコンを押すとPopupが表示されるワークフローを設定
図9. 検索アイコンを押すとPopupが表示されるワークフロー

これでアプリの設定は完了です。

previewで確認しましょう。

プレビューで実際に検索してみた画面
図10. プレビューで実際に検索してみる

一致しているはずの単語が出てこない場合は、Search&Autocorrectの「Search for Wordss:items until #」の数字を増加させてみてください。

最後に

簡単な設定で入力が2文字を超えるとあいまい検索されることが分かりました。ショッピングサイトなどの実装に有用な機能ですので、Conditionalの設定やデータべースを活用してさらに性能のよい検索機能を実装してみてください。

参考にしたサイト

Zeroqode社 Fuzzy Search & Autocomplete Plugin for Bubble 2024年1月時点

Zeroqode is a suite of no-code p...
Zeroqode is a suite of no-code products and services for launching your ideas fast and easy No-code apps, plugins for Bubble, native apps builder and more. Now you can build apps without code even faster
「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる