ノーコード ラボ

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

ncScale を使ったノーコードアプリの管理 Bubble 編

みなさん、こんにちは!

今回は、ノーコードアプリケーションのスタックを一元的に監視し、管理するためのツール「ncScale」について、ご紹介したいと思います。

ノーコードラボでは、これまでにも Bubble を含む多くのノーコードツールについてご紹介していますが、これらのツールは、プログラミングの知識がなくてもアプリケーションを迅速に開発できるため、ビジネスやプロジェクトにおいて日々重要な役割を果たす存在となりました。

ncScale はノーコードアプリケーションのパフォーマンスや信頼性を確保するために、リアルタイムのデータ可視化、ログ管理、アラート通知、依存関係の追跡といった機能を提供します。本記事では、Bubble と ncScale の連携についてご紹介したいと思います!

1. ncScaleの概要

ncScale は 2021年に Benoit Montecler 氏と Kevin Janiky 氏 によってフランスで設立された比較的新しい会社ですが、すでに XanoZapierWeweb とは公式パートナーです。残念ながら執筆時点(2024/06 現在)において、Bubble とはまだ非公式ですが、前述のサービス以外にも Make、Baserow、n8n、Airtable とはベータ版統合が可能となっています。

また「nocode:nohack」という名前で公開されている Bubble アプリの脆弱性診断を行うツールは、現在 ncScale に統合されていますが、プライバシールールのチェック機能を使用するといった部分は、まだ未統合だそう。今後の追加開発に期待したいですね!

www.ncscale.com

ncScale の主な機能は以下の8つです。

  1. Log management(ログ管理)
  2. Alerting(アラート)
  3. Assets catalog(資産カタログ)
  4. Overview/Dashboard(概要/ダッシュボード)
  5. Dependencies(依存関係管理)
  6. Versioning(バージョン管理)
  7. Full Text Search(全文検索)
  8. Obfuscation(難読化)

Bubble と連携した場合、これらの機能で利用できるのは執筆時点で「Log management(ログ管理)」と「Alerting(アラート)」「Overview(概要)」の3つのみとなっていますが、今後公式パートナーになれば、機能が追加されるかもしれませんね! それぞれの機能の概要は以下の通りです。

1.1. Log management(ログ管理)

ログ管理機能は、複数のソースからのログを 1 か所で簡単に収集することができます。APIリクエスト履歴、バックグラウンドタスクのログなどを収集・管理します。これにより、システムの運用状況を詳細に把握し、問題の原因を迅速に特定することができます。

例えば、アプリケーションがエラーを起こしたときに、そのエラーの原因を特定するために使用します。APIリクエスト履歴やバックグラウンドタスクのログを確認することで、どの部分で問題が発生したのかを迅速に把握できます。これは、エラーの再発を防ぐための改善にも役立ちますね。

1.2. Alerting(アラート)

アラート機能は、システム内で異常や障害が発生した際に即座に通知を送信します。これにより、問題が発生した際に迅速な対応が可能となり、ダウンタイムを最小限に抑えることができます。

例えば、APIの応答時間が異常に長くなった場合に、即座に通知を受け取るために使用します。この通知により、システム管理者は問題を迅速に特定し、対応することができます。アラート機能は、システムの稼働状況を監視するために欠かせません。

1.3. Assets catalog(資産カタログ)

資産カタログ機能は、アプリケーションの依存関係やバージョン管理を含む、すべてのアセットを一元管理します。これにより、システムの構成要素を把握し、効率的に管理することができます。

例えば、プロジェクトで使用している全てのライブラリやモジュールを一元管理したいときに使用します。どのライブラリがどのバージョンで使われているかを把握し、脆弱性のあるライブラリの特定や更新を効率的に行うことができます。

1.4. Overview/Dashboard(概要/ダッシュボード)

ダッシュボード機能は、アプリケーションの主要なメトリクスを一目で確認できるインターフェースを提供します。データ可視化により、システムのパフォーマンスや稼働状況を効率的に監視することができます。

例えば、アプリケーションの全体的な健康状態を一目で確認したいときに便利です。ダッシュボードでは、トラフィックの増加などを視覚的に把握できるため、迅速な意思決定やパフォーマンスの最適化に役立ちます。

1.5. Dependencies(依存関係管理)

依存関係管理機能は、使用されているライブラリやモジュールの追跡と管理を行います。これにより、システムの安定性を保ち、依存関係の問題を未然に防ぐことができます。

例えば、アプリケーションのアップデート時に、依存しているライブラリやモジュールが最新かどうかを確認したいときに使用します。依存関係の追跡を行うことで、互換性の問題を未然に防ぎ、システムの安定性を確保できます。

1.6. Versioning(バージョン管理)

バージョン管理機能は、アプリケーションの異なるバージョンを追跡し、変更履歴を管理します。これにより、以前のバージョンに戻すことが容易になり、変更内容を詳細に把握することができます。

例えば、新しい機能をリリースした後にバグが発生した場合、以前の安定したバージョンにロールバックするために使用します。バージョン管理により、変更履歴を追跡し、必要に応じて過去のバージョンに戻すことができます。

1.7. Full Text Search(全文検索)

全文検索機能は、ログやデータベース全体を対象とした検索機能を提供し、必要な情報を迅速に見つけ出します。これにより、トラブルシューティングやデータ分析が効率化されます。

例えば、大量のログデータから特定のエラーメッセージを迅速に見つけ出したいときに使用します。全文検索機能を利用することで、問題のあるログエントリを即座に特定し、トラブルシューティングの効率を大幅に向上させることができます。

1.8. Obfuscation(難読化)

難読化機能は、データのプライバシーとセキュリティを保護するために、データをマスキングし、実際のデータが外部に漏れるのを防ぎます。

例えばこれは、パスワードやクレジットカード番号などの機密情報を隠したい場合に便利です。データのマスキング機能により、プライバシー保護とセキュリティを強化し、データ保護規制に準拠することができます。

2. プランについて

現時点で展開されているプランは CommunityProScale の3種類です。Community は無料で利用できるプランとなっていますが、取得するログが1ヶ月間で 25,000 logs 以内という制限があるものの、7日間のログ保管が可能です。Bubbleでは Starter プランでも 2日間しか保管できないため、この機能は ncScale の魅力のひとつですね。

なお、プランのログ上限に達すると、新しいログは取り込まれなくなります。新しいログの取り込みは、翌月の初め、また利用のプランの保持ポリシーによってログが自動的に削除されたときに、自動的に再開されるとのことでした。

参考までに、以下は執筆時点でのプラン表です。

Monthly

Annually

3. Bubble との統合

では、ここからは実際に Bubble アプリと統合していきたいと思います。基本的な手順は、以下の3ステップです。

  1. ncScale でアカウント作成
  2. Bubble アプリから統合に必要な情報(アプリID、Cookie など)を取得
  3. ncScale で Bubble アプリの情報を登録

注意点としては、ncScale は Cookie に保存されたユーザーのセッション情報を利用することでログの取得を実行します。その為、アプリ保有者のユーザー(開発者)が、Bubble エディタからログアウトすることで Bubble に対するセッション情報を失うため、ncScale とも切断されることになります。ncScale が提示している回避策としては、プライベート ブラウジング セッション(シークレットモード)を使用して Cookie を取得することを推奨しています。

Chrome でシークレットモードを使用するには、右上のメニューから「新しいシークレット ウィンドウ」で起動することができます。

また、統合に必要な Cookie の取得方法については、自身でブラウザの開発ツールを使って取得する方法と、ncScale 用の Chrome 拡張機能をインストールすることで取得する方法の2通りあります。今回は、その両方の方法について取り上げていますので、それぞれ必要な方をご参考ください。

なお、シークレットモードで拡張機能を使用する場合は、拡張機能の詳細で「シークレットモードでの実行を許可する」をオンに設定しておく必要があります。

3.1. ncScale でアカウント作成

本記事では ncScale のアカウント作成の詳細については、一般的なフローとなっていますので割愛させていただきます。アカウント作成がまだの方は こちら から作成してくださいね。

3.2. Bubble アプリから統合に必要な情報

アカウントの準備ができたら、Bubble から必要な情報を取得します。統合に必要な情報は、以下の3つです。

  • アプリID
  • Cookie
  • アプリドメイン

アプリID は、統合したい Bubble アプリのエディタのURLに含まれています。URL の id に設定されている値を使用してください。

https://bubble.io/page?name=index&id=YOUR-APP-ID&tab=tabs-1

アプリドメインは、Bubble で Dedicated instance を利用している場合にのみ設定します。本記事では利用していない為、アプリドメインについては設定しません。

3.2.1. Chrome 拡張機能を使用する場合

ncScale の Chrome 拡張機能を使用すれば、これらの必要な情報が簡単に取得できます。

chromewebstore.google.com

拡張機能については、順番が前後しますが 項3.3. のタイミングでも「Chrome extension for Bubble」というポップアップが表示されますので、その際に「Install extension」でインストールすることもできます。

拡張機能をインストールしたら、ツールを起動して「Get Cookies」をクリックします。

アプリIDと必要な Cookie が取得できますので、値をコピーして退避しておきます。

3.2.2. Chrome Devツールを使用する場合

拡張機能を使用せずに、Chrome Devツールを使用して直接 Cookie を取得するには、以下の手順で行います。

  1. Chrome の開発ツールを起動し、Bubble エディタを開きます。
  2. 「Network」タブで「Fetch/XHR」で絞り込みを行い「calculate_derived」リクエストを探します。
  3. リクエストの「Headers」から「Cookie」キーを探して値をコピーしておきます。

3.3. ncScale で Bubble アプリの情報を登録

最後に ncScale で Bubble アプリの情報を登録していきます。

ncScale の「Select a tool」から「Bubble」を選択します。もし「Select a tool」が見当たらない場合は、メニュー左下にある「Settings」から、画面上部に表示される「Tools」を選択すること表示することができます。

「Create Bubble tool」で、それぞれの項目に取得した値を設定して「Create tool」をクリックします。

項目 詳細
Name ツールの名前を任意で指定
Bubble app Id BubbleアプリID
Cookies 取得したクッキー値

以上で、ncScale と Bubble の連携が完了です。

4. 動作確認

では、実際にアプリを動かして幾つかログを取得してみましょう!

4.1. Overview(概要)

Overview では、Alerting と Logs の概要が選択した日付の範囲で確認することができます。日付は「Today」「Yesterday」「Last7days」「Last14days」「Last30days」の中からいずれかを選択することができます。

4.2. Log management(ログ管理)

Log management では、ログの取得数に関するグラフと、ログのリストを取得することができます。

取得するログについても、メッセージ内容やエラーのみといったフィルタリングはもちろん、SQL を使用した絞り込みを行うこともできます。

ログの詳細についても、人によっては Bubble 上で確認するよりも、見やすいと感じられるかもしれませんね。

4.3. Alerting(アラート)

Alerting(アラート)では、新しく通知を作成したり、それらを編集したりすることができます。

通知は SQLクエリを作成して送信するように設定します。無料で利用できる Community プランでも、Email、Webhook、Slack に対して通知を実行でき、またメッセージをカスタマイズすることもできます。

通知の詳細では、マッチしたログの一覧を確認することも可能となっています。

実際にメールで受け取った通知は、下図のようなイメージです。

4.4. レポート

収集したログ内容は、レポートとして受け取ることもできます。集計期間は「Daily」「Weekly」「Monthly」から選択することができ、デフォルトは「Weekly」です。

実際にメールで受け取ったレポートは、下図のようなイメージで、レポートから直接ダッシュボードに遷移することができます。

5. 具体的な活用例

最後に ncScale の具体的な活用方法についてご紹介したいと思います。

今回は Bubble アプリとの連携をテーマにしていましたので、活用するシーンも Bubble で考えていきますが、基本的に ncScale などの監視ツールに期待する効果としては、「システムダウンに備える」や「ダウンタイムを最小限に抑える」といったことが大きな目的として挙げられると思います。

今回の例では、Bubble で発生したエラーをキャッチして ncScale から管理者へメール通知するという場合の設定をしていきましょう。

通知の設定は、Alerts > Create alert from template から作成します。

Bubble では、アプリの応答に問題が発生した場合、以下のような「Operation timed out -- app too busy」といったログを出力することがありますので、このエラーをキャッチする場合の通知を設定してみます。

ncScale では、Bubble の連携用に使用できるテンプレートがすでに幾つか用意されていて、今回はこのエラーをキャッチできる「Triggered if app is too busy」とうテンプレートがありますので、こちらを使用していきます。

通知対象のログが発生したかどうかは、SQL クエリで判断します。今回のテンプレートで定義されている SQL クエリは以下です。

SELECT * FROM logs 
WHERE extra.app_version = "live" 
AND severity = "error" 
AND extra.error_message LIKE "%busy%"

このクエリの場合、本番環境(live)で発生したエラーで、かつメッセージには「busy」という文字列が含まれているログが発生した場合に通知が反応することを意味しています。開発環境での通知に切り替えたい場合は、extra.app_version を「test」したり、メッセージに特定の文字を更に追加したい場合は、以下のように修正することで絞り込みの条件を更新することができます。

SELECT * FROM logs 
WHERE extra.app_version = "test" 
AND severity = "error" 
AND (extra.error_message LIKE "%busy%" 
     OR extra.error_message LIKE "%timed out%")

上記の例では、開発環境で「busy」や「timed out」といったメッセージが出力されるエラーが発生した場合の条件を設定しています。

条件の設定ができたら、Notifications の Add new channel から通知先を設定して保存すれば完了です。下図の例ではメールでの通知を設定しています。

また、通知の送信には閾値(Thresholds)を設定することができますので、例えば「○○分感の間に特定のメッセージが○回記録されたら通知する」といった設定をすることもできます。これは、閾値の設定を「For every logs matched」から「Custom」に変更するだけで設定できます。

閾値を利用することで、例えば、ログインエラー時に発行されるメッセージ(例:We didn’t find an account with those login credentials)を取得するクエリを設定すれば、短時間に発生する多くのログインエラーを検知することで攻撃の可能性を早期に発見することができるかもしれません。

エラー発生時の迅速な情報収集は、良質なサービスと目指す上での必須スキルともいえますので、効果的に閾値が利用できると良いですね!

まとめ

いかがでしたか?今回は、ノーコードアプリケーションのスタックを監視するためのツール ncScale と Bubble を連携する方法についてご紹介しました!無料プランの範囲内でも、アプリ規模によっては効果的に利用ができそうですね。

また、ノーコードラボでは ncScale とは別になりますが、Bubble に特化したセキュリティ監査ツール Flusk Vault の導入についてもサポートしています。Flusk Vault にも強力なモニタリング機能がありますので、ぜひそちらの記事も参考にしてみてくださいね。

では、次回は Xano との連携を予定しています。どうぞお楽しみに~!

参考リンク

documentation.ncscale.io

blog.nocodelab.jp

www.flusk.eu