シンフォギアXV公式サイトのALTコメントを可視化するスクリプト

何をやらかしたのか

シンフォギアXV公式サイトの次回予告の画像に仕込まれた、ALTコメントを簡単に見られるようにしました。

この「はちみつアーム」という文字は画像のALTコメントに仕込まれているものですが、通常は見えません。 それを JavaScript で見えるようにしたのが上の画像なんですね。

使い方

1. シンフォギアの次回予告サイトを開く
2. PCブラウザの開発者ツールを開く（F12キー）
3. 以下のスクリプトをコンソールに貼って実行する

(function() {
  // 前回作成した tooltip を削除する
  const tooltips = document.querySelectorAll('.__kmn-tooltip');
  Array.prototype.forEach.call(tooltips, (tooltip) => {
    tooltip.remove();
  });
  
  const images = document.querySelectorAll('img[alt]');
  Array.prototype.filter.call(images, (image) => {
    // オーバーレイ画像と alt コメント未設定のものは対象外
    return !image.classList.contains('nexttitle_overlay')
        && !!image.getAttribute('alt');
  }).forEach((image) => {
    // いい感じの span を画像と重ねて配置する
    image.parentElement.style.position = 'relative';
    const alt = document.createElement('span');
    alt.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    alt.style.position = 'absolute';
    alt.style.right = '1em';
    alt.style.bottom = '0.5em';
    alt.style.padding = '0.2em';
    alt.style.lineHeight = '1';
    alt.classList.add('__kmn-tooltip');
    alt.textContent = image.getAttribute('alt');
    image.after(alt);
  });
})();

ハマったところ

最初のバージョンでは、スクリプトを2回実行したら「const を再定義すんな」と怒られた。 これはグローバルスコープに const を置いてしまい、値を上書き不可能にしてしまったのが原因だった。 const を let にしても、今度は「その let は定義済みだよボケ」と怒られる。

じゃあ定義済みの値を delete するか、あるいは定義済みの場合は let 宣言をしなければ良いのでは……と思ったのだけど、そもそもスコープを切ったほうが安全だ。 ということで、全体を function で囲んで対処完了。

おまけ

ブックマークレットはこちら。

javascript:(function(){const t=document.querySelectorAll(".__kmn-tooltip");Array.prototype.forEach.call(t,t=>{t.remove()});const e=document.querySelectorAll("img[alt]");Array.prototype.filter.call(e,t=>!t.classList.contains("nexttitle_overlay")&&!!t.getAttribute("alt")).forEach(t=>{t.parentElement.style.position="relative";const e=document.createElement("span");e.style.backgroundColor="rgba(255, 255, 255, 0.8)",e.style.position="absolute",e.style.right="1em",e.style.bottom="0.5em",e.style.padding="0.2em",e.style.lineHeight="1",e.classList.add("__kmn-tooltip"),e.textContent=t.getAttribute("alt"),t.after(e)})})();

おわり

これであなたもはちみつ食べ放題だ！