契約書の改定、マニュアルの版管理、デザインデータの最終チェック。 私たちの業務には「新旧ファイルの差分確認」という作業がつきものです。世の中には便利なオンライン差分ツールが溢れていますが、企業で働く私たちには高い壁が立ちはだかります。
「そのファイル、外部サーバーにアップロードして大丈夫ですか？」
機密情報や個人情報が含まれるPDFを、どこの誰が運営しているか分からないサーバーに送信することは、セキュリティポリシー上「NG」であることがほとんどです。結局、アナログな目視確認や高価な専用ソフトに頼らざるを得ないのが現状ではないでしょうか。
そこで今回は、生成AI（Claude Opus 4.5）との「Vibe Coding」によって、サーバーへのデータ送信を一切行わず、ブラウザの中だけで完結するセキュアなPDF差分検出ツールを開発しました。そのアーキテクチャと、現場での使い勝手を追求したUX設計について解説します。
目次
アーキテクチャ解説：サーバーレス・セキュリティの仕組み
このツールの最大の特徴は、「Client-Side Only（クライアントサイド完結型）」である点です。
「ブラウザ完結」とは何か
一般的なWebアプリは、ファイルをサーバーに送信（POST）し、サーバー側で処理をして結果を返します。しかし、今回開発したツールは違います。
- 読み込み: HTML5の FileReader APIを使用し、ファイルをユーザーのブラウザメモリ（ArrayBuffer）に読み込みます。
- 描画: PDF.js ライブラリを使用し、メモリ上のPDFデータをHTMLの
- 比較: 2つのCanvasのピクセルデータをJavaScriptで比較・合成します。
この一連の流れにおいて、外部サーバーへの通信（Fetch/XHR）は一切発生しません。ブラウザの「ネットワーク」タブを監視しても、外部へのデータ送信ログはゼロ。つまり、LANケーブルを抜いたオフライン状態（エアギャップ環境）でも完全に動作します。
依存ライブラリの安全性
ツールは主に以下のオープンソースライブラリで構成されています。
- PDF.js: Mozilla製のPDFレンダリングエンジン
- pdf-lib: ブラウザ内でPDFを生成・編集するためのライブラリ
- SheetJS (xlsx): 差分レポートをExcel化するライブラリ
これらはCDN経由で読み込むか、あるいは同一サーバー内に配置することで、外部との依存関係さえも遮断した運用が可能です。
UX設計：人間の「見落とし」を防ぐ視覚的アプローチ
セキュリティだけでなく、実務で使える「機能性」にもこだわりました。AIとディスカッションを重ねて実装したのが以下のUXです。
実際のアプリがこちらです
旧ファイルと新ファイルをそれぞれドラッグ＆ドロップして、「差分を検出」ボタンをクリックするだけです。
認知負荷を下げる「グレースケール × 赤」の対比
カラーの文書同士を比較すると、どこが変更点か目が泳いでしまいがちです。 そこで本ツールでは、元データをあえてグレースケール（モノクロ）化して表示する処理を入れました。その上で、差異があるピクセルだけを鮮烈な「赤」でハイライトします。
これにより、背景情報（変わっていない部分）が後退し、変更箇所だけが浮かび上がって見えるようになります。「間違い探し」のために脳を使うコストを極限まで下げました。
陰の立役者「透かし」と「証跡ダウンロード」
差分がないページが表示された時、ユーザーは不安になります。「本当にチェックしたのか？ エラーで表示されていないだけでは？」と。 この心理的不安を解消するため、差分がないページには「差分なし」という透かし（Watermark）を大きく合成しました。
さらに、画面で確認した結果は、pdf-lib を使って「ハイライト付きPDF」として再構築し、ダウンロードが可能です。ブラウザのCanvasを画像化し、再度PDFに固める処理もすべてローカルで行われるため、校正作業のエビデンス（証跡）としてそのまま利用できます。
開発プロセス：AIとの「Vibe Coding」とセキュリティ監査
今回の開発手法はいわゆる「Vibe Coding（AIと対話し、バイブスを高めながら高速実装する手法）」ですが、特筆すべきは「AIによるセキュリティ監査」のプロセスです。
「作る」だけでなく「疑う」プロセス
コードを書いてもらった後、違う生成AI（Gemini 3.0）に対してあえてこう問いかけました。 「このコードに、外部へデータを送信する処理は本当に含まれていないか？ エンジニア視点で監査してほしい」、ある意味でのセカンドオピニオンです。
AIは自身の出力したコードを再レビューし、fetch 関数の使用箇所（今回は内部処理用のみ）や、データの流れを解析し、論理的に「安全である」ことを証明してくれました。このように、AIを「開発者」としてだけでなく「セキュリティ監査員」として対話に参加させることで、コードの信頼性を飛躍的に高めることができました。
まとめ：セキュリティは「不便」ではない
「セキュリティのために不便なアナログ作業を我慢する」という時代は終わりました。適切なアーキテクチャ（クライアントサイド完結）を選べば、最強のセキュリティと、最高の業務効率は両立できます。
何より、こうした専用ツールを、エンジニアではない担当者がAIと共に短期間で開発できることこそが、最大の技術革新かもしれません。 皆さんもぜひ、身の回りの業務課題を「セキュアな自作ツール」で解決してみてはいかがでおしょうか。