その場で会った“仕事じゃない”人と、SNSでつながる。

勉強会、オフ会、飲みの席。紙の名刺は出さないけど、また会いたい人がいる。 QRを見せるだけで、SNSのつながりを、いつ・どこでという文脈ごと残せる。

なふだ

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

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);
   }
  };

コメント

タイトルとURLをコピーしました