マッチングアプリは、恋愛、ビジネス、求人など、様々な分野で人と人を繋ぐ重要な役割を担っています。しかし、その開発には高額なコストがかかるのが一般的で、特にスタートアップ企業にとっては大きな負担です。
そこで注目したいのが、ノーコード開発ツール「Bubble」です。Bubbleを使えば、コストを抑えつつ、高機能なマッチングアプリを開発できる可能性があります。
本記事では、Bubbleでのマッチングアプリ開発に挑戦した経験から、直面した課題、工夫した点、実装のポイントを具体的にご紹介します。ノーコード開発、そしてマッチングアプリ開発の裏側に興味がある方は、ぜひご一読ください。
bubbleとは
bubble.ioは、プログラミングの知識がなくても、まるでブロックを積み重ねるように、本格的なWebアプリケーションを開発できるローコードプラットフォームです。従来の開発手法に比べると圧倒的なスピードと手軽さで、Webサービスや業務システムを作り上げることができます。
bubble.ioはデザインも機能も、ほぼ全てを自由に設計できるのが大きな特徴です。例えば、ECサイトのような顧客向けのサービスから、社内向けの複雑な業務システム、さらにはSNSのようなプラットフォームまで、複雑なシステムも作成可能です。
また、bubble.ioは外部サービスとの連携も得意としています。決済システムやAPIなどを活用することで、より高度な機能も実装可能です。デザイン性の高いUI/UXも実現できるため、いろいろ凝りたい人にはピッタリでしょう。
ECサイト、SaaS型ビジネスの管理画面、マッチングプラットフォーム、予約システムなど、多岐にわたるWebアプリケーションがbubble.ioで開発されています。素早く作れてリリースができるので、スピード感を求める人にマッチするツールです。
bubbleで作ったマッチングアプリ概要
今回作成したのは「案件マッチング」アプリです。
クライアントは、案件を投稿しフリーランスの人を集めることができ、フリーランスの方はその案件に対して応募することができます。案件は支払い金額やカテゴリーから自由にフィルタリングしたり、キーワードでも検索をかけることが可能です。
また、クライアントとフリーランスをアカウントで区別できるようにしており、案件に応募できるのはフリーランスだけ、案件の投稿ができるのはクライアントだけのように画面での操作に違いを組み込んでいます。
作成時ポイント
AI でページの構成を作る
今回ここまで短時間で作成できた大きな要因としてページの大枠をAIで作成できたことがあります。この機能は最近bubbleに追加されたものでプロンプトを作成し、それをもとに生成してもらうことであっという間に画面ができあがります。
使用方法は以下の通りです。
このときのコツとしてプロンプトガイドが公式から出ているので、その内容をChatGPT等にコピペし、プロンプトを一緒に考えると楽に作成できます。今回は以下のプロンプトを使用してみます。
A [marketplace] for a [freelance job matching app] for [startups looking to hire engineers and designers]. The page should be [gray and blue], evoke emotions of [professionalism and accessibility], use [photographic] images, and a [modern, legible] font.
完成した画面です。グループ化もされており、構造化されているおかげで編集もしやすいです。アイコン等もAIで生成し、使用してくれているのも面白いですね。
支払金額の絞り込みを範囲で行う
支払金額を最小値と最大値両方から絞り込めるようにします。使用するElementは「SliderInput」です。そのままだと単一の値しか設定できないので、Slider typeをRangeに変更します。
SliderInputの情報を取得する際にはSliderInput’s value : minのようにして指定します。
カテゴリーの絞り込みを多対多で行う
この部分は今回私が作成するにあたって最も躓いてしまった部分です。
一対多であればcontains等で絞り込めるのですが、絞り込む条件も絞り込まれる条件もリストになっている場合その方法は使用できません。
方法として、プラグインを入れる方法もありますが、今回はプラグインなしで実装する方法を紹介します。（データ量が多くなってくると処理が重くなる可能性があります）
使用対象の条件はカテゴリーです。以下の画像のように多対多の関係性になっています。
フィルタリング方法ですが、FilteredのAdvancedを使用します。
Advanced:の中身をまとまりで分けると
This job’s category / contains list / RepeatingGroup categories’s selected_category
となります。
前提として、今回作成しているアプリのデータとしてJobsというdata typeを設定しており、そのフィールドとしてcategoryがあります。また、カテゴリーのcheck boxが変更されたとき、チェックされているものをチェックボックスを入れているRepeatingGroupに設定したcustom state(selected_category)にリストとして保持させています。
これらのことから、多対多での絞り込みが実現できます。
ページング
全ての募集案件を１ページに表示してしまうと見づらいページになってしまいます。そこで、ページングの設定をします。
RepeatingGroupのRowsを５に設定し、一度に5つずつのみ表示できるようにします。このままだと最初の５つしか確認できないので、続きの内容を表示できるようにします。
単に次の内容を表示するだけであれば、ボタンを二つ用意し、それらが押されたときの処理にshow nextを設定します。（前のページはshow previous）
ただし、このままでは今どのページを参照しているのかが不明なので、対象のRepeating Groupのstatusのpage_numberからページを取得し、任意の場所で表示させておきましょう。
まとめ
いかがでしたでしょうか。今回作成したアプリケーションは公開していますので、ぜひ触ってみてください。ページのデザインをAIが作成してくれるのはとても便利ですね。ページデザインが詳しく決まっていない場合などは上手く使ってあげるとかなりの時短になりそうです。一方で、具体的なデザインが決まっている場合は手作業で作ってあげたほうが修正が少なくなり楽かなと思います。
今回のブログを通じてbubbleってこんなことが短時間でできてしまうのか！という部分が伝わっていますと幸いです。
