前回は、History API や ApplicationCacheを利用したWebアプリケーション開発についてまとめた。ここでは、Drag Drop API や File APIといったデスクトップ連携について解説する。
１ Drag Drop API
Drag Drop APIとは
Drag Drop APIはブラウザ上でDOM要素のドラッグ＆ドロップ操作を実現するためのAPIである。ドラッグ＆ドロップはWebアプリケーションの使い勝手をネイティブアプリケーションに近づけるための重要な要素である。
- 実装方法の違い：dragstartやdropなど新たに追加された抽象度の高いレイヤのイベントを用いて、より直感的にドラッグ＆ドロップを実装できる。従来の実装はmousedown、mousemove、mouseupという3つのフローからなる
- 機能面の違い：Data Transferはドラッグ操作によるデータの受け渡しをサポートするAPI。データの送り手とデータの受け手は同じウィンドウ内に限定されない
インタフェース
- ドラッグイベント：ドラッグ操作の状態に応じて適切に発火してくれるので、ドラッグ＆ドロップ用の煩雑なフラグ管理を自前でする必要がなくなる
- Data Transfer：データの受け渡し、データの処理方法の指定、ドラッグイメージの設定といった役割を受け持っている
基本的なドラッグ＆ドロップ
dataTransferと必要最低限のイベントハンドラのみを用いて、簡単なデータの受け渡しを行うサンプルを実装する。
- ドラッグ要素の設定：特定の要素をドラッグ可能にするためには、要素のdraggable属性をtrueに設定する
- ドラッグ側の設定：ドラッグするデータをdataTransferにセットするためにsetDataメソッドを呼び出す。setDataの第一引数にはデータのフォーマット（MIME Type）を指定する
- ドロップ側の設定：ドラッグされたデータをdataTransferから取得するにはgetDataメソッドを呼び出す
表示のカスタマイズ
Drag Drop APIを利用すると、ドラッグ中のUI表示に関して全く考慮しなくてもドラッグ＆ドロップが実現できる。以下では必要に応じて表示をカスタマイズする方法について述べる。
- ドラッグイメージの変更：setDragImageまたはaddElementを利用する。dragstartイベント内でのみ呼び出し可能なメソッドである。違いはドラッグイメージの表示位置
- CSSを利用したドラッグイメージのカスタマイズ：WebKit系ブラウザでは、-webkit-drag疑似クラスを利用してCSSによるドラッグイメージのカスタマイズが可能
- ドロップ領域の強調表示：エフェクトの追加はdragenterイベントで行う。ドロップの位置やタイミングによって実行されるアクションが変わる場合は、dragoverイベントでアクションを説明するエフェクトを追加する。エフェクトの削除はdragleaveイベントおよびdropイベントで行う
ファイルのDrag-In／Drag-Out
- デスクトップのファイルを取得する：dataTransferのfilesプロパティを利用する
- ファイルをデスクトップに保存する：event.dataTransfer.setData(‘DownloadURL’, ‘MINETYPE:ファイル名:ファイルURL’); というフォーマットでデータをセットする
２ File API
File APIとは
File APIはローカルに保存されているファイルの情報や中身を取得するためのAPIである。File APIの登場以前では、ローカルにあるファイルを選択してサーバに送信することはできたが、ファイルの情報や中身をJavaScriptで直接読み込んで扱うことはできなかった。
Fileオブジェクト
ファイル情報を取得するにはFileオブジェクトを参照する。デスクトップ上に保存してあるファイルのFileオブジェクトを取得するためには、ユーザが明示的にファイルを選択する必要がある。ユーザにファイルを選択してもらうには以下の2通りの方法がある。
- ドラッグ＆ドロップによる選択
- ファイル選択ダイアログの利用
FileReader
- インタフェース：引数に指定するBlob（Binary Large Object）は大きなデータを効率よく扱うためのインタフェースである
- テキストファイルの読み込み
- エラーの処理：読み込みエラーを捕捉するにはonerrorイベントハンドラを利用する。またエラーの原因を知るにはFileReaderのerror.codeプロパティを参照する
- 読み込み中の処理：読み込みの進捗を知るにはprogressイベントを利用する
- ファイルの一部を読み込む：Fileオブジェクトのsliceメソッドを利用する
data URL
- data URLとは：data: スキームで始まるURLのこと。data URLを用いるとWebページや画像などのリソースが持つデータをURLの中に直接埋め込むことができる
- data URLの生成：data URLの書式は「data:[<MIME Type>][;base64],<data>」
- readAsDataURLメソッド：ファイルの内容をdata URL形式で読み込むためのもの。HTML中でのファイルの扱いがとても簡単になる
FileReaderSync
FileReaderSyncはファイルの内容を同期的に読み込むためのAPIである。同期的な読み込みとは、ファイル読み込みメソッドの戻り値がそのまま読み込み結果となることを意味する。非同期に読み込んでイベントハンドラで処理するFileReaderと比べて、実装がシンプルになるというメリットがある。
最後に
Drag Drop APIはブラウザ上でDOM要素のドラッグ＆ドロップ操作を実現するためのAPIで、File APIはローカルに保存されているファイルの情報や中身を取得するためのAPIである。両者はそれぞれ魅力的な機能だが、合わせて利用することで非常に強力なデスクトップ連携機能を実現することができる。
次回は、Web Storage と Indexed Database といったストレージについて解説する。
 |
