【ベータ版】サイトの見た目の変化を監視
URLを指定して定期的にスクリーンショットを撮影し、前回の画像と比較して見た目の変化を検知するツールです。文章では気づきにくいレイアウトの崩れや表示異常を対象にしています。現在はベータ版として提供しています。
何を検知するか
指定した間隔でページのスクリーンショットを撮影し、前回の画像と比較します。文字の変化ではなく、レイアウトの崩れ、画像の表示エラー、意図しないデザイン変更など、見た目の違いを対象にします。
ベータ版としての現状
広告の入れ替わりや日付表示など、意図的に変化する部分まで検知してしまう場合があります。差分の判定結果は都度確認しながら運用することをおすすめします。
活用例
CSSの更新後に意図しない崩れが起きていないか、外部の広告タグが原因でレイアウトが壊れていないかを、担当者が毎回目視する代わりに確認する用途に使います。
使い方と料金
URLとチェックの間隔を指定すると、その間隔でスクリーンショットを比較します。料金は基本料金$0.040と$0.001の合計で、1回のチェックあたり$0.041です。
活用例
CSS更新後の崩れを検知
合同会社みどりデザインがサイトのデザインを更新した後、主要ページを一定期間監視し、意図しない崩れが起きていないかを確認します。
外部広告タグによる表示崩れの発見
広告タグを追加した後にレイアウトが崩れていないか、公開中のページを継続的に監視します。
キャンペーンバナーの表示確認
期間限定のキャンペーンバナーが正しく表示され続けているか、公開期間中は定期的に確認します。
よくある質問
ベータ版とはどういう意味ですか。
提供中ですが、広告や日時表示のように意図的に変化する部分まで差分として検知してしまう場合があるという意味です。
文章の変化も検知できますか。
この機能は見た目の比較が中心です。文章内容の変化だけを検知したい場合は、ページの変更を検知する監視機能のほうが向いています。
料金はいくらですか。
1回のチェックにつき基本料金$0.040と$0.001の合計で$0.041です。
スマートフォン表示も確認できますか。
画面サイズを指定して撮影できるため、スマートフォン表示に近い条件での比較にも使えます。
日本語のサポートはありますか。
恐れ入りますが日本語でのサポートはなく、対応は英語またはスペイン語です。ツールの画面表示は日本語のままです。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/monitor-visual \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"input":"…"}'const res = await fetch("https://api.kit.forhosting.com/web/monitor-visual", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"input": "…"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/monitor-visual",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"input": "…"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/monitor-visual", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"input":"…"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"input":"…"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/monitor-visual", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"input": "…"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.monitor_visual",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
422 | task_failed | タスクの処理に失敗しました。このタスクは課金されません。 |