Tensor.Art
Create

【技術記事】Tensor Art上の画像を一括で保存する方法

Updated:

Chromeコンソールを使ってウェブページの画像を一括ダウンロードする方法

テンソリアンの皆さんこんにちは。皆さんは日々作られた大量の画像どうしていますか？
「すべての画像の右下のダウンロードボタンを一個ずつ押してる」「お気に入りの画像だけ、なくなく保存してる」「管理->すべて->ダウンロード　で一括ダウンロード」等それぞれ方法はありますが、今回はtoolアシストしたダウンロード方法を紹介します。

今回はChrome（Google Chrome）のコンソール機能を使って、表示中のウェブページ上の全画像を簡単に取得する方法を紹介します。

コンソール機能？えっ、コマンドを使って操作？？ハッキング？大量アクセス？なにそれこわい。
いいえ、心配ありません。ブラウザでできる範囲のことなので、問題はありません！

<prompt>
anime style, cute girl sitting in front of a computer screen, excited expression, screen filled with dozens of images being saved automatically, glowing image download icons, data streams, futuristic UI, soft lighting, tech-themed background, expressive face, joyful, dynamic pose, long hair flowing, vibrant color palette　@dalle3

準備するもの

  • Google Chrome ブラウザ

  • 画像が表示されているウェブページ

  • ちょっとした勇気（コンソールに初めてコードを入力する方向け）

手順

1. 画像URLの取得

  1. 画像をダウンロードしたいウェブページを Chrome で開きます。表示の日付指定を行い、スクロールを行って、ダウンロードする予定の画像をウェブブラウザに表示させます。(逆に表示されていない画像は保存できません)

  2. キーボードショートカット　F12キー　あるいは Ctrl + Shift + J（Windows/Linux）または Cmd + Option + J（Mac）を押して、デベロッパーツールのコンソールを開きます。

  3. コンソールに以下のコードを貼り付けて、Enter キーを押します。

    (初回は警告でるので、指示に従ってコピペを許可する　とタイプしてEnter入れてください。)

urls = [...document.querySelectorAll("img")].map(img => img.src);
console.log(urls.join("\n"));

これにより、ページ上のすべての画像のURLが抽出され、コンソールに表示されます。
Copyボタンを押して、内容をクリップボードにコピーし、適当なテキストエディタで保存してください。
URLを直接ブラウザにいれれば画像を表示することができます。


2. ダウンロード方法の選択

ここからは、抽出したURLをどのようにダウンロードするかによって方法が分かれます。

方法A: ダウンロードマネージャーを使用する場合

  1. お好みのダウンロードマネージャー（Free Download Manager、JDownloader など）を起動します。

  2. 「URL一括追加」などの機能を使って、コピーしたURLリストを貼り付けます。

  3. ダウンロードを開始します。

方法B: ブラウザの拡張機能を使用する場合

  1. Chrome ウェブストアから「Image Downloader」や「Batch Link Downloader」などの拡張機能をインストールします。

  2. 拡張機能を開き、URLリストを貼り付けてダウンロードを実行します。

注意点

  • すべての画像が取得できるわけではありません。CSSの背景画像や、JavaScriptで動的に読み込まれる画像は対象外です。

  • 大量の画像を一度にダウンロードすると、ブラウザやネットワークに負荷がかかる可能性があります。

  • サイトによっては、利用規約で画像の一括ダウンロードを禁止している場合があります。使用前に確認しましょう。

応用：フィルタリング

他のページから遷移すると他の人の投稿画像やイベント案内の画像等が混じるので、できるだけ、
画像の表示されないページから、生成モードに遷移するのがおすすめです。

特定の条件に合致する画像だけを取得したい場合は、コードを少し変更します。
例えば、一定サイズ以上の画像だけを対象にする場合：

// 幅が100px以上の画像のURLだけを取得
urls = [...document.querySelectorAll("img")]
  .filter(img => img.width >= 100)
  .map(img => img.src);
console.log(urls.join("\n"));

まとめ

ブラウザのコンソール機能を使えば、プログラミングの知識がなくても、ウェブページ上の画像を簡単に一括取得できます。
Tensor ARTで折角生成した画像を残らず保存する方法として、ご活用ください。

0