ToolJetへのBright Dataの統合によるリアルタイム監視

この記事では、以下について学びます：

ToolJetとは何か、ローコードのフルスタックアプリケーション開発プラットフォームとして何をもたらすか。
Bright Dataとの連携がエンタープライズグレードのウェブアプリ開発に最適な理由。
ToolJetとBright Dataを使用してリアルタイム監視のための実用的なウェブアプリケーションを構築する方法。
ToolJet + Bright Dataの統合によってサポートされるその他のユースケース。

さっそく始めましょう！

ToolJetとは？

ToolJetは、フルスタックの社内アプリケーション、ダッシュボード、ワークフロー、AIエージェントを構築するためのAI搭載ローコードプラットフォームです。

大規模なフロントエンド・バックエンド開発を行わずに、管理パネル、CRM、データダッシュボードなどのツールを迅速に提供するのに役立ちます。インフラとデータを完全に管理しながら、データベース、API、SaaSツールを安全な社内アプリに接続したいエンタープライズに特に有用です。

ToolJetはオープンソースであり、38,000以上のGitHubスターを誇っています。エンタープライズグレードの柔軟性を持つクラウドデプロイメントに加え、セルフホスティングもサポートしています。

主な機能

ToolJetが提供する主な機能は以下の通りです：

AIアプリビルダー：UI、データベーススキーマ、ロジックを含むフルスタックアプリケーションを自然言語プロンプトから作成。
ワークフロー自動化：ビジュアルロジック、トリガー、条件、スケジュールイベントを使用してマルチステップのワークフローを構築。
80以上のインテグレーション：データベース、API、クラウドストレージ、SaaSプラットフォームにすぐに接続。
ToolJetデータベース：外部セットアップなしで高速なCRUD操作を実現する組み込みのPostgreSQLバックエンドデータベース。
AIエージェント：複雑なマルチシステムワークフローを自動化するインテリジェントエージェントを作成。
コード拡張性：高度なロジックと変換のためにカスタムJavaScriptまたはPythonを追加。
エンタープライズセキュリティ：SSO（SAML、OIDC、LDAP）、RBAC、監査ログ、暗号化、コンプライアンス基準をサポート。
柔軟なデプロイメント：ToolJet Cloudで実行するか、AWS、GCP、Azure、Kubernetes、またはDockerでセルフホスト。
Gitベースのバージョン管理：プロフェッショナルな開発ライフサイクル管理のためのGitSyncとCI/CDワークフローをサポート。

ToolJetでBright Data APIを接続する理由

エンタープライズの社内アプリケーション、ダッシュボード、ワークフローにはデータが必要なことは言うまでもありません。しかし、高品質なビジネスインサイトを生成するために社内データベースだけに頼るだけでは不十分です。

社内システムは自社内で何が起きているかを教えてくれます。しかし、市場、競合他社、またはより広いデジタルエコシステムで何が起きているかを説明することはできません。

本当の課題は、外部ウェブデータを大規模に収集して使用することが難しいことです。ウェブサイトは常に構造を変化させており、多くはアンチボット保護を使用しており、データはしばしば非構造化、不整合、または不完全です。

スクレイピングが可能な場合でも、何千ものソースにわたる信頼性の維持は継続的なエンジニアリング上の問題となります。その結果、エンタープライズは外部データを社内アプリケーションに統合することに苦労しています。

解決策は、ToolJetのような社内アプリ構築ツールと専用のウェブデータインフラレイヤーを組み合わせることです。ここでBright Dataの出番です！

解決策としてのBright Data API

ToolJetアプリケーションをBright Dataに接続することで、社内ダッシュボードとワークフローは事実上あらゆるウェブサイトからのリアルタイムで構造化された信頼性の高いデータにアクセスできます。ToolJetでの統合はBright Data APIを通じて実現され、Bright Dataの製品へのアクセスが提供されます：

SERP API：Google、Bing、その他のプロバイダーからの検索エンジン結果を収集し、市場調査、SEOトラッキング、競合分析を強化。
Web Unlocker API：CAPTCHAとアンチボットシステムをバイパスして事実上あらゆるウェブサイトのコンテンツにアクセスし、クリーンなHTMLまたはMarkdownを返す。
ウェブスクレイピングAPI：カスタムスクレイパーを構築せずに、Amazon、LinkedIn、Instagramなどの主要プラットフォームから構造化データを抽出。
Crawl API：ドメイン全体を構造化データセットに変換し、包括的なデータパイプラインとAI対応ワークフローを実現。

Bright Dataが際立っているのは、大規模なデータ収集のために特別に構築されたエンタープライズグレードのインフラです。そのネットワークには195カ国にわたる4億以上のIPアドレスが含まれ、99.99%の稼働率と99.95%の成功率を達成しています。

Bright DataスクレイピングAPIを使用してToolJetでリアルタイムデータ監視アプリを作成する方法

このセクションでは、Apple App Storeのアプリレビューデータを監視するアプリケーションの構築方法を学びます。これはアプリの評価の変化を継続的に追跡したり、競合アプリを監視したりするために使用できます。

ToolJetはフルウェブアプリケーションの構築に使用され、データはBright Dataから取得されます。同じアプローチを使用して他の多くのシナリオやユースケースを構築できることに注意してください。

以下の手順に従ってください！

前提条件

このチュートリアルを進めるには、以下が必要です：

ToolJetアカウント（無料プランで十分です）。
APIキーを持つBright Dataアカウント。Bright Data APIキーの生成に関する公式ガイドに従ってください。

Bright Data スクレイパーAPIの仕組みに慣れておくことも役立ちます。

ステップ#1：Apple App Store スクレイパーAPIを理解する

これから構築するToolJetフルスタックアプリケーションは、Bright Data経由でApple App Storeから取得したデータに依存します。そのため、Bright DataのApple App Store スクレイパーAPIを理解しておくことが重要です。

まずBright Dataアカウントにログインします。Bright Dataコントロールパネルで、左側のメニューから「スクレイパー > スクレイパーライブラリ」に移動します。これにより「スクレイパーライブラリ」ページが表示され、利用可能なすべてのBright Data スクレイパーAPIを探索できます。

「apps.apple.com」を検索し、対応するスクレイパーカードをクリックします：

Apple App Store スクレイピングAPIページで、「Apple App Store > URLで収集」エンドポイントを選択します。これにより、関心のあるApple App Store情報がスクレイピングされます。

Bright Dataコントロールパネルから、APIを設定してテストし、その入力と出力の構造を理解できます。例えば、フィットネス業界の以下の競合アプリのApple App Store情報とレビュースコアを監視したいとします：

https://apps.apple.com/us/app/planet-fitness/id399857015
https://apps.apple.com/us/app/myfitnesspal-calorie-counter/id341232718
https://apps.apple.com/us/app/crunch-fitness/id398210959

「入力 > url」フィールドに追加し、「手動で実行」を押してAPIコールをテストします：

「Apple App Store - URLで収集」スクレイパーAPIエンドポイントの手動テスト

Apple App Store APIエンドポイントは、以下のURLにPOSTリクエストを送信することで呼び出せることに注意してください：

https://api.brightdata.com/datasets/v3/scrape?dataset_id=gd_lsk9ki3u2iishmwrui

このHTTPリクエストのボディには、スクレイピングするAppleアプリのURLのリストが含まれます。

「スナップショット」タブで、生成された結果をダウンロードできます。JSONとしてダウンロードすると、次のようなものが表示されます：

出力には、評価、評価者数、最近のレビューを含むApp Store情報が含まれています。これは、Bright Data APIがApple App Storeのアンチボット保護をバイパスして関心のあるデータを取得できたことを意味します。

これはまさに競合アプリ監視に必要な新鮮なウェブデータです。素晴らしい！

ステップ#2：新しいToolJetプロジェクトを作成する

フルスタックアプリケーションのソースデータの取得方法がわかったので、次のステップはアプリケーションを構築することです。まずToolJetにログインし、「ホーム > ホーム」ページで「空のアプリを作成」ボタンをクリックします：

これによりToolJetのアプリビルダーに移動し、ノーコード・ローコードのエクスペリエンスでアプリケーションを定義できます。

新しい空のToolJetアプリケーションに名前（例：「Apple App Store アプリ監視」）を付け、UIに慣れる：

素晴らしい！Bright Data APIインテグレーションを通じてデータソースを接続し、ウェブアプリを構築するためのコンポーネントを追加する時です。

ステップ#3：Bright Data搭載のREST APIクエリを設定する

Apple App Store監視ウェブアプリのソースデータは、Bright Data スクレイパーAPIを使用して収集されます。そのため、「REST API」ボタンをクリックしてデータソースを設定します：

APIに名前（例：「AppleAppStoreScrapingAPI」）を付け、「設定」タブを以下のように入力します：

メソッド：POST
URL：https://api.brightdata.com/datasets/v3/scrape（これは非同期モードでのBright Data スクレイパーAPIに使用されるメインエンドポイントです。）
ヘッダー：

– Authorization：Bearer <YOUR_BRIGHT_DATA_API_KEY>（Bright DataアカウントへのスクレイパーAPIによる認証に必要です。<YOUR_BRIGHT_DATA_API_KEY>を実際のBright Data APIキーに置き換えてください。）

Bright Data スクレイパーAPIとの接続のための「REST API」データソースの設定開始

この設定により、ToolJetはどのAPIエンドポイントを呼び出し、どのように認証するかを認識します。

次に、スクロールダウンして「パラメータ」タブに移動します。以下のクエリパラメータを追加します：

dataset_id：gd_lsk9ki3u2iishmwrui（これは「Apple App Store、URLで収集」スクレイパーエンドポイントのIDに対応します。）
format：json（APIが構造化JSONデータを返すことを確認します。）

正しいBright Data スクレイパーAPIを呼び出すためのクエリパラメータの設定

「ボディ」セクションに移動し、「Raw」モードを有効にして、Bright Dataコントロールパネル（ステップ#1）で先ほど生成したリクエストボディを貼り付けます：

{"input":[{"url":"https://apps.apple.com/us/app/planet-fitness/id399857015"},{"url":"https://apps.apple.com/us/app/myfitnesspal-calorie-counter/id341232718"},{"url":"https://apps.apple.com/us/app/crunch-fitness/id398210959"}]}

これにより、スクレイパーAPIは正しいApple App Storeアプリをスクレイピングします。

右上の「実行」を押してAPIが動作することを確認します。すべてが正しく設定されていれば、「プレビュー」セクションにステップ#1の最後に得たものと同じ結果が表示されるはずです：

これにより、ToolJetアプリケーションがBright Data スクレイパーAPIを介してオンデマンドで構造化されたApple App Storeデータを動的に取得できることが確認されます。素晴らしい！

ステップ#4：取得したデータを表示するテーブルを追加する

データソースが設定されたので、ウェブアプリのフロントエンド部分を構築する必要があります。まず、スクレイピングされたデータを表示するテーブルを追加します。

アプリビルダーUIの右側のセクションで、「+」（コンポーネント）ボタンをクリックし、「テーブル」を選択して、アプリケーションキャンバスにドラッグします：

テーブルコンポーネントをクリックし、右パネルで「プロパティ」タブを開きます。「データソース > AppAppStoreScrapingAPI」を選択することで、テーブルの入力データを以前に設定したREST APIの出力に設定します：

テーブルの入力データソースを「AppAppStoreScrapingAPI」REST APIに設定

次に、テーブルが入力データを正しく表現できるように列を指定します。「列」セクションで「動的列を使用」オプションを切り替えます：

次に、以下の設定を貼り付けます：

{{[
  { name: "URL", key: "url", id: "1" },
  { name: "Title", key: "title", id: "2" },
  { name: "Subtitle", key: "sub_title", id: "3" },
  { name: "Developer Name", key: "developer.developer_name", id: "4" },
  { name: "Developer Link", key: "developer.developer_link", id: "5" },
  { name: "Top Charts", key: "top_charts", id: "6" },
  { name: "Monetization Features", key: "monetization_features", id: "7" },
  { name: "Image", key: "image", id: "8" },
  { name: "Screenshots", key: "screenshots", id: "9" },
  { name: "Description", key: "description", id: "10" },
  { name: "Rating", key: "rating", id: "11" },
  { name: "Number of Raters", key: "number_of_raters", id: "12" },
  { name: "1-Star %", key: "reviews_star_percentage.one_stars", id: "13" },
  { name: "2-Star %", key: "reviews_star_percentage.two_stars", id: "14" },
  { name: "3-Star %", key: "reviews_star_percentage.three_stars", id: "15" },
  { name: "4-Star %", key: "reviews_star_percentage.four_stars", id: "16" },
  { name: "5-Star %", key: "reviews_star_percentage.five_stars", id: "17" },
  { name: "Reviews", key: "reviews", id: "18" },
  { name: "Events", key: "events", id: "19" },
  { name: "Data Linked To You", key: "data_linked_to_you", id: "20" },
  { name: "Seller", key: "seller", id: "21" },
  { name: "Category", key: "category", id: "22" },
  { name: "Languages", key: "languages", id: "23" },
  { name: "Copyright", key: "copyright", id: "24" },
  { name: "Size (MB)", key: "size", id: "25" },
  { name: "Compatibility", key: "compatibility", id: "26" },
  { name: "Age Rating", key: "age_rating", id: "27" },
  { name: "Price", key: "price", id: "28" },
  { name: "In-App Purchases", key: "In_app_purchases", id: "29" },
  { name: "Support", key: "support", id: "30" },
  { name: "More By This Developer", key: "more_by_this_developer", id: "31" },
  { name: "You Might Also Like", key: "you_might_also_like", id: "32" },
  { name: "Privacy Policy", key: "privacy_policy", id: "33" },
  { name: "Developer Website", key: "developer_website", id: "34" },
  { name: "Featured In", key: "featured_in", id: "35" },
  { name: "Country", key: "country", id: "36" },
  { name: "Latest App Version", key: "latest_app_version", id: "37" },
  { name: "App ID", key: "app_id", id: "38" },
  { name: "Provider", key: "provider", id: "39" },
  { name: "Timestamp", key: "timestamp", id: "40" },
  { name: "Input URL", key: "input.url", id: "41" }
]}}

このJSON表現は、Bright Dataのコントロールパネルで確認できる出力データスキーマ（任意のスクレイパーAPIページの「概要 > 辞書」セクション）と一致します。

注意：ToolJetが文字列をオブジェクトとして正しく解釈するために、JSON式を{{ }}で囲むことを忘れないでください。

テーブルにBright Data Apple App Store スクレイパーAPIから取得したデータが表示され始めるはずです：

素晴らしい！Bright Dataを搭載したリアルタイム監視のためのフルスタックウェブアプリが形になり始めています。

ステップ#5：動的データ取得のためのボタンを追加する

スクレイピングされたデータを含むテーブルができたので、オンデマンドで更新するオプションを追加します。

まずButtonコンポーネントを追加して「データを更新」というラベルを付けます。次に「新しいイベントハンドラー」をクリックして「クリック時」イベントを選択します：

アクションとして「クエリを実行」を選択し、実行するクエリとして「AppleAppStoreScrapingAPI」を選択します：

この設定により、ToolJetはユーザーがボタンをクリックするたびに設定されたBright Data スクレイパーAPIを実行します。APIはリアルタイムで最新のApple App Storeデータを取得します。テーブルはすでにクエリ（APIレスポンスに対応）にバインドされているため、クエリが完了するとすぐに更新されたデータが自動的に表示されます。

ユーザーエクスペリエンスを向上させるために、2つの追加クリックイベントを追加することもできます：1つはAPIコール開始前にテーブルのローディング状態を有効にするもの、もう1つは新しいデータが読み込まれた後に無効にするものです。

「データを更新」ボタンの「イベント」セクションは次のようになっているはずです：

素晴らしい！Bright Dataを搭載したToolJetアプリケーションのフロントエンドが完成しました。残るはワークフローのテストだけです。

ステップ#6：Apple App Store監視のフルスタックウェブアプリをテストする

アプリケーションが動作することを確認するには、「プレビュー」ボタンをクリックします：

専用のプレビューページでフルスタックアプリケーションと対話できるようになります。最初はテーブルにデータが表示されません。

ワークフローをテストするには、「データを更新」をクリックします。その後：

予想通りテーブルがローディング状態になります。
「AppleAppStoreScrapingAPI」クエリがトリガーされ、Bright Data Apple App Store APIを呼び出して最新データを動的にスクレイピングします。
リクエストが完了するとテーブルのローディング状態が解除されます。
取得したデータがテーブルに表示されます。

ご覧の通り、テーブルにはレビュー評価、評価者数、星評価のパーセンテージ分布などのデータが含まれています。結果は、技術的なスキルに関係なく誰でも使用できるフルスタックのApp Store監視ツールです。

これがToolJet + Bright Data APIがウェブスクレイピングとリアルタイムデータアプリケーションにもたらす力です。

ToolJet + Bright Dataの追加ユースケース

前章で示した例は、ToolJet + Bright Dataの組み合わせがサポートする多くのユースケースの一つに過ぎません。他のものも探ってみましょう！

市場・トレンド監視ダッシュボード

ウェブサイト、フォーラム、デジタルプラットフォーム全体で新興市場トレンドをリアルタイムで追跡するダッシュボードを構築するというアイデアです。Bright Dataがライブウェブデータを収集して構造化し、ToolJetがそれをチャート、テーブル、KPIなどの視覚的なインサイトに変換します。これにより、エンタープライズチームは手動調査なしに需要の変化、新製品カテゴリー、ユーザー行動の進化を素早く特定でき、より迅速な戦略的意思決定が可能になります。

Eコマース価格・在庫監視システム

エンタープライズはBright Data APIとToolJetダッシュボードを組み合わせて、複数のEコマースプラットフォーム全体で製品価格、在庫状況、バリエーションを監視できます。データは自動的に収集・正規化され、調達、価格戦略、またはマーケットプレイス最適化チーム向けのToolJetアプリに表示されます。これにより、動的な価格決定と在庫不足や競合他社の値引きへの迅速な対応が可能になります。

ブランドレピュテーションプラットフォーム

Bright Dataを使用してアプリストアやマーケットプレイスなどのプラットフォームからレビュー、評価、ユーザーフィードバックを収集し、ToolJetがこれをライブセンチメントとレピュテーション監視システムに変換できます。企業は評価トレンドを追跡し、ネガティブなスパイクを検出し、リアルタイムで顧客フィードバックを分析できます。これにより、マーケティングおよび製品チームがユーザーセンチメントの変化により迅速に対応できます。

リードジェネレーションと市場マッピングツール

Bright Dataはディレクトリ、検索エンジン、公開ソースから構造化されたビジネスと連絡先データを収集し、ToolJetがそれを社内リード管理ツールに変換します。チームはリードを視覚的にフィルタリング、セグメント化、優先順位付けし、自動エンリッチメントワークフローを構築し、アウトリーチパフォーマンスを追跡できます。これにより、B2B営業および成長チームのためのスケーラブルなデータ駆動型の見込み客開拓システムが作成されます。

まとめ

このブログ記事では、ToolJetとは何かを学びました。また、Bright Dataとの統合がエンタープライズの社内データをライブで新鮮な高品質のウェブデータで補完するのに役立つ理由も理解できました。

示されたように、Bright Data APIのおかげで統合はわずか数クリックで完了します。これらはウェブスクレイピング、検索、大規模クロール、その他多くをサポートします。結果は、市場監視からブランドレピュテーション分析まで、幅広いユースケースに対応したエンタープライズグレードのウェブアプリのセットです。

ToolJetでのBright Data統合についてサポートが必要な場合は、24時間365日対応のサポートチームにお問い合わせください。

今すぐBright Dataアカウントを作成して、AI対応のウェブデータソリューションを探索し始めましょう！

お問い合わせ無料トライアル