ブラウザ：ブックマークにJavaScriptを仕込みオリジナルボタンを作成。～Webページの見出しだけ抽出して目次を出す

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

今回は、Webページの目次を作成するボタンを作ります。

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

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

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

JavaScript：

javascript:(()=>{let o=document.getElementById("__bm_toc__");if(o){o.remove();return}let hs=[...document.querySelectorAll("h1,h2,h3")].filter(h=>h.innerText.trim());o=document.createElement("div");o.id="__bm_toc__";o.innerHTML='<div style="position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:999999;display:flex;align-items:flex-start;justify-content:flex-end"><div style="margin:18px;width:min(420px,92vw);max-height:86vh;overflow:auto;background:#111;color:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);font:13px/1.5 system-ui"><div style="position:sticky;top:0;background:#111;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:center"><div style="font-weight:700;flex:1">📑 目次（h1〜h3）</div><button id="__bm_toc_x__" style="border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:7px 10px;cursor:pointer">閉じる</button></div><div id="__bm_toc_l__" style="padding:10px 14px"></div></div></div>';document.body.appendChild(o);document.getElementById("__bm_toc_x__").onclick=()=>o.remove();let l=document.getElementById("__bm_toc_l__");hs.forEach((h,i)=>{if(!h.id)h.id="__bm_toc_h_"+i;let d=document.createElement("div");d.style.padding="6px 0";d.style.borderBottom="1px solid rgba(255,255,255,.06)";d.innerHTML=`<a href="#${h.id}" style="color:#fff;text-decoration:none;display:block;padding-left:${(h.tagName==="H1"?0:h.tagName==="H2"?12:24)}px;opacity:${(h.tagName==="H1"?1:h.tagName==="H2"?0.9:0.8)}">• ${h.innerText.trim().slice(0,120)}</a>`;d.querySelector("a").onclick=e=>{e.preventDefault();h.scrollIntoView({behavior:"smooth",block:"start"});};l.appendChild(d)});})();