JavaScriptクリップボード活用！驚くべき10の方法

はじめに
JavaScriptとクリップボードとは
JavaScriptでクリップボードを操作する方法
クリップボードの応用例
注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptを使ってクリップボードを操作する方法が分かるようになります。

クリップボードを活用した10のサンプルコードと応用例を紹介します。

さらに、使い方や注意点、カスタマイズ方法も詳しく解説します。

これからJavaScriptでクリップボードを使ってみたい初心者の方にもわかりやすく、興味深い内容となっています。

JavaScriptとクリップボードとは

JavaScriptは、ウェブページに動的な要素を追加するために使用されるプログラミング言語です。

クリップボードは、コンピュータ上でテキストや画像などのデータを一時的に保存して、コピーとペーストを行うための仕組みです。

この記事では、JavaScriptを使ってクリップボードを操作する方法を初心者向けに解説します。

JavaScriptでクリップボードを操作する方法

○サンプルコード1：テキストのコピー

下記のコードは、テキストボックスの内容をクリップボードにコピーする例です。

document.querySelector("#copyButton").addEventListener("click", () => {
  const textBox = document.querySelector("#textBox");
  textBox.select();
  document.execCommand("copy");
});

このコードでは、IDがcopyButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、IDがtextBoxの要素を選択し、document.execCommand("copy")でクリップボードにコピーされます。

○サンプルコード2：テキストのペースト

下記のコードは、クリップボードのテキストをテキストボックスにペーストする例です。

document.querySelector("#pasteButton").addEventListener("click", async () => {
  const textBox = document.querySelector("#textBox");
  const clipboardText = await navigator.clipboard.readText();
  textBox.value = clipboardText;
});

このコードでは、IDがpasteButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、navigator.clipboard.readText()でクリップボードからテキストを読み込み、IDがtextBoxの要素にペーストされます。

○サンプルコード3：画像のコピー

下記のコードは、画像をクリップボードにコピーする例です。

document.querySelector("#copyImageButton").addEventListener("click", async () => {
  const img = document.querySelector("#image");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL("image/png");
  const blob = await (await fetch(dataURL)).blob();
  const clipboardItem = new ClipboardItem({ "image/png": blob });
  await navigator.clipboard.write([clipboardItem]);
});

このコードでは、IDがcopyImageButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、IDがimageの画像要素をキャンバスに描画し、DataURLを取得してBlobに変換します。

その後、ClipboardItemオブジェクトを作成し、navigator.clipboard.write()でクリップボードにコピーされます。

○サンプルコード4：画像のペースト

下記のコードは、クリップボードから画像をペーストする例です。

document.querySelector("#pasteImageButton").addEventListener("click", async () => {
  const items = await navigator.clipboard.read();
  const img = document.querySelector("#image");
  for (const item of items) {
    if (item.types.includes("image/png")) {
      const blob = await item.getType("image/png");
      const url = URL.createObjectURL(blob);
      img.src = url;
      break;
    }
  }
});

このコードでは、IDがpasteImageButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、navigator.clipboard.read()でクリップボードからデータを読み込みます。

画像データが含まれている場合、Blobを取得し、画像要素のsrcに設定してペーストします。

クリップボードの応用例

○サンプルコード5：テキスト整形

下記のコードは、クリップボードのテキストを整形してペーストする例です。

document.querySelector("#formatButton").addEventListener("click", async () => {
  const textBox = document.querySelector("#textBox");
  const clipboardText = await navigator.clipboard.readText();
  const formattedText = clipboardText.replace(/\s+/g, " ").trim();
  textBox.value = formattedText;
});

このコードでは、IDがformatButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、クリップボードのテキストを読み込み、空白文字を1つにまとめてからペーストします。

○サンプルコード6：翻訳アプリ

下記のコードは、クリップボードのテキストを翻訳してペーストする例です。

Google Translate APIを利用しています。

async function translate(text, sourceLang, targetLang) {
  const apiKey = "YOUR_API_KEY";
  const url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
  const body = new URLSearchParams({
    q: text,
    source: sourceLang,
    target: targetLang,
  });

  const response = await fetch(url, {
    method: "POST",
    body: body,
  });
  const data = await response.json();
  return data.data.translations[0].translatedText;
}

document.querySelector("#translateButton").addEventListener("click", async () => {
  const textBox = document.querySelector("#textBox");
  const clipboardText = await navigator.clipboard.readText();
  const translatedText = await translate(clipboardText, "en", "ja");
  textBox.value = translatedText;
});

このコードでは、IDがtranslateButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、クリップボードのテキストを読み込み、translate関数で翻訳してからペーストします。

○サンプルコード7：画像加工アプリ

下記のコードは、クリップボードから画像を読み込み、加工してペーストする例です。

async function applyFilter(img, filter) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.filter = filter;
  ctx.drawImage(img, 0, 0);
  const dataURL = canvas.toDataURL("image/png");
  const blob = await (await fetch(dataURL)).blob();
  return blob;
}

document.querySelector("#applyFilterButton").addEventListener("click", async () => {
  const items = await navigator.clipboard.read();
  const img = document.querySelector("#image");
  for (const item of items) {
    if (item.types.includes("image/png")) {
      const blob = await item.getType("image/png");
      const url = URL.createObjectURL(blob);
      const originalImg = new Image();
      originalImg.src = url;
      originalImg.onload = async () => {
        const filteredBlob = await applyFilter(originalImg, "grayscale(100%)");
        const filteredUrl = URL.createObjectURL(filteredBlob);
        img.src = filteredUrl;
      };
      break;
    }
  }
});

このコードでは、IDがapplyFilterButtonの要素にクリックイベントリスナーを追加しています。

クリックされると、クリップボードから画像データを読み込み、applyFilter関数でグレースケールに加工してからペーストします。