2. Webページに表示された個人情報をダミーに変更してからスクショを撮る

前回のチュートリアルでは、Webページに表示された要素の削除をしてみました。しかし、名前などの個人情報が表示されているケースでは、要素をただ消すのではなくダミーデータで内容を差し替えたいというケースもありそうです。今回は、個人に紐付く情報がたっぷり掲載されているAmazonのトップページについて、Chromeデベロッパーツールを使った要素の書き換えを試してみましょう。

前提知識

このチュートリアルは次のチュートリアルの続きとなっています。

1. Web広告の表示を削除してからスクショを撮る

また、前回と同様にHTMLの知識があった方が内容が理解しやすいです。不明点はHTMLのリファレンスで解消しながらお読みください。

作るもの

次の画像にあるような、スクショを撮るときに隠したくなるパーソナルな情報を、一時的にダミーデータに差し替えてみます。

Amazonトップページ(ログイン済)
ダミーデータへの差し替え後

体験すること

このチュートリアルによって、以下を体験します。

  • HTMLタグの中にあるテキストを一時的に書き換える
  • HTMLタグの属性の値を一時的に書き換える

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

HTMLタグの中にあるテキストを編集する

まずはChromeでAmazonのトップページにアクセスし、Amazonのアカウントでログインしてみましょう。よく画面を観察してみると、氏名、郵便番号、アカウント画像、最近チェックした商品など、個人情報を含むパーソナルな情報が多く表示されていることがわかります。

Amazonトップページ(ログイン済)

普通にAmazonを利用する分には問題ありませんが、トップページのスクショを撮りたいときには「一部をマスキングしたいなあ」と感じるはずです。

前回のチュートリアルで要素を削除したように、Chromeデベロッパーツールを使えばWebページに表示されているテキストや画像を書き換えることができます。もちろん、自分のブラウザ上で一時的に書き換えることしかできないので、他の人に影響はありませんし、画面を再読み込みしたら元に戻ってしまいます。

まずは最もクリティカルに見える「左上の郵便番号と名前」を変更してみましょう。さっそく、前回のチュートリアルで学んだように、対応するHTMLタグを特定します。「左上の郵便番号と名前」を右クリックして「検証」を選ぶか、Chromeデベロッパーツールの左上の矢印マークから「要素選択モード」をONにして要素をクリックしましょう。

Elementsタブでテキストを編集したい要素を特定

削除の操作が直感的であったように、テキストの編集もとても直感的にできます。最初に、Elementsタブの「お届け先 〇〇さん」と書かれた場所をダブルクリックします。すると、HTMLタグの中身のテキストを直接編集できるようになります。

Elementsタブでテキスト書き換え中

さっそく、名前の部分を「アマゾン太郎」など適当な名前に変更してみましょう。編集を終えるには、別の場所をクリックしてフォーカスを外します。

Elementsタブでテキスト書き換え後

Webページの表示を見てみると、無事に名前が「アマゾン太郎」に変更されていることが確認できます。

テキスト書き換え後のページ

同じ要領で変更していくことで、次の画像にある3箇所の氏名や郵便番号を書き換えることができます。

テキスト書き換え後のページ(全体)

Webページ上の画像を別のものに差し替える

テキストの書き換えはできたので、残るは画像の差し替えです。画像についても、似たような手順で変更することができます。

「左中央にあるアカウント画像」を差し替えてみましょう。これまでやったように、対応するimgタグをElementsタブ内で特定します。

Elementsタブで画像を編集したい要素を特定

ちなみに、上記画像のようにElementsタブ内でimgタグのsrc属性に設定された画像URLにマウスカーソルをhoverすると、実際の画像をサムネイル表示してくれます。

前回のチュートリアルでは画像の削除をしましたが、ここでは画像URLを指定しているsrc属性を書き換えていきます。手ごろな画像URLが無い場合は、次のロゴ画像を使ってください。

{% c-block language="md" %}
https://uploads-ssl.webflow.com/5e8800248a0cee898e7892dc/5e89a339a6b2c10df9a6588a_non-engineers_middle.png
{% c-block-end %}

ダミー画像

テキストを変更したのと同じように、imgタグのsrc属性に設定された画像URL部分をダブルクリックします。中身を編集できるようになるので、一度中身を削除します。

Elementsタブでsrc書き換え中

その後、ダミー画像のURLをペーストし、フォーカスを外して編集を終了します。

Elementsタブでsrc書き換え後

imgタグのsrc属性を正しく変更できると、次のように実際の表示画像も切り替わります。「最近チェックした商品」の画像も差し替えれば、すべての気になるテキストと画像をダミーに変更することができました。

画像書き換え後のページ(全体)

以上で、今回のチュートリアルは終了です。Amazonのサイトに限らず、ログイン後のWebページのスクショを撮りたい場合にパーソナルな情報が含まれているケースがあります。そんなときはぜひ、直接HTMLを編集する方法でダミーデータへの差し替えに挑戦してみてください。