tetsuya-kitayama
157 lines
7.1 KiB
Plaintext
157 lines
7.1 KiB
Plaintext
以下は、JavaScriptを使用してリアルタイムチャットのWebサイトを監視し、更新があったときにメッセージを表示するプログラムの例です。このプログラムでは、MutationObserverを使用してDOMの変更を監視します。
|
|
|
|
手順
|
|
チャットメッセージが表示されるDOM要素を特定します。
|
|
MutationObserverを使ってその要素の変更を監視します。
|
|
新しいメッセージが追加された場合に通知を表示します。
|
|
コード例
|
|
// 監視対象のチャットメッセージが表示される要素を取得
|
|
const chatContainer = document.querySelector('#chat-container'); // 適切なセレクタに置き換えてください
|
|
|
|
if (chatContainer) {
|
|
// 以前のメッセージを追跡するためのセット
|
|
const previousMessages = new Set();
|
|
|
|
// MutationObserverのコールバック関数
|
|
const observerCallback = (mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'childList') {
|
|
// 新しいメッセージをチェック
|
|
mutation.addedNodes.forEach((node) => {
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
const messageText = node.textContent.trim();
|
|
if (!previousMessages.has(messageText)) {
|
|
previousMessages.add(messageText);
|
|
console.log('新しいメッセージ:', messageText);
|
|
alert(`新しいメッセージ: ${messageText}`); // 必要に応じて通知方法を変更
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// MutationObserverの設定
|
|
const observer = new MutationObserver(observerCallback);
|
|
|
|
// 監視を開始
|
|
observer.observe(chatContainer, { childList: true, subtree: true });
|
|
|
|
console.log('チャットの監視を開始しました');
|
|
} else {
|
|
console.error('チャットコンテナが見つかりません');
|
|
}
|
|
|
|
説明
|
|
querySelectorで監視対象の要素を取得
|
|
チャットメッセージが表示されるコンテナ要素を取得します。セレクタはWebサイトに応じて変更してください。
|
|
|
|
MutationObserverでDOM変更を監視
|
|
childList: trueを指定することで、子要素の追加や削除を監視します。
|
|
|
|
新しいメッセージの検出
|
|
追加されたノードのテキストを取得し、以前のメッセージと比較して新しいものだけを処理します。
|
|
|
|
通知の表示
|
|
alertを使用して新しいメッセージを通知しますが、必要に応じてカスタマイズ可能です（例: ブラウザ通知やログ出力）。
|
|
|
|
注意点
|
|
このコードは、対象のWebサイトのDOM構造に依存します。セレクタを正確に指定してください。
|
|
サイトによっては、CSP（コンテンツセキュリティポリシー）によりスクリプトの挿入が制限されている場合があります。
|
|
長時間監視する場合、メモリ使用量に注意してください。
|
|
必要に応じて、さらにカスタマイズしてください！
|
|
|
|
|
|
GitHub Copilot
|
|
ブラウザのDOM操作を行うコードは、通常ブラウザ環境で動作することを前提としています。そのため、CLI（コマンドラインインターフェース）で動作させるには、ブラウザの代わりにDOMを操作できる環境を用意する必要があります。
|
|
|
|
CLIで動作させるためには、以下のような方法を取ることができます。
|
|
|
|
方法: Puppeteerを使用する
|
|
Puppeteerは、Node.jsで動作するヘッドレスブラウザ（Chromium）を操作するためのライブラリです。これを使えば、ブラウザ環境をエミュレートして、CLI上でDOM操作を行うことができます。
|
|
|
|
以下に、Puppeteerを使った例を示します。
|
|
|
|
手順
|
|
Node.jsをインストールします。
|
|
必要なライブラリ（Puppeteer）をインストールします。
|
|
Puppeteerを使ってチャットサイトを監視するスクリプトを作成します。
|
|
|
|
コード例
|
|
const puppeteer = require('puppeteer');
|
|
|
|
(async () => {
|
|
// ブラウザを起動
|
|
const browser = await puppeteer.launch({ headless: false }); // headless: true にすると非表示で動作
|
|
const page = await browser.newPage();
|
|
|
|
// チャットサイトにアクセス
|
|
await page.goto('https://example-chat-site.com'); // 実際のチャットサイトURLに置き換え
|
|
|
|
// チャットコンテナのセレクタ
|
|
const chatContainerSelector = '#chat-container'; // 適切なセレクタに置き換え
|
|
|
|
// チャットコンテナがロードされるまで待機
|
|
await page.waitForSelector(chatContainerSelector);
|
|
|
|
console.log('チャットの監視を開始します');
|
|
|
|
// 以前のメッセージを追跡するためのセット
|
|
const previousMessages = new Set();
|
|
|
|
// チャットの監視
|
|
await page.exposeFunction('onNewMessage', (message) => {
|
|
console.log('新しいメッセージ:', message);
|
|
});
|
|
|
|
await page.evaluate((chatContainerSelector) => {
|
|
const chatContainer = document.querySelector(chatContainerSelector);
|
|
|
|
if (chatContainer) {
|
|
const previousMessages = new Set();
|
|
|
|
// MutationObserverを設定
|
|
const observer = new MutationObserver((mutationsList) => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'childList') {
|
|
mutation.addedNodes.forEach((node) => {
|
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
const messageText = node.textContent.trim();
|
|
if (!previousMessages.has(messageText)) {
|
|
previousMessages.add(messageText);
|
|
window.onNewMessage(messageText); // 新しいメッセージを通知
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// 監視を開始
|
|
observer.observe(chatContainer, { childList: true, subtree: true });
|
|
}
|
|
}, chatContainerSelector);
|
|
|
|
// スクリプトを終了しないように待機
|
|
await new Promise(() => {});
|
|
})();
|
|
|
|
説明
|
|
Puppeteerのインストール
|
|
|
|
npm install puppeteer
|
|
|
|
|
|
ブラウザを起動 puppeteer.launchでヘッドレスブラウザを起動します。headless: falseにするとブラウザが表示されます。
|
|
|
|
チャットサイトにアクセス page.gotoで監視対象のチャットサイトにアクセスします。
|
|
|
|
DOM変更を監視 MutationObserverを使ってチャットコンテナの変更を監視します。新しいメッセージが追加されると、window.onNewMessageを通じてCLIに通知します。
|
|
|
|
スクリプトを終了しない await new Promise(() => {});でスクリプトが終了しないようにします。
|
|
|
|
注意点
|
|
実際のチャットサイトのURLとセレクタを正確に指定してください。
|
|
サイトによってはログインが必要な場合があります。その場合、Puppeteerでログイン処理を自動化する必要があります。
|
|
サイトの利用規約を確認し、スクレイピングが許可されているか確認してください。
|
|
この方法でCLI上でリアルタイムチャットの監視が可能です！ |