1. はじめに
映画やゲームに出てくる、あの「緑色に光る怪しいハッカー画面」。 エンジニアなら一度は憧れるあの世界観を、フレームワークを一切使わず、標準的なHTML/CSS/JavaScriptだけで再現してみました。
外部ライブラリをあえて使わないことで、ブラウザの標準機能でどこまで「質感」を追い込めるかにこだわっています。
※左上にカメラ映像が映る。
2. 実装した機能とこだわり
世界観を決定づける「ロゴ」の自作
技術以前のこだわりとして、アプリの顔となるロゴを Canva で自作しました。 「監視カメラ」をモチーフにしたデジタルチックなデザインにすることで、全体のUIの方向性をカチッと固めています。
こんな感じになります。
一度色を反転させてから表示させてます。なんかかっこいいから。
ライブフィード（監視カメラ風）
今回の自分的な目玉機能です。 getUserMedia でカメラを起動し、映像をそのまま出すのではなくCSSフィルタで加工しました。 セピア化してから色相を回転させ、コントラストを上げることで「深夜の監視カメラ映像」っぽい雰囲気に仕上げています。
画面の質感（走査線とグロー効果）
「それっぽさ」の正体はCSSです。
-
走査線: グラデーションを4px周期で繰り返して、古いモニターの質感を表現。
-
光沢感:
text-shadowを使って、文字がブラウン管の中で光っているようなエフェクトを追加しました。
疑似ターミナルとシステムクラッシュ
ログが1文字ずつ流れるタイピング演出や、処理が100%になった時の画面シェイク、そして最後に待ち受ける「システムクラッシュ」まで、一連のハッカー体験（？）を盛り込んでいます。
3. 開発で学んだ技術的なポイント
後から自分で見返すための、実装上の「気づき」です。
-
ビデオの配置: 映像が枠からズレる問題は、
object-fit: coverを使うことで解決。組み込み用UIなどでも応用できそうです。 -
DOM操作: 大量のログを流す際は、
scrollIntoViewで最新の行を追従させるのが鉄則。 -
デプロイ: Gitのデフォルトブランチ名の違いによるトラブルも、git branch -m で修正してGitHubからNetlifyへ。
4. まとめ
自分の好きな世界観を100%コードで表現するのは、やっぱり楽しいですね。 ライブラリを使わずに生コードで書くことで、ブラウザの基本機能を再確認する良い機会になりました。
次はもっと「低レイヤ」な動きをシミュレートしたり、演出をさらにブラッシュアップしていこうと思います。