Download All Sourcesのカスタムスクリプトを活用する

by · 公開済み · 更新済み

Google Translate this page

Download All Sourcesでは、0.7.1からカスタムスクリプトの機能を追加し、0.8.1からカスタムスクリプトでファイル名とディレクトリの指定ができるようになりました。
この記事では、カスタムスクリプトの解説と具体的な利用方法の紹介を行います。
カスタムスクリプトを活用すれば、ダウンロードを非常に効率的に行えるようになるので、是非使ってみて下さい。

カスタムスクリプトを利用するには、JavaScriptの知識が必要です。
ですが、最近はAIも進化しているので、そういったツールも活用して試してみてください。

カスタムスクリプトとは

Download All Sourcesでは、Webページの右クリックメニューにある「Download All Sources…」を選択することで、ページ中の画像やリンクなどを一覧で表示し、必要なファイルを選択して一括ダウンロードする機能があります。
この一覧を作成するときに実行するスクリプトをユーザ側でカスタマイズできる機能、またそのスクリプト自体をカスタムスクリプトと呼びます。

カスタムスクリプトを使用すれば、一覧に含めるURLを事前にフィルタしたり（なんなら1つまで絞り込んだり）、ダウンロードする際のファイル名（やディレクトリ）を自由に決めたりすることができます。
特定のサイトでよくダウンロードを行う場合に、手作業でファイルを選択したり、ファイル名を指定したりする手間を、大幅に削減することができる神機能です！

カスタムスクリプトの仕様

Version 0.8.1時点の仕様です。

カスタムスクリプト（テンプレート）

テンプレートはオプション画面から挿入可能ですので、以下のスクリプトをコピーする必要はありません。

{
	// URLs collection
	const urls = {};
	// The attributes from which to extract the URL.
	for (let attr of ['src', 'href']) {
		document.querySelectorAll('['+attr+']').forEach((ele) => {
			const urlobj = new URL(ele.getAttribute(attr).replace(/#.*$/, ''), location.href);
			const url    = urlobj.toString();
			if (!urls[url])
				urls[url] = {
					// [REQUIRED] URL string. ex) http://example.com/sample.jpeg
					url      : url,
					// [REQUIRED] Protocol string. Protocols other than http: and https: are ignored.
					protocol : urlobj.protocol,
					// [OPTIONAL] Filetype string. ex) jpeg
					filetype : urlobj.pathname.match(/\.([\w]+)$/) ? RegExp.$1 : '',
					// The array-based properties are index-aligned,
					// allowing multiple metadata entries to be registered for a single URL.
					tag : [], title : [], filename : [], location : []
				};
			// [REQUIRED] HTML Tag string. ex) a, href, etc...
			urls[url].tag.push(ele.tagName.toLowerCase());
			// [OPTIONAL] Title string.
			urls[url].title.push(ele.title);
			// [OPTIONAL] File name string.
			// If specified, this value takes precedence over the File Name configured in Download Options.
			// File Name tags (e.g. :dom:) are also supported.
			urls[url].filename.push('');
			// [OPTIONAL] Location string.
			// If specified, this value takes precedence over the Download Location configured in Download Options.
			// Location tags (e.g. :dom:) are also supported.
			urls[url].location.push('');
			
			// Filename and location values are validated in the same way as the File Name and Download Location fields
			// in the Create Download Jobs from Web Page dialog.
			// If validation fails, the specified value is ignored.
		})
	}
	// The last variable is passed to Download All Sources.
	urls
};

カスタムスクリプトはURLリストの連想配列（urls変数）を作成することが目的です。
なおurlsという名前でなくても構いませんが、最後に渡される変数がURLリストになります。

URLリストの仕様

URLリストの連想配列の形式は次のようになっています。

urls = {
  "ファイルのURL" : {
    url : "ファイルURL",
    protocol : "プロトコル",
    filetype : "拡張子",
    tag : ["HTMLタグ"],
    title : ["TITLE属性"],
    filename : ["ファイル名"],
    location : ["ディレクトリ"]
  }
}

それぞれのパラメータの説明は以下の通りです。

項目 説明
ファイルのURL（url） Download All Sourcesに渡されるダウンロードURL
プロトコル（protocol） http/https（http/https以外はダウンロードできません）
拡張子（filetype） ファイルのURLから読み取れる拡張子
※ファイルタイプのフィルタで使用します
HTMLタグ（tag） ファイルのURLが含まれていたHTMLタグの名前（aタグ、imgタグ等）
※HTMLタグのフィルタで使用します
※ファイル名タグやディレクトリタグの:tag:の値に利用されます
TITLE属性（title） HTMLタグに設定されたTITLE属性の値
※ファイル名タグやディレクトリタグの:title:の値に利用されます
ファイル名（filename） ユーザが自由に設定できるファイル名
※標準のカスタムスクリプトでは使用されません
ディレクトリ（location） ユーザが自由に設定できるディレクトリ名
※標準のカスタムスクリプトでは使用されません

例えば以下のようなHTMLがあった場合、初期状態のカスタムスクリプトでは、URLリストは次のような形になります。

<a href="http://example.com/image.png" title="Link Title">link</a>

urls = {
  "http://example.com/image.png" : {
    url : "http://example.com/image.png",
    protocol : "http",
    filetype : "png",
    tag : ["a"],
    title : ["Link Title"],
    filename : [""],
    location : [""]
  }
}

URLリストの解説

urlsはURLをキーとした連想配列です。
連想配列の要素は、URLに関するパラメータを含んでいます。

URLをキーとしているため、同一URLが指定されたHTMLタグがHTML中に複数あった場合でも、urlsの要素は一つだけです。
その代わり、パラメータのtag、title、filename、locationは配列となっており、この配列の要素を増やすことで同一URLの複数タグを管理します。

これを図示すると以下のようなイメージです。

このURLリストをカスタマイズすることで柔軟なダウンロードが行うことが可能です。

カスタムスクリプトの利用例

画像サイトの掲載画像をダウンロードする

以下のようなことを実現したいとします。

  • サムネイル画像のリンク先（フルサイズ画像）をダウンロード
  • ファイル名は、サムネイル画像のalt属性の値
  • それ以外のURLはURLリストに含めない

サンプルとして、いらすとやの画像ページを使わせていただきます。

もし何も設定しない状態で、右クリックメニューから「Download All Sources…」を選択すると、以下のように大量のURLが表示されます。
これでは該当のファイルを探すのが困難です。

またDownload All Sourcesでは、リンクを右クリックすることでリンク先をダウンロードする機能もありますが、今回のalt属性をファイル名に設定する要件は実現できず、またWebサイトによってプリセットを決めることもできません。

そこでカスタムスクリプトの出番です。

このページではサムネイル画像が表示されており、サムネイル画像をクリックするとフルサイズの画像をダウンロードすることができます。
また、画像のタイトルがいろいろな箇所に記載されていますが、サムネイル画像のalt属性の値にも設定されています。

該当部分のソースコードは以下のようになっています。
（整形、一部省略しています。）

<div class='entry'>
  <p>花束を持つ人のイラスト&#65288;女性&#65289;
  <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKzh4SvxNhFbviXOUDAELOFvgzueGnsHlCoMV5KDkh1fkWu9X5i4sEK7b1VDxkLBNqaA3iFZIM5k0F9VMrnfzO5tC9D-tpWuZ_Fb_TFhEZwILvBwL7rchJ7Q0U3JMLw6tq5FPZS1g3ucYM/s884/present_hanataba_flower_girl.png">
      <img alt="花束を持つ人のイラスト&#65288;女性&#65289;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKzh4SvxNhFbviXOUDAELOFvgzueGnsHlCoMV5KDkh1fkWu9X5i4sEK7b1VDxkLBNqaA3iFZIM5k0F9VMrnfzO5tC9D-tpWuZ_Fb_TFhEZwILvBwL7rchJ7Q0U3JMLw6tq5FPZS1g3ucYM/s400/present_hanataba_flower_girl.png" />
    </a>
  (..snip..)
</div>

URLリストをつくるにあたっては、4行目のaタグと5行目のimgタグから情報を取得できればいい訳です。
HTMLを確認してみると、幸いなことに.entry（class='entry'）は一つしか存在しないため、これを使って要素を特定できます。

また、今回はこの画像以外のURLは無視します。
そのためfor文で全ての要素を走査してURLリストを作成する必要はありません。

これらを踏まえて作成するカスタムスクリプトは以下のようになります。

{
	const ele    = document.querySelector('.entry a');
	const urlobj = new URL(ele.getAttribute('href').replace(/#.*$/, ''), location.href);
	const url    = urlobj.toString();

	const urls = { url : {
		url      : url,
		protocol : urlobj.protocol,
		filetype : urlobj.pathname.match(/\.([\w]+)$/) ? RegExp.$1 : '',
		tag      : [ele.tagName.toLowerCase()],
		title    : [ele.title],
		filename : [ele.childNodes[0].alt],
		location : ['']
	}};

	// The last variable is passed to Download All Sources.
	urls
};

2-4行目で、aタグ（ele変数）のURL（つまりリンク先）を取得していて、6行目でurls連想配列のキーに、7行目でurlの値に使用しています。
12行目では、aタグ（ele変数）の子ノード（つまりimgタグ）のalt属性の値を取得して、ファイル名に指定しています。

このように作ったカスタムスクリプトを、オプション画面のカスタムスクリプト設定に設定します。
今回、URLはいらすとやのサイト全体（https://www.irasutoya.com/）、カスタムスクリプトには上記の内容を入力します。

設定が完了したら、いらすとやの画像ページで右クリックし、「Download All Sources（カスタムスクリプトを実行）」メニューをクリックしてみましょう。

以下のように問題なくDownload All Sourcesのマネージャーが表示され、URLが一つだけ表示されれば設定は成功です。
もし何も表示されない場合は、カスタムスクリプトが間違っています。

表示されたURLの一覧を見ると、対象とする画像ファイルのURLが一つだけ表示されており、ファイル名がグレーの斜体で表示されているはずです。
このURLを選択してダウンロードを行うと、ファイル名が自動的に設定されてダウンロードフォルダに保存されます。

さらに、同じくオプション画面にある「URLが1つしか見つからなかったとき、自動的にダウンロードする」設定をオンにすると、今回のようにURLリストに1つしかURLが無かったとき、自動的にダウンロードが開始されます。
このオプションと組み合わせることで、よりダウンロードを簡単に迅速に行うことが可能になります。

タグ:

おすすめ

コメントを残す