ブラウザ：お気に入りに仕込む遊び技。クリックするたびにサクラが開花🌸JavaScript

ブラウザで開花宣言！

～桜の開花のブックマークレット～

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

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

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

今回は遊びネタとして、

ページにサクラを開花させるすブックマークレット

を作ってみます。

クリックすると、
ページ内にサクラの樹が花を咲かせます🌸。

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

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

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

JavaScript：

javascript:(()=>{const SID='sakuraBurstTreeStyleV2';if(!document.getElementById(SID)){const s=document.createElement('style');s.id=SID;s.textContent=`.sbt-wrap{position:fixed;pointer-events:none;z-index:2147483647;transform:translate(-50%,-100%)}.sbt-tree{position:relative;width:170px;height:210px}.sbt-trunk{position:absolute;left:50%;bottom:0;width:18px;height:88px;transform:translateX(-50%);background:linear-gradient(to right,#5b3a29,#7b5139,#5b3a29);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.sbt-branch{position:absolute;height:7px;background:#6b4732;border-radius:7px;transform-origin:left center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.sbt-b1{width:58px;left:86px;bottom:74px;transform:rotate(-28deg)}.sbt-b2{width:52px;left:37px;bottom:78px;transform:rotate(208deg)}.sbt-b3{width:40px;left:87px;bottom:106px;transform:rotate(-54deg)}.sbt-b4{width:38px;left:49px;bottom:108px;transform:rotate(232deg)}.sbt-b5{width:30px;left:92px;bottom:132px;transform:rotate(-77deg)}.sbt-b6{width:28px;left:62px;bottom:132px;transform:rotate(247deg)}.sbt-b7{width:26px;left:102px;bottom:90px;transform:rotate(5deg)}.sbt-b8{width:24px;left:46px;bottom:92px;transform:rotate(175deg)}.sbt-bloom{position:absolute;inset:0}.sbt-cluster{position:absolute;width:54px;height:54px;transform:scale(.15);opacity:0;animation:sbtBurst .55s cubic-bezier(.2,.9,.2,1) forwards}.sbt-flower{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:sbtPetal .45s ease-out forwards}.sbt-flower:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#ffe882 0 11%,transparent 12%),radial-gradient(circle at 50% 18%,#ffd3e3 0 26%,transparent 28%),radial-gradient(circle at 82% 38%,#ffcade 0 26%,transparent 28%),radial-gradient(circle at 70% 75%,#ffc6dc 0 26%,transparent 28%),radial-gradient(circle at 30% 75%,#ffd6e6 0 26%,transparent 28%),radial-gradient(circle at 18% 38%,#ffc6dc 0 26%,transparent 28%)}.sbt-flower:after{content:'';position:absolute;left:7px;top:7px;width:4px;height:4px;background:#fff2a0;border-radius:50%}@keyframes sbtBurst{0%{opacity:0;transform:scale(.08)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}@keyframes sbtPetal{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(-40deg)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(8deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}@keyframes sbtPop{0%{transform:translate(-50%,-100%) scale(.7)}65%{transform:translate(-50%,-100%) scale(1.05)}100%{transform:translate(-50%,-100%) scale(1)}}%60;document.head.appendChild(s)}const wrap=document.createElement('div');wrap.className='sbt-wrap';wrap.style.left=(90+Math.random()*(window.innerWidth-180))+'px';wrap.style.top=(window.innerHeight-10-Math.random()*(window.innerHeight*.22))+'px';wrap.style.animation='sbtPop .35s ease-out';wrap.style.transform='translate(-50%,-100%) scale('+(0.82+Math.random()*0.65)+')';const tree=document.createElement('div');tree.className='sbt-tree';tree.innerHTML='<div class="sbt-trunk"></div><div class="sbt-branch sbt-b1"></div><div class="sbt-branch sbt-b2"></div><div class="sbt-branch sbt-b3"></div><div class="sbt-branch sbt-b4"></div><div class="sbt-branch sbt-b5"></div><div class="sbt-branch sbt-b6"></div><div class="sbt-branch sbt-b7"></div><div class="sbt-branch sbt-b8"></div><div class="sbt-bloom"></div>';wrap.appendChild(tree);document.body.appendChild(wrap);const bloom=tree.querySelector('.sbt-bloom');const centers=[[85,52],[58,68],[112,68],[44,95],[126,96],[84,92],[64,118],[106,118],[84,132]];centers.forEach((c,i)=>{const cluster=document.createElement('div');cluster.className='sbt-cluster';cluster.style.left=(c[0]-27)+'px';cluster.style.top=(c[1]-27)+'px';cluster.style.animationDelay=(0.08+i*0.045)+'s';const n=8+Math.floor(Math.random()*5);for(let j=0;j<n;j++){const f=document.createElement('div');f.className='sbt-flower';const a=(Math.PI*2/n)*j+(Math.random()*.45);const r=10+Math.random()*14;const x=27+Math.cos(a)*r;const y=27+Math.sin(a)*r;f.style.left=x+'px';f.style.top=y+'px';f.style.animationDelay=(0.12+i*0.045+j*0.015)+'s';f.style.transform='translate(-50%,-50%) scale(.2) rotate('+(Math.random()*360)+'deg)';cluster.appendChild(f)}const core=document.createElement('div');core.className='sbt-flower';core.style.left='27px';core.style.top='27px';core.style.animationDelay=(0.12+i*0.045)+'s';cluster.appendChild(core);bloom.appendChild(cluster)})})();