スポンサーリンク

今から３分で，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を使いたい時には，基礎を踏まえて自分で実装することができる。

↑目次へ戻る

参考資料

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


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

ドラッグ＆ドロップ−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

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


ドラッグ＆ドロップしよう！(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＞



関連する記事：

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


今から１分で，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


language_and_engineering 読者になる

広告を非表示にする
スポンサーリンク
スポンサーリンク