こんにちは。ファンリピートの鳴海です。
ログ設計指針について説明したいと思います。
ログ設計の重要性
Bubble.ioのログ設計は、API連携時、データ更新後などのアクションで、それぞれの安定制や効率を重視し、システムの健全性やパフォーマンスを維持するために必要なものとなります。
ここでは、Server logsや設計や処理について説明していきます。
ログテーブルや処理について
テーブルとしてログテーブルを設計し、どのようなアクションの時に処理として追加するかを以下で説明します。
- ログテーブルの設計
- 処理について
ログテーブルの設計
テーブルは以下のようなものが適切かと思います。
- data change log
- system log
- access log
data change log
詳細画面等でデータが更新された際に記録する際のテーブルは以下のようになります。
column name | logical name | example |
changed_user | 更新者 | a.tanaka@example.com |
crud | CRUD処理 | Create |
new_data | 新しいデータ | {“order_status”: [{“status_code”: “NEW123456789”}]} |
record_unique_id | レコードID | 1234567890abcdef1234567890abcdef |
table | テーブル名 | order_status |
new_dataのJSON形式はBubble DataAPIで取得できます。詳しくは以下の記事をご覧ください。

system log
Sendgridを使ったメール送信、API連携時の実行等のイベント処理の際に記録するログ
column name | logical name | example |
content | 内容 | {“error_message”: “Invalid input data”} |
editor_url | 閲覧可能なURL | https://example.com/dashboard?view=order&order_id=12345 |
is_error | エラー有無 | no |
type | 種類 | 購入確定 |
url | URL | https://example.com/order-details?order_id=12345 |
user_id | ユーザーID | 12345678901234567890123456789012 |
workflow | ワークフロー | User clicks ‘Confirm Purchase’ button |
typeは処理ごとに命名しておいた方が、Dataタブですぐ確認することができます。
access log
アクセスしたUserのIPアドレスやページ、時刻などが記録されるログです。
column name | logical name | example |
access_page | アクセスページ | https://example.com/test-page?item_id=abc123&session=xyz789 |
ip_address | IPアドレス | 192.168.1.1 |
user_agent | ユーザーエージェント | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/999.0.0.0 Safari/537.36 |
IPアドレスの取得やuser agentについては、以下の記事をご覧ください。

処理について
data change log
主にデータ更新が行われた際に作成する処理を行った方が良いです。
例)
database change triggerを使った親テーブルの更新日が変わったタイミング

ボタンを押下後にテーブル更新する時

ログ管理方法
ここでは、Bubbleで標準で搭載されているログ機能や上記で説明したテーブル管理については以下にそれぞれ説明したいと思います。
- Server logs
- テーブル設計の管理
Server logs
ユーザーが行ったアクションをログとして記録をみれるところになります。
確認方法
開き方としては、Bubble editorのlogsから確認することができます。

使い方
APIやレスポンスなどを確認する場合は、Show advanceを押下します。

全てを入れるようにしましょう。

Containsには不具合に関連するデータを入力しましょう。
例)データの名前やuniqueなど

Startでは、下記のような入力形式があります。
1 hours ago(1時間前)
3.4 hours ago(3時間40分前)
1 mitutes ago(1分前)
5.3 minutes ago(5分30秒前)

Searchボタンを押下します。

そうすると、containsに関する情報やStart設定された時間以降の内容が表示されます。
左側がWF名になります。
WFの処理について詳しくみたい場合は、右側のZoom on this workflowを押下します。

テーブル設計の管理
データとしてログを作成する際には、いくつかの懸念点があり、適切な管理が必要です。
懸念点
特定のアクションから毎回ログを作成しようとすると、データベース自体に高負荷がかかってしまうので、結果的にアプリケーションの動作低下に繋がってしまう可能性があります。
管理方法
1ヶ月、3ヶ月以上前のものは定期的に削除するといった工夫が必要になります。一括での削除はAPI workflowで削除処理を設定した後に、Bubble editorからデータを指定して、そこから削除することができます。
APIの設定

EditorからDATAを選択して、上記で設定したAPIでの実行が可能です。

※標準機能として、DELETEがありますがデータ量が1,000件以上の場合は途中でタイムアウトを起こしてしまい、削除できないということがあるので、大量のデータを削除する際は上記の方法を推奨します。
ログのデバッグ方法

作成したログは主にCSVとしてダウンロードすることができ、今回はスプレッドシートを使った普段よく使う便利なスプレッド関数もそれぞれ以下でご紹介できればなと思います。
- CSVのダウンロード方法
- VLookup関数
- 重複値の確認
CSVのダウンロード方法
Bubble editorのDataタブを開きます。

対象のデータの鉛筆アイコンを押下します。

全件選択し、SAVEボタンを押下します。

そうすると、全カラムで表示されます。

次にExportボタンを押し、Confirmボタンを押します。

しばらくするとメールが届くので、そちらのリンクからCSVをダウンロードすることができます。

VLookup関数
シートをテーブルごとにインポートした際に、そのテーブルに紐づきを検索すると、表示される関数になります。
VLookup関数とは
VLookupは「Vertical Lookup」の略で、ある列のデータを基にして、別の列のデータを検索する関数です。縦方向にデータを検索します。
関数の構文
VLookup関数の基本構文は以下の通りです。
=VLOOKUP(検索値, 範囲, 列番号, [範囲検索])
- 検索値: 検索したい値。
- 範囲: 検索するデータの範囲。最初の列に検索値が含まれている必要があります。
- 列番号: 範囲内で、検索値に対応するデータが含まれる列の番号。
- 範囲検索: 省略可能。TRUEの場合は近似値検索、FALSEの場合は完全一致検索。
使い方の例
例えば、Aデータが「社員ID」、Bデータが「社員名」だとします。AデータとBデータがそれぞれ異なる列にあるとします。
- 検索値には、対応する社員名を探したい「社員ID」を入力します。
- 範囲には、社員IDと社員名が含まれる範囲を指定します。例えば、A列に社員ID、B列に社員名がある場合、範囲は「A:B」となります。
- 列番号には、社員名が含まれる列の番号を入力します。この例では、B列なので「2」となります。
- 範囲検索は、一般的に完全一致検索を望む場合が多いため「FALSE」とします。
関数は以下のようになります。
=VLOOKUP("検索したい社員ID", A:B, 2, FALSE)
重複値の確認
データ内の列ごとに重複を確認する場合のIFとCOUNTIF関数について説明します。
COUNTIF関数とは
COUNTIF関数は、指定した条件に一致するセルの数を数える関数です。
IF関数とは
IF関数は、指定した条件が真(TRUE)か偽(FALSE)かに基づいて、異なる結果を返す関数です。
関数の組み合わせ
IFとCOUNTIFを組み合わせることで、特定のデータが重複しているかどうかを判定し、その結果に基づいて異なるアクションを取ることができます。
関数の構文
=IF(COUNTIF(範囲, 検索値) > 1, "重複あり", "重複なし")
- 範囲: 重複を探す範囲。
- 検索値: 確認したい値。
- “重複あり”: 条件が真(重複がある)場合に返す値。
- “重複なし”: 条件が偽(重複がない)場合に返す値。
使い方の例
例えば、A列にAデータ、B列にBデータがあるとします。A列の特定のセルにある値がB列に重複しているかどうかを確認したい場合、以下のように関数を使います。
- A列の特定のセル(例:A2)にある値がB列に重複しているかを確認するための関数を、別のセル(例:C2)に入力します。
- 関数は以下のようになります
=IF(COUNTIF(B:B, A2) > 0, "重複あり", "重複なし")
まとめ
今回はBubble ログ設計指針について説明いたしました。ログを取ることは処理の不具合やアプリの保守としても大切なことだと思います。
ここまでご覧頂きありがとうございました。