保存したい画像がたくさんあるページで、1枚ずつ右クリックして保存するのは面倒。このブックマークレットを使うと、ページ内の画像 URL をまとめて取得して、サムネイル付きの一覧で表示できる。拡張機能のインストールはいらない。
ブックマークレット
次のコードをURL欄にしたブックマークを作る。
javascript:(function(){var imgs=[].slice.call(document.images).map(function(i){return i.currentSrc||i.src;}).filter(function(u,n,a){return u&&a.indexOf(u)===n;});if(!imgs.length){alert('画像が見つかりませんでした');return;}var w=window.open('','_blank');var h='<meta charset=utf-8><title>画像一覧 ('+imgs.length+')</title><body style="font-family:sans-serif;padding:16px"><p>'+imgs.length+' 件の画像</p><textarea style="width:100%;height:120px">'+imgs.join('\n')+'</textarea>';imgs.forEach(function(u){h+='<div style="margin:8px 0"><a href="'+u+'" target="_blank"><img src="'+u+'" style="max-width:200px;max-height:200px;vertical-align:middle"></a></div>';});w.document.write(h);w.document.close();})();登録手順
- ブックマークバーを右クリック → ページを追加（または適当なページをブックマーク）
- 名前を「画像一覧」など分かりやすいものにする
- URL 欄に上のコードを貼り付けて保存
使い方
- 画像を集めたいページを開く
- 作ったブックマークをクリック
- 新しいタブにサムネイルと URL の一覧が開く
- 上部のテキストエリアで URL をまとめてコピー、または各画像を右クリックで保存
仕組み
document.images でページ内の img 要素をすべて取得して、URL を集めてる。同じ URL は除いて、重複しないようにしてる。集めた URL を新しいタブに書き出して、サムネイル付きで並べてるだけ。画像をどこかのサーバーに送ることはない。すべてブラウザの中で完結する。
注意
- 表示中の画像だけが対象。スクロールしないと読み込まれない画像（遅延読み込み）は、先にスクロールして表示させておく。
- 背景画像（CSS の
background-image）はimg要素ではないため取得できない。 - 画像を保存・利用するときは著作権に注意する。
関連記事
よくある質問
- ページ内の画像をまとめて保存するには？
- ブックマークレットを使うと、ページ内の全画像のURLを一覧表示できる。新しいタブにサムネイルとURLの一覧が開くので、必要な画像を保存したりURLをコピーしたりできる。
- このブックマークレットは何をしている？
- document.images でページ内の img 要素を走査し、重複を除いた画像URLを集める。集めたURLを新しいタブにサムネイル付きで一覧表示している。外部サービスには送信していない。
- X(Twitter)のメディア欄でも使える？
- 使えるが、X はスクロールで画像を遅延読み込みするため、表示済みの画像しか取得できない。X専用の取得方法は別記事で紹介している。