【2020最新版】模写に便利なchrome機能(イメージダウンローダー/カラーピックアイドロッパー/スクリーンショット)プログラミング独学講座5

【2020最新版】模写に便利なchrome機能(イメージダウンローダー/カラーピックアイドロッパー/スクリーンショット)プログラミング独学講座5

 

プログラミングの学習に模写は欠かせません。

今回は、その模写をするために便利なGoogleクロームの機能を紹介します。

紹介する機能は以下の三つです。

 

模写するサイトの画像をとる → Image Downloader(イメージ・ダウンローダー)
模写するサイトの色味を調べる → ColorPick Eyedropper(カラーピック・アイドロッパー)
模写する要素のPX数を調べる → スクリーンショット

 

 

便利機能1

サイトの画像をとる

Image Downloader(イメージ・ダウンローダー)

その名のとおりの機能をもつ Chromeの拡張機能です。

これがあれば模写するサイトが使っている画像やアイコンを一括してダウンロードすることができ、自分の模写サイトに使えます。

ひとつひとつを保存するより、ずっと便利かつ効率的です。

 

「イメージ・ダウンローダー」インストール方法

 

「イメージ・ダウンローダー」に限らず、chromeには、魅力的な拡張機能がたくさんあります。

そのどれも、インストール方法はすべて一緒です。

 

まず、「クローム ウェブストア」にいきます。

 

 

するとこのような画面になりますので、「chromeに追加」をクリックします。

 

 

「拡張機能を追加」をクリックします。


<

 

するとこのような画面になりますので、「保存」をクリックします。

 

 

右上に、イメージダウンローダーのアイコンが出ていますので、使うときにここをクリックします。

 

 

 

「イメージ・ダウンローダー」使い方

 

 

自分が模写するサイトを表示してから、「イメージ・ダウンローダー」のアイコンをクリックすると、このように、そのページのすべての画像が表示されます。

 

 

 

たぶん、全部の画像が必要だと思うので、[select all]にチェックを入れます。ひとつずつ選ぶこともできます。

 

 

 

続いて[download]をクリックします。

 

すると、すべての画像がダウンロードされます。

あとは、模写で活用してください。

 

 

 

便利機能2

サイトの色味を調べる

ColorPick Eyedropper(カラーピック・アイドロッパー)

こちらもGoogleのウェブストアから入手します。

入手方法は、イメージ・ダウンローダーと同じです。

 

このカラーピック・アイドロッパーのすごいところは、調べたい色味のところに持っていくだけで、即座に色を指定してくれるところです。

「カラーピック・アイドロッパー」使い方

 

ダウンロードすると、やはり、右上にアイコンができます。

そこをクリックすると、四角のポインターに変わり、ポインターをもっていったところの色味が出ます。

カラーコードも出ますし、rgb表記でも、出ます。

すごい便利ですね。

 

 

 

便利機能3

要素の縦と横のpxを調べる(Mac限定)

スクリーンショット

 

 

最後は、ちょっとした応用編です。

しかも、Mac限定です。

みなさんも普段からスクリーンショットは多用していると思います。

Macでは、2通りのスクリーンショットがあります。

全画面と部分画面です。

全画面とは、文字どおり、全部の画面をスクショすることで、

 

全画面がスクショできます。

これも便利なのですが、

今回はこちらです。

 

部分画面スクリーンショットで要素のPXを調べる方法

 

Macでは、この方法で、部分スクショができます。

shift + command + 4 ですね。
するとこのようなものが出てきます。

 

 

この十字丸が、ポインターのある場所です。座標が出ています。
それを、調べたい要素に当てて、ドラッグします。
するとこうなります。

 

 

このお問い合わせ/請求ボタンの横幅、いわゆるwidthは、
今回は、315px という値が出ています。
そのまま、手を離すと、スクリーンショットを取らずに終わります。
もちろん、同様に、縦も測ることができます。
今回は、2pxという値が出ています。

 

ちょっとした裏技です。

 

ただ、この他にも、MacにもWindowsにも、フリーのルーラーもありますので、そちらを使ってもいいと思います。

 

 

 

ということで、今回の記事のまとめです。

模写するときに役立つ3つのツール

画像をとるなら → Image Downloader(イメージ・ダウンローダー)

色味を調べるなら → ColorPick Eyedropper(カラーピック・アイドロッパー)

要素のpx数を調べるなら → 部分画面スクリーンショット(Mac限定)

 

 

(プログラミング独学講座 これまでの記事)

①プログラミング学習で絶対にやってはいけないこと
②プロゲートとドットインストールまで 独学の順序①
③ドットインストールから模写まで 独学の順序②
④そもそもなぜプログラミングを学ぶのか
NO IMAGE

チュールちゃんねるブログ

文化発信系

CTR IMG