APIを使わない自動化：ローコード・プラットフォーム上のヘッドレス・ブラウザLatenode

こんにちは、Latenode のダニエルです👋。

今日は、ノーコード・エキスパートの間ではあまり使われていない自動化ツールについて説明しよう。さらに、Latenode にネイティブで備わっているこの機能は、ZapierやMakeなどのプラットフォームでは利用できないが、ワークフローを強化する強力な可能性を秘めている。

ちなみに、ChatGPTを使ってウェブを閲覧するたびに、あなたはChatGPTを使っていることになります！ヘッドレスブラウザです。

ヘッドレス・ブラウザの説明

一歩下がって、ビジネス・プロセス・オートメーションの世界を見てみよう。ほとんどの場合、企業は自社のニーズを完全に満たす2つの自動化アプローチしか使っていない：

1. API経由でプロセスを自動化

これは、パブリックAPIを持つ異なるアプリケーション間のデータフローを構築するための堅実なアプローチである。自分でデベロッパー・ハブに行って、必要なことを正確に行うための正しいAPIコールの方法を見つけ出すか、Latenode のJavaScript AIアシスタントに依頼すれば、リクエストを記述するだけで、必要なアプリとの統合を数秒で構築してくれる。

残念なことに、ウェブ上のすべてのアクションが、同じことを自動的に行うための基盤となるAPIインフラを持っているわけではない。そこで企業は、APIエンドポイントを必要としない2番目の方法に頼ることになる。

2. APIなしで自動化するヘッドレス・ブラウザ

この記事ではそのすべてを紹介する。さあ、席についてリラックスして、後にあなたの背中をカバーすることになる新しいオートメーション分野に飛び込もう。

ヘッドレス・ブラウザとは？

ChromeやFirefoxのような普通のインターネット・ブラウザを想像してほしい。ボタン、アドレスバー、ブックマークなど、目に見えるインターフェース部分をすべて取り除いてみよう。何が残るだろうか？インターネットをナビゲートし、ウェブサイトを開き、それらと対話することができる「頭脳」だ。これが「ヘッドレス」ブラウザと呼ばれるものだ。視覚的なコンテンツを表示することなく、ウェブサイト上のさまざまなタスクを自動化し、猛スピードで実行することができる。人間ではなく、スクリプトがこのプロセスを制御する。

ヘッドレスブラウザの重要な部分は、JavaScriptカスタムスクリプトを実行する機能です。ボタンをクリックしたり、フォームに入力したり、サイトのメニューをナビゲートしたりといったユーザーアクションをシミュレートすることができます。これは、自動テスト、ウェブスクレイピング、ウェブポータルでの反復タスクの自動化などのタスクに不可欠です。

ヘッドレス・ブラウザの仕組み

ヘッドレス・ブラウザの操作にはいくつかの重要なステップがあり、その可能性を使い始めるにはこれらを理解することが不可欠だ：

1. ブラウズするURLまず、対話したいウェブページのURLを指定する必要がある。これは通常のブラウザでウェブサイトのアドレスを入力するようなものだが、ここではスクリプトを通して行う。
2. セレクタでナビゲートするセレクタは、ヘッドレス・ブラウザにウェブ・ページ上のどの要素を操作したいかを伝えるのに重要です。これらはCSSセレクタ、XPath、またはJavaScriptコマンドです。ボタン、テキストフィールド、画像など、特定の要素をピンポイントで指定することができます。
3. 追加パラメータ：タスクによっては、フォームにテキストを入力したり、ファイルをアップロードしたり、ボタンをクリックしたりする必要があるかもしれません。これらのアクションは、あなたが書くスクリプトによって処理されます。スクリプトは、何をいつ実行するかを指定します。

基本的には、ヘッドレス・ブラウザに、どこに行けばいいのか、何を探せばいいのか、どこをクリックすればいいのか、どのテキストをタイプすればいいのか、コピーすればいいのか、などを指示する必要がある。

ヘッドレス・ブラウザは何ができるのか？

ヘッドレスブラウザがサポートする基本的なアクションはいくつかあります：

• 自動化されたナビゲーションとインタラクション：ヘッドレスブラウザは、フォームへの入力、リンクのクリック、データのスクレイピング、ウェブページのスクリーンショットの撮影などのタスクを実行できます。
• データの抽出と処理：多くの場合、目的はウェブページからデータを抽出することです。ヘッドレス・ブラウザはページのHTMLとテキストを解析し、必要な情報を抽出することができます。
• カスタムスクリプトの実行ヘッドレスブラウザはJavaScriptを実行できるので、カスタムスクリプトを実行して、動的コンテンツの処理や認証の処理など、複雑な方法でウェブページと対話することができます。

どのような目的でヘッドレス・ブラウザを使用できますか？

基本的なアクションを考慮すると、ヘッドレス・ブラウザは信じられないほど便利な高度なアクションの範囲を提供する。実現するには、ヘッドレス・ブラウザをLatenode のローコード・シナリオに統合する必要がある。それにより、以下のユースケースにヘッドレス・ブラウザを実装することができる：

ヘッドレス・ブラウザの使用例

では、ヘッドレス・ブラウザの点火をコピー・ペーストしてホットワイヤーで繋ぐだけで、経験がなくてもできる使用例を紹介しよう。

ユースケース #1: ヘッドレスブラウザでGPTプラグインと同じようにウェブを検索する

面白い事実：ChatGPTを使ってウェブをブラウズするように頼むと、ヘッドレスブラウザが登場します！似たようなもののMVPを作って、ヘッドレスブラウザに検索クエリを作ってもらいましょう。

以下は、そのシナリオの概要である：

• WebhookのURLは、検索リクエストのある投稿リクエストを探しています。
• ヘッドレス・ブラウザはそのリクエストを受け、グーグルを開き、検索順位1位から10位までのタイトルを返す。
• Webhookレスポンスは、結果をWebhookに送り返す。

ヘッドレス・ブラウザのコードにもう少し深く潜って、ウェブフックからのデータをマッピングし、ヘッドレス・ブラウザ・ノードがGoogleで何を検索すべきかを知るようにしよう。

その後、POSTリクエストを作成し、検索クエリをBodyの'Search'Keyとして送信しましょう。ほんの数秒で、シナリオの実行結果を見ることができる。

自分で試してみたい？ すぐに使えるテンプレートをコピーして、Headless Browserでウェブをブラウズしてみましょう！

ユースケース #2: ヘッドレスブラウザでウェブページからデータを解析する

ウェブサイトからデータを解析する！マーケットプレイスからの価格のリアルタイム同期から、さらなる分析のためのSEO要素の一括スクレイピングまで、幅広く使用できます。

最初の例：Latenode'のランディングページからすべてのタイトル（H1、H2、H3）をスクレイピングするのはどうだろう？やってみよう！

• シナリオは同じように見える：
• Webhookは解析するURLをリッスンする。
• ヘッドレスブラウザは、指定されたURLに移動し、H1、H2、H3タイトルを見つけ、取得します。
• Webhook レスポンスには、Webhook トリガーを呼び出した結果のタイトル一覧が表示されます。

次に、シナリオに対して再度POSTリクエストを行い、以下のようにボディ・セクションで解析するウェブサイトを送信する：

その結果、ヘッドレス・ブラウザに送ったウェブページから、H1、H2、H3タイトルのリストを得る。

注：重要なことは、Latenode のシナリオの中で、その情報を使って、さらにデータを変換したり、必要なところに情報を送信したりすることができるということです。

つ目の例：米ドルやユーロから英ポンドへの為替レートなど、重要な情報を取得する必要があるウェブサイトのAPIがない場合、ヘッドレス・ブラウザを使って直接アクセスする。

2つの通貨でもう1回POSTリクエストを行うことで、Latenode 、必然的に2つの為替レートがレスポンスとして返ってくる。

ユースケース #3: ヘッドレスブラウザを使ったフォーム入力

ここで、検索と取得から入力に焦点を切り替えよう。APIなしで自動的にウェブフォームに入力するのはどうだろう？

• ヘッドレスブラウザにウェブフォームへのリンクを提供する。
• テキストを入力させる。
• テキストを入力するHTML、CSS、またはXPath要素へのパスを指定します。

このような単純なHTMLコードを記入するコードは次のようになる：

const targetUrl = '<https://webhook.latenode.com/368/dev/SIMPLE_FORM>';

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
await page.goto(targetUrl);

// Using 'id' selectors as per your HTML structure
await page.type('#subject', data["{{$3.body.subject}}"]);
await page.type('#title', data["{{$3.body.title}}"]);
await page.type('#overview', data["{{$3.body.overview}}"]);
await page.type('#platform-updates', data["{{$3.body.updates}}"]);
await page.type('#useful-materials', data["{{$3.body.materials}}"]);
await page.type('#other-news', data["{{$3.body.news}}"]);

// The 'value' in the select option should match the 'value' attribute of the option
await page.select('#platform', 'TestEmail');
await page.click('#submit'); // Updated to use the 'id' of the submit button

// Assuming the popup is the confirmation of submission
await page.waitForSelector('#popup', {visible: true, timeout: 5000});

return { message: 'FORM SUBMITTED' };

使用例4：ヘッドレスブラウザでスクリーンショットを撮る

最後になるが、ウェブで見つけたものは何でもスクリーンショットにすることだ。

ショーケースを作成するために、Latenode プラットフォーム上にダイナミックなチャートを作成し、毎週新しい情報を更新します。JavaScriptのノードとグローバル変数を使っています。

こんな感じだ。しかし、毎週更新されるこのチャートを誰かと共有したいとしたらどうだろう？それを現実のものにするために、Headless Browsersにスクリーンショットを作成し、必要な場所にファイルを送るよう助けを求めることができる。

ヘッドレス・ブラウザ・ノードは、スクリーンショットをbase64形式で返します。その後、JavaScriptノードによって、このファイルを取得するために必要なシステムに応じて変換することができます。

このすぐに使えるテンプレートをカスタマイズして、スクリーンショットをTelegramチャットに送信するには、以下の手順に従ってください：

• ギャラリーからテンプレートをコピーしてください。
• JavaScriptノードで、Telegram Bot TokenとChatIDをあなたのデータに置き換えます。
• シナリオをデプロイし、ウェブフックURLを手動で呼び出します。

結論 

この記事では、Latenode 、ローコード自動化のための強力なツールであるヘッドレス・ブラウザのパワーを明らかにした。これらのブラウザは、ChromeやFirefoxのような通常のインターフェイスを持たず、ウェブを使用するための高速でスクリプト駆動型の方法を提供する。フォームへの入力、ウェブサイトからのデータ取得、自動テスト（特に複雑で動的なサイト）などのタスクに最適です。

当社のヘッドレス・ブラウザ・ノードが際立っているのは、ローコード環境での使いやすさです。つまり、深いコーディングの知識がなくても、その機能を使うことができるのです。単純なタスクの自動化から複雑なウェブインタラクションの処理まで、Headless Browser は様々なニーズに対応する堅牢なツールです。

Latenode をお楽しみください、 Discordコミュニティにご参加ください。

ヘッドレス・ブラウザ・オートメーションの視覚的な表現については、当社のプラットフォームですぐに使えるヘッドレス・ブラウザ・ノードを使ったローコード・オートメーションのチュートリアル（Latenode ）をご覧ください。

関連記事

• JavaScript＋AI：ローコード自動化のための完璧なデュオ
• あらゆるアプリとの統合を実現：2つの方法
• アーリーバードには史上初のライフタイム・ディール！