この記事はChatGPTを使ってWeb制作の際にチェックに使えるようなブックマークレットを大量に作った男の末路です。動作保証はできませんのでしっかり内容を確認し、試したい方は試してみましょう。
ブックマークレットとは
先日、ChatGPTを利用してブックマークレットが作れるという記事を書きました。これから紹介していくブックマークレットはすべてChatGPTに「○○という条件で〇〇ができるJavaScriptによるブックマークレットを作成し、サンプルコードを出力してください」という命令文で出力されています。
調子に乗って業務でエンジニア以外がチェックをする際に使用することができるようなブックマークレットも量産しておきましたので興味があれば使ってみてください。
4点セットチェック「ページタイトル、ディスクリプション、キーワード、h1」
javascript:(function(){var title=document.querySelector("title").textContent;var metaDescription=document.querySelector("meta[name='description']")?document.querySelector("meta[name=%27description%27]").getAttribute("content"):"-";var metaKeywords=document.querySelector("meta[name=%27keywords%27]")?document.querySelector("meta[name=%27keywords%27]").getAttribute("content"):"-";var h1=document.querySelector("h1")?document.querySelector("h1").textContent:"-";var divbox=document.createElement("div");divbox.style.position="fixed";divbox.style.top="10px";divbox.style.right="10px";divbox.style.width="500px";divbox.style.padding="10px";divbox.style.backgroundColor="white";divbox.style.zIndex="9999999";var table=document.createElement("table");var tableHTML="<tr><th>Title</th><td>"+title+"</td></tr><tr><th>Meta Description</th><td>"+metaDescription+"</td></tr><tr><th>Meta Keywords</th><td>"+metaKeywords+"</td></tr><tr><th>H1</th><td>"+h1+"</td></tr>";table.innerHTML=tableHTML;table.style.width="100%";var btn=document.createElement("button");btn.textContent="Close";btn.style.width="100%";btn.style.cursor="pointer";btn.addEventListener("click",function(){divbox.style.display="none";table.style.display="none";btn.style.display="none"});document.body.appendChild(divbox);divbox.appendChild(table);divbox.appendChild(btn)})()alt属性チェック（alt属性の設定がない場合は赤枠で囲う）
javascript:(function(){var images=document.getElementsByTagName('img');var count=0;for(var i=0;i<images.length;i++){if(!images[i].getAttribute('alt')){images[i].style.outline='2px solid red';count++}}alert("Alt属性が設定されていない画像が"+count+"個あります。")})()Meta取得（とにかく全部）
javascript:(function(){var metas=document.getElementsByTagName('meta');var div=document.createElement('div');div.style.width='600px';div.style.height='600px';div.style.overflowY='auto';var table=document.createElement('table');table.style.borderCollapse='collapse';table.style.width='100%';var btn=document.createElement('button');btn.innerHTML='Close';btn.style.position='fixed';btn.style.top='5px';btn.style.right='5px';btn.onclick=function(){div.style.display='none';btn.style.display='none'};for(var i=0;i<metas.length;i++){var row=table.insertRow();var cell1=row.insertCell();var cell2=row.insertCell();cell1.style.border='1px solid black';cell1.style.padding='5px';cell2.style.border='1px solid black';cell2.style.padding='5px';cell1.innerHTML=metas[i].getAttribute('name')||metas[i].getAttribute('http-equiv');cell2.innerHTML=metas[i].getAttribute('content')}div.appendChild(table);div.style.position='fixed';div.style.top='50px';div.style.right='5px';div.style.zIndex='9999';div.style.backgroundColor='white';document.body.appendChild(div);document.body.appendChild(btn)})()リンクチェック（リンクは全て赤枠で囲う。リンク設定がない場合は青枠で囲う）
javascript:(function(){var aTags=document.getElementsByTagName("a");var redLinks=0;var blueLinks=0;for(var i=0;i<aTags.length;i++){if(aTags[i].href){aTags[i].style.border="solid 2px red";redLinks++}else{aTags[i].style.border="solid 2px blue";blueLinks++}}alert("全部で"+aTags.length+"個のaタグがあります。リンクあり:"+redLinks+"個、リンクなし:"+blueLinks+"個。")})()画像サイズ取得
javascript:(function(){var imgs=document.querySelectorAll("img");for(var i=0;i<imgs.length;i++){var img=imgs[i];var width=img.width;var height=img.height;var div=document.createElement("div");div.style.backgroundColor="red";div.style.color="white";div.style.fontSize="12px";div.style.display="inline-block";div.innerHTML=width+" x "+height;img.parentNode.insertBefore(div,img.nextSibling)}})()コントラスト比チェック（仮）
文字色と背景色を取得し、グレースケール化してから計算をしているようです。そのため、黒背景に対して白文字も引っ掛けてしまう傾向があります。必ずしも計算があっているわけでも、保証ができるわけでもないため「怪しいかもしれない」というチェックレベルでしか使えないことを念頭に置いてください。また、spanなどでコンテンツが空の状態のものもすべて検知してしまうため飾り用の要素やGTMなどでDOM操作を行っている要素も検知している可能性もあります。
javascript:(function(){var elements=document.getElementsByTagName("*");var count=0;for(var i=0;i<elements.length;i++){var bgColor=window.getComputedStyle(elements[i]).getPropertyValue("background-color");var color=window.getComputedStyle(elements[i]).getPropertyValue("color");if(bgColor!=="rgba(0, 0, 0, 0)"&&color!=="rgba(0, 0, 0, 0)"){var bgColorRGB=bgColor.match(/\d+/g);var colorRGB=color.match(/\d+/g);var bgLuminance=0.2126*bgColorRGB[0]+0.7152*bgColorRGB[1]+0.0722*bgColorRGB[2];var colorLuminance=0.2126*colorRGB[0]+0.7152*colorRGB[1]+0.0722*colorRGB[2];var contrastRatio=(Math.max(bgLuminance,colorLuminance)+0.05)/(Math.min(bgLuminance,colorLuminance)+0.05);if(contrastRatio<4.5){elements[i].style.border="2px solid red";count++}}}var div=document.createElement("div");div.style.position="fixed";div.style.top="10px";div.style.right="10px";div.style.backgroundColor="white";div.style.padding="10px";div.style.zIndex="9999";div.style.border="2px solid black";div.innerHTML="コントラスト比レベルAAに満たない要素: "+count+" 個"+"<br>"+"※この結果はWCAGの条件を満たすことを保証することはできません";document.body.appendChild(div)})()
