サイト更新通知アプリ
指定されたサイトに変化があった場合にLINEで通知します。
以下が、JavaScriptを使って指定されたサイトに変化があった場合にLINEで通知するアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>サイト更新通知アプリ</title>
<script>
// 監視するサイトのURL
const URL = "https://www.example.com/";
// LINE Notifyのアクセストークン(※本来はサーバーサイドで管理するべきですが、ここでは簡略化のために記述しています)
const ACCESS_TOKEN = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
// 監視開始
setInterval(() => {
fetch(URL)
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc1 = parser.parseFromString(html, "text/html");
const doc2 = parser.parseFromString(localStorage.getItem("lastHtml"), "text/html");
// 2回目以降で、前回との差分があるかどうかをチェック
if (doc2 && doc1.body.innerHTML !== doc2.body.innerHTML) {
sendLineNotify(`【サイト更新のお知らせ】\n${URL}`);
}
// 前回のHTMLを保存
localStorage.setItem("lastHtml", html);
})
.catch(error => {
// 通信エラーの場合はコンソールにエラーを出力するだけ
console.error(error);
});
}, 5000);
// LINE Notifyに通知を送信
function sendLineNotify(message) {
const params = new URLSearchParams();
params.append("message", message);
fetch("https://notify-api.line.me/api/notify", {
method: "POST",
headers: {
"Authorization": `Bearer ${ACCESS_TOKEN}`
},
body: params
});
}
</script>
</head>
<body>
<h1>サイト更新通知アプリ</h1>
<p>指定されたサイトに変化があった場合にLINEで通知します。</p>
</body>
</html>
```
このアプリでは、指定されたサイトのHTMLを5秒ごとに取得し、前回との差分をチェックします。差分がある場合はLINE Notifyに通知を送信します。また、localStorageを使って、前回のHTMLを保存し、次回以降のチェックに利用しています。
なお、LINE Notifyのアクセストークンは公開しないでください。また、この実装例はあくまでも参考程度に留めておき、実際にアプリを公開する際には、より安全な実装が必要です。