ブラウザ：ブックマークにJavaScriptを仕込み、見てるページで電卓を起動

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

今回は、どんなページでもライトな電卓を起動するボタンを作ります。

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

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

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

JavaScript：

javascript:(()=>{const ID="__oai_calc__";const old=document.getElementById(ID);if(old){old.remove();return;}const wrap=document.createElement("div");wrap.id=ID;wrap.style.cssText="position:fixed;right:16px;bottom:16px;z-index:2147483647;background:#111;color:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);width:280px;font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto;user-select:none;";wrap.innerHTML=%60<div style="display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12);cursor:move;" id="__oai_calc_bar__"><div style="font-weight:700;">電卓</div><div style="display:flex;gap:8px;align-items:center;"><button id="__oai_calc_copy__" style="background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:4px 8px;cursor:pointer;">Copy</button><button id="__oai_calc_close__" style="background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:4px 8px;cursor:pointer;">×</button></div></div><div style="padding:10px 12px;"><input id="__oai_calc_in__" placeholder="例: (1200+350)*1.1" style="width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);background:#0b0b0b;color:#fff;border-radius:10px;padding:10px 10px;outline:none;" /><div style="margin-top:8px;display:flex;gap:8px;"><button id="__oai_calc_eq__" style="flex:1;background:#2b7cff;border:none;color:#fff;border-radius:10px;padding:10px 0;cursor:pointer;font-weight:700;">＝</button><button id="__oai_calc_ac__" style="width:72px;background:#333;border:none;color:#fff;border-radius:10px;padding:10px 0;cursor:pointer;">AC</button></div><div id="__oai_calc_out__" style="margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,255,255,.08);min-height:20px;word-break:break-all;"></div><div style="margin-top:8px;opacity:.75;font-size:12px;">Enterで計算 / Copyで結果コピー</div></div>%60;document.body.appendChild(wrap);const inp=wrap.querySelector("#__oai_calc_in__");const out=wrap.querySelector("#__oai_calc_out__");const safeEval=(expr)=>{if(!expr) return "";if(/[^0-9+\-*/().,%\s]/.test(expr)) throw new Error("数字と + - * / ( ) . , % 以外は不可");let e=expr.replace(/,/g,"").replace(/(\d+(\.\d+)?)\s*%/g,"($1/100)");const v=Function(%60"use strict";return (${e});%60)();if(typeof v!=="number"||Number.isNaN(v)||!Number.isFinite(v)) throw new Error("計算結果が不正");return String(v);};const run=()=>{try{const r=safeEval(inp.value);out.textContent=r;out.dataset.val=r;}catch(e){out.textContent="エラー: "+e.message;out.dataset.val="";}};wrap.querySelector("#__oai_calc_eq__").onclick=run;wrap.querySelector("#__oai_calc_ac__").onclick=()=>{inp.value="";out.textContent="";out.dataset.val="";inp.focus();};wrap.querySelector("#__oai_calc_close__").onclick=()=>wrap.remove();wrap.querySelector("#__oai_calc_copy__").onclick=async()=>{const v=out.dataset.val||"";if(!v){out.textContent="（コピーする結果がありません）";return;}try{await navigator.clipboard.writeText(v);}catch{const ta=document.createElement("textarea");ta.value=v;ta.style.position="fixed";ta.style.left="-9999px";document.body.appendChild(ta);ta.select();document.execCommand("copy");ta.remove();}};inp.addEventListener("keydown",(e)=>{if(e.key==="Enter") run();});setTimeout(()=>inp.focus(),0);(()=>{const bar=wrap.querySelector("#__oai_calc_bar__");let sx=0,sy=0,ox=0,oy=0,drag=false;bar.addEventListener("mousedown",(e)=>{drag=true;sx=e.clientX;sy=e.clientY;const r=wrap.getBoundingClientRect();ox=r.left;oy=r.top;e.preventDefault();});window.addEventListener("mousemove",(e)=>{if(!drag) return;const dx=e.clientX-sx,dy=e.clientY-sy;wrap.style.left=Math.max(8,ox+dx)+"px";wrap.style.top=Math.max(8,oy+dy)+"px";wrap.style.right="auto";wrap.style.bottom="auto";});window.addEventListener("mouseup",()=>drag=false);})();})();