クリップボードAPIを使ってみました
2020-09-09
clipboard

概要

次のようにAmazonのアフィリエイト・リンクのコードをAmazonのページからクリップボード経由でコピー&ペーストし、それらを合成した結果をクリップボードに格納する小さなWebアプリケーションを作成しました。

操作デモ

これをおこなうためのコードの断片を紹介します。全体はGitHubにあります。

クリップボードからのコピー

  const handlePasteFromClipboard = async () => {
    try {
      const text = await navigator.clipboard.readText();
      setLink(text);
    } catch (err) {
      alert('Failed to read clipboard contents: ', err);
    }
  };

クリップボードへのコピー

  const handleCopyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(code);
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
  };