吾輩は大学院生である。やる気はまだ無い。

会社を休職して学問の道に足を踏み入れたものの、毎日研究室で論文を読んでは眠くなり、コーヒーを飲んでは集中力が散漫になる日々を送っている。

そんなある日、オンラインでのプレゼンテーションをみていると、発表者がWebアプリケーションのデモをしている最中、パスワードフィールドの内容が画面共有で丸見えになっていた。発表者は気づいているが、仕方ないという様子で、見ているこちらがヒヤヒヤした。これは他人事ではない。

「画面共有中にパスワード入力、*化されるとはいえ参加者全員に見られている…」

ああ、なんという恐怖！プレゼンターの集中力を削ぎ、参加者をヒヤヒヤさせる！世界中のWebデモは、至る所でパスワード漏洩の危険に晒されているのだ。ハンズオン講習、製品デモ、オンライン授業...発表者は苦しんでいる。吾輩の心は、いまはもう真っ青に凍りついていた。

「なんでこんな危険なデモ環境なのだ！」

やる気の微妙な吾輩でも、これなら作れるかもしれない。そうして生まれたのが、Webのパスワードフィールドにぼかしをかける今回のChrome拡張である。うっかりミスを機能として防ぐべく、開発者としての魂が震えた瞬間である。

防衛策：Chrome拡張`Password Field Blur`降臨キタコレ！

github.com

今回の目標

パスワードフィールドの入力内容を完全にぼかし
文字数すらわからないレベルの徹底隠蔽
動的に追加されるパスワードフィールドも見逃さない
ワンクリックでON/OFF切り替え可能
プレゼン中でも安心してデモできる環境の構築

漏洩リスクの特定

対策前のうっかり状態

【ログインフォーム】
ユーザー名　demo@example.com
パスワード　••••••••••••  ← 文字数バレバレ！
         ↑ 一文字ずつ入力する様子も丸見え！

対策後の安心状態

【ログインフォーム】
ユーザー名　demo@example.com
パスワード　[ぼかしでまったく見えない暗黒の霧]
         ↑ 文字数も入力状況も完全に隠蔽！

見てくれ、この圧倒的なうっかり事故への回避力を！

事故予防策`Password Field Blur`の効用

パスワードフィールドの隠蔽

Chrome拡張を有効化した瞬間から、入力箇所が完全にぼかされます。まさに全自動うっかり事故予防策の誕生です。

ワンクリック制御起動

ツールバーのアイコンをクリックするだけでうっかり事故予防の開始・停止を制御可能。アイコンの色で現在の予防状況が一目でわかります。

ブルー: 事故予防作戦実行中（パスワード完全隠蔽）
グレー: 事故予防作戦停止中（通常表示）

予防策の導入方法

導入したい奇特な人間は以下の手順を行う。

GitHubからクローム拡張をダウンロード（https://github.com/ueponx/Password_Field_Blur）
Chrome の chrome://extensions を開く
【デベロッパーモード】をオンにする
【パッケージ化されていない拡張機能を読み込む】で事故予防兵器を配備せよ

面倒？論文を読むよりは圧倒的に楽だろう。

カスタマイズ可能な予防レベル

技術に詳しい人間は、吾輩の作った予防レベルをカスタマイズできる。

/* ぼかし強度の調整 */
.password-field-blur {
  filter: blur(8px) !important; /* 数値をいじって強度を変える */
}

/* 背景色での隠蔽強化 */
.password-field-blur {
  background: rgba(0, 0, 0, 0.3) !important; /* より濃い色で完全隠蔽 */
}

まあ、そんなことをする暇があるなら論文でも読めばよいのだが。

おわりに

もはやパスワード漏洩の心配がない世界に慣れてしまった吾輩は、元の危険な世界には戻れない。技術的なことは正直よくわからんが、動けばよいのである。

パスワード漏洩事故との戦いは、吾輩が飽きるまで続くであろう。

このPassword Field Blurとかいう事故予防策が、少しでも多くの人間のプレゼンテーションでのうっかりミスとやらを減らせれば、吾輩がヒヤヒヤした甲斐があったというものである。

プレゼン事故防止策、ここに一段落！

（追記）知り合いには「こんなものを作る時間があるなら論文を読め」と言われたが、吾輩は世界平和への貢献だと信じて開発を続けている。やる気はないが、意地はあるのだ

防衛策：Chrome拡張Password Field Blur降臨キタコレ！