ブラウザ：お気に入りに仕込む遊び技。おみくじ引きまくりJavaScript

ブラウザでおみくじを表示する

～おみくじ引きまくりのブックマークレット～

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

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

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

今回は遊びネタとして、

ページにおみくじを表示するブックマークレット

を作ってみます。

クリックすると、
ページ内でおみくじをどんどん引くことができます。

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

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

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

JavaScript：

javascript:(()=>{const list=["大吉","中吉","吉","小吉","末吉","凶"];const text=list[Math.floor(Math.random()*list.length)];const old=document.getElementById("__omikuji_result__");if(old)old.remove();const bg=document.createElement("div");bg.id="__omikuji_result__";bg.style.position="fixed";bg.style.inset="0";bg.style.zIndex="2147483647";bg.style.pointerEvents="none";bg.style.display="flex";bg.style.alignItems="center";bg.style.justifyContent="center";bg.style.background="rgba(255,255,255,.08)";const box=document.createElement("div");box.textContent=text;box.style.padding="24px 40px";box.style.border="4px solid #111";box.style.background="rgba(255,255,240,.96)";box.style.color="#111";box.style.fontSize="64px";box.style.fontWeight="700";box.style.borderRadius="16px";box.style.boxShadow="0 12px 30px rgba(0,0,0,.25)";box.style.transform="scale(.7) rotate(-6deg)";box.style.transition="transform .18s ease-out, opacity .4s ease-out";bg.appendChild(box);document.body.appendChild(bg);requestAnimationFrame(()=>{box.style.transform="scale(1) rotate(0deg)"});setTimeout(()=>{bg.style.opacity="0";bg.style.transition="opacity .5s ease-out"},1400);setTimeout(()=>bg.remove(),2000)})();