← AIバイブコーディングTips 一覧へ
PDF / Local Tool

PDFをアップロードせず、
同じ場所に毎回目隠しするHTMLツールを作った話

PDFを外部サービスに上げず、定型位置の目隠し・注記をブラウザ内で繰り返す。今回は、その操作手順をJSONテンプレートとして保存できる無料HTMLツールを作りました。

この記事の結論: 単発の白塗りなら既存ツールで足ります。差別化するなら、同じPDF作業をJSONテンプレート化して、次回も同じ位置へ適用できることです。

作ったもの

作ったのは、PDF Local Mask Template という無料ツールです。

PDFをブラウザで開き、ページ上をドラッグして目隠し範囲や注記を置きます。作った操作はJSONとして保存でき、次回似たフォーマットのPDFに読み込んで再利用できます。

単なる白塗りでは弱い

PDFの一部を白く塗るだけなら、ローカルのPDFビューアや無料のPDFツールでもできます。そこで戦っても、わざわざ新しいツールを使う理由が弱くなります。

今回の狙いは、白塗りそのものではありません。毎回同じフォーマットのPDFを扱うときに、同じ場所へ同じ処理をする作業を軽くすることです。

作業単発ツールテンプレート化
1回だけ一部を隠す十分やや大げさ
毎回同じ欄を隠す毎回手で置くJSONを読み込んで再利用
同じ位置に注記する毎回入力位置と文言を保存
作業手順を人に渡す説明が必要JSONファイルで渡せる

JSONに保存するもの

JSONテンプレートにPDF本文は入れません。入れるのは、ページ番号、座標、幅、高さ、種類、色、注記テキストです。

{
  "app": "PDF Local Mask Template",
  "version": 1,
  "operations": [
    {
      "page": 1,
      "type": "mask",
      "x": 0.12,
      "y": 0.24,
      "w": 0.32,
      "h": 0.05,
      "color": "white"
    }
  ]
}

座標はページサイズに対する割合で持ちます。完全に同じPDFでなくても、近いレイアウトなら再利用しやすくするためです。

セキュリティ面で言い切らないこと

このツールは、印刷・目視確認向けの簡易処理です。

PDFの上に白い四角を置くと、見た目では隠れます。ただし、PDF内部に元のテキストやオブジェクトが残る場合があります。つまり、これは安全な墨消しではありません。

言えること
  • PDFをサーバーへアップロードせず、ブラウザ内で処理する
  • 印刷・目視確認用の目隠しや注記に使える
  • 同じ操作をJSONとして保存して再利用できる
言わないこと
  • 安全な墨消し
  • 個人情報の完全削除
  • PDF内部データの削除保証

アップロードしない、という安心感

オンラインPDF編集サービスは便利ですが、社内資料や取引先資料を外部へアップロードしたくない場面があります。

このツールは、PDFファイルをユーザーのブラウザで読み込みます。ページ表示、範囲追加、JSON保存、PDF書き出しもブラウザ内で行います。

ただし、初期版ではPDF処理ライブラリを外部CDNから読み込んでいます。より強いローカル性を出すなら、将来はライブラリも自サイト同梱にするのが次の改善です。

AIに頼む前に決めたこと

この手のツールは、いきなり「PDF編集ツールを作って」と頼むと大きくなりすぎます。先に範囲を絞りました。

この制限があるから、1枚HTMLの無料ツールとして成立します。

今後の改善候補

まずは無料公開して、使われるかを見ます。反応があるなら、次の改善候補はこのあたりです。

今は売り物ではなく、入口です。 BOOTH商品を増やす前に、無料ツールでアクセスが取れるかを見ます。

無料ツールを開く

PDFを選び、ドラッグで範囲を追加し、必要ならJSONテンプレートとして保存してください。