【Chrome】右クリックが機能しない!? ならばデベロッパーツールで画像を保存だ：Google Chrome完全ガイド
Google ChromeでWebページを開いたとき、画像を右クリックしても［画像に名前を付けて保存］メニューが表示されないことがあります。そのような場合にChromeの「デベロッパーツール」で画像を見つけて確認する方法をWeb担当者向けに紹介します。
「Google Chrome」（以下、Chromeと略）で開いたWebページやWebアプリ内で、画像を右クリックしてメニューを開くと、通常、［画像に名前を付けて保存］というメニューが表示されます。それをクリックすると、その画像をローカルマシンにダウンロードできます。
ところがWebページ／アプリによっては、画像を右クリックしても保存できない場合があります。例えばページの背景に配置されている画像は、右クリックしてメニューを開いても、［名前を付けて画像を保存］メニューが表示されません。
画像を右クリックしても、Chrome標準のメニューが表示されない、あるいはカスタマイズされたメニューが表示されるため、やはり画像が保存できないこともあります。
Web担当者としてWebページ／アプリに意図した画像がちゃんと表示されているか確認している際、上記のように画像をダウンロードできないと、なかなか作業がはかどりません。
このような場合、Chromeの標準機能である「デベロッパーツール」を活用すると、画像ファイルを特定して確認できることがあります。ここではWindows OS版Chromeを対象として、その具体的な方法と注意点をWeb担当者向けに説明します。
なお、以下で紹介する方法は100％成功するわけではなく、画像のダウンロードができないケースもあることをご了承ください。
Chromeの「デベロッパーツール」とは？
Chromeの「デベロッパーツール（開発者ツール）」とは、Webページ／アプリ開発者向けの各種ツール群のことです。ページのスタイルを動的に変更したり、ページを構成するファイルのダウンロード状況を確認したり、SSL／TLSなどのセキュリティ機能をチェックしたりと、Webの開発やデバッグ、検証に役立つさまざまな機能を利用できます。Chromeがインストール済みなら、特に設定変更などをすることなく、かつ無償で利用できます。
デベロッパーツールを開くには、対象のWebページ／アプリのタブをアクティブにした状態で、［Ctrl］＋［Shift］＋［I］キーまたは［F12］キーを押します。あるいは、Chromeウィンドウ右上隅のメニューボタン［︙］をクリックしてメニューを開き、［その他のツール］−［デベロッパーツール］をクリックします。
デベロッパーツールは、デフォルトでタブと同じウィンドウ内に表示されます。このままだと狭くて使いにくいので、以下のように別のウィンドウにデベロッパーツールを移動するか、あるいはウィンドウを広げるべきでしょう。
デベロッパーツールで画像ファイルを見つけて保存および確認するには
デベロッパーツールの［Network］タブを活用すると、WebサーバからChromeにダウンロードされたファイル一覧から、目的の画像ファイルを見つけて保存／確認できます。
それにはまず［Network］タブを選択してから、［Disable cache］チェックボックスにチェックを入れてオンにします。そして［Ctrl］＋［R］キーを押して、Webページ／アプリの再読み込みをします。
このとき、［Console］ドロワーが表示されることがあります。取りあえず不要なので、もし邪魔なら、［Esc］キーを押すかドロワー右上隅の［×］アイコンをクリックして、ドロワーを閉じます。
これで［Network］タブの下方に、ダウンロードされたファイル一覧（正確にはリクエスト／レスポンス一覧）が現れるはずです。この一覧では、ファイルが非常に多いせいで、どれが画像ファイルなのか分かりにくいことがよくあります。そのような場合には、以下のように［Img］をクリックして、画像ファイルだけに絞り込みます。
Copyright© Digital Advantage Corp. All Rights Reserved.