ブックマークレット(Bookmarklet)を使った画像ダウンロードの自動化
Webサイトの運用業務では繰り返し行うルーティン作業が数多く発生します。特にバナー画像やテキストのちょっとした修正は日常茶飯事では無いでしょうか？
この記事では特定のページから任意の画像もしくは画像を一括でダウンロードする作業を自動化させる方法を紹介していきたいと思います。
繰り返し作業を自動化させる方法には様々な手法がありますが、ここではブラウザが持つブックマークレットという機能を使って自動化処理を行いたいと思います。
この記事を読んでできること
- 右クリックでの都度画像保存から脱却できる
- サムネイルやスライダーなど手動では一度に画像保存しにくい操作の自動化
ブックマークレットに関しては以下を参照してみてください。
ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである。
ブックマークレットにプログラムを登録する前にまずは自動化の処理を書いていきましょう。
画像のダウンロードであれば JavaScript を使って書くことができます。どのような条件で画像ダウンロードするかによってJavaScriptの記述は異なりますが、メインの処理は変わらないかと思いますので適宜応用して使ってみてください。
ここではスライダープラグインとして人気を集める swiper.js のスライダーから画像をダウンロードする処理を用意しました。以下サンプルサイトで処理を実行するか、利用したいサイトを開きConsole画面で試してみてください。
【ブックマークレット実行サンプルサイト】
【Google Chrome Console画面の立ち上げショートカット】
Chromeブラウザを立ち上げて以下キーボードを同時押しします。
Macの場合: Command + Option + JWindowsの場合: Ctrl + Shift + J
任意選択して画像をダウンロードする場合
複数枚あるスライダーやサムネイル画像の中から任意の画像をダウンロードする処理を書いてみます。 用意されているスライダー画像の総枚数をダイアログ表示し、入力された番目の画像をダウンロードします。
サンプルサイトを開き、Console画面で download関数を実行してみてください。
download();ダウンロードボタンからも上記関数を実行することができます。
どのような構造のDOM要素から画像を取得するかは状況によって異なりますので、以下の記述は適宜変えるようにしてください。
// スライダー要素取得
const imgLinks = document.querySelectorAll(
".swiper-container .swiper-slide img"
);基本的にサムネイル画像など複数枚画像が並ぶ状況であれば img 要素取得に必要な class の名称を変えれば転用できるはずです。
ユーザーが入力できるダイアログを表示させるには “window.prompt” を利用します。初期値を第2引数に設定して入力しやすくします。ここでは１枚目を設定しています。
// スライダー数取得
const imgCount = imgLinks.length;
// ダイアログ表示
const result = window.prompt(
"何番目のスライダー画像を開きますか？\nこのページでは" + imgCount + "番目まで選択できます。", 1
);入力された番号が取得できるものであれば、擬似的にaタグを生成し指定された番号に当たる画像URLを download 属性に設定します。
あとは生成されたリンクを強制的にclickメソッドでイベントを発生させて画像をダウンロードします。クリックイベント発火後、aタグは削除しておきます。
if (imgNumber <= imgCount) {
// 画像URL取得
const url = imgLinks[imgNumber].src; // 画像名取得
const fileName = "download-file" + (imgNumber + 1);
const link = document.createElement("a"); // ダウンロード用リンク設定
link.href = url;
link.download = fileName; // aタグ作成
document.body.appendChild(link); // リンククリック
link.click(); // aタグ削除
document.body.removeChild(link);
} else {
window.alert("正しい画像番号を入力してください！");
}
複数枚の画像を一括ダウンロードする場合
複数枚あるスライダーやサムネイル画像を一括でダウンロードしたい場合は以下の記述になります。
画像取得部分は同じく “document.querySelectorAll” で処理しますが、全ての画像にたいして同様の処理を繰り返す為、forEach()メソッドでリンクの生成とダウンロードを回します。
サンプルサイトを開き、Console画面で downloadAll関数を実行してみてください。画像が一括でダウンロードできればOKです。
downloadAll();ダウンロードボタンからも上記関数を実行することができます。
ブックマークレットへの登録
利用したい処理が Console 画面などである程度試すことができたら、書いた処理をブックマークレットへ登録していきましょう。
まず、ここで書いた関数内の処理を1行で完結にまとめておきたいので Closure Compiler というツールで JavaScriptのコードをコンパイルします。
右側に圧縮されたコードが書き出されるのでコピーしてブックマークレット登録に利用します。次の記述にコンパイルしたコードを貼り付ければブックマークレット登録に必要な処理は完成です。
javascript: (function () {
// ここに圧縮した処理をコピペします
})();ブックマークの登録と同じ手順でURLに上記で作成した処理を貼り付けます。
そのまま直ぐに利用してみたい方は生成済みのコードを以下に用意しているのでコピペして使ってください。
画像ダウンロード用ブックマークレット（任意選択）
/*
任意の画像ダウンロード
*/javascript: (function () {var imgLinks = document.querySelectorAll(".swiper-container .swiper-slide img"), imgCount = imgLinks.length, result = window.prompt("\u4f55\u756a\u76ee\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u753b\u50cf\u3092\u958b\u304d\u307e\u3059\u304b\uff1f\n\u3053\u306e\u30da\u30fc\u30b8\u3067\u306f" + imgCount + "\u756a\u76ee\u307e\u3067\u9078\u629e\u3067\u304d\u307e\u3059\u3002", 1), imgNumber = Number(result) - 1;if (null == result) window.alert("\u30ad\u30e3\u30f3\u30bb\u30eb\u3055\u308c\u307e\u3057\u305f\u3002"); else if (imgNumber <= imgCount) { var url = imgLinks[imgNumber].src, fileName = "download-file" + (imgNumber + 1), link = document.createElement("a"); link.href = url; link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link) } else window.alert("\u6b63\u3057\u3044\u30b5\u30e0\u30cd\u30a4\u30eb\u756a\u53f7\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff01");})();
全画像一括ダウンロード用ブックマークレット
/*
全画像ダウンロード
*/javascript: (function () {var imgLinks = document.querySelectorAll(".swiper-container .swiper-slide img"); imgLinks.forEach(function (b, c) { var d = b.src, e = "download-file" + c, a = document.createElement("a"); a.href = d; a.download = e; document.body.appendChild(a); a.click(); document.body.removeChild(a) });})();
まとめ
登録した処理はブックマークページと同様にブラウザのタブから選択するだけで実行することができます。
今回紹介した画像ダウンロードの手法は同一ソース内の画像取得で利用することができますが、画像ファイルだけ別サーバーへ格納されている場合ではdownload属性を使ったファイルダウンロードを行うことができません。
クロスドメイン状況下で画像をダウンロードさせたい場合は少し手間が増えますが、一旦ブックマークレットで画像を別タブ展開させてダウンロードするようにすると良いかと思います。
