JavaScript Tampermonkeyでファイルを保存する

Tampermonkeyを使ってファイルをダウンロードしローカルに保存する方法をメモメモ…

どこかのサイトからファイルを自動で落としてきてローカルのフォルダに保存する…という処理をユーザースクリプトから実行したい場合は、Chromeの拡張機能Tampermonkeyを使うのが便利です。TampermonkeyにはGM_downloadというAPIが用意されていて、ファイルのダウンロードと保存を比較的簡単に行えます。

では、さっそく使い方の例を見てみましょう。

// ==UserScript==
// @name         Domo-kun Downloader
// @version      1
// @match        https://*.nhk.or.jp/*
// @grant         GM_download
// ==/UserScript==
 
downloadDomokun();
 
// NHKのサイトを読み込むたびにどーもくんの画像をダウンロードして保存する
function downloadDomokun()
{
    var arg = { url: "https://www.nhk.or.jp/domo/character/img/pic_domo.jpg",
                  name: "Domo-kun.jpg",
                  saveAs: true,
                  onerror: onError,
                  onload: onLoad,
                  onprogress: onProgress,
                  ontimeout: onTimeout
            };
    GM_download(arg);
}
 
function onLoad(){
    console.log("Download Completed!");
}
 
function onError(err){
    console.log("Error! Reason: " + err.error);
}
 
function onProgress(){
    console.log("Downloading...");
}
 
function onTimeout(){
    console.log("Timeout!");
}

GM_downloadに各種情報を渡してあげると自動的にファイルをダウンロードしてくれます。簡単です。

ただし使用するには5行目のように

// @grant        GM_download

とヘッダに記述する必要があるので注意。GM_からはじまる関数は「タブを自動で開く」とか「クリップボードにコピーする」とか「ファイルを保存する」とか使い方によってはそこそこヤバめの機能が多いので、このインターフェースを間違いなく使用しますよ、ということを明示しなければいけないのです。

GM_download関数の引数で指定できるプロパティは次のとおり↓

url	ダウンロードしたいファイルのURL
name	保存するときのファイル名 Tampermonkeyのオプション(「ファイル拡張子のホワイトリスト」)で指定したファイル形式しかダウンロードできないので注意
headers	user-agentやrefererなどのヘッダ情報
saveAs	「名前を付けて保存」ウィンドウを表示するかどうか意図した動作にならない場合はTampermonkeyとブラウザ側の設定を変更する必要がある(後述)
onerror	ダウンロードがエラーで中断した場合に呼び出される処理(コールバック) 引数を指定すればエラー原因(error)やエラー詳細(details)といった情報を取得できる(上の例ではerrorプロパティをコンソールに表示)
onload	ダウンロードが正常に完了した場合に呼び出される処理(コールバック)
onprogress	ダウンロードに何か進展があった場合に呼び出される処理(コールバック)
ontimeout	ダウンロードがタイムアウトで失敗した場合に呼び出される処理(コールバック)

詳しくはTampermonkeyのドキュメントページも参照してください。

saveAs: false を反映させるには

若干ややこしいのが saveAs です。たとえば複数の画像を何十枚と保存したいときなんかは、いちいち「名前を付けて保存」画面が表示されてしまうとめんどくさいですよね。そこで saveAs: false に設定することで、確認画面なしに自動でどんどんローカルフォルダに落としてくることができるのですが…おそらくスクリプトからfalseにするだけでは設定が反映されないと思います。「名前を付けて保存」画面が表示されてしまう！という場合は以下の方法を試してみてください。

1. ブラウザのオプションから保存場所を確認しないように設定する

ブラウザの設定画面からファイルをダウンロードするときの確認ダイアログを非表示に設定しましょう。たとえばChromeの場合であれば、設定画面を開き「ダウンロード」の欄にある「ダウンロード前に各ファイルの保存場所を確認する」の項目をオフにします。

「ダウンロード前に各ファイルの保存場所を確認する」をオフに

一旦この状態で動作を確認してみて、これでもまだ「名前を付けて保存」ウィンドウが表示されてしまう場合は次の方法を試してみてください。

2. Tampermonkeyのオプションからダウンロードモードを変更する

まずTampermonkeyの設定画面を開きます(Chromeの場合はツールバーのアイコンを右クリック→オプション)。次に「全般」にある「設定のモード」を「初心者」か「上級者」に設定。これで下のほうに「ダウンロード BETA」という欄が表示されるようになると思うので、そこの「ダウンロードのモード」を「ブラウザー API」に変更します。

「ダウンロードのモード」を「ブラウザーAPI」に

これを設定するとブラウザから「拡張機能の権限を許可しろ」みたいな通知が出るかもしれませんが、その場合は許可しておいてください。

基本的にこれで保存時に確認画面が出なくなるはずです。ただし、この状態だと意図しないファイルまでダウンロードされてしまう可能性があるので、セキュリティ的に問題があるかもしれません。自作のスクリプトを実行した後は、できるだけ元の設定に戻しておくことをオススメします。

それから、今回紹介したGM_downloadを利用してWikiartから絵画作品をダウンロードしてくるスクリプトを書いてみました。興味があればどうぞ…↓
Wikiart で公開されている作品を自動でダウンロードする

おねむゲーマーの備忘録

2018年11月21日