[Javacript] 画像をワンクリックで別タブで開けるようにするブックマークレットを作成する
概要
この記事について
かんたんな概要と結論
別タブで開けるようにするブックマークレットを作成した。
ブックマークレットとは？
ユーザーがウェブブラウザのブックマークなどから起動し、
ウェブブラウザで簡単な処理を行う簡易的なプログラム。
やりたいこと
事象
出典：こちらの記事のページをお借りしてご説明させていただきます。
ブラウザで、開いたページにいくつかの画像があることを考える。
上の記事のように、
画像が親のブロック要素の横幅によって圧縮されて、
小さくて見づらい場合がある。
そのようなときに、
別のタブとして簡単にもとのサイズの画像を開いて
細かい部分を見たいという要求が生まれることもあるだろう。
方法
そのときの画像周りのDOM構造によって、画像をワンクリックで別タブで開けるかどうかが決まる。
もし、下記画像のようにanchorタグでimgタグが囲まれていない場合、
ワンクリックで開くことはできない。
anchorタグでimgタグが囲まれており、
なおかつanchorタグのhrefが画像のsrcと同じパスを与えられているならば、
画像をワンクリックで別タブで開くことができる。
今回は、
ブックマークレットで簡単なスクリプトを走らせて、
すべてのanchorタグで囲まれていないimgタグの親要素に、
適切なanchorタグを挿入していきたい。
環境
Chromeでの動作を確認したが、
おそらく他のモダンブラウザで動作すると思う。
ブックマークレットの作成
コード
上で書いたように、
anchorタグで囲まれていないimgタグをDOM内部に持たせるためのanchorタグを新しく作成し、
href属性にsrcと同じパスをもたせる。
1javascript: (function () {
2 const anchoredImgs = Array.from(document.querySelectorAll("a img"));
3 for (const img of document.querySelectorAll("img")) {
4 if (anchoredImgs.includes(img)) continue;
5 const anchor = document.createElement("a");
6 anchor.href = img.src;
7 anchor.target = "_blank";
8 img.before(anchor);
9 anchor.append(img);
10 }
11}());
設定
それぞれのブラウザのブックマークに任意の名前で
上のコードを登録する。
実行する
ブックマークからリンクを開いてスクリプトを実行。
30個ほどのimg要素の場合、
実行は一瞬で終了し、
新しくanchorとして認識された画像をクリックすると別タブで開くことができる。
