Webクリップボードとさまざまな種類のデータ保存方式

Webクリップボードとデータ保存方式

• WebクリップボードAPIの使用

  • Webサイトでコピーした内容を Google Docs に貼り付けると書式は維持されるが、VS Code に貼り付けるとテキストだけが貼り付けられる
  • クリップボードは MIME タイプに関連付けられた複数の表現で情報を保存する
  • W3C のクリップボード仕様では text/plain、text/html、image/png の3つのデータ型をサポートする必要がある

• 非同期クリップボードAPIの使用

  • 特定の表現を読み取る方法:

    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes("text/html")) {
        const blob = await item.getType("text/html");
        const html = await blob.text();
        // HTML処理...
      }
    }
    

  • 複数の表現をクリップボードに書き込む方法:

    const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
    const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
    const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
    await navigator.clipboard.write([clipboardItem]);
    

• ほかのデータ型

  • JSON データをクリップボードに書き込もうとするとエラーが発生:

    const json = JSON.stringify({ message: "Hello" });
    const blob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([clipboardItem]);
    

  • application/json 型はサポートされていない

• isTrusted プロパティ

  • isTrusted プロパティは、イベントがユーザーエージェントによってディスパッチされたかどうかを示す
  • 信頼できるイベントでのみクリップボードにデータを書き込める

• クリップボードイベントAPI

  • copy、cut、paste イベントで clipboardData プロパティを使ってデータの読み書きが可能
  • JSON データをクリップボードに書き込む方法:

    document.addEventListener("copy", (e) => {
      e.preventDefault();
      const json = JSON.stringify({ message: "Hello" });
      e.clipboardData.setData("application/json", json);
    });
    

• clipboardData の歴史

  • 非同期クリップボードAPIは 2017 年に追加されたが、clipboardData はそれよりはるかに古い機能
  • clipboardData は 1997 年の Internet Explorer 4 で初めて導入された

• 信頼できないスクリプト

  • 信頼できないスクリプトは、制限されたデータ型しかクリップボードに書き込めない
  • 信頼できないイベントでクリップボードにデータを書き込もうとすると失敗する

• コピーボタンを作る

  • Google Docs のような Web アプリケーションは document.execCommand("copy") を使って信頼できるコピーイベントをトリガーする
  • この方法を使えば、クリックイベントでも任意のデータ型をクリップボードに書き込める

• 貼り付けボタンを作る

  • execCommand("paste") はブラウザと OS によって異なる動作をする
  • Safari はユーザーの確認を要求するが、Chrome と Edge は Windows でのみサポートする

• Figma のコピー＆ペースト

  • Figma は HTML 表現を使ってクリップボードにデータを保存する
  • HTML 表現に base64 でエンコードしたデータを含めてクリップボードに保存する

• Webカスタムフォーマット（Pickling）

  • 2022 年から Chromium ベースのブラウザでサポート
  • Web アプリケーションが非同期クリップボードAPIを通じてカスタムデータ型を書き込めるようにする
  • 例:

    const json = JSON.stringify({ message: "Hello, world" });
    const jsonBlob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
    navigator.clipboard.write([clipboardItem]);
    

GN⁺のまとめ

• この記事は Web クリップボードAPIとデータ保存方式を探る
• 非同期クリップボードAPIとクリップボードイベントAPIの違いを説明する
• Google Docs と Figma のコピー／貼り付け実装方式を分析する
• Webカスタムフォーマット（Pickling）の提案を紹介する
• Web 開発者にとって有用な情報であり、クリップボードAPIの限界を理解する助けになる