スポンサーリンク

今から3分で,HTML5のドラッグ&ドロップAPIと File APIを習得しよう(JSの実装サンプル付き)


今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。

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

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

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


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


(0:00〜前半の1分半)画面内でのドラッグ・ドロップ

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

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

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

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


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

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

などを実装できる。


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

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

この2要素・4項目があればよい。


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

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


<h3>HTML5のドラッグドロップのサンプル1</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>

これだけ。

関数(イベント)が3つと,draggable="true" の属性指定でOK。


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

(後半の1:30〜3:00)画面外からのドラッグ・ドロップ

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

動作例はこちら。

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

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

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

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


このコードも,2つの要素からなる。

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

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

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


<h3>HTML5のドラッグドロップのサンプル2</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で「実際にドロップした時の処理」

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


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

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

など。

利用例としては,

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

これが File API である。


ここまでで3分。

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

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

参考資料

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


ドラッグ・ドロップの基礎:

ドラッグ&ドロップ−HTML5のAPI、および、関連仕様
http://www.htmq.com/dnd/

  • ドラッグ&ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすい
  • ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと
  • ドロップ操作はその動かしたデータをドロップ先の要素内に配置すること


Drag and Drop - Drag and Dropのサンプル - HTML5 JavaScript API入門
http://javascript-api.sophia-it.com/r...

  • ブラウザ外とのデータのやり取りも可能で、ドラッグされたローカルファイルの中身をFile APIを使って参照することもできます。


ドラッグ&ドロップしよう!(1/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377001

  • ドラッグするだけなら属性1つ


ドラッグ&ドロップしよう!(2/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

  • ドロップ可能にする


ドラッグ&ドロップしよう!(3/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

  • ドラッグを受け付ける


ドラッグ&ドロップしよう!(4/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

  • ドラッグ&ドロップでデータを受け渡す処理


ドラッグ&ドロップしよう!(5/5):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=377...

  • ドラッグ&ドロップでファイルを読み込む

ドラッグ・ドロップの詳細:

詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (7) ドラッグ&ドロップAPI | マイナビニュース
http://news.mynavi.jp/special/2009/ht...

  • 「draggable="true"」という属性値をセットする。これにより、対象の要素がドラッグ可能となる
    • ちなみに、img要素やa要素(hrefの指定が必要)はデフォルトでドラッグ可能
  • ドロップを受け付ける要素に対しては、dragoverイベント内で「イベントオブジェクト.preventDefault()」を呼び出す必要がある。
    • dragoverイベントのデフォルト動作が「ドロップ拒否」になっているため。このデフォルト動作を停止しないと、ドロップを受け付けることができない。


JavaScriptプログラミング講座【ドラッグアンドドロップについて】
http://hakuhin.jp/js/drag_drop.html

  • デフォルトのドロップについて。エレメントの種類によっては、マウスでドロップ操作を行うと、デフォルトで受け取りが発生。例えば、INPUT 要素にドラッグした場合、文字列の受け取りが発生


javascript - html5 drag/drop e.stopPropagation(); - Stack Overflow
http://stackoverflow.com/questions/20...

  • ondrop
    • e.stopPropagation(); // Stops parent elements from receiving event.
    • e.preventDefault(); // Stops some browsers from redirecting.

ドラッグ・ドロップAPIの使い道について。

「外部ファイルの読み込み」は,Gmailのようなメーラーの添付ファイル作成処理で役立つ。

これをHTAなどに組み込み,WSHのFileSystemObjectと合わせて活用してもよい。

ネイティブ HTML5 ドラッグ&ドロップ - HTML5 Rocks
http://www.html5rocks.com/ja/tutorial...

  • DnD を利用する多くのアプリケーションは、DnD を使用しないと操作性がよくありません。
  • たとえば、チェス ゲームの駒


Gmail、ドラッグ&ドロップでファイル添付可能に -INTERNET Watch
http://internet.watch.impress.co.jp/d...

  • ファイルを選択し、Gmailのブラウザーウィンドウの上にドラッグしてくると、件名を入力するフィールド付近に「ここにファイルをドロップ」という大きなメッセージが表示される。-そこにファイルをドロップすることで添付できる。


HTML5&CSS&JSでWindows 7やVista向けのアプリを作る方法 » blueskisのブログ
http://blueskis.wktk.so/blog/2012/09/...

  • HTML5とCSS3でWindowsアプリを開発する方法(9x系~8まで対応)
  • このHTML5&CSS3&JavaScriptで開発できる技術はHTA
  • HTML5やCSS3、JSでモバイルアプリ開発やソフト開発が主流になってきている現代、HTAが注目されてもいいはず

よくある,リストをソートするUIは,Drag Drop APIだけでは実現できない。

外部ライブラリを使う。

また,onmouseoverなどの古いAPIのほうが便利な場合もあり,新しいAPIを悪く言う場合もある。

HTML5ドラッグ&ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」 | Chrome Life
http://www.chrome-life.com/html5/5528/

  • HTML5ドラッグ&ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」は、ネイティブHTML5のドラッグ&ドロップAPIを使用して構築されているので超軽量です。


本の虫: QuirksBlog: HTML5のドラッグ&ドロップはNG
http://cpplover.blogspot.jp/2009/09/q...

  • Web開発者は、HTML5のドラッグ&ドロップを使うな。絶対使うな。RFC2119で規定されているMUST NOTの意味で使うな。使いたきゃ、従来通りのスクリプトで実装しろ。


File APIについて:

連載:人気順に説明する初めてのHTML5開発:JavaScriptでファイル操作!? File APIを使いこなそう (1/2) - @IT
http://www.atmarkit.co.jp/ait/article...

  • "ファイル名 :" + f.name + "ファイルの型:" + f.type + "ファイルサイズ:" + f.size / 1000 + " KB "


HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB
http://tokidoki-web.com/2013/08/file-...

  • '最終更新日時:' + fileVal.lastModifiedDate


File APIによるファイルアクセス(2/4):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=384...

  • 最終修正日はmodifyではなく、lastModifiedDateになっていたりします。


» HTML5 の File API でドラッグ&ドロップする TECHSCORE BLOG
http://www.techscore.com/blog/2012/11...

  • fileReader.onload: event.target.result に読み込んだファイルの内容が入っています.
  • ドラッグ&ドロップでファイルアップロードする場合は result の内容を Ajax でサーバに送信しましょう!


y.okano blog: HTML5 ドラッグ&ドロップでファイルをアップロード
http://yokano-jp.blogspot.jp/2013/07/...

  • イベントオブジェクトの dataTransfer からファイルを取得する FormData を作成してファイルを追加する Ajax でファイルを送信する


ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」 | DesignDevelop
http://design-develop.net/web-design/...

  • ファイルをローカルから選択してアップロードするというのは直感的ではなく、リテラシーが低い層には障壁にもなりえます
  • ファイルのアップロードを簡単にしてくれる、ドラッグ&ドロップでイメージファイルをアップロードできる「HTML5 File Upload」というライブラリ

IE8ではHTML5が全く動かないし,Windows XPではIEのバージョンが8までしかインストールできない件について:

HTML5やCSS3にIE8以前の古いブラウザを対応させる方法 : 初心者によるブログの勉強のためのブログ
http://blog.livedoor.jp/kamikaze_cycl...

  • IE 8は、まったくHTML5のタグには対応しておらず、IE 8やそれより前のバージョンでは、HTML5やCSS3を利用する上では問題となります。
  • 特に、Windows XPは2014年の4月にサポートが切れますが、XPではIEは8までしか使用できません。


CSS3・HTML5の主要ブラウザ対応状況一覧 | HTML5 – CSS3 mag
http://html5-css3.jp/useful/css3-html...

なお,サンプル中のHTML5では,htmlタグやbodyタグを省略した。

html5:省略できる要素: まじめにWeb制作
http://artmo.cocolog-nifty.com/blog/2...

  • <!DOCTYPE html> <meta charset="utf-8"> <title>グラデーション</title>



関連する記事:

今から3分で,Smartyの使い方を覚えよう (PHPテンプレートエンジンの入門)
http://language-and-engineering.hatenablog.jp/entry/20130107/SmartyPHPTemplat...


今から1分で,viコマンドの使い方を覚えてもらうためのページ
http://language-and-engineering.hatenablog.jp/entry/20121207/p1


なんとなくCSSを使っている人が,CSS中級者になるために (「崩れないレイアウト」のセオリー)
http://language-and-engineering.hatenablog.jp/entry/20110216/p1


マウスでソートできるリストを作るためのJavaScriptライブラリ(行追加・削除・固定行の設定が可能)
http://language-and-engineering.hatenablog.jp/entry/20090902/p1