ブラウザ：ブックマークにJavaScriptを仕込みオリジナルボタンを作成。～Webページに「付箋」を貼る

ブラウザのブックマークは、URLだけでなく JavaScriptも登録できるのを知っていますか？これを使うと、クリックするだけで処理が動く「自分専用ボタン」が作れます。

今回は、参照中のWebページ内にメモ作成できる付箋紙を表示するボタンを作ります。

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

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

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

JavaScript：

javascript:(()=>{let id="__bm_sticky__";let w=document.getElementById(id);if(w){w.style.display=w.style.display==="none"?"block":"none";return}w=document.createElement("div");w.id=id;w.innerHTML='<div style="position:fixed;right:18px;bottom:18px;z-index:999999;font:13px/1.4 system-ui;width:260px"><div style="background:#111;color:#fff;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);overflow:hidden"><div style="display:flex;align-items:center;gap:8px;padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08)"><div style="font-weight:700;flex:1">🗒 付箋</div><button id="__bm_st_min__" title="最小化" style="border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:6px 8px;cursor:pointer">–</button><button id="__bm_st_close__" title="閉じる" style="border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:6px 8px;cursor:pointer">×</button></div><textarea id="__bm_st_tx__" placeholder="ここにメモ（このページ内だけ・リロードで消えます）" style="width:100%;height:140px;resize:vertical;border:0;outline:none;padding:10px 12px;background:rgba(255,255,255,.06);color:#fff"></textarea><div style="display:flex;gap:8px;padding:10px 10px"><button id="__bm_st_copy__" style="flex:1;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:9px 10px;cursor:pointer">コピー</button><button id="__bm_st_clear__" style="flex:1;border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:9px 10px;cursor:pointer">クリア</button></div></div></div>';document.body.appendChild(w);let $=q=>document.getElementById(q);let tx=$("__bm_st_tx__");let box=tx.parentElement;let set=(k,v)=>{try{sessionStorage.setItem(k,v)}catch(e){}};let get=k=>{try{return sessionStorage.getItem(k)||""}catch(e){return""}};tx.value=get("__bm_sticky_text__:"+location.href);tx.addEventListener("input",()=>set("__bm_sticky_text__:"+location.href,tx.value));$("__bm_st_close__").onclick=()=>w.remove();$("__bm_st_min__").onclick=()=>{let t=tx.style.display!=="none";tx.style.display=t?"none":"block";tx.nextElementSibling.style.display=t?"none":"flex"};$("__bm_st_clear__").onclick=()=>{tx.value="";set("__bm_sticky_text__:"+location.href,"")};$("__bm_st_copy__").onclick=async()=>{let v=tx.value||"";try{await navigator.clipboard.writeText(v)}catch(e){let a=document.createElement("textarea");a.value=v;document.body.appendChild(a);a.select();document.execCommand("copy");a.remove()}let p=document.createElement("div");p.textContent="コピーしました";Object.assign(p.style,{position:"fixed",right:"18px",bottom:"290px",padding:"10px 12px",background:"rgba(0,0,0,.85)",color:"#fff",borderRadius:"10px",zIndex:999999,opacity:0,transition:"opacity .4s"});document.body.appendChild(p);requestAnimationFrame(()=>p.style.opacity=1);setTimeout(()=>{p.style.opacity=0;setTimeout(()=>p.remove(),400)},1600)}})();