ブラウザ：お気に入りに仕込む遊び技。ページにモグラを登場させるJavaScript

ブラウザをモグラたたき状態に！？

～モグラ登場のブックマークレット～

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

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

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

今回は遊びネタとして、

ページに“モグラ” たちをヒョコヒョコ登場させるブックマークレット

を作ってみます。

クリックすると、
ページ内にモグラがあちこちに登場します。

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

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

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

JavaScript：

javascript:(()=>{for(let i=0;i<3;i++)setTimeout(()=>{let x=20+Math.random()*(innerWidth-90),y=40+Math.random()*(innerHeight-130),h=document.createElement("div"),m=document.createElement("div"),e1=document.createElement("div"),e2=document.createElement("div"),n=document.createElement("div");Object.assign(h.style,{position:"fixed",left:x+"px",top:y+"px",width:"70px",height:"80px",pointerEvents:"none",zIndex:999999,overflow:"hidden"});Object.assign(m.style,{position:"absolute",left:"8px",top:"80px",width:"54px",height:"54px",background:"#7b4b2a",borderRadius:"50%",transition:"top .28s ease"});Object.assign(e1.style,{position:"absolute",left:"8px",top:"10px",width:"12px",height:"12px",background:"#7b4b2a",borderRadius:"50%"});Object.assign(e2.style,{position:"absolute",right:"8px",top:"10px",width:"12px",height:"12px",background:"#7b4b2a",borderRadius:"50%"});Object.assign(n.style,{position:"absolute",left:"24px",top:"30px",width:"6px",height:"6px",background:"#222",borderRadius:"50%",boxShadow:"12px 0 0 #222,6px 10px 0 2px #f7c0c0"});m.appendChild(e1);m.appendChild(e2);m.appendChild(n);h.appendChild(m);document.body.appendChild(h);requestAnimationFrame(()=>m.style.top="18px");setTimeout(()=>m.style.top="80px",1400+Math.random()*500);setTimeout(()=>h.remove(),2300)},i*220)})();