スポンサーリンク

今から３分で，HTML5のドラッグ＆ドロップAPIと File APIを習得しよう（JSの実装サンプル付き）

html5 javascript n分


今から３分で，HTML5の JavaScript API の使い方を２つ覚えよう。

  • １：ドラッグ＆ドロップAPI
    • 画面上の要素を。
    • 画面外から。
  • ２：File API
    • 読み込み。
    • 書き込み　※これは覚える必要はない。

シンプルなサンプルコード付きで，これらの実装の方法を素早く学習する。

※サンプルは，IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。


では，ここから３分の時間のカウントを開始。集中して読もう。


（0：00〜前半の１分半）画面内でのドラッグ・ドロップ

まず，動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。

動作サンプル１
http://name-of-this-site.org/coding/h...

上部にある３要素を，下部にドラッグ・ドロップできる。

実行時には，マウスでつかんだ要素の情報がアラートで表示される。


「どんな要素を，どこにドロップしたか？」が分かるので

  • フルーツ・バスケット
  • 商品のショッピングカート
  • ゲームの駒の移動

などを実装できる。


コードとしては，以下の要素があれば実現できる。

  • （１）ドラッグできる要素。
    • draggable="true" の属性を指定。
    • ondragstartイベントで，ドラッグするデータの保管。
  • （２）ドロップできる要素。
    • ondragoverイベントで，ドロップの許可。
    • ondropイベントで，ドロップ時のデータ取り出し。

この２要素・４項目があればよい。


上記の要点を踏まえつつ，具体的なコードをちらっと眺めてみよう。ここは真剣に読まず，ちらっとでよい。コメントに注目しよう。

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル１</title>
<style>
div {
  border : solid 1px black;
  margin : 10px;
  padding : 10px;
  background-color : yellow;
}
</style>


<h3>HTML5のドラッグドロップのサンプル１</h3>


<!-- ドラッグできる要素 -->
<div draggable="true" ondragstart="f1(event)">リンゴ</div>
<div draggable="true" ondragstart="f1(event)">バナナ</div>
<div draggable="true" ondragstart="f1(event)">みかん</div>

↓

<!-- ドロップできる要素 -->
<div
  ondragover="f2(event);"
  ondrop="f3(event)">
  フルーツバスケット<br>
  （果物をドロップできます）
</div>


<script>

// ドラッグ開始時のイベント
function f1( event )
{
	// ドラッグ要素の中身の文字列を取得
	var s = event.target.innerHTML;
	
	// ドラッグイベントに文字列を格納
	event.dataTransfer.setData("text/plain", s);
}


// ドロップ受け付け判定
function f2( event )
{
	// ドロップを受け付ける
	// （イベントのデフォルト動作であるドロップの拒否を行なわない）
	event.preventDefault();
	
	// これが無いとドロップ不可能になる。
}


// ドロップ処理
function f3(event)
{
	// ページの遷移を防止
	//（これがないとドラッグ内容の文字列へブラウザが遷移する）
	event.preventDefault();

	// イベントに格納された文字列データを取り出し
	var s = event.dataTransfer.getData("text/plain");
	
	// 表示
	alert(s);
}

</script>

これだけ。

関数（イベント）が３つと，draggable="true" の属性指定でOK。


画面内でのドラッグ・ドロップ APIの利用は以上。

↑目次へ戻る

（後半の1：30〜3：00）画面外からのドラッグ・ドロップ

ブラウザの外からドラッグ・ドロップされたファイルを，File APIで読み取る。

動作例はこちら。

動作サンプル２
http://name-of-this-site.org/coding/h...

ためしに小さなファイルをドロップしてみよう。

何でもいい。ショートカットをドロップしてもOK。

ドロップしたファイルの情報が，アラートで表示される。


このコードも，２つの要素からなる。

  • （１）ドロップする要素。
  • （２）ドロップ時のイベント。
    • ドロップしたファイルを FileReader というオブジェクトで読み取り。

具体的なコードは下記。チラッとだけ見てみよう。

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル２</title>
<style>
div {
  border : solid 1px black;
  padding : 10px;
  background-color : yellow;
}
</style>


<h3>HTML5のドラッグドロップのサンプル２</h3>


<div
  ondragover="f1(event);"
  ondrop="f2(event)">
  ここにファイルをドロップしてね
</div>


<script>

// ドロップ受け付け判定
function f1( event )
{
	// ドロップを受け付ける
	event.preventDefault();
}


// ドロップ処理
function f2(event)
{
	// ページの遷移を防止
	//（これがないとドラッグ内容の文字列へブラウザが遷移する）
	event.preventDefault();

	// イベントに格納されたファイルを取り出し
	var f = event.dataTransfer.files[0];
	
	// ファイル情報を表示
	alert(
		"ファイル名：" + f.name 
		+ "\nファイルの型：" + f.type 
		+ "\nファイルサイズ：" + f.size / 1000 + " KB "
		+ "\n最終更新日時：" + f.lastModifiedDate
	);
	
	// ファイル内容の読み取り
	var reader = new FileReader(); // ファイルを読み取るオブジェクト
	reader.onloadend = function(){
		alert("ファイルの内容：" + reader.result);
	};
	reader.readAsDataURL( f );
}

</script>
  • ondragoverで「ドロップの受け付け許可」
  • ondropで「実際にドロップした時の処理」

という２つのイベントがあることを覚えておこう。


File APIでファイル情報を読み取れるのは

  • ファイルを要素にドロップした時
  • ファイル選択ダイアログでファイルを選んだ時

など。

利用例としては，

  • 読み取った情報をすぐにAjaxでサーバ送信すれば，ドロップするだけの使いやすいアップローダができる。
  • あるいは，読み取った情報をすぐに画面表示すれば，アップ用のサムネイル表示や，確認フォームが実現できる。

これが File API である。


ここまでで３分。

HTML5の Drag & Drop API と，File API の使い方を覚えた。

今後，これらのAPIを使いたい時には，基礎を踏まえて自分で実装することができる。

↑目次へ戻る

参考資料

さらに詳しく知るためのページ。

続きを読む