読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

パーフェクトJavaScript勉強メモ(15)

前へ | 次へ

15章 デスクトップ連携

Drag Drop API

Drag Drop APIとは
  • p358 DataTransferは、ドラッグ操作でブラウザとデスクトップ上のファイルのやりとりができる
インターフェース
  • ドラッグイベント
    • ドラッグ要素とドロップ領域それぞれに必要なイベントハンドラを実装することで操作できるようになる
    • ドラッグ要素に対して設定できるイベントハンドラ
      • dragstart / drag / dragend
    • ドロップ領域に対して設定できるイベントハンドラ
      • dragenter / dragover / dragleave / drop
    • これらのイベントはマウスイベントのインターフェースを継承しているため、ドラッグ中の位置を確認できる
    • DataTransferでデータの受け渡しやUIの表示更新を実装する
    • Drag Drop APIのデフォルトの挙動で、ドラッグ要素にキャプチャ画像がマウスに合わせて移動し、ドラッグ操作中のページスクロール処理もやるので、そのまま利用しても十分機能する
  • DataTransfer
    • p359 全てのドラッグイベントのイベントオブジェクトには、dataTransferプロパティが付加されている
    • データの受け渡し、データの処理方法の指定、ドラッグイメージの設定を行う
    • インターフェース一覧
基本的なドラッグ&ドロップ
  • ドラッグ要素の設定
    • p360 ドラッグ可能にするには、その要素のdraggable属性をtrueにする
    • true,false,autoを設定できる。autoはデフォルト値で、imgやaはtrue
  • ドラッグ側の設定では、setDataでMIME Typeとデータを設定する。複数のデータを設定可能
  • p361 ドロップ側の設定では、event.preventDefault()でブラウザのデフォルト挙動をキャンセルした上で、getDataで指定のMIME Typeの要素を取り出す
表示のカスタマイズ
  • p362 ドラッグイメージの変更方法
  • p363 CSSを利用したドラッグイメージのカスタマイズは、書籍の時代は、-webkit-dragでのみ可能
  • ドロップ領域の強調表示は、dragover中の要素の背景色を変えるなど
    • エフェクトの追加はdragenterイベント内
    • p364 ドロップの位置やタイミングによってアクションが変わる場合はdragoverイベントでアクションを説明する
    • エフェクトの削除はdragleaveイベントとdropイベント
ファイルのDrag-In / Drag-Out
  • デスクトップのファイルを取得する
    • dataTransferのfilesプロパティを利用
    • p365 files.lengthが0の時はファイルはドロップされていない
    • filesにはFileオブジェクトが配列で入っている
  • ファイルをデスクトップに保存する
    • 書籍の時点ではGoogle Chromeのみ対応
    • event.dataTransfer.setData('DownloadURL','MIMETYPE:ファイル名:ファイルURL') で保存

DataTransferItemList

  • p366 書籍の時点では、itemsによるデータの受け渡しが推奨されているが、ブラウザの実装が追いついていなかった

File API

File APIとは
  • p367 JavaScriptからローカルにあるファイルを読み込むためのAPI
  • ファイルの書き込み(File API:Writer)とディレクトリ構造の管理(File API:Directories and System)が書籍の時点で仕様の策定中
Fileオブジェクト
  • ファイルの選択
    • ユーザに、ドラッグ&ドロップかファイル選択ダイアログを使って、ファイルを明示的に選択してもらう
    • p368 inputタグのfileタイプを使うことでファイル選択ダイアログを表示
    • acceptにMIME Typeをコンマ区切りで書くと表示するファイルのみ表示できる
    • ファイルを選択するとonchangeイベントハンドラが実行され、選択したファイルのFileオブジェクトが取得できる
    • inputのvalueによるファイル名はブラウザ次第になるので、Fileオブジェクトのnameプロパティを参照することを推奨
FileReader
  • p369 ファイルを読み込むためのインターフェース
  • p370 テキストファイルの読み込み例
  • p371 読み込み中の表示例。progressbarによる
  • p372 ファイルの一部読み込みにはslice()メソッドを利用する(補足:2015年2月11日現在、ブラウザの対応状況が微妙)
data URL
  • p373 dataURLとは、readAsDataURLメソッドに関連して、data:スキームで始まるURLのこと
  • データをURLに全て埋め込んだ形式
  • 通常のURLと同様に使えるため、細かい画像を埋め込んでおくなどすることで、サーバへのアクセスを減らせる
  • dataURLの生成
  • readAsDataURLメソッド
    • p374 FileReaderのメソッド。data URL形式で読み込む
    • p375 readAsDataURLで読み込んだバイナリデータは文字列なので、localStorageなどにそのまま保存可能
FileReaderSync
  • 読み込むまでブロックする
  • WebWorkersの環境下でのみ有効
  • エラーは、try-catchを使うか、WebWorkerの生成元でonerrorイベントで処理
  • イメージのdraggableをfalseにして、動かせないようにする
  • データを受け取れるタイミング以外でファイルがドロップされた際に、ページ以降が発生しないようにevent.preventEvent()でブラウザ処理をキャンセル

前へ | 次へ