ブラウザ：お気に入りに仕込む遊び技。ページに花火を打ち上げるJavaScript

ブラウザに花火を上げる

～花火打ち上げ大会ブックマークレット～

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

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

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

今回は遊びネタとして、

ページに“花火”を打ち上げるブックマークレット

を作ってみます。

クリックすると、
ページ内に花火が打ちあがります。

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

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

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

JavaScript：

javascript:(()=>{let c=document.getElementById("__bm_fw__"),ctx,w,h;if(!c){c=document.createElement("canvas");c.id="__bm_fw__";Object.assign(c.style,{position:"fixed",left:"0",top:"0",width:"100vw",height:"100vh",pointerEvents:"none",zIndex:999999});document.body.appendChild(c);ctx=c.getContext("2d");window.__bm_fwRockets=[];window.__bm_fwParts=[];window.__bm_fwResize=()=>{c.width=innerWidth;c.height=innerHeight;w=c.width;h=c.height};window.__bm_fwResize();addEventListener("resize",window.__bm_fwResize);window.__bm_fwLoop=()=>{ctx.clearRect(0,0,w,h);window.__bm_fwRockets=window.__bm_fwRockets.filter(r=>{r.x+=r.vx;r.y+=r.vy;r.vy+=0.03;ctx.globalAlpha=.95;ctx.fillStyle=r.color;ctx.beginPath();ctx.arc(r.x,r.y,3.2,0,Math.PI*2);ctx.fill();ctx.globalAlpha=.45;ctx.fillStyle="#fff";ctx.fillRect(r.x-1.5,r.y+4,3,16);if(r.vy>=0||r.y<=r.targetY){let colors=["#ff4d4d","#ffd24d","#4dd2ff","#7dff7d","#ff7df2","#ffffff","#ffa64d"];for(let i=0;i<72;i++){let a=Math.PI*2*i/72+(Math.random()-.5)*.18,s=1.8+Math.random()*5.8;window.__bm_fwParts.push({x:r.x,y:r.y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,r:12+Math.random()*14,life:52+Math.random()*30,maxLife:82,color:colors[(Math.random()*colors.length)|0]})}return false}return true});window.__bm_fwParts=window.__bm_fwParts.filter(p=>{p.x+=p.vx;p.y+=p.vy;p.vy+=0.04;p.life-=1;ctx.globalAlpha=Math.max(p.life/p.maxLife,0);ctx.fillStyle=p.color;ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fill();ctx.shadowBlur=14;ctx.shadowColor=p.color;ctx.beginPath();ctx.arc(p.x,p.y,p.r*.65,0,Math.PI*2);ctx.fill();ctx.shadowBlur=0;return p.life>0});ctx.globalAlpha=1;requestAnimationFrame(window.__bm_fwLoop)};window.__bm_fwLoop()}else{ctx=c.getContext("2d");w=c.width;h=c.height}let sx=80+Math.random()*(innerWidth-160),tx=sx+(Math.random()*140-70),ty=60+Math.random()*(innerHeight*.42),colors=["#ff4d4d","#ffd24d","#4dd2ff","#7dff7d","#ff7df2","#ffffff","#ffa64d"];window.__bm_fwRockets.push({x:sx,y:innerHeight+10,vx:(tx-sx)/55,vy:-(7.8+Math.random()*1.8),targetY:ty,color:colors[(Math.random()*colors.length)|0]})})();