ブラウザ：お気に入りに仕込む遊び技。紙ヒコーキを飛ばすJavaScript

ブラウザで紙ヒコーキを飛ばす

～紙ヒコーキのブックマークレット～

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

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

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

今回は遊びネタとして、

ページに紙ヒコーキを飛ばすブックマークレット

を作ってみます。

クリックすると、
ページ内で紙ヒコーキが次々と飛びます。文字や画像で着地します。

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

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

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

JavaScript：

javascript:(()=>{const candidates=[...document.querySelectorAll("img,p,span,a,h1,h2,h3,h4,h5,h6,li,strong,em,button,div")].filter(el=>{const r=el.getBoundingClientRect();const txt=(el.innerText||el.alt||"").trim();const visible=r.width>24&&r.height>18&&r.top<innerHeight&&r.left<innerWidth&&r.bottom>0&&r.right>0;const ok=el.tagName==="IMG"||txt.length>0;return visible&&ok&&r.left>innerWidth*0.15});if(!candidates.length){alert("着地できる文字や画像が見つかりませんでした");return}const target=candidates[Math.floor(Math.random()*candidates.length)];const tr=target.getBoundingClientRect();const endX=Math.max(16,Math.min(innerWidth-90,tr.left+Math.random()*Math.max(16,tr.width-16)));const endY=Math.max(16,Math.min(innerHeight-90,tr.top+Math.random()*Math.min(28,Math.max(10,tr.height*0.6))));const startX=-120;const startY=20+Math.random()*Math.min(innerHeight*0.55,320);const plane=document.createElement("div");plane.className="__paper_plane_flying__";plane.style.position="fixed";plane.style.left="0";plane.style.top="0";plane.style.width="70px";plane.style.height="70px";plane.style.zIndex="2147483647";plane.style.pointerEvents="none";plane.style.transform=`translate(${startX}px,${startY}px) rotate(-14deg)`;plane.style.filter="drop-shadow(2px 4px 4px rgba(0,0,0,.22))";plane.innerHTML=`<svg viewBox="0 0 100 100" width="70" height="70" xmlns="http://www.w3.org/2000/svg"><path d="M8 50 L92 14 L59 52 L92 86 Z" fill="white" stroke="#555" stroke-width="4" stroke-linejoin="round"/><path d="M59 52 L40 67" stroke="#555" stroke-width="4" stroke-linecap="round"/><path d="M8 50 L59 52" stroke="#555" stroke-width="4" stroke-linecap="round"/></svg>%60;document.body.appendChild(plane);const duration=1700+Math.random()*900;const arc=-25-Math.random()*65;const wobble=5+Math.random()*12;const drift=(Math.random()*70)-35;const settleAngle=82+Math.random()*26;const t0=performance.now();const ease=t=>1-Math.pow(1-t,3);function anim(now){const raw=Math.min(1,(now-t0)/duration);const t=ease(raw);const x=startX+(endX-startX)*t;const baseY=startY+(endY-startY)*t;const y=baseY+Math.sin(raw*Math.PI)*arc+Math.sin(raw*8)*wobble+drift*(1-raw)*0.2;const angle=raw<0.7?-14+raw*45:18+(raw-0.7)/0.3*(settleAngle-18);plane.style.transform=%60translate(${x}px,${y}px) rotate(${angle}deg)%60;if(raw<1){requestAnimationFrame(anim)}else{plane.animate([{transform:%60translate(${endX}px,${endY}px) rotate(${settleAngle}deg)%60},{transform:%60translate(${endX}px,${endY+4}px) rotate(${settleAngle}deg)%60},{transform:%60translate(${endX}px,${endY}px) rotate(${settleAngle}deg)%60}],{duration:650,iterations:2,easing:"ease-in-out"});setTimeout(()=>plane.remove(),5000)}}requestAnimationFrame(anim)})();