ブラウザアプリでクリップボードへデータを格納する方法

ここでは、ブラウザアプリでクリップボードに格納できるデータの種別や格納方法について説明しています。テキスト、画像、HTMLなどのデータを格納する方法や、複数のデータ種別を同時に格納する例を紹介しています。

クリップボードは、テキストや画像などのデータを一時的に格納することができます。
データを格納するためには、データの種別を示すためのMIMEタイプを指定する必要があります。
この記事では、ブラウザアプリでクリップボードに格納できるデータの種別やデータの格納方法について紹介します。
格納したデータを幅広く利用するために複数のデータ種別を格納する例も紹介します。

ブラウザアプリでクリップボードに格納できるデータの種別

ブラウザアプリでクリップボードに格納できるデータの種別は、ブラウザやブラウザのバージョンによって異なる可能性がありますが、多くのブラウザで共通してサポートされているデータの種別は、以下のようなものがあります。

データ種別ごとのデータ格納方法

上記データ種別から、テキストや画像をブラウザアプリでクリップボードへ格納する方法をサンプルコードを例に紹介します。

ブラウザアプリでクリップボードにデータを格納するAPI

ブラウザが提供するクリップボードAPIの一部である「navigator.clipboard」プロパティを使用してクリップボードへデータを格納することができます。
データ種別が「テキスト」のみ：writeText関数で文字列データを格納します。
データ種別が「テキスト」以外：ClipboardItem型で格納するデータを生成して、write関数でデータを格納します。

テキスト：text/plain
改行やスペースなども含む基本的な文字列データのみを格納する方法です。

async function copyText(text:string):Promise<void>{
    await navigator.clipboard.writeText(text);
}

画像：image/png
MIMEタイプを変更することで他の画像データも保存できます。

async function copyImage(filePath: string): Promise<void> {
    const imageData = new ClipboardItem({
        'image/png': await fetch(filePath).then(async data => await data.blob())
    });
    await navigator.clipboard.write([imageData]);
}

HTML：text/html
HTMLタグでデータを構成することで文字列と画像を一つのデータとして格納することができます。

async function copyHtml(text:string, filePath:string):Promise<void>{
    const imgBlob = await fetch(filePath).then(async data => await data.blob());
    const textData = new ClipboardItem({
        'text/html': new Blob(['<div><p>' + text + '</p><img src=' + imgBlob + 'height=115 width=160/></div>'], { type: 'text/html' })
    });
    await navigator.clipboard.write([textData]);
}

複数のデータ種別をクリップボードへ格納する

また、クリップボードには複数のデータ種別を格納することができます。
クリップボードに格納したデータの利用は、貼り付け先のアプリケーションによりますが、複数のデータ種別を格納することで、貼り付け先のアプリケーションが利用しやすいデータを利用できるようになります。

例えば、ExcelではHTMLが格納されているとHTMLが貼り付けられますが、テキストも格納することで、Excelの「形式を選択して貼り付け」からテキストも選択できるようになります。

以下は、[テキスト（ text/plain ）]と、"テキストと画像"を含んだ[HTML（ text/html ）]を格納した例です。

async function multiData(text: string, htmlText:string, filePath:string): Promise<void> {
    const imgBlob = await fetch(filePath).then(async data => await data.blob());
    const textData = new ClipboardItem({
        'text/plain': new Blob([text], { type: 'text/plain' }),
        'text/html': new Blob(['<div><p>' + htmlText + '</p><img src=' + imgBlob + 'height=112 width=160/></div>'], { type: 'text/html' })
    });
    await navigator.clipboard.write([textData]);
}