ブラウザ：お気に入りに仕込む遊び技。虫眼鏡で拡大JavaScript

ブラウザで虫眼鏡を表示する

～虫眼鏡表示のブックマークレット～

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

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

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

今回は遊びネタとして、

ページに虫眼鏡を表示するブックマークレット

を作ってみます。

クリックすると、
ページ内で虫眼鏡が登場します。マウスカーソルで動かせます。

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

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

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

JavaScript：

javascript:(()=>{const ID="__loupe_bookmarklet__";const old=document.getElementById(ID);if(old){old.remove();window.removeEventListener("mousemove",window.__loupeMove__,true);window.removeEventListener("scroll",window.__loupeRefresh__,true);window.removeEventListener("resize",window.__loupeRefresh__,true);delete window.__loupeMove__;delete window.__loupeRefresh__;return}const scale=1.8,size=190,r=size/2;const root=document.createElement("div");root.id=ID;root.style.position="fixed";root.style.left="0";root.style.top="0";root.style.width=size+"px";root.style.height=size+"px";root.style.border="6px solid rgba(55,55,55,.96)";root.style.borderRadius="50%";root.style.overflow="hidden";root.style.pointerEvents="none";root.style.zIndex="2147483647";root.style.boxShadow="0 10px 28px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.55)";root.style.background="rgba(255,255,255,.08)";root.style.transform="translate(-9999px,-9999px)";const glass=document.createElement("div");glass.style.position="absolute";glass.style.inset="0";glass.style.borderRadius="50%";glass.style.overflow="hidden";const cloneWrap=document.createElement("div");cloneWrap.style.position="absolute";cloneWrap.style.left="0";cloneWrap.style.top="0";cloneWrap.style.transformOrigin="top left";cloneWrap.style.pointerEvents="none";cloneWrap.style.width=document.documentElement.scrollWidth+"px";cloneWrap.style.height=document.documentElement.scrollHeight+"px";const cloned=document.body.cloneNode(true);[...cloned.querySelectorAll("script,video,audio,iframe")].forEach(el=>el.remove());cloneWrap.appendChild(cloned);glass.appendChild(cloneWrap);const shine=document.createElement("div");shine.style.position="absolute";shine.style.left="18px";shine.style.top="20px";shine.style.width="65px";shine.style.height="32px";shine.style.borderRadius="50%";shine.style.background="rgba(255,255,255,.22)";shine.style.transform="rotate(-25deg)";const handle=document.createElement("div");handle.style.position="absolute";handle.style.width="96px";handle.style.height="14px";handle.style.right="-58px";handle.style.bottom="10px";handle.style.background="linear-gradient(90deg,rgba(80,80,80,1),rgba(28,28,28,1))";handle.style.borderRadius="10px";handle.style.transform="rotate(38deg)";handle.style.boxShadow="0 2px 10px rgba(0,0,0,.25)";root.appendChild(glass);root.appendChild(shine);root.appendChild(handle);document.body.appendChild(root);const syncSize=()=>{cloneWrap.style.width=document.documentElement.scrollWidth+"px";cloneWrap.style.height=document.documentElement.scrollHeight+"px"};const render=()=>{const x=window.__loupeX__??innerWidth/2;const y=window.__loupeY__??innerHeight/2;root.style.transform=`translate(${x-r}px,${y-r}px)`;const pageX=x+scrollX;const pageY=y+scrollY;cloneWrap.style.transform=`translate(${r-pageX*scale}px,${r-pageY*scale}px) scale(${scale})`};window.__loupeMove__=e=>{window.__loupeX__=e.clientX;window.__loupeY__=e.clientY;render()};window.__loupeRefresh__=()=>{syncSize();render()};window.addEventListener("mousemove",window.__loupeMove__,true);window.addEventListener("scroll",window.__loupeRefresh__,true);window.addEventListener("resize",window.__loupeRefresh__,true);window.__loupeX__=innerWidth/2;window.__loupeY__=innerHeight/2;render();})();