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

ワークフローの設定いらず?!auto-bindingってなに?

こんにちは、ファンリピートの鈴木です!

今回はBubbleの機能の一つであるauto-bindingについてまとめようと思います。auto-bindingは、Bubbleアプリケーションの開発において、データのリアルタイム更新を容易にするための機能です。この機能を使うことで、ユーザーが入力したデータが自動的にデータベースに反映されるようになります。

目次

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

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

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

Bubbleとは?

Bubbleのイメージ

URL:https://bubble.io/home/apps

プログラミングの知識がなくてもウェブアプリケーションやモバイルアプリケーションを開発できる、強力なノーコードプラットフォームです。このツールを使用することで、ユーザーはドラッグアンドドロップのインターフェースを通じて、データベースの設定、ユーザーインターフェースのデザイン、そしてロジックを作成できます。特に、複雑な機能を持つカスタムウェブアプリケーションの開発を可能にすることで知られています。

auto-bindingとは?

Bubbleのエレメントとデータベースを直接結びつける機能です。この機能を使用すると、ユーザーがエレメントに入力した値が自動的にデータベースに反映されます。例えば、テキスト入力フィールドにユーザーが何か入力すると、そのデータが即座にデータベースに反映されます。

auto-bindingのメリット

以下3点のメリットが挙げられます。

  1. リアルタイム更新
    • データが即座にデータベースに反映されるため、リアルタイムでのデータ更新が可能です。
  2. ワークフローの設定不要
    • 複雑なワークフローを設定する必要がなく、簡単にデータのバインディングが設定できる。
  3. ユーザー体験の向上
    • ユーザーが入力したデータが即座に反映されるため、スムーズなユーザー体験を提供できる。

どんなときに使うか

どんなときでも使うことが好ましいわけではありません。イメージできるように好ましいケース・好ましくないケースを少し挙げてみたいと思います!

好ましいケース

好ましいケースとして主に、Option setsのような決まった値の変更のみを行いたい場合に使っています。

例として、未完了から完了へのステータス変更やToDoのチェックボックスのオンオフの切り替えなどです。

好ましくないケース

逆に好ましくないケースとしては、auto-bindingがリアルタイムにデータベースを更新してしまうため、ユーザーによるなにかしらのアクション(例. 確定ボタンのクリック)をトリガーにして更新させたいときや、更新の回数が比較的多い場合は好ましくないと考えております。

また、当たり前かもしれませんが、複雑なロジックを組む必要があるものも同様に好ましくないです。

auto-bindingの設定方法

auto-bindingの設定は以下の手順で行います。

1.データの設定

今回はデモなのでOption setsにstatusを準備し、タスク風の値を設定しました。

auto-bindingのOption sets

そのOption setsをカラムに持つauto-bindingテーブルも準備し、初期値はbacklogにしています。

auto-bindingのテーブル

2.エディタの設定

グループとドロップダウンを設定します。

auto-bindingは、parent elementのデータに紐づくため、今回は簡単に以下を準備しました。

グループのデータソースはauto-bindingに検索をかけた最初のデータにしています。

auto-bindingのGroup

ドロップダウンは、それぞれ以下で設定しています。

  • Choices style
    • Dynamic choices
  • Type of choices
    • Option setsのstatus
  • Choices source
    • All status
  • Option caption
    • Current option’s Display

ここからがauto-bindingの設定になります。以下それぞれの説明です。

  • Enable auto-binding on parent element’s thing
    • チェックをつけることでauto-binding機能がオンになります。
  • Field to modify
    • 親のデータのどのカラムを紐づけるかを選択します。ここではstatusを設定しています。
auto-bindingのDropdown

最後にエディタのDataタブにあるPrivacyの設定が必要です。

Whenはその時々で変わるかと思いますが、今回は値が空じゃないときに設定しています。

一番下にある、Allow auto-bindingでauto-bindingを許可するカラムにチェックをつけます。

以下を見ると、statusにチェックしているのがわかるかと思います。

auto-bindingのprivacy

これで設定は完成です!

ぜひプレビューで確認してみてください。

ワークフローを設定しなくても、データベースの変更ができているかと思います。

まとめ

今回はBubbleのauto-binding機能について解説しました。auto-bindingは、データのリアルタイム更新を簡単に実現できるツールです。この機能を活用することで、ユーザーの入力データが即座に反映されるスムーズなアプリケーションを開発できます。ぜひお試しください!

\ システム開発にお悩みの方へ /
貴社のシステム開発・アプリ開発を爆速で進めるための
超高速開発が分かる資料3点セット

【下記の3点の資料が無料でダウンロードできます】

  • 【料金表付き】新規事業を爆速で立ち上げられる高速開発支援サービスの紹介資料
  • 【最短24時間で納品?】高速開発のプロジェクト支援事例集
  • 導入に向けて開発プラットフォームのランニングコスト比較表
  • URLをコピーしました!

この記事を書いた人

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

株式会社ファンリピート

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


目次
閉じる