2018年11月22日

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


絵画作品を閲覧できるサイト Wikiart から Tampermonkey を使って特定の作家の作品データをダウンロードする方法をメモメモ…



Wikiart というサイトがあります。一言でいうと芸術作品のWikipediaのようなもので、世界中のユーザーが協力しながら、古今東西さまざまな著名アーティストの作品情報を収集、データベース化し公開しているサイトです。2018年11月現在で3000人以上の芸術家たちによる250,000点以上もの作品が公開されています。単純に好きな作家の作品を鑑賞するために使われるだけでなく、膨大な数の芸術作品を利用してディープラーニングなどの機械学習を行う目的で使われることも多いと思います。

そこで、Wikiartに登録されている特定の作家の作品の画像データを自動でダウンロードし、ローカルのフォルダに保存するスクリプトを作成してみました。たぶんこういう「画像だけを延々と取得していく」処理は他の言語でもっと適しているものがあると思うのですが、今回は Tampermonkey と JavaScript だけで頑張りました。

注意

このページで紹介するスクリプトは、作品一覧から各作品のページを読み込んで画像データのURLを取得していくものです。この方法とは別に、WikiartのAPIを使ったもう少し効率の良いスクリプトも作成したので、もしこのページのスクリプトが使えなかった場合にはそちらをお試しください。

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


というわけで、こちらが作成したスクリプトです。

  1. // ==UserScript==
  2. // @name         Wikiart Image Downloader
  3. // @version      1
  4. // @match        https://www.wikiart.org/en/*/all-works/text-list
  5. // @grant        GM_download
  6. // ==/UserScript==
  7.  
  8. 'use strict';
  9.  
  10.  
  11. // 作品のダウンロードが完了してから次の作品のダウンロードを開始するまでの時間
  12. var interval = 2000;
  13. // ダウンロードが失敗したあともう一度ダウンロードをやり直すまでの時間
  14. var retryInterval = 10000;
  15. // ダウンロードが失敗したあと再試行する回数
  16. var maxRetry = 2;
  17.  
  18. var imageData = [];
  19. var failedData = [];
  20. var currentDownloadIndex = 0;
  21. var currentRetry = 0;
  22.  
  23. (function() {
  24.     getImageData();
  25.     startDownload();
  26. })();
  27.  
  28. // 作品一覧ページのDOMを読み込んで各情報を配列にブチ込む
  29. function getImageData()
  30. {
  31.     const elements = document.querySelectorAll(".painting-list-text-row a[href]");
  32.     if(!elements) return;
  33.  
  34.     for(let i=0; typeof(elements[i])!='undefined'; i++)
  35.     {
  36.         const artist = elements[i].getAttribute('href').match(/\/en\/(.+)\/.+/)[1];
  37.         const paintingTitle = elements[i].textContent;
  38.         const paintingId = elements[i].getAttribute('href').match(/\/en\/.+\/(.+)/)[1];
  39.         const yearElement = elements[i].parentNode.querySelector("span");
  40.         const year = yearElement ? yearElement.textContent.replace(/[^0-9]/g, "") : "";
  41.         imageData.push({ artist: artist, year: year, paintingTitle: paintingTitle, paintingId: paintingId });
  42.     }
  43. }
  44.  
  45. // 作品のダウンロードを開始する
  46. function startDownload()
  47. {
  48.     if(!imageData.length)
  49.     {
  50.         console.log("Can't find image data!");
  51.         return;
  52.     }
  53.  
  54.     // 最後まで完了したらダウンロードに失敗した作品をコンソールに表示して終了
  55.     if(currentDownloadIndex < 0 || currentDownloadIndex >= imageData.length)
  56.     {
  57.         console.log("Done!");
  58.         console.log("Fails: " + failedData.length);
  59.         if(failedData.length) console.log(failedData);
  60.         return;
  61.     }
  62.  
  63.     const image = imageData[currentDownloadIndex];
  64.     const altURL = "https://uploads0.wikiart.org/images/" + image.artist + "/" + image.paintingId + ".jpg"; // 画像URL取得に失敗したとき用の保険URL
  65.  
  66.     // ファイル名は "発表年 作品名.jpg"
  67.     let filename = image.paintingTitle + ".jpg";
  68.     if(image.year) filename = image.year + " " + filename;
  69.     filename = filename.replace(/[\/\\?%*:|"<>]/g, ""); // 禁止文字は消去
  70.  
  71.     // 実際に個別の作品ページを見に行く→DOMを分析して画像のURLを取得
  72.     fetch("https://www.wikiart.org/en/" + image.artist + "/" + image.paintingId)
  73.         .then(response => {
  74.             response.text().then(text => {
  75.                 const parser = new DOMParser();
  76.                 const htmlDoc = parser.parseFromString(text, "text/html");
  77.                 const imgElement = htmlDoc.querySelector("img[itemprop='image']");
  78.                 const imageURL = imgElement.getAttribute('src').replace(/!.+/, "");
  79.                 start(imageURL);
  80.             })
  81.             .catch(() => { start(altURL); })
  82.     })
  83.     .catch(() => { start(altURL); });
  84.  
  85.     function start(url)
  86.     {
  87.         console.log("Download Start!: " + image.paintingTitle + "(" + currentDownloadIndex + ")");
  88.         download(url, filename);
  89.     }
  90. }
  91.  
  92. // GM_download()を使ってローカルフォルダに指定したファイルをダウンロードする
  93. function download(url, filename)
  94. {
  95.     const arg = { url: url,
  96.                   name: filename,
  97.                   saveAs: false,
  98.                   onerror: onError,
  99.                   onload: onLoad,
  100.                   ontimeout: onTimeout
  101.                 };
  102.     GM_download(arg);
  103. }
  104.  
  105. // 作品のダウンロードに成功したら次の作品に進む
  106. function onLoad()
  107. {
  108.     console.log("Download Complete!: " + imageData[currentDownloadIndex].paintingTitle + "(" + currentDownloadIndex + ")");
  109.     console.log("--------------------");
  110.  
  111.     currentDownloadIndex++;
  112.     currentRetry = 0;
  113.     setTimeout(startDownload, interval);
  114. }
  115.  
  116. // ダウンロードに失敗したときに再試行する
  117. function retry()
  118. {
  119.     currentRetry++;
  120.     // 規定回数ダウンロードを繰り返す
  121.     if(currentRetry <= maxRetry)
  122.     {
  123.         console.log("Retry! " + currentRetry);
  124.         setTimeout(startDownload, retryInterval);
  125.     }
  126.     // それでもダメだった場合はあとで見つけやすいように登録しておく
  127.     else
  128.     {
  129.         const index = currentDownloadIndex;
  130.         const title = imageData[currentDownloadIndex].paintingTitle;
  131.         const year = imageData[currentDownloadIndex].year;
  132.         failedData.push({ index: index, title: title, year: year });
  133.  
  134.         console.log("--------------------");
  135.  
  136.         // 続行
  137.         currentDownloadIndex++;
  138.         currentRetry = 0;
  139.         setTimeout(startDownload, interval);
  140.     }
  141. }
  142.  
  143. function onError(err)
  144. {
  145.     console.log("*** Error! *** " + imageData[currentDownloadIndex].paintingTitle + "(" + currentDownloadIndex + ") was not downloaded! Reason: " + err.error);
  146.     retry();
  147. }
  148.  
  149. function onTimeout()
  150. {
  151.     console.log("*** Timeout! ***" + imageData[currentDownloadIndex].paintingTitle + "(" + currentDownloadIndex + ") was not downloaded!");
  152.     retry();
  153. }


あくまで趣味の範囲で「作ってみた」という感じなので、参考程度に見てもらえれば嬉しいです。ちなみにこのスクリプトでは Tampermonkey の GM_download というAPIを使っているため、Tampermonkey 以外(Greasemonkeyとか)では動きません。GM_download については前回の投稿 (JavaScript Tampermonkeyでファイルを保存する)にまとめました。

使い方

  1. Tampermonkeyに上記のスクリプトを登録する
  2. 「名前を付けて保存」の確認ダイアログが表示されないよう設定変更する
    Chromeの場合であればブラウザ設定から「ダウンロード前に各ファイルの保存場所を確認する」をオフに、Tampermonkey設定から「ダウンロードのモード」を「ブラウザーAPI」にしておく(詳しくは前回の投稿を参照のこと)
  3. ダウンロードしたい作者の作品一覧ページ(/all-works/text-list)を開く
    たとえばエル・グレコの作品一覧であれば
    https://www.wikiart.org/en/el-greco/all-works/text-list
    写楽であれば https://www.wikiart.org/en/toshusai-sharaku/all-works/text-list
  4. 自動でダウンロードが始まるのでブラウザのデベロッパーツールを起動(F12)してコンソールを眺める
    5. "Download Start!"や"Download Complete!"などの表示がずらずらと流れていれば成功
  5. 完了するまでひたすら待つ
こんな感じでログが出力されていれば成功


保存先のディレクトリはブラウザで設定した場所になるので、実行する前にどこに保存されるのかしっかり確認しておいてください。

途中で一時停止する機能はありません。停止したい場合は別のページに移動するかスクリプトを無効にしてください。最初からではなく特定の番号の作品から再開させたい場合は20行目の currentDownloadIndex に任意の番号を指定してください。

保存するときのファイル名のルールを変更したい場合は66～69行目あたりを修正してください。ただしファイル名として無効な文字列が含まれているとダウンロードに失敗するので注意しましょう。

注意事項

  • スクリプトを実行する場合は自己責任でお願いします。不利益や損害が生じても責任は負えません
  • ページの読み込みと画像の取得を連続で行っていくスクリプトなので、サイト側に少なからず負荷をかけることになります。一応利用規約をざっと確認したところスクリプト使用に関しては特に記述がなかったのでおそらく大丈夫だとは思いますが、濫用して規制されても責任は負いかねます
  • ダウンロードする作品の著作権とその取扱いには十分注意してください。古い作品は基本的にパブリックドメインになっていますが、最近の作品だとまだ著作権が切れていなかったり、特定の国でのみ著作権が消滅していたりします。著作権情報はそれぞれの作品ページで必ず確認するようにしてください。まあ、Wikiというものの特性上、その画像の著作権情報の確証を得るのは非常に難しいとは思いますが…
  • 作品ごとにHTMLを読み込んで情報を取得しているため、サイトのデザインが変わったりすると使用できなくなる可能性があります
  • その他もろもろ、エラーや不具合が出て意図しない動作になることがあります。エラーなどでうまくダウンロードできない場合はAPIを使ったバージョン(Wikiart で公開されている作品を自動でダウンロードする (API編))も試してみてください

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)