連載
» 2021年09月08日 05時00分 公開

【Chrome】右クリックが機能しない!? ならばデベロッパーツールで画像を保存だGoogle Chrome完全ガイド

Google ChromeでWebページを開いたとき、画像を右クリックしても[画像に名前を付けて保存]メニューが表示されないことがあります。そのような場合にChromeの「デベロッパーツール」で画像を見つけて確認する方法をWeb担当者向けに紹介します。

[島田広道,デジタルアドバンテージ]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「Google Chrome完全ガイド」のインデックス

連載目次

画像を右クリックしても[名前を付けて画像を保存]メニューが出てこない? それなら「デベロッパーツール」で画像を保存できます

 「Google Chrome」(以下、Chromeと略)で開いたWebページやWebアプリ内で、画像を右クリックしてメニューを開くと、通常、[画像に名前を付けて保存]というメニューが表示されます。それをクリックすると、その画像をローカルマシンにダウンロードできます。

 ところがWebページ/アプリによっては、画像を右クリックしても保存できない場合があります。例えばページの背景に配置されている画像は、右クリックしてメニューを開いても、[名前を付けて画像を保存]メニューが表示されません

Chromeで右クリックしても[画像に名前を付けて保存]メニューが表示されない例 Chromeで右クリックしても[画像に名前を付けて保存]メニューが表示されない例

 画像を右クリックしても、Chrome標準のメニューが表示されない、あるいはカスタマイズされたメニューが表示されるため、やはり画像が保存できないこともあります。

Chromeで右クリックしても独自メニューが表示されてしまう例 Chromeで右クリックしても独自メニューが表示されてしまう例

 Web担当者としてWebページ/アプリに意図した画像がちゃんと表示されているか確認している際、上記のように画像をダウンロードできないと、なかなか作業がはかどりません。

 このような場合、Chromeの標準機能である「デベロッパーツール」を活用すると、画像ファイルを特定して確認できることがあります。ここではWindows OS版Chromeを対象として、その具体的な方法と注意点をWeb担当者向けに説明します。

 なお、以下で紹介する方法は100%成功するわけではなく、画像のダウンロードができないケースもあることをご了承ください。

Chromeの「デベロッパーツール」とは?

 Chromeの「デベロッパーツール(開発者ツール)」とは、Webページ/アプリ開発者向けの各種ツール群のことです。ページのスタイルを動的に変更したり、ページを構成するファイルのダウンロード状況を確認したり、SSL/TLSなどのセキュリティ機能をチェックしたりと、Webの開発やデバッグ、検証に役立つさまざまな機能を利用できます。Chromeがインストール済みなら、特に設定変更などをすることなく、かつ無償で利用できます。

 デベロッパーツールを開くには、対象のWebページ/アプリのタブをアクティブにした状態で、[Ctrl]+[Shift]+[I]キーまたは[F12]キーを押します。あるいは、Chromeウィンドウ右上隅のメニューボタン[]をクリックしてメニューを開き、[その他のツール]−[デベロッパーツール]をクリックします。

Chromeのデベロッパーツールを開く Chromeのデベロッパーツールを開く

 デベロッパーツールは、デフォルトでタブと同じウィンドウ内に表示されます。このままだと狭くて使いにくいので、以下のように別のウィンドウにデベロッパーツールを移動するか、あるいはウィンドウを広げるべきでしょう。

使いやすいようにデベロッパーツールを別のウィンドウに移す 使いやすいようにデベロッパーツールを別のウィンドウに移す

デベロッパーツールで画像ファイルを見つけて保存および確認するには

 デベロッパーツールの[Network]タブを活用すると、WebサーバからChromeにダウンロードされたファイル一覧から、目的の画像ファイルを見つけて保存/確認できます。

 それにはまず[Network]タブを選択してから、[Disable cache]チェックボックスにチェックを入れてオンにします。そして[Ctrl]+[R]キーを押して、Webページ/アプリの再読み込みをします。

[Network]タブを開いてから再読み込みをする [Network]タブを開いてから再読み込みをする

 このとき、[Console]ドロワーが表示されることがあります。取りあえず不要なので、もし邪魔なら、[Esc]キーを押すかドロワー右上隅の[×]アイコンをクリックして、ドロワーを閉じます。

[Console]ドロワーは閉じる [Console]ドロワーは閉じる

 これで[Network]タブの下方に、ダウンロードされたファイル一覧(正確にはリクエスト/レスポンス一覧)が現れるはずです。この一覧では、ファイルが非常に多いせいで、どれが画像ファイルなのか分かりにくいことがよくあります。そのような場合には、以下のように[Img]をクリックして、画像ファイルだけに絞り込みます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。