Code:
(function() {
var tags = document.getElementsByTagName('img'),
pagehost = window.location.hostname,
src, i, mac, filehost, filename,
a = document.createElement('a');
for (i in tags) {
src = tags[i].src || '';
mac = src.match('^https?:\/\/(.+?)\/.+/(.+?)([\?#;].*)?$');
if (mac) {
filehost = mac[1];
filename = mac[2];
if (pagehost === filehost) {
a.href= src;
a.download= filename;
a.click();
a.remove();
}
}
}
})()
表示中のページ内にある全ての画像（同一ドメイン）をまとめてダウンロールするプログラムを紹介します。
ページ内にイベントとして設置して実行、デベロッパーツール（開発者ツール）から実行、ブックマークレットに登録して実行、それぞれの使い方に合わせたサンプルも紹介していきます。
※ 確認・説明環境 Chrome
ページ内にイベントとして設置して実行、デベロッパーツール（開発者ツール）から実行、ブックマークレットに登録して実行、それぞれの使い方に合わせたサンプルも紹介していきます。
※ 確認・説明環境 Chrome
使い方
ページ内に設置して使う
Code:
<script>
function imagedownload() {
var tags = document.getElementsByTagName('img'),
pagehost = window.location.hostname,
src, i, mac, filehost, filename,
a = document.createElement('a');
for (i in tags) {
src = tags[i].src || '';
mac = src.match('^https?:\/\/(.+?)\/.+/(.+?)([\?#;].*)?$');
if (mac) {
filehost = mac[1];
filename = mac[2];
if (pagehost === filehost) {
a.href= src;
a.download= filename;
a.click();
a.remove();
}
}
}
}
</script>
<button onclick="imagedownload()">ダウンロード</button>
ダウンロードして貰いたい画像のあるページ内にボタンを設置し、onclickイベントから関数を実行します。
デベロッパーツール（開発者ツール）から使う
Code:
var tags = document.getElementsByTagName('img'),
pagehost = window.location.hostname,
src, i, mac, filehost, filename,
a = document.createElement('a');
for (i in tags) {
src = tags[i].src || '';
mac = src.match('^https?:\/\/(.+?)\/.+/(.+?)([\?#;].*)?$');
if (mac) {
filehost = mac[1];
filename = mac[2];
if (pagehost === filehost) {
a.href= src;
a.download= filename;
a.click();
a.remove();
}
}
}
ダウンロードしたい画像のあるページで右クリックから「検証」、または「F12」を押下。
起動したデベロッパーツール（開発者ツール）の上部タブにある「コンソール」を選択。
カーソルのある位置に、上記コードを貼り付けて「Enter」。
起動したデベロッパーツール（開発者ツール）の上部タブにある「コンソール」を選択。
カーソルのある位置に、上記コードを貼り付けて「Enter」。
ブックマークレットから使う
Code:
javascript:(function(){var tags=document.getElementsByTagName('img'),pagehost=window.location.hostname,src,i,mac,filehost,filename,a=document.createElement('a');for(i in tags){src=tags[i].src||'';mac=src.match('^https?:\/\/(.+?)\/.+/(.+?)([\?#;].*)?$');if(mac){filehost=mac[1];filename=mac[2];if(pagehost===filehost){a.href=src;a.download=filename;a.click();a.remove()}}}})()
「chrome://bookmarks/」を開く
「新しいブックマークを追加」から「ブックマーク名」は適当に、「URL」に上記コードを貼り付けして保存。
ダウンロードしたい画像のあるページで、「ブックマークバー」から新規作成した「ブックマーク」をクリック。
「ブックマークバー」を右クリックからの「ページの追加」でも可。
※ URLに上記コードを貼り付けて実行しようとすると、先頭の「javascript:」が消えてしまうので注意。
「新しいブックマークを追加」から「ブックマーク名」は適当に、「URL」に上記コードを貼り付けして保存。
ダウンロードしたい画像のあるページで、「ブックマークバー」から新規作成した「ブックマーク」をクリック。
「ブックマークバー」を右クリックからの「ページの追加」でも可。
※ URLに上記コードを貼り付けて実行しようとすると、先頭の「javascript:」が消えてしまうので注意。
説明
プログラムの説明
Code:
(function() {
// ページ内の画像タグをまとめて取得
var tags = document.getElementsByTagName('img'),
/* 同一ドメイン識別用 */
pagehost = window.location.hostname,
src, i, mac, filehost, filename,
/* ダウンロード実行用のリンクタグ */
a = document.createElement('a');
// ページ内の全imgループ
for (i in tags) {
// 画像Pathを取得
src = tags[i].src || '';
// 正規表現で「ドメイン」と「ファイル名」を取得
mac = src.match('^https?:\/\/(.+?)\/.+/(.+?)([\?#;].*)?$');
// ちゃんと取得出来ていたら
if (mac) {
// 画像ファイルドメイン
filehost = mac[1];
// 画像ファイル名
filename = mac[2];
// ページドメインと画像ドメインが同一だったら
if (pagehost === filehost) {
// ダウンロード設定
// 画像Path
a.href = src;
// 保存ファイル名
a.download = filename;
// ダウンロード実行
a.click();
// 後始末
a.remove();
}
}
}
})()
ダウンロードファイル名は、画像のファイル名を流用しています。変更したい場合はa.download = filenameを修正してください。
srcが存在せず、undefinedだった場合は、空文字を代入してエラーを回避しています。
サンプルの正規表現で取れないURLが指定されている場合はダウンロード出来ないので改良してみてください。
srcが存在せず、undefinedだった場合は、空文字を代入してエラーを回避しています。
サンプルの正規表現で取れないURLが指定されている場合はダウンロード出来ないので改良してみてください。
プログラムの注意点
JSはクロスドメイン間の処理が出来ないため、開いているページと異なるドメインの画像はダウンロード出来ません。
大量の画像をダウロードする際は、Chromeのセキュリティにより、「複数ファイルのダウンロード」の許可を求める「ダイアログ」が表示されます。
ダウンロード先に同名のファイルがある場合は、ファイル名の後ろに（n）がついて保存されます。
遅延読み込み処理などで、ダウンロードしたい画像が「src」属性にない場合は使えません。
大量の画像をダウロードする際は、Chromeのセキュリティにより、「複数ファイルのダウンロード」の許可を求める「ダイアログ」が表示されます。
ダウンロード先に同名のファイルがある場合は、ファイル名の後ろに（n）がついて保存されます。
遅延読み込み処理などで、ダウンロードしたい画像が「src」属性にない場合は使えません。
まとめ
今回はページ内にある全ての画像をダウンロードするプログラムを解説しました。
今回は画像ファイルのサンプルとなりましたが、画像以外のファイルもダウンロード可能なので、色々と試して知識を広げてみてください。
※ ダウンロードする画像によっては著作権法に抵触する可能性があるのでご注意ください。
今回は画像ファイルのサンプルとなりましたが、画像以外のファイルもダウンロード可能なので、色々と試して知識を広げてみてください。
※ ダウンロードする画像によっては著作権法に抵触する可能性があるのでご注意ください。