【追記】
Google Chrome 66 より動画の自動再生が制限されてしまいました。
そのため、DevTools を開いても自動では地球は滅亡せず、大幅に UX が低下しています。
地球滅亡のライブ感を楽しみたい方は、Firefox, Safari など他ブラウザでご利用ください。
【追記2】 LT のスライドはこちら
何をしたの？
Chrome などの DevTools を開くと人類が滅亡するジョークライブラリ作ったよ！
- devtool-meteor
DevTools を開いたら人類滅亡https://t.co/DOhhkHBDcG pic.twitter.com/UYOKvTxTgy
— diescake (@pomeranian_dev) 2018年1月14日
俺にも使えるのか・・？
使い方は簡単！！
メソッドとかプロパティとかオプションはない硬派なライブラリだよ！（╹◡╹）
$ npm install --save devtool-meteor
require('devtool-meteor'); // import でも OK
詳細は GitHub の README.md を見てね！
どんな力を使ったの？
devtools-detect というライブラリを利用して、
DevTools の表示/非表示の切り替え発生時に呼び出される EventListener で、
DOM のクリアと共に YouTube の人類滅亡動画をコンテンツエリアいっぱいに引き伸ばして自動再生させています。
devtools-detect とは一体…？
devtools-detect は実装自体シンプルなので、興味があれば直接見てもらっても良いですが、
一番重要なのは下記条件文で DevTools の表示/非表示の切り替えを検出している点ですね。
var isLongOuterWidth = (window.outerWidth - window.innerWidth > 160);
var isLongOuterHeight = (window.outerHeight - window.innerHeight > 160);
if (XOR(isLongOuterWidth, isLongOuterHeight)) { // XOR
// DevTools 開いている
} else {
// DevTools 開いていない
}
function XOR(a, b) {
return ( a || b ) && !( a && b );
}
上記コードは説明しやすいように一部改変していますが、
基本的に outerWidth と innerWidth もしくは outerHeight と innerHeight の差分を見て、
DevTools 分の領域が存在しないか確認するというロジックで動作しています。
なので、仕組み上 DevTools を別ウィンドウ表示にした場合は検出できず、
また、DevTools 以外にも 160px 以上の領域が生まれた場合誤爆します。
例えば、windows でめちゃくちゃスクロールバー太くしてる環境とか、
8K モニタでブラウザ全画面表示でもスクロールバーの幅が 160px 超えるかも？
固定値っぽいので超えないですね。
他には上部に JWord みたいなツールバーが5~6段にもインストールされてる環境とか、
コンテンツ領域外の要素が幅を利かせてくると怪しい。
あと、スマートデバイスのブラウザでも、
スクロール時にアドレスバーやツールバーが動的に invisible になるタイプであれば、
ブラウザ(JSEngine)の仕様によっては誤爆する環境もありそうです。
【追記】
Firefox のブックマークサイドバー表示してると誤爆するそうです。
それなりにユーザがいる印象がありますので、ジョーク以外で使うのは難しいかも…
ちなみに、このライブラリを真面目にハック対策に利用するのであれば、
DevTools を検出したからといって目に見える変化は与えずに、
解析を難航させる内部的な変化を加えるのが良いでしょう。
devtools-detect の回避策はいくらでもあるので、存在自体を悟らさてはダメです。
所感＆雑記
一番最初は、DevTools をトリガーにアナログテレビ風の砂嵐を表示しようとしましたが、
あんまり SNS 映えしないなー、と思って人類滅亡させました。
他のアイデアとしては、
- 貞子が画面から出てくる
- バルバトス「ツールなんぞ使ってんじゃねぇ！！」
- オルガ「覗くんじゃねぇぞ…」
とか色々ありましたが、
やっぱり何度動作確認しても人類滅亡が笑えるのでこれに落ち着きました。（╹◡╹）
「予測可能回避不可能」は伊達じゃないですね。