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) {
// 処理成功時の処理
}
)
Pinned Articles
About
ウェブ界隈でエンジニアとして労働活動に励んでいる @gomi_ningen 個人のブログです
Tags
JavaScript
PowerShell
kibana
elasticsearch
fluentd
nginx
イベント
五十嵐裕美
村川梨衣
logrotate
IoT
Scala
Java
C言語
iputils
ICMP
WUG
mastodon
Swift
AWS
Clock
Windows
アーキテクチャ
PoEAA
iOS
DeviceFarm
プログラミング言語
OS
StepFunctions
Lambda
Serverless
terraform
ポエム
RHEL
ネットワーク
GraphQL
CloudWatch
Linux
Coreutils
network
nc
telnet
LinuxKernel
fpinscala
ELB
IAM
AppSync
EFS
Gradle
english