この記事では、以下のことを学びます：
- ToolJetとは何か、そしてローコードのフルスタックアプリケーション開発プラットフォームとして何をもたらすのか。
- 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を返すことで、事実上あらゆるウェブサイトのコンテンツにアクセスします。
- Web Scraper API：カスタムスクレイパーを構築することなく、Amazon、LinkedIn、InstagramなどのメジャープラットフォームからStructuredデータを抽出します。
- Crawl API：ドメイン全体を構造化されたデータセットに変換し、包括的なデータパイプラインとAI対応ワークフローを実現します。
- Discover API：リアルタイムのウェブ発見を行い、下流分析のための検証可能なソースを持つランク付けされたインテントベースの結果を取得します。
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/id399857015https://apps.apple.com/us/app/myfitnesspal-calorie-counter/id341232718https://apps.apple.com/us/app/crunch-fitness/id398210959
「入力 > 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キーに置き換えてください。）
この設定により、ToolJetはどのAPIエンドポイントを呼び出すか、そしてどのように認証するかを認識します。
次に、スクロールして「パラメータ」タブに移動します。以下のクエリパラメータを追加します：
dataset_id：gd_lsk9ki3u2iishmwrui（これは「Apple App Store、URLで収集」スクレイパーエンドポイントのIDに対応します。）format：json（APIが構造化されたJSONデータを返すことを確認します。）
次に「ボディ」セクションに移動し、「ロー」モードを有効にして、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の出力に設定します：
次に、テーブルが入力データを正しく表現できるように列を指定します。「列」セクションで「動的列を使用」オプションを切り替えます：
次に、以下の設定を貼り付けます：
{{[
{ 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：動的データ取得のためのボタンを追加する
スクレイピングされたデータを含むテーブルができたので、オンデマンドで更新するオプションを追加します。
まずボタンコンポーネントを追加して「データを更新」というラベルを付けます。次に「新しいイベントハンドラー」をクリックして「クリック時」イベントを選択します：
アクションとして「クエリを実行」を選択し、実行するクエリとして「AppleAppStoreScrapingAPI」を選択します：
この設定により、ToolJetはユーザーがボタンをクリックするたびに設定済みのBright Data スクレイパーAPIを実行します。APIはリアルタイムで最新のApple App Storeデータを取得します。テーブルはすでにクエリ（APIレスポンスに対応）にバインドされているため、クエリが完了するとすぐに更新されたデータが自動的に表示されます。
ユーザーエクスペリエンスを向上させるために、APIコールが開始する前にテーブルのローディング状態を有効にし、新しいデータが読み込まれた後に無効にする2つの追加クリックイベントを追加することもできます。
「データを更新」ボタンの「イベント」セクションは次のようになるはずです：
素晴らしい！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の組み合わせでサポートされる多くのユースケースの1つに過ぎません。他のいくつかを探ってみましょう！
市場・トレンド監視ダッシュボード
ウェブサイト、フォーラム、デジタルプラットフォーム全体にわたる新興市場トレンドをリアルタイムで追跡するダッシュボードを構築するというアイデアです。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対応のウェブデータソリューションの探索を始めましょう！
