ブラウザ：お気に入りに仕込む遊び技。💣爆弾タイマーを仕込むJavaScript

ブラウザでタイマー設定

～💣爆弾タイプのタイマー設定ブックマークレット～

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

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

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

今回は遊びネタとして、

ページに“タイマー”を設定するブックマークレット

を作ってみます。

クリックすると、
ページ内に爆弾タイマーが表示されます。

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

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

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

JavaScript：

javascript:(()=>{let old=document.getElementById("__bm_bomb_wrap__");if(old){old.remove();return}let w=document.createElement("div");w.id="__bm_bomb_wrap__";w.innerHTML='<div id="__bm_bomb_bg__" style="position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999999;display:flex;align-items:center;justify-content:center;font-family:system-ui"><div id="__bm_bomb_box__" style="width:320px;background:#111;color:#fff;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:18px 18px 16px;position:relative;overflow:hidden"><div style="font-size:16px;font-weight:700;margin-bottom:10px">💣 爆弾タイマー</div><div id="__bm_bomb_stage__" style="height:170px;display:flex;align-items:center;justify-content:center;position:relative"><div id="__bm_bomb__" style="font-size:82px;line-height:1;transform-origin:50% 70%">💣</div><div id="__bm_bomb_flash__" style="position:absolute;inset:0;pointer-events:none;opacity:0"></div><div id="__bm_bomb_count__" style="position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:34px;font-weight:800;letter-spacing:.04em">--</div></div><div id="__bm_bomb_controls__" style="display:flex;gap:8px;align-items:center"><input id="__bm_bomb_input__" inputmode="numeric" placeholder="秒数（例: 10）" style="flex:1;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;outline:none"><button id="__bm_bomb_go__" style="padding:11px 14px;border:0;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer">開始</button><button id="__bm_bomb_x__" style="padding:11px 12px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer">×</button></div><div id="__bm_bomb_msg__" style="margin-top:10px;font-size:12px;opacity:.75">秒数を入れて開始</div></div></div>';document.body.appendChild(w);let $=id=>document.getElementById(id),box=$("__bm_bomb_box__"),bomb=$("__bm_bomb__"),count=$("__bm_bomb_count__"),msg=$("__bm_bomb_msg__"),flash=$("__bm_bomb_flash__"),inp=$("__bm_bomb_input__");let timer=0,end=0;const close=()=>{if(timer)clearInterval(timer);w.remove()};$("__bm_bomb_x__").onclick=close;const explode=()=>{if(timer)clearInterval(timer);timer=0;msg.textContent="どーーーん！";count.textContent="0";bomb.textContent="💥";bomb.style.transform="scale(1.9) rotate(0deg)";bomb.style.transition="transform .25s ease";box.animate([{transform:"scale(1)"},{transform:"scale(1.03)"},{transform:"scale(.98)"},{transform:"scale(1)"}],{duration:420,easing:"ease-out"});flash.animate([{opacity:0,background:"rgba(255,255,255,0)"},{opacity:1,background:"radial-gradient(circle, rgba(255,220,120,.95) 0%, rgba(255,120,0,.85) 38%, rgba(255,80,0,.45) 58%, rgba(255,0,0,0) 76%)"},{opacity:.2},{opacity:0}],{duration:700,easing:"ease-out"});let n=26;for(let i=0;i<n;i++){let p=document.createElement("div");Object.assign(p.style,{position:"absolute",left:"50%",top:"50%",width:"10px",height:"10px",marginLeft:"-5px",marginTop:"-5px",borderRadius:"50%",background:["#ffd54a","#ff9f1a","#ff5e00","#ffffff"][Math.floor(Math.random()*4)],pointerEvents:"none",zIndex:2});flash.appendChild(p);let a=Math.PI*2*i/n+(Math.random()-.5)*.5,d=50+Math.random()*110,s=.7+Math.random()*1.5;p.animate([{transform:"translate(0,0) scale(1)",opacity:1},{transform:%60translate(${Math.cos(a)*d}px,${Math.sin(a)*d}px) scale(${s})%60,opacity:0}],{duration:650+Math.random()*250,easing:"cubic-bezier(.1,.7,.2,1)"});setTimeout(()=>p.remove(),1000)}setTimeout(()=>{bomb.textContent="💨";bomb.style.transform="scale(1)";msg.textContent="おしまい。もう一度ブックマークを押すと閉じます";},900)};const tick=()=>{let left=Math.max(0,Math.ceil((end-Date.now())/1000));count.textContent=left;if(left<=0){explode();return}msg.textContent="ジリジリ…";let intensity=Math.min(1,1-left/Math.max(1,window.__bmBombStart));let ang=(Math.random()*2-1)*(3+intensity*14),sx=1+intensity*.06;bomb.style.transition="transform .08s linear";bomb.style.transform=%60rotate(${ang}deg) scale(${sx})%60;if(left<=3){box.style.boxShadow=%600 18px 50px rgba(255,0,0,${.18+.18*Math.random()})%60;flash.style.opacity=.16+.18*Math.random();flash.style.background="radial-gradient(circle, rgba(255,70,70,.28) 0%, rgba(255,0,0,0) 68%)"}else{flash.style.opacity=0;box.style.boxShadow="0 18px 50px rgba(0,0,0,.35)"}};$("__bm_bomb_go__").onclick=()=>{let s=parseInt((inp.value||"").replace(/[^\d]/g,""),10);if(!s||s<=0){msg.textContent="1以上の秒数を入れてください";return}if(timer)clearInterval(timer);window.__bmBombStart=s;end=Date.now()+s*1000;bomb.textContent="💣";bomb.style.transform="rotate(0deg) scale(1)";count.textContent=s;msg.textContent="起爆しました";timer=setInterval(tick,100);tick()};setTimeout(()=>inp.focus(),0)})();