以前、↓の記事でCLIの画像ダウンロードツールを作ったのですが、不要な画像までダウンロードされてしまうのでGUI化し、選択してダウンロードできる様にしてみました。

今回作ったツール

https://teracy-img-downloader.herokuapp.com/
※HEROKUの無料プランを使っているため、表示されるまでに1分程度かかります

機能紹介

使い方は簡単です

1. ダウンロードしたい画像のあるサイトのURLを入力し、検索します
2. ダウンロードしたい画像を選択します（選択した画像は赤くなります）
3. ダウンロードボタンを押してダウンロードします

※「いらすとや」さんのページを使わせていただいてますが、このツール使用時は対象のサイトがスクレイピングを禁止していないことを確認の上、使用してください

※Herokuの無料プランでサーバーを立てているため、サーバーがスリープしているとアクセス時に表示まで1〜2分程かかることがあります

技術的な話

各種バージョン

$ node -v
v12.16.3

Nuxtについて

• npx create-nuxt-appでNuxtプロジェクトを作成します。なお、設定は以下の通りです
  • 言語：Typescript
  • UI Component：ElementUI
  • Module：Axios
  • Linter：Prettier
  • その他はデフォルトでEnter連打

※nuxtバージョンは2.15.6でした

ポイント

scraperjsを使っているのですが、Node.jsのいろんなパッケージが必要でそのままだと動きません。

NuxtにはserverMiddlewareという機能を備えているため、これを使います。

この機能を使うと、APIを作成してサーバーサイドの処理を実装することができます。
これにより、通常Vue.jsでは使用できないNode.jsのパッケージ（fsやrequest等）も使うことができます。

最後に

SPAやAjaxで非同期でimgタグを埋め込む様なページには対応できていないため、スクレイピングをヘッドレスブラウザに切り替えてより対応範囲を広げて行けたら良いなと思います。