画像検索結果を高速化！「Google Imageless Buttons」で画像表示ボタンを削除してページ表示時間を短縮

2024-04-02

Google Imageless Buttons プログラミング解説

この拡張機能の主な目的は以下の2つです。

著作権侵害のリスクを減らす: 画像検索結果から簡単に画像をダウンロードできることを懸念していたGetty Imagesなどの写真素材会社からの訴訟リスクを低減します。
ユーザー体験を向上させる: 画像表示ボタンをクリックする手間を省き、ユーザーが画像をよりスムーズに見られるようにします。

この拡張機能の仕組みは、以下の3つの要素で構成されています。

JavaScript:

画像検索結果ページのDOMを操作し、「画像を表示」ボタンを削除します。
代替手段として、画像のサムネイルをクリックすると、画像をホスティングしている元のページにユーザーをリダイレクトします。

HTML:

削除された「画像を表示」ボタンの代わりに表示するメッセージやリンクを記述します。
リダイレクト先のページのデザインやレイアウトを調整します。

CSS:

拡張機能によって追加された要素のスタイルを設定します。
ボタンやメッセージのデザイン、位置、色などを調整します。

以下は、Google Imageless Buttons拡張機能のJavaScriptコード例です。

// 画像検索結果ページのDOMを取得
const results = document.querySelector('.image-results');

// すべての「画像を表示」ボタンを取得
const viewImageButtons = results.querySelectorAll('.view-image-button');

// すべてのボタンをループ処理し、削除
for (const button of viewImageButtons) {
  button.parentNode.removeChild(button);
}

// 代替のメッセージを追加
const message = document.createElement('p');
message.textContent = '画像を表示するには、サムネイルをクリックしてください。';
results.appendChild(message);

このコードは、以下の処理を行います。

image-resultsクラスを持つ要素を取得し、画像検索結果ページのDOMを取得します。
view-image-buttonクラスを持つ要素をすべて取得し、「画像を表示」ボタンを取得します。
取得したボタンをすべてループ処理し、DOMから削除します。
画像を表示するための代替メッセージを含む要素を作成し、DOMに追加します。

HTMLとCSSコードは、このメッセージやリダイレクト先のページのデザインを調整するために使用されます。

Google Imageless Buttons拡張機能は、以下の点に注意する必要があります。

著作権侵害のリスクを完全に排除するものではありません。
画像の表示に時間がかかる場合があります。
一部のウェブサイトでは、拡張機能が正しく動作しない場合があります。

Google Imageless Buttons サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Imageless Buttons サンプル</title>
</head>
<body>
  <h1>Google Imageless Buttons サンプル</h1>
  <p>以下の画像は、「画像を表示」ボタンが削除されています。サムネイルをクリックすると、元のページに移動します。</p>
  <div class="image-results">
    <a href="https://www.example.com/image1.jpg">
      <img src="https://www.example.com/image1.jpg" alt="Image 1">
    </a>
    <a href="https://www.example.com/image2.jpg">
      <img src="https://www.example.com/image2.jpg" alt="Image 2">
    </a>
  </div>
  <script src="script.js"></script>
</body>
</html>

const results = document.querySelector('.image-results');
const viewImageButtons = results.querySelectorAll('.view-image-button');

for (const button of viewImageButtons) {
  button.parentNode.removeChild(button);
}

const message = document.createElement('p');
message.textContent = '画像を表示するには、サムネイルをクリックしてください。';
results.appendChild(message);

.image-results {
  display: flex;
  flex-wrap: wrap;
}

.image-results img {
  margin: 10px;
  width: 200px;
  height: 200px;
}

.image-results p {
  margin: 10px;
}