HTML5とJavaScriptと組み合わせて利用できるAPIについて概要をまとめてみた。
Drag and Drop API
以前からmouseup,mousedownなどのイベントが存在したが、HTML5ではdraggable属性にtrueと設定するだけで、ほぼ全ての要素がドラッグアンドドロップ可能になる。ドラッグする要素にはdraggable, ondragstart, id属性の設定が必須。またドロップする要素にはondragenter, ondragleave, ondragover, ondrop属性を設定できる。
ドラッグアンドドロップでのデータ受け渡しにはDataTransferを用いる。具体的な実装は以下のようにやる。
function onDrop(e) {
var text = e.dataTransfer.getData("text/plain");
// 以下略...
}
File API
このAPIを用いることにより、ファイルの読み書きをアドオンなしで行うことが出来る。ファイルの内容を取得するAPIには同期・非同期2種類の用意されている。同期APIはFileReaderSync、非同期のものがFileReaderとなっている。なお同期APIはWeb Workersの中でしか使えない。ファイルへの書き込みにはバイナリ構築のためのBlobBuilder, バイナリに名前をつけて保存することができるFileSavar, 非同期書き込みを行うFileWriter, 同期書き込みを行うFileWriterSyncの4種類のAPIがある。具体的な実装は以下の通り。
function onDrop(e) {
// ファイルをdataTransferに格納
var files = e.dataTransfer.files;
// filesには各ファイルが配列形式で格納されている
// 各ファイル要素はたとえば次のように利用できる
for (var i=0; i < files.length; ++i) {
console.log("name: " + files[i].name);
console.log("type: " + files[i].type);
console.log("size: " + files[i].size);
// 非同期ファイル読み込みインスタンスの生成
var fileReader = new FileReader();
// 画像ファイルの読み込みとタグの生成
fileReader.onload = function(e) {
var image = document.createElement('img');
image.src = e.target.result;
}
// ファイル内容をURL形式で返す
readAsDataURL(files[i]);
// ファイル内容を指定された文字エンコーディングで返す
readAsText(files[i]);
}
// ブラウザからファイルを展開しないように指示
e.preventDefault();
}
function onDragOver(e) {
e.preventDefault();
}
Web Strage
key-value形式、5MBまで保存できる。Cookieと同様の仕組みだが有効期限がない。ウィンドウやタブが閉じるまでデータが保存されるsessionStrageと、ドメインとポート番号が同じならば異なるウィンドウ間でデータが共有できるlocalStrageの2種類ある。Web Strageの利用にはまずストレージオブジェクトを取得する必要があります。その後、ストレージオブジェクトのメソッドを利用してデータの保存、変更、削除を行います。具体的な利用の方法は以下のソースのとおり。
// Storage Object 取得
var localStorage = window.localStorage;
var sessionStorage = window.sessionStorage;
// Local Storageへの保存処理
function saveToLocalStorage(localStorage,key,value) {
localStorage.setItem(key,value);
}
// Session Storageへの保存処理
function saveToSessionStorage(sessionStorage,key,value) {
sessionStorage.setItem(key,value);
}
// Session Storageへの変更処理 = 保存と全くかわらない処理
function changeValueOfSessionStorage(sessionStorage,key,modifiedValue) {
saveToSessionStorage(sessionStorage,key,modifiedValue)
}
// Session Storageへの削除処理
function removeItemFromSessionStorage(sessionStorage,key) {
sessionStorage.removeItem(key);
}
// Storageの消去
function clearStorage(storage) {
storage.clear();
}
// Key名の取得 -> Valueの取得
function getNthValueFromStorage(storage,n){
var itemKey = storage.key(n);
return storage.getItem(itemKey);
}
Geolocation API
if (navigator.geolocation) {
// Geolocation API 使用可能時の処理
// 現在位置取得
var currentPostion = navigator.geolocation.getCurrentPosition(
getCurrentPositionSuccess, //@args 成功・失敗時のメソッド
getCurrentPositionError
} else {
// Geolocation API に対応していないときの処理
// hogehoge...
}
function getCurrentPositionSuccess(position) {
// 緯度・経度をlocationに格納
var location = { position.coords.latitude, position.coords.longitude }
// 地図の中心
var googleMapCenter = new google.maps.LatLng(latitude, longitude);
// GoogleMap オプション設定
var googleMapOption = {
zoom: 16,
center: googleMapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
};
// Googleマップオブジェクトの作成
var googleMap = new google.maps.Map(document,getElementById('map'), mapOption);
var currentPositionMarker = new google.maps.Marker({
position: googleMap.center,
map: googleMapCenter
});
}
Web SQL Database(relational database)
// DB open @args DBname, version, name, database size
var websqlDB = window.openDatabase('websqlUser', 1.0, 'websql db', 1024*1024);
// transaction
websqlDB.transaction(
function(tx) { // transactionで実行する処理
//Database の作成
tx.executeSql(
"CREATE TABLE IF NOT EXISTS websqltable(ID NUMERIC, NAME CHARACTER)"
);
// executeSqlメソッドの使い方
tx.executeSql(
"SQL文...",
"プレースホルダ",
"成功時のコールバック関数(transactionObject,resultSet)", // resultSet.rows.item(i)で各レコードへアクセス
"失敗時のコールバック関数(e)"
);
},
function(e) { // 例外発生時の処理
},
function(e) { // 処理成功時の処理
}
);