HTML5手習い

ドラッグ&ドロップ

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
dragoverイベント、dropイベントを使用して、ドラッグ&ドロップでユーザーが指定したファイルをブラウザに読み込む方法について学びます。また、dataTransfer.dropEffectプロパティを変更するとマウスポインタのアイコンが変化することを見ます。
講師:
09:48

字幕

このレッスンではドラッグ&ドロップによって ユーザーが指定したファイルを ブラウザの中に読み込む方法について 説明します ファイルオブジェクトを取得する為には input 要素 またはドラッグ&ドロップによって ユーザーが必ず直接 処理対象のファイルを 指定する必要がありました 今回はドラッグ&ドロップの方を 使ってやってみます それではアセットの file.html というファイルを テキストエディタと Google Chrome で開いて下さい Google Chrome で HTML を開くと このようにグレーに塗りつぶされた キャンバスエリアが表示されます こちらのキャンバスエリアに画像が ドラッグ&ドロップされた時に キャンバスに画像を描画するという プログラムを書いてみましょう ドラッグ&ドロップ関連のイベントとしては dragOver イベントと drop イベントという 2種類のイベントがあります canvas に対してそれらを設定してみましょう canvas addEventListener の dragover それから drop dragover イベントというのが ドラッグ&ドロップの ドラッグされている間の event で drop というのがボタンを放した瞬間の ドロップの event になります これらの中で まずは event オブジェクトに対して stopPropagation と preventDefault ― イベントを設定してやりましょう 両方に対して呼び出してやります これらの stopPropagetion と preventDefault をすることによって イベントの それ以上の拡散を防止し また preventDefault によって ブラウザのデフォルトの挙動を やめさせるということができます この時点で基本的な枠組みが できてますので 挙動をログを仕込んで 確認してみましょう dragover それから drop ですね それではファイルをリロードして ドラッグ&ドロップしてみます Finder から画像ファイルを キャンバスに このようにドラッグ&ドロップすると dragover イベントが発生しました キャンバスからポインタをどけると このようにイベントが止まります そしてキャンバスの上で 左ボタンを放すと drop イベントが発生しました このようにドラッグ&ドロップが 取得できていることが分かります それでは例えば drop イベントの中で stopPropagation と preventDefault を コメントアウトしてしまった場合には どうなるでしょうか 再度ドラッグ&ドロップすると このように画像が表示されてしまいました そして実際にアドレスバーを見ると URL もその画像の URL に なってしまっています これはブラウザのデフォルトの挙動が 画像がドラッグ&ドロップされた場合には その画像をブラウザで直接開くという 挙動だからです preventDefault と stopPropagation を 呼び出してやることによって 正しくドラッグ&ドロップを 処理することができます それからファイルがドラッグされている最中の アイコンを変えることができます event の dataTransfer の dropEffect これに予め定められた文字列を 指定することによって ドラッグされている最中のアイコンを 変えることができます 例えば 再度リロードして 今回 dropEffect に copy という文字列を指定してみました すると― このように 先程との違いが分かるでしょうか 先程はドラッグされている間の ポインタのアイコンが このように+はなかったのですが copy を指定したことによってこのように +記号が表示されるようになりました また copy 以外の値として 例えば move という値を指定することもできます move を指定すると このように今度は+記号がなくなりましたね そしてドラッグを放すと カーソルはこの位置に留まります また none を指定すると このようにアイコンの部分は +記号は表示されないのですが ボタンを放すと カーソルが 元の位置に戻っていきます これが none を指定した場合の効果です それから もう1種類 link link を指定すると このように矢印のアイコンが 出ているのがわかるでしょうか これが link を指定した場合の効果です それではファイルオブジェクトを取得して 画像データを描画してみましょう ファイルオブジェクトは event の dataTransfer というプロパティの files というプロパティの中に入っています それから画像を描画する位置を ドラッグ&ドロップをした 位置にしてみましょう その為にドラッグ&ドロップした位置を 取得します ドラッグ&ドロップした位置は event の offset x それから y が event の offset y これで取得できます そして画像ファイルかどうか またドラッグ&ドロップされた ファイルがあるかどうかを確認しましょう ファイルの length が 0 かどうか これでファイルが 存在しているかどうかを確認できます そして 0 番目の type 属性を見ることによって ファイルオブジェクトのタイプを 見ることができます 正規表現でマッチングをかけましょう MIME タイプが image の場合だったのみと いうマッチングをかけます そして この中に実際に処理を書きましょう FileReader オブジェクトと dom の image オブジェクトを作成しますので それらを入れる為の変数を作っておきます reader と image それらのファイルを スコープの先頭に移動しておいて reader = new FileReader これで FileReader が作成できます そして reader の readAsDataURL これにファイルオブジェクトを渡してやります そしてデータが読み込めた時の EventListener を設定 addEventListenerの― load ですね これでデータの取得ができます データを入れる為の image オブジェクトを作りましょう そして image のソースに対して target result あるいは reader の result こちらの方が短くていいですね reader の result の中に 読み込まれたデータが BASE64 形式で入っています そして context の drawImage で image オブジェクトを描画 描画する位置の基点は先程のマウスの ドラッグ&ドラッグした位置 即ち x y そして描画する大きさは 今回は例えば 100 掛ける 100 位に しておきましょう すると HTML をリロードして Finder から 猫の画像ファイルをドラッグ&ドロップ 失敗しましたね type の match メソッドのスペルミスでした match これでいい筈です 再度 HTML をリロードして 画像ファイルをドラッグ&ドロップ このように描画されました ドラッグ&ドロップした位置に 画像ファイルが描画されています このレッスンではユーザーが ドラッグ&ドロップで指定したファイルを ブラウザの中に読み込む方法について 説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。