「ページ全体を1枚の画像で保存したい」。よくある、ささいな業務の願いです。検索すれば、その場で入る便利な拡張機能がいくつも見つかります。
ただ、入れる直前に手が止まりました。保存したいのは、顧客の情報や社内の数字が並んだ画面です。その便利な道具が、裏で何をしているのかは、私たちには見えません。「たぶん大丈夫」で機密画面を渡してよいものか。ここで立ち止まったことが、今回の話の出発点です。
結論から言うと、私たちは外部の拡張機能を入れる代わりに、ブラウザにもともと備わっている撮影の仕組み（Chrome拡張のAPI・ページを画像で保存する標準機能）を呼び出す小さな道具を、自分たちで書きました。コードを書く相棒には Claude（クロード・Anthropic製の対話型AI）や ChatGPT（チャットジーピーティー・OpenAI製の対話型AI）を使い、できたコードは GitHub（ギットハブ・コードを保管・履歴管理する定番サービス）に置いて、いつでも中身を読み返せるようにしています。何を使い、なぜそうしたのか。順に書いていきます。
1分の無料セルフ診断は、5つの質問に答えるだけで、時間と人件費の変化の目安が出ます。
「便利だけど、中身が見えない」という不安の正体
外部の拡張機能やアプリは、たいてい中身がブラックボックスです。良し悪しの話ではなく、構造としてそうなっています。
- どこかにデータを送っているのか、送っていないのか、使う側からは確かめにくい
- 提供元が更新したときに、前にはなかった通信が静かに足される余地がある
- 「安全です」という説明を信じるかどうか、最後は提供元への信頼頼みになる
ここで大事なのは、これを「危ないからやめろ」という話にしないことです。多くのツールは便利で、実際に役立ちます。問題は、**機密を扱う画面でそれを使うとき、安全かどうかを”自分で確かめる手段がない”**こと。判断を他人に預けたまま、機密を通すことになる。この居心地の悪さが、不安の正体でした。
やってみた答え：「自分で書いて、自分で読めるもの」をつくる
そこで私たちが選んだのは、同じ機能を自分たちでつくるという道でした。やりたいことは「表示中のページを丸ごと1枚で保存する」だけ。これは、ブラウザがもともと内部に持っている撮影の仕組み（Chrome拡張の標準API・表示中のタブを画像として取得する機能）を呼び出せば実現できます。新しく特別な技術を持ち込む必要はありませんでした。
自前にすると、ブラックボックスだった部分が、こう変わります。
つまり、得られたのは「絶対に安全」という保証ではありません。得られたのは、安全かどうかを”信じるしかない”状態から、“自分で確かめられる”状態への変化です。
- 外部に情報を送るコードが、1行も入っていないことを、自分の目で確認できる
- すべての処理が自分たちの手元にあり、勝手に書き換わらない
- 何か気になれば、いつでも中身を読み返せる
判断を他人に預けるのをやめて、自分の管理下に戻した。これが、自前でつくる本当の意味でした。
正直に書くと、「自作なら全部安全」ではありません
ここは誠実にお伝えします。今回の道具は、ブラウザの内部機能を呼ぶために比較的強い権限を使っています。強い権限を使う以上、「無害な道具だから安全」とは言えません。
正しくはこうです。「自分たちが書いて、自分たちで読めるコードだから、何をしているか確かめられる」。安全の根拠は「無害そうだから」ではなく「中身を検証できるから」にあります。逆に言えば、検証できないものは、たとえ便利でも機密画面では慎重になるべきだ、というのが今回いちばんお伝えしたい線引きです。
AIに「丸投げ」では、こうはいかない
「AIを使えば一発でできたんでしょう」とよく言われます。正直に言うと、そうではありませんでした。AIと何度かやりとりを重ねながら、少しずつ形にしていった、というのが実際のところです。
一度で思いどおりに動いたわけではありません。うまくいかない場面では、「何がしたいのか」「なぜうまくいかないのか」を人が見極めて、AIと一緒に直していく。その積み重ねで仕上げました。
ここに、AIとの付き合い方の本質があります。AIは強力ですが、出てきたものをそのまま使えばよい、という道具ではありません。目的を定め、出てきたものを評価し、方向を直す。この判断は人がやる仕事です。丸投げではなく、使いこなす。今回も、その繰り返しでした。
実際に、どの道具を使うのか
抽象論だけだと伝わりにくいので、今回の道具を「どの工程で何を使ったか」まで具体的に書きます。特別なものは何ひとつ使っていません。むしろ、機密を扱うからこそ、中身が見える定番のものだけで組みました。
- 画面を1枚で保存する部分 … 外部の拡張機能は使わず、ブラウザがもともと持っている撮影の仕組みを呼びます。具体的には、Chrome拡張の標準API（拡張機能向けにブラウザが公式に用意している命令群）の一つで、表示中のタブを画像として取得する機能です。ここがこの道具の心臓部で、「外に何も送らずにページを画像化できる」ことが自前にした最大の理由です。新しい外部サービスを足さずに済むので、検証する範囲がそのぶん狭くなります。
- コードを書く相棒 … Claude（クロード・Anthropic製の対話型AI）と ChatGPT（チャットジーピーティー・OpenAI製の対話型AI）。どちらもコードのたたき台を出したり、エラーの原因を一緒に探したりするのに向きます。私たちの使い分けは、長めのコードを腰を据えて読み解きたい時は Claude、短く素早く別案を出してほしい時は ChatGPT、という程度のゆるい役割分担です。どちらが正解という話ではなく、出てきたコードを人が読んで判断する、という前提は変わりません。
- コードを保管・履歴管理する部分 … GitHub（ギットハブ・コードを保管し、いつ誰が何を変えたかの履歴を残す定番サービス）。自前で持つということは、そのコードを後から読み返せる状態に置くということです。GitHubに置いておけば、「外に送る処理が一行も無いこと」を必要な時にいつでも確認でき、変更があれば差分も追えます。検証できる状態を保ち続けるための土台、という位置づけです。
ポイントは、どれも目新しい道具ではないことです。ブラウザに最初から入っている機能、広く使われている対話型AI、定番のコード管理。機密を扱う一点だからこそ、中身が見える・履歴が追える道具で固める。これが私たちの選び方です。
御社の「ちょっとした不便」が自前で持てるものか、まずは目安を見てみませんか。1分の無料セルフ診断で、その場で試算が出ます。
中小企業にとって、これが何を意味するか
「うちは拡張機能を自分でつくったりしない」。もちろん、その通りです。お伝えしたいのは、つくり方ではありません。「機密を、中身の見えない外部に預ける」以外の選択肢がある、という事実です。
外部のSaaSや拡張機能は便利で、すべてを自前にする必要はありません。大事なのは、「ここは自分の管理下に置きたい」という一線を、自分で引けること。その一線の内側は、外部に預けずに自前で持つ。今回のように、やりたいことが小さければ、自前で持つのは思うより現実的です。
規模が小さいほど、機密が一度漏れたときの打撃は大きくなります。だからこそ「便利そうだから」で全部を外に預けるのではなく、何を自分の手元に残すかを選べることが、これからの守りになります。
よくある質問
Q. 自前でつくると、かえって手間が増えませんか？ A. すべてを自前にすれば、もちろん増えます。ポイントは「全部」ではなく「機密が通る一点だけ」を選ぶこと。やりたいことが小さく区切られていれば、外部に預けずに持つほうが、長い目で見て安心です。どこを自前にすべきかの見極めが要点になります。
Q. 専門の社員がいなくても、こういうことはできますか？ A. 経営者や社員が技術を覚える必要はありません。「どの作業を、誰の管理下に置きたいか」という判断さえあれば、その実装と翻訳は私たちの仕事です。
Q. 結局、何から考えればいいですか？ A. まず「これだけは外部に渡したくない画面・データ」を一つ挙げてみてください。それが、自分の管理下に残す最初の一線になります。
便利な道具を使うかどうかで悩むより、何を自分の手元に残すかを先に決めるほうが、ずっと安心して前に進めます。安全を「信じるしかない」ままにせず、「自分で確かめられる」側に寄せていく。その一手を、御社の業務に合わせて一緒に探せたらと思います。
1分の無料セルフ診断は、5つの質問に答えるだけで、時間と人件費の変化の目安が出ます。
