Wikiart で公開されている作品を自動でダウンロードする (API編)

WikiartのAPIを利用して指定した作家の作品をダウンロードする方法をメモメモ…

以前の投稿(Wikiart で公開されている作品を自動でダウンロードする)を書いたあとで気づいたのですが、どうやらWikiartにはAPIが用意されているようです。以前は作者の作品一覧ページからいちいちDOMを読み込んで画像データへのURLを取得していましたが、APIを使えば一発で取得できます。完全に見逃してました…恥ずかし…。

というわけで、APIを使って全体的に書き直したのが次のスクリプトです。

// ==UserScript==
// @name         Wikiart Image Downloader
// @version      2
// @match        https://www.wikiart.org/*
// @grant        GM_download
// ==/UserScript==

'use strict';


// 作品のダウンロードが完了してから次の作品のダウンロードを開始するまでの時間
var interval = 2000;
// ダウンロードが失敗したあともう一度ダウンロードをやり直すまでの時間
var retryInterval = 10000;
// ダウンロードが失敗したあと再試行する回数
var maxRetry = 2;

var imageData = [];
var failedData = [];
var currentDownloadIndex = 0;
var currentRetry = 0;


addButton();

// 作家・作品情報の上にボタンを追加
function addButton()
{
    const artinfo = document.querySelector(".wiki-layout-artist-info,.wiki-layout-artwork-info");
    if(!artinfo) return;

    const wrapper = document.createElement("div");
    wrapper.setAttribute("style", "margin-top: 1em; z-index : 100; float: right;");
    artinfo.parentElement.insertBefore(wrapper, artinfo);

    const button = document.createElement("button");
    button.setAttribute("id", "download-all-images-button");
    button.setAttribute("style", "font-size: 1em; padding: 0.5em;");
    button.innerText = "Download All Images";
    wrapper.appendChild(button);

    const info = document.createElement("div");
    info.setAttribute("id", "download-all-images-info");
    info.setAttribute("style", "font-size: 0.8em; padding: 0.2em; text-align: right;");
    wrapper.appendChild(info);

    // 押したらスタート
    button.addEventListener("click", function(){
        enableButton(false);
        getImageData();
    });
}

// WikiartのAPIから作品一覧を取得する
function getImageData()
{
    displayInfo("Accessing Wikiart API...");

    const url = window.location.href;
    const artist = url.match(/https:\/\/www\.wikiart\.org\/.+?\/(.+?)(?:\/|$)/)[1];
    fetch("https://www.wikiart.org/en/App/Painting/PaintingsByArtist?artistUrl=" + artist)
    .then(response => { return response.json(); })
    .then(json => {
        for(let i=0; i<json.length; i++)
        {
            const artist = json[i].artistName;
            const title = json[i].title;
            const year = json[i].yearAsString;
            const url = json[i].image.replace(/![^!]+$/, ""); // 末尾の!Large.jpgを取り除く
            imageData.push({ artist: artist, title: title, year: year, url: url });
        }
        startDownload();
    })
    .catch(() => {
        console.log("Failed ...");
        displayInfo("Failed (Accessing Wikiart API) ...");
        enableButton(true);
    });
}

// 作品のダウンロードを開始する
function startDownload()
{
    if(!imageData.length)
    {
        console.log("Can't find image data!");
        displayInfo("Failed (Can't Find Image Data) ...");
        enableButton(true);
        return;
    }

    // 最後まで完了したらダウンロードに失敗した作品をコンソールに表示して終了
    if(currentDownloadIndex < 0 || currentDownloadIndex >= imageData.length)
    {
        console.log("Done!");
        console.log("Fails: " + failedData.length);
        displayInfo("Done! Failed: " + failedData.length);
        if(failedData.length) console.log(failedData);
        enableButton(true);
        return;
    }

    const image = imageData[currentDownloadIndex];
    const url = image.url;

    // ファイル名は "発表年 作品名.拡張子"
    const extension = url.match(/(\.[^.]+)$/)[1];
    let filename = image.title + extension;
    if(image.year) filename = image.year + " " + filename;
    filename = filename.replace(/[\/\\?%*:|"<>]/g, ""); // 禁止文字は消去

    console.log("Download Start!: " + image.title + "(" + currentDownloadIndex + ")");
    displayInfo("Downloading ... (" + (currentDownloadIndex + 1) + "/" + imageData.length + ")");
    download(image.url, filename);
}

// GM_download()を使ってローカルフォルダに指定したファイルをダウンロードする
function download(url, filename)
{
    const arg = { url: url,
                  name: filename,
                  saveAs: false,
                  onerror: onError,
                  onload: onLoad,
                  ontimeout: onTimeout
                };
    GM_download(arg);
}

// 作品のダウンロードに成功したら次の作品に進む
function onLoad()
{
    console.log("Download Complete!: " + imageData[currentDownloadIndex].title + "(" + currentDownloadIndex + ")");
    console.log("--------------------");

    currentDownloadIndex++;
    currentRetry = 0;
    setTimeout(startDownload, interval);
}

// ダウンロードに失敗したときに再試行する
function retry()
{
    currentRetry++;
    // 規定回数ダウンロードを繰り返す
    if(currentRetry <= maxRetry)
    {
        console.log("Retry! " + currentRetry);
        setTimeout(startDownload, retryInterval);
    }
    // それでもダメだった場合はあとで見つけやすいように登録しておく
    else
    {
        const index = currentDownloadIndex;
        const title = imageData[currentDownloadIndex].title;
        const url = imageData[currentDownloadIndex].url;
        failedData.push({ index: index, title: title, url: url });

        console.log("--------------------");

        // 続行
        currentDownloadIndex++;
        currentRetry = 0;
        setTimeout(startDownload, interval);
    }
}

function onError(err)
{
    console.log("*** Error! *** " + imageData[currentDownloadIndex].title + "(" + currentDownloadIndex + ") was not downloaded! Reason: " + err.error);
    retry();
}

function onTimeout()
{
    console.log("*** Timeout! ***" + imageData[currentDownloadIndex].title + "(" + currentDownloadIndex + ") was not downloaded!");
    retry();
}

function enableButton(isEnabled)
{
    const button = document.querySelector("#download-all-images-button");
    if(button) button.disabled = !isEnabled;
}

function displayInfo(string)
{
    const info = document.querySelector("#download-all-images-info");
    if(info) info.innerText = string;
}

ボタンを表示するための処理を追加しているので、ちょっと長くなっちゃってます…。

使い方

使い方は以前のものとほぼ同じですが、今回は自動スタートではなくボタンを押すと開始します。

Tampermonkeyに上記のスクリプトを登録する
「名前を付けて保存」の確認ダイアログが表示されないよう設定変更する
Chromeの場合であればブラウザ設定から「ダウンロード前に各ファイルの保存場所を確認する」をオフに、Tampermonkey設定から「ダウンロードのモード」を「ブラウザーAPI」にしておく(詳しくは以前の投稿を参照のこと)
ダウンロードしたい作者のページか、その作者が描いたいずれかの作品ページを開く
作家/作品情報の右上に表示されている "Download All Images" ボタンを押す

ボタンはページ右上に表示

ダウンロードが始まるのでブラウザのデベロッパーツールを起動(F12)してコンソールを眺める

"Download Start!"や"Download Complete!"などの表示がずらずらと流れていれば成功

完了するまでひたすら待つ

必ず前回の投稿の注意事項を読んでから実行してください。ファイル名やボタン配置など、気にくわない部分は自由に変更して使ってください。

Wikiart API

現在WikiartのAPIには旧版と新版(v2)の2種類があります。上記のスクリプトで使っているのは旧版です。新しいほうでは認証システムが導入されて簡単にログインできるようになっていたり、ページネーション(取得するデータ項目が多すぎたときに小分けにして表示する機能)が追加されていたりといろいろ強化されているようですが、一方でまだ実装されていない機能があったり、意図した動作にならなかったりと不安定な部分があるらしく、念のためまだ古いAPIも残している…という状態らしいです。

この文章を書いている時点(2018年12月12日現在)ではまだ新版のドキュメントが未完成状態でTODOだらけなので、おそらくもうしばらくは旧版のままでも大丈夫だと思います。

基本的にAPIは誰でも使えますが、無料で使う場合は「1時間に400リクエストまで」という制限がかかります。たとえばWikiartを利用したアプリを作成したい場合など、リクエスト数の上限を引き上げる必要がある場合には申請して有料版にする感じでしょうか。正直どういう操作で1リクエストになるのかよくわかりませんが、個人で軽く使う分にはそうそう超えないとは思います(たぶん)。料金ごとの上限など詳しい情報はWikiart APIについてのページに記載されています。

指定した作家の作品情報一覧(画像データへのURL含む)を取得する場合は

(旧) https://www.wikiart.org/en/App/Painting/PaintingsByArtist?artistUrl=作家名
(新) https://www.wikiart.org/en/api/2/PaintingsByArtist?id=作家ID

のようにアクセスすればOK。json形式で全作品データが閲覧できます。ただし、これで取得した画像URLには

https://uploads0.wikiart.org/images/katsushika-hokusai/rainstorm-beneath-the-summit.jpg!Large.jpg

のように末尾に画像サイズ指定用の文字列(!Large.jpg)がくっついているため、原寸大でダウンロードしたい場合は取り除く必要があります。その他、データの取得方法やサムネイルのサイズ指定方法などの詳しい情報はドキュメントを参照してください。

おねむゲーマーの備忘録

2018年12月12日

Wikiart で公開されている作品を自動でダウンロードする (API編)

使い方

Wikiart API

0 件のコメント:

コメントを投稿