2. Webページに表示された個人情報をダミーに変更してからスクショを撮る
Updated
2021/6/20 5:28
Author
Jumpei Ikegami前回のチュートリアルでは、Webページに表示された要素の削除をしてみました。しかし、名前などの個人情報が表示されているケースでは、要素をただ消すのではなくダミーデータで内容を差し替えたいというケースもありそうです。今回は、個人に紐付く情報がたっぷり掲載されているAmazonのトップページについて、Chromeデベロッパーツールを使った要素の書き換えを試してみましょう。
前提知識
このチュートリアルは次のチュートリアルの続きとなっています。
作るもの
次の画像にあるような、スクショを撮るときに隠したくなるパーソナルな情報を、一時的にダミーデータに差し替えてみます。
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が無い場合は、次のロゴ画像を使ってください。
Plain Text
ダミー画像
テキストを変更したのと同じように、imgタグのsrc属性に設定された画像URL部分をダブルクリックします。中身を編集できるようになるので、一度中身を削除します。
Elementsタブでsrc書き換え中
その後、ダミー画像のURLをペーストし、フォーカスを外して編集を終了します。
Elementsタブでsrc書き換え後
imgタグのsrc属性を正しく変更できると、次のように実際の表示画像も切り替わります。「最近チェックした商品」の画像も差し替えれば、すべての気になるテキストと画像をダミーに変更することができました。
画像書き換え後のページ（全体）
以上で、今回のチュートリアルは終了です。Amazonのサイトに限らず、ログイン後のWebページのスクショを撮りたい場合にパーソナルな情報が含まれているケースがあります。そんなときはぜひ、直接HTMLを編集する方法でダミーデータへの差し替えに挑戦してみてください。