JavaScript プログラミング講座

 

クリップボードについて

 


■クリップボードについて

 
実験段階の機能です。
 
https://www.w3.org/TR/clipboard-apis/
 
ブラウザ と OS 間で、データをやり取りする事ができます。
 
ClipboardEvent と、DataTransfer クラスを使用します。
 
■ ClipboardEvent について

カット/コピー/ペースト操作時に発生するイベントです。
 
このページでは、主に ClipboardEvent について解説しています。
 
■ DataTransfer クラスについて
 
データを格納する入れ物として使用します。
 
DataTransfer については、こちらで解説しています。
 

■データフォーマットについて

 
■クリップボードに格納できるフォーマットについて
 
以下の種類があります。
 
文字列
リンク
HTML 文字列(HTML5 世代)
ファイル(HTML5 世代)
画像イメージ(HTML5.1 世代)
 
■ファイルアクセスについて
 
ユーザーが任意のファイルをペーストした場合、そのファイルへアクセスが可能になります。
 
 

 

クリップボードにデータを格納する

 
 
 


ブラウザのカット/コピー処理を実行する

 
document.execCommand() メソッドを使用します。
 
document.execCommand( aCommandName , aShowDefaultUI , aValueArgument) :Boolean
第01引数 Stringカット処理なら "cut"、コピー処理なら "copy" を指定
第02引数(略可)Booleanここでは省略
第03引数(略可)Stringここでは省略
戻り値 Boolean成功した場合 true、失敗した場合 false
 
セキュリティについて
 
このメソッドは、失敗する事があります。
 
マウスやキーボードなどの押下操作中に限って、実行する事ができます。
 
クリップボードの変化について
 
ブラウザ上で、任意の文字列を選択状態にしてから、コマンドを発行します。
 
これにより、選択した文字列が、クリップボードに書き込まれます。
 
使用例
 
クリック操作のタイミングで、クリップボードに文字列をセットする

// ------------------------------------------------------------
// クリップボードにデータを格納する関数
// ------------------------------------------------------------
function ClipboardSetData(data){
	var body = document.body;
	if(!body) return false;

	var text_area = document.createElement("textarea");
	text_area.value = data;
	body.appendChild(text_area);
	text_area.select();
	var result = document.execCommand("copy");
	body.removeChild(text_area);
	return result;
}

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function(e){

	// クリップボードにデータを格納する
	var result = ClipboardSetData( "テスト文字列です" );

	// 出力テスト
	console.log(result);

};
 
テキストエリアの内容をクリップボードにコピーする

<html>
  <body>

    <textarea id="aaa" style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea> <br>

    <input type="button" id="bbb" value="クリップボードにコピー" >

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 各エレメントを取得する
	// ------------------------------------------------------------
	var textarea = document.getElementById("aaa");
	var button   = document.getElementById("bbb");

	// ------------------------------------------------------------
	// クリックした時に実行されるイベント
	// ------------------------------------------------------------
	button.onclick = function (e){

		// テキストエリアをすべて選択
		textarea.select();

		// ブラウザのコピー処理を実行する
		var result = document.execCommand("copy");

		// 出力テスト
		console.log(result);
	};

    //-->
    </script>

  </body>
</html>
 

カット操作が発生したか監視する

 
カット操作のイベントは、以下の種類があります。
 
イベント名 解説
"cut" ClipboardEvent カット操作が行われると実行されるイベント
 
カット操作をキャンセルする
 
preventDefault() メソッドを使用します。
 
ユーザーによるカット操作を、阻止できます。
 
DataTransfer オブジェクトを取得する
 
こちらで解説しています。
 
クリップボードへの読み取りアクセスについて
 
カット操作の中身を確認する事はできません。
 
クリップボードから、データを読み取る事はできません。
 
クリップボードへの書き込みアクセスについて
 
クリップボードへ、データを書き込めます。
 
setData() メソッド等を使用します。
 
書き込む場合、デフォルトのキャンセルも必要です。
 
クリック操作から "cut" イベントを発行させる
 
document.execCommand() メソッドを使用します。
 
第01引数に、"cut" を指定します。
 
使用例
 
"cut" イベントの動作を確認する

<html>
  <body>

    <textarea style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// カット操作が行われると実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("cut" , function(e){

		// DataTransfer オブジェクトを取得する
		var data_transfer = (e.clipboardData) || (window.clipboardData);

		// 出力テスト
		console.log(data_transfer);
	});

    //-->
    </script>

  </body>
</html>
 
クリック操作のタイミングで、クリップボードに文字列をセットする

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
window.addEventListener("click" , function(e){

	// ブラウザのカット処理を実行する
	document.execCommand("cut");

});

// ------------------------------------------------------------
// カット操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("cut" , function(e){

	// デフォルトのカット処理をキャンセル
	e.preventDefault();

	// DataTransfer オブジェクトを取得する
	var data_transfer = (e.clipboardData) || (window.clipboardData);

	// 文字列データを格納する
	data_transfer.setData( "text" , "テスト文字列です" );

});
 

コピー操作が発生したか監視する

 
コピー操作のイベントは、以下の種類があります。
 
イベント名 解説
"copy" ClipboardEvent コピー操作が行われると実行されるイベント
 
コピー操作をキャンセルする
 
preventDefault() メソッドを使用します。
 
ユーザーによるコピー操作を、阻止できます。
 
DataTransfer オブジェクトを取得する
 
こちらで解説しています。
 
クリップボードへの読み取りアクセスについて
 
コピー操作の中身を確認する事はできません。
 
クリップボードから、データを読み取る事はできません。
 
クリップボードへの書き込みアクセスについて
 
クリップボードへ、データを書き込めます。
 
setData() メソッド等を使用します。
 
書き込む場合、デフォルトのキャンセルも必要です。
 
クリック操作から "copy" イベントを発行させる
 
document.execCommand() メソッドを使用します。
 
第01引数に、"copy" を指定します。
 
使用例
 
"copy" イベントの動作を確認する

<html>
  <body>

    <textarea style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// コピー操作が行われると実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("copy" , function(e){

		// DataTransfer オブジェクトを取得する
		var data_transfer = (e.clipboardData) || (window.clipboardData);

		// 出力テスト
		console.log(data_transfer);
	});

    //-->
    </script>

  </body>
</html>
 
クリック操作のタイミングで、クリップボードに文字列をセットする

// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
window.addEventListener("click" , function(e){

	// ブラウザのコピー処理を実行する
	document.execCommand("copy");

});

// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){

	// デフォルトのコピー処理をキャンセル
	e.preventDefault();

	// DataTransfer オブジェクトを取得する
	var data_transfer = (e.clipboardData) || (window.clipboardData);

	// 文字列データを格納する
	data_transfer.setData( "text" , "テスト文字列です" );

});
 
 

 

クリップボードからデータを取り出す

 
 
 


クリップボードからデータを読み取るには?

 
ユーザー操作による許可が必要です。
 
ユーザーからペースト操作が行われた瞬間に限って、読み取りアクセス可能です。
 
 

ペースト操作をユーザーに促すには?

 
■ペースト可能な要素の一例
 
<INPUT type="text"> <TEXTAREA>
 
■任意の要素を編集可能状態に変更する
 
contentEditable プロパティを使用します。
 
true を指定します。
 
DIV 要素を編集可能状態に変更する

<html>
  <body>

    <div contenteditable="true" style="width:200px; padding:20px 0px; text-align:center; background:#fcc;" >

      ここで右クリックを押して<br>
      貼り付けて下さい

    </div>

  </body>
</html>
 

ペースト操作が発生したか監視する

 
ペースト操作のイベントは、以下の種類があります。
 
イベント名 解説
"paste" ClipboardEvent ペースト操作が行われると実行されるイベント
 
ペースト操作をキャンセルする
 
preventDefault() メソッドを使用します。
 
ユーザーによるペースト操作を、阻止できます。
 
DataTransfer オブジェクトを取得する
 
こちらで解説しています。
 
クリップボードへの書き込みアクセスについて
 
クリップボードへ、データを書き込む事はできません。
 
ペースト操作の直前に、データを改変する事はできません。
 
クリップボードへの読み取りアクセスについて
 
クリップボードから、データを読み取れます。
 
getData() メソッド等を使用します。
 
使用例
 
"paste" イベントの動作を確認する

<html>
  <body>

    <div contenteditable="true" style="width:200px; padding:20px 0px; text-align:center; background:#fcc;" >
      ここで右クリックを押して<br>
      貼り付けて下さい
    </div>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// ペースト操作が行われると実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("paste" , function(e){

		// ------------------------------------------------------------
		// デフォルトのペースト処理をキャンセル
		// ------------------------------------------------------------
		e.preventDefault();

		// ------------------------------------------------------------
		// DataTransfer オブジェクトを取得する
		// ------------------------------------------------------------
		var data_transfer = (e.clipboardData) || (window.clipboardData);

		// ------------------------------------------------------------
		// テキストデータを取得する
		// ------------------------------------------------------------
		var str = data_transfer.getData("text");

		// 出力テスト
		console.log(str);
	});

    //-->
    </script>

  </body>
</html>
 
 

 

ClipboardEvent について

 
 


■ ClipboardEvent インターフェースについて

 
クリップボードに関するイベント情報が格納されます。
 
■ ClipboardEvent インターフェースの派生について
 
Event
↓派生
ClipboardEvent
 

■ ClipboardEvent インターフェースのプロパティについて

 
以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
clipboardDataDataTransferDataTransfer オブジェクトが得られる。
 

■ DataTransfer オブジェクトを取得する

 
clipboardData プロパティを使用します。
 
■ Internet Explorer 11 以前の場合
 
Window オブジェクトが保有しています。
 
window.clipboardData プロパティから取得します。
 
ClipboardEvent は実装されておらず、得られるのは DragEvent オブジェクトです。
 
この場合 dataTransfer プロパティは、null です。
 
■取得例
 
ClipboardEvent から、DataTransfer オブジェクトを取得する

// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){

	// DataTransfer オブジェクトを取得する
	var data_transfer = (e.clipboardData) || (window.clipboardData);

	// 出力テスト
	console.log(data_transfer);

});