ブラウザのブックマークは、URLだけでなく JavaScriptも登録できるのを知っていますか？これを使うと、クリックするだけで処理が動く「自分専用ボタン」が作れます。
今回は、ページの情報をそのままメールやチャットに貼れるボタンを作成するボタンを作ります。
仕組み：ブックマークレット（Bookmarklet）
ブックマークのURL欄に javascript: ... を入れておくと、
そのブックマークをクリックした瞬間に JavaScript が実行されます。
次の JavaScript を使います。長いですが 1行で書かれた JavaScript です。
JavaScript：
javascript:(async()=>{const esc=s=>(s||"").replace(/\s+/g," ").trim();const title=esc(document.title);const url=location.href;const sel=esc(String(window.getSelection?window.getSelection():""));const meta=(n,p)=>{let e=document.querySelector(`meta[name="${n}"]`);if(e&&e.content)return esc(e.content);e=document.querySelector(`meta[property="${p||n}"]`);return e&&e.content?esc(e.content):""};let sum=sel||meta("description")||meta("og:description","og:description")||meta("twitter:description","twitter:description");if(!sum){let t=esc(document.body?document.body.innerText:"");sum=t.slice(0,240)+(t.length>240?"…":"")}const text=`【${title}】\n${url}\n概要: ${sum}\n`;try{await navigator.clipboard.writeText(text)}catch(e){const a=document.createElement("textarea");a.value=text;document.body.appendChild(a);a.select();document.execCommand("copy");a.remove()}let d=document.createElement("div");d.textContent="📋 クリップボードにコピーしました";Object.assign(d.style,{position:"fixed",bottom:"30px",right:"30px",padding:"14px 16px",background:"rgba(0,0,0,.85)",color:"#fff",fontSize:"14px",borderRadius:"12px",boxShadow:"0 8px 20px rgba(0,0,0,.3)",zIndex:999999,opacity:0,transition:"opacity .4s"});document.body.appendChild(d);requestAnimationFrame(()=>d.style.opacity=1);setTimeout(()=>{d.style.opacity=0;setTimeout(()=>d.remove(),450)},1400)})();「概要」はAIみたいな要約はできないので、**それっぽく使える“疑似概要”**でやります（＝ページから取れる情報＋本文先頭の抜粋）。
- まず meta description / og:description があればそれを概要に採用
- なければ 本文の見えているテキストから先頭を抜粋
- もしあなたが テキスト選択していたら、選択文を優先して概要にする（これが一番実用）
手順：
① どんなページでもいいので、いったんお気に入りに登録する。
② 登録したお気に入りを右クリックして、「編集」をクリック。
③ 先ほど紹介した JavaScript をコピーする。
④ 名前を「URL説明」にして、URL欄に JavaScript を貼り付ける。
これで完成です。
たとえば、、RUNNETのページを開いた状態でお気に入りをクリックすると…
クリップボードに情報がコピーされます！
メモ帳に貼り付けて確認。
コメントを残す