ブラウザ：お気に入りに仕込む遊び技。キモダメシお化け屋敷？JavaScript

ブラウザでキモダメシ

～キモダメシお化け屋敷のブックマークレット～

ブラウザの「お気に入り」は
普通はページを開くためのものですが、

実は JavaScriptを登録すると小さなツールとして使うことができます。

こうした仕組みは ブックマークレット と呼ばれます。

今回は遊びネタとして、

ページに扉を登場させるブックマークレット

を作ってみます。

クリックすると、
ページ内で扉が現れ、時々お化けが出てきます。

仕組み：ブックマークレット（Bookmarklet）

ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。

次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。

JavaScript：

javascript:(()=>{const d=document;if(!d.getElementById('__door_style__')){const s=d.createElement('style');s.id='__door_style__';s.textContent='.__d{position:fixed;z-index:2147483647;width:120px;height:180px;perspective:800px}.__f{position:absolute;inset:0;border:4px solid #3b2a1d;border-radius:6px;background:#111;overflow:hidden}.__i{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;font-size:56px}.__p{position:absolute;inset:0;transform-origin:left center;background:#6a3d18;border:4px solid #3b2a1d;border-radius:6px;box-sizing:border-box;animation:__o .7s ease forwards}.__n{position:absolute;right:10px;top:50%;width:10px;height:10px;margin-top:-5px;background:#d8b56a;border-radius:50%}@keyframes __o{0%{transform:rotateY(0)}100%{transform:rotateY(-100deg)}}';d.head.appendChild(s)}const w=d.createElement('div');w.className='__d';w.style.left=Math.random()*(innerWidth-140)+'px';w.style.top=Math.random()*(innerHeight-200)+'px';const f=d.createElement('div');f.className='__f';const i=d.createElement('div');i.className='__i';i.textContent=Math.random()<0.25?'👻':'';const p=d.createElement('div');p.className='__p';const n=d.createElement('div');n.className='__n';p.appendChild(n);f.appendChild(i);f.appendChild(p);w.appendChild(f);d.body.appendChild(w);setTimeout(()=>{w.remove()},3000)})();