プログラミング

【模写コーディングおすすめツール】WEBサイトの画像を一括保存する「Image Downloader」

2020年10月6日

こんにちは、イケゾーです。

今日もイケジョが困っています 🙂

イケジョ
HTMLの練習で模写をしているんだけど、画像も表示させたいな。でも、たくさんの画像をいちいち保存するのは面倒だし、なんか良い方法ないかなあ

イケジョと同じ疑問をお持ちの方はぜひ、読んでみてください。

 

【模写コーディングおすすめツール】WEBサイトの画像を一括保存する「Image Downloader」

WEB制作の勉強で模写コーディングをしており、サイトにアップロードされている画像を全部ダウンロードしたいと思いました。

2,3個ならサクッと「右クリック」→「名前を付けて画像を保存」しちゃうんですが、10から20ある画像あると非常に面倒で、時間がもったいないです。

同じ悩みをお持ちの方にぜひ使っていただきたく、ご紹介します。

そんな時に便利なのが、WEBサイトの画像を一括ダウンロードできる「Image Downloaderです。

模写コーディングとは

HTMLやCSSの基礎学習を終えて、既存のWEBサイトを自分でコードに書き起こすことをいいます。

模写に適したサイトはたくさんありますので、敬意を払って練習させてもらいます。

模写したサイトを公開することは良いですが、「模写である」ことを明記しましょう。

 

例えば、Apple社のiPhoneのサイト。

画面上部のメニュー部分、iPhoneの説明と画像が並列に並んでいる部分、とコードを書いていきますね。じゃあ、画像はどうするの?適当な画像をダミーで使う場合もありますが、やっぱり模写ならば画像もコピーしたいですね。

より正確な模写ができますし、なんと言ってもモチベーションも上がります。

そこで登場、Image Downloader」。

これを使えば、WEBサイト上の画像を一括でダウンロードできます。

 

「Image Downloader」の使用方法

まず、環境を確認します。

使用するブラウザは「Google Chrome」で、機能を拡張する方法でやっていきます。

 

chromeストアで、「Image Downloader」をインストール

  • ポップアップが出るので、「拡張機能を追加」をクリック

  • 詳細設定画面が表示されますが、そのままでOKです

  • Google Chrome右上に青色のアイコンが表示されたことを確認

使い方

では、実際に使ってみます。

例に出すのは、僕のプロフィールページです。

このページの画像は、吹き出しのアイコン、記事のサムネイルが5つ、プロフィールが画像とその背景画像です。

 

  • ダウンロードしたいWEBサイトで、「Image Downloader」をクリック。

表示しているWEBサイトの画像が全て表示されます。

    • 全ての画像を保存する場合
      「Select all」にチェックを入れて、「DOWNLOAD」をクリック
    • 個別に画像を指定する方法
      保存したい画像をクリックして、青枠で囲った状態で「DOWNLOAD」をクリック
    • 画像サイズを指定して、当てはまる画像のみ指定する方法
      画像の幅(Width)、画像の高さ(Height)で指定して必要な画像を選択します。
      チェックを入れて、ゲージを調節(0〜3000px)して、「DOWNLOAD」をクリック
  • DOWNLOAD」→「YES」の順にクリック。

画像は、ダウンロードフォルダに保存されました。

新しいフォルダを作成して、そこに保存したい場合は、「SAVE TO SUBFOLDER」に好きなフォルダ名を入力して「DOWNLOAD」をクリックします。
ここでは、【IkezooImages】というフォルダを作成して、画像を保存します。
こっちの方が整理しやすくて良いですね 🙂

 

他の便利ツールの紹介

他にも、模写コーディングにおすすめのツールがありますので、今後詳細アップしていきます。

  • ColorPick EyedropperWEBサイトの文字や画像のカラーコードがわかる(#EE82EE みたいなやつ)
  • WhatFont WEBサイトの文字のフォントがわかる

 

まとめ

<image>

「Image Downloader」めちゃくちゃ便利ですよね。

これで模写の質も、テンションもアップ間違いない!!

 

「こんな機能あったら便利なのに」というのはググったら既にありますね 🙂

作ってくれた神様に感謝しつつ、模写コーディングへ戻りましょう。

 

当ブログでは、効率UPによる「健康プログラミング」を目指した情報発信をしています。

ぜひ、他の記事もご覧ください。

 

ではでは。

 

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-プログラミング
-, ,

© 2021 IkezoooBlog