ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

Bubble「Do a search for」クエリの裏側:開発ツールで取得データを確認する方法

みなさん、こんにちは!今回は Bubble の「Do a search for」クエリについてです。

「Do a search for」クエリは Bubble における「基本のキ」であり、データ取得の要ですが、本記事では「実際にはどのように Bubble のデータベースから値が取得されているのか?」という裏側を覗いていきたいと思います。

取得データの目視確認については、Bubble 既成のデバッガーはとても便利ですが、今回はブラウザの開発ツールを使って見ていきます。開発ツールはブラウザさえインストールすれば誰でも使える為、アプリの開発者でなくても、ある程度の情報を確認することができます。内部的な動作を見落とすと、セキュリティのリスクを招く可能性がありますので、無意識にユーザーのプライバシーに関わる情報を露出させてしまっていた!ということがないように、Bubble初学者の方は是非ご参考いただければと思います!

なお、今回使用している開発ツールは Chrome を使用しています。

1. 開発ツールから見る「Do a search for」

では、実際に開発ツールを使用して「Do a search for」で取得するデータを確認していきたいと思います。

1.1. 事前準備

まずは、事前準備として、データを確認する為の簡単なサンプルを作成しておきます。以下は実際に使用したサンプルアプリです。(サンプルアプリは、本記事の項1.3. 取得データの確認 の「Optimize application」まで実行した状態となっています。)

bubble.io

サンプルアプリでは、ボタンをクリックしたタイミングで「Do a search for」クエリを実行し「Test」という名前の Data type からデータを取得しています。(具体的には、ボタンのクリックイベントに Display list のアクションで Repeating group の Data source に「Do a search for」をセット。)

また、画面に表示しているデータは「Title」フィールドの値のみとし、その他のフィールドの値は表示させていません。

データベースの定義は以下のような内容です。なお、今回のサンプルアプリでは「delete-Field」という名前の、既に定義から削除されたフィールドも準備しています。

フィールド名 説明
Title サンプルの text 型フィールドです。ページ上に取得した値を表示させます。
Detail サンプルの text 型フィールドです。ページ上には値を表示させていません。
View User このフィールドに登録されている User が全フィールドの閲覧権限を持つ Privacyルールを定義しています。
delete-Field 定義から削除されたフィールドです。

Test type には、下図のようなデータを登録しています。

下図は 定義した Privacy ルールです。

Test type のデータは誰でも検索(Find this in searches)することができますが、「View User」フィールドに登録されていない User の場合は、「Title」フィールドしか閲覧できません。

なお「delete-Field」フィールドは、Test type の定義から削除されているため、Privacyルールを設定することはできない状態になっています。

1.2. 開発ツールの起動

では、アプリを Preview して F12 キー(Windows の場合)などで開発ツールを起動していきます。開発ツールが起動できたら「Network」タブを選択します。

「Network」タブでは、ブラウザでページを読み込む際に発生する全てのネットワーク活動を監視することができますので、Bubble で「Do a search for」クエリを実行した際の詳細情報についても、ここで確認することが可能です。

次に、「Network」タブを表示させた状態で、ページに作成しておいたボタンをクリックし、Repeating group の Data source に設定した「Do a search for」を実行してみます。

「Do a search for」を実行すると、内部的には「msearch」というリクエストを処理していることが確認できます。

次に「msearch」の「Response」タブを選択して、データベースから取得してきた実際のデータを確認していきます。

1.3. 取得データの確認

では、取得されたデータを詳しく見ていきましょう。現在は「View User」に登録されていない User で Preview しているため、Privacy ルールは「Everyone else (default permissions)」の内容が適用された状態で「Do a search for」クエリが実行されました。

「Everyone else (default permissions)」では、「Find this in searches」がチェックされ、View fields では「Title」にチェックされていますので、登録されたデータすべての「Title」が閲覧できる状態ですが、ここで注意しておきたいのは、「delete-Field」フィールドについてです。

「delete-Field」フィールドは、すでに定義からは削除されたはずのフィールドですが、Privacyルールを設定していない状態でフィールド削除を実行している場合、そして、そのフィールドに対して既に何かしらの値が登録されている場合は、内部的には取得されてしまうということに注意してください。

削除フィールドの情報については、「Setting > App file management > Optimize application」で整理することはできますが、残念ながら執筆時点(2023年11月時点)では、Optimize application を使用しても、削除フィールドに登録された値まではクリアされません。機密性の高いデータを登録している場合は、必ず 適切な Privacyルール を設定してから削除を実行するか、値自体を削除するようにしましょう。

また、下図は閲覧権限を持つ User(ここでは User01)でデータを参照した結果です。この図では「Title」フィールド以外のページ上には表示させていないデータ(「Detail」フィールドなど)についても取得されていることが分かります。

「Do a search for」を実行している限り、例え画面上に表示させないデータであっても、内部的には値は取得されますので、機密データには必ず適切な Privacyルールを設定するようにしましょう。

Privacyルールについては、ノーコードラボの過去の記事でも幾つか取り上げていますので、よろしければ併せてご参考ください。

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

2. まとめ

今回の記事では、開発ツールを使って Bubble の内部データを見ることで、「Do a search for」クエリの裏側と、プライバシーに関するリスクについてご紹介しました。

特に、画面上に表示されないデータや削除されたフィールドの値が内部的に取得されていることは、データ保護の観点からも非常に重要なポイントとなります。Bubble アプリを開発する際は、より安全で信頼性の高いアプリケーションとなるよう、内部的な動作についても念頭に置いて開発を進めていきましょう。

それでは、ここまでお読みいただきありがとうございました。次回もどうぞお楽しみに~!