Visualpingが高すぎたので自作したWebサイトの視覚的変化モニタリングSaaS(SiteSnapshot)
(sitesnapshot.io)こんにちは、GeekNews読者の皆さん。
13年目のバックエンド開発者で、現在は1人のメイカーとして活動しているIT人材です。
Web制作会社や保守運用の仕事をしていると、クライアントから「サイトが崩れている」と連絡を受け、慌てて確認すると正常なことがよくありました。(実際には一時的なエラーだったり、ブラウザキャッシュの問題だったりした経験は、皆さんにもあると思います。)
既存のVisualpingやUptimeRobotのような優れたツールはありますが、複数のクライアントサイトを管理するにはコスト負担が大きかったり(Enterprise only)、単純なPingチェックだけでは画面UIの崩れ(CSSエラーなど)を検知しにくかったりしました。
そこで、「制作会社や開発チームが気軽に使える視覚的モニタリングツール」を自分で作ろうと考え、SiteSnapshotを開発しました。
-どんな課題を解決するのか?
視覚的モニタリング: 単にサーバーが生きているか(200 OK)ではなく、実際のブラウザがレンダリングした画面をキャプチャし、以前の時点と比較(Diff)することで、UIの崩れや変更箇所を視覚的に知らせます。
作業証跡: クライアントに送れる週次/月次レポート(PDF)を自動生成します。「このように管理している」という証跡用に作りました。
コスト効率: 既存競合よりはるかに低価格で、より多くのチェック頻度と保存期間を提供することを目標にしています。
-技術スタック(Tech Stack)
GeekNewsの皆さんは技術的な内容のほうが気になると思うので共有します。
Frontend/Backend: Next.js (App Router), TypeScript
Database: Supabase (PostgreSQL)
Deployment: Vercel
Core Engine: Headless Chromeを活用したスクリーンショット取得と、Pixel-matchアルゴリズムによる画像比較
Coming Soon: 現在、Go(Golang)で社内イントラネット/ローカル環境のモニタリング向け軽量Agentも開発中です。(近いうちに公開予定です!)
-フィードバックのお願い
無料登録が可能で、利用中のサービスを無料でジョブ登録することもできます。
まだ1人開発で作った初期バージョンなので、至らない点が多いです。
特にUXの面や、モニタリング通知の精度という観点で、GeekNewsの皆さんの辛口フィードバックをお待ちしています。
「こういう機能がないのはなぜか」「この部分は使いづらい」など、どんな意見でもありがたく受け止めます。
下のリンクから、別途インストールなしですぐにテストしていただけます。
未熟ではありますが、お役に立てることがあればコメントを残してください!
誠心誠意お答えします!
ありがとうございます。
1件のコメント
https://sitesnapshot.io