AIを使ってツールを作ってみました（第2弾）

Note

#20

Nobuhiro Yamazawa

社内メンバーのつぶやき

私は主にWebサイトの制作等に携わっておりますが、サイトに関わるセキュリティ情報などを、なかなか収集できていませんでした。
最近は、不正アクセスや情報流出、脆弱性などの言葉をよく聞くようになり、何かいい情報収集の方法はないかと考えていました。
そんなとき、社内のミーティングで、デザイン関連の情報をAIで自動収集し、Notionに自動登録しているという話を聞き、

それだ！

と思いました。
自分もその日のうちにChatGPTを使って、毎朝Webサイトに関するセキュリティ情報を自動収集し、Notionに登録するように設定しました。

主に収集している情報は
・WordPress本体・プラグイン関連
・不正アクセス関連
・サーバー・ホスティング関連
・その他Webサイトのセキュリティに関すること

などです。

情報を収集すると、いろいろな不正アクセス、プラグインの脆弱性、WordPressのリリースなどの情報が思った以上にたくさんありすぎて…
いまは毎日出社後に、一番最初に確認するルーティーンです。

毎日セキュリティ情報を見ていると、さまざまな脆弱性があるので、今度は弊社で制作したWebサイトのWordPressやプラグイン、PHPなどのバージョンや脆弱性が気になるようになりました。

制作したサイトの情報は管理しているものの、WordPressなどが自動アップデートされた場合、記録していたバージョンと現在のバージョンが異なっていることがあり、今は何のバージョンなのか、改めて調べる必要があり、都度手間がかかってしまいます。

保守契約を結んでいない過去に制作したWebサイトについても、問い合わせがきますので、WordPressのバージョンなど、できるだけ最新の情報を把握しておいた方がいいのではと考えていました。

そこでChatGPTにサイト一元管理でいい方法がないかツールを聞くと、

WordPressにプラグインを入れないといけない、管理画面に入らないといけない、収集できる情報が少ないなど。

希望としては外部からある程度簡易的に収集でき、管理画面に入る必要もなく、プラグインなどの設置の必要もなく、手間のかからないもの

やりとりの中でChatGPTこんなツール作れない？聞いたところ、

できますよ!!!と

では作ってしまおうと思いました!

今回は早めに作りたかったので、全てChatGPTにお願いしました。できたものに対して指示をし、再修正。うまく伝わらなかった部分のみ少しだけコード調整など行いました。

まず参考イメージ出してとサンプル画像を作成してもらい、そこからこういう機能が欲しい、こういう情報が欲しいなど、都度追加しバージョンアップしていきました。

↓↓↓下図が最初のイメージ画像（全情報が一つの画面にまとまっていた）

↓↓↓いまの管理画面と個別ページ（それぞれサイトごとの個別ページあり）

ツールはローカルのみで動き、下記機能があります。

主な機能
1. Webサイト稼働監視
・サイトの表示・接続エラー検知
・HTTPステータス・応答速度・リダイレクト確認

2. SSL証明書監視
・SSL証明書の有効期限確認
・期限切れ・期限接近の警告

3. WordPress監視
・WordPress本体のバージョン・更新状況確認
・プラグインの検出・バージョン管理
・Wordfenceによる既知の脆弱性チェック

4. PHP・アクセス解析の確認
・PHPバージョンの取得・更新候補の確認
・Google Analytics等の導入状況確認

5. 公式ニュース・サーバー情報
・WordPress・PHPの公式更新情報を自動取得
・さくら・Xserverのサーバー番号推定
・サーバーの障害・メンテナンス情報照合

6. 通知・履歴管理
・異常や更新情報のSlack通知
・アラート履歴・監視結果の記録
・ダッシュボードでの一括確認

7. サイト管理・データ管理
・監視対象サイトの登録・編集・削除
・手動確認・定期自動監視（標準6時間）
・Excel・CSV・JSONによるデータ出力・バックアップ

外部から取得できる情報は自動取得し、取得できない情報は後から手動で入力できるようにしています。
自動で取得できないものが多いので、サイト修正などで管理画面に入った際に、現在のバージョンを取得し、このツールに登録することにしています。

これらのツールを毎日見ることで、このサイトで使用中のプラグインに脆弱性がでた、サーバーのメンテナンスがある、WordPressがリリースされた、などが把握できるようになりました。

例えば、WordPressのバージョンは、現在のバージョンだけでなく、同じ系統の最新バージョンと、WordPress全体の最新バージョンも表示するようにしました。また、Wordfenceの脆弱性情報と照合することで、使用しているWordPress本体やプラグインに既知の脆弱性がないかも、確認できるようにしています。

このツールを使用しつつ、必要な機能を追加しようと思っています。

————————————
【技術構成】ChatGPT構築
フロントエンド：Next.js / React / TypeScript
バックエンド：Next.js API Routes
UI：CSS（カスタム実装）
データ保存：localStorage / JSONファイル
外部連携：Wordfence API / Slack Webhook / 公式RSS等
開発環境：Node.js / localhost（Mac）