見出し画像

HTML5で追加されたAPI（HTML）

YaHoHoo's

HTML5で追加されたJavaScriptのAPIについて
虫食いで勉強していたものの、
差分だけでは追いつかない…
アレもコレも知らない…！（焦）


というのが実情だったので、まとめ。


（１）Web Storage

　これについては、まとめていました↓


（２）File API

JavaScriptで、ユーザのローカル環境保存ファイルを
直接参照、編集できる。

ただし、HTML上の「FileReader」イベントで
操作対象ファイルがあらかじめ読み取られる（選択されている）
ことが前提。セキュリティ的な意味で。

実際はこんな感じ。
（下記は拝借したもので、詳細は出典を参照。）

（HTML）

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>FileReader</title>
</head>
<body>

<p>選択できるファイルはJPEG画像ファイルです。<br>
<input type="file" id="file"></p>
<div id="mod-log">
</div>

<script>

(function() {

 var inputFile = document.getElementById('file');
 var reader = new FileReader();

 function fileChange(ev) {
   var target = ev.target;
   var file = target.files[0];
   var type = file.type;
   var size = file.size;

   if ( type !== 'image/jpeg' ) {
     alert('選択できるファイルはJPEG画像だけです。');
     inputFile.value = '';
     return;
   }

   reader.readAsDataURL(file);
 }

 function fileLoad() {
   console.log(reader.result);
 }

 inputFile.addEventListener('change', fileChange, false);
 reader.addEventListener('load', fileLoad, false);

}());

</script>

</body>
</html>


（JavaScript）

var inputFile = document.getElementById('file');
var reader = new FileReader();

function fileChange(ev) {
 var target = ev.target;
 var file = target.files[0];
 var type = file.type;
 var size = file.size;

 if ( type !== 'image/jpeg' ) {
   alert('選択できるファイルはJPEG画像だけです。');
   inputFile.value = '';
   return;
 }

 reader.readAsDataURL(file);
}

function fileLoad() {
 console.log(reader.result);
}

inputFile.addEventListener('change', fileChange, false);
reader.addEventListener('load', fileLoad, false);

この例で言うと、選択して読み込んだjpegファイルに対して
ファイル編集ができる…という感じだろうか。


（３）Geolocation API

それまで各キャリア別の独自コードで書いていた
位置情報に関するコードが、W3Cによって統一された。

「あなたの位置情報を求めています。許可しますか。」
みたいな通知を出して、ユーザから許可を得てから使える。

（例）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//ユーザーの現在の位置情報を取得
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

/***** ユーザーの現在の位置情報を取得 *****/
function successCallback(position) {
	var gl_text = "緯度：" + position.coords.latitude + "<br>";
		gl_text += "経度：" + position.coords.longitude + "<br>";
		gl_text += "高度：" + position.coords.altitude + "<br>";
		gl_text += "緯度・経度の誤差：" + position.coords.accuracy + "<br>";
		gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
		gl_text += "方角：" + position.coords.heading + "<br>";
		gl_text += "速度：" + position.coords.speed + "<br>";
	document.getElementById("show_result").innerHTML = gl_text;
}

/***** 位置情報が取得できない場合 *****/
function errorCallback(error) {
	var err_msg = "";
	switch(error.code)
	{
		case 1:
			err_msg = "位置情報の利用が許可されていません";
			break;
		case 2:
			err_msg = "デバイスの位置が判定できません";
			break;
		case 3:
			err_msg = "タイムアウトしました";
			break;
	}
	document.getElementById("show_result").innerHTML = err_msg;
	//デバッグ用→　document.getElementById("show_result").innerHTML = error.message;
}
</script>
<title>Geolocation API　サンプル</title>
</head>
<body>
<p>あなたの現在位置</p>
<div id="show_result"></div>
</body> 
</html>


（４）Web Workers

メインページと並行して、JavaScriptプログラムを
バックグラウンドで動作させることができる。
（「マルチスレッド化」的なことが可能）

バックグラウンドで動くJavaScriptファイル
＝「Worker」

重たい処理を実行しても「スクリプトの応答がありません」
などのダイアログ表示がない。
これを利用して、重たい処理をWorkerにやらせる
手法もとれる。


【アクセスできるオブジェクト】

・navigator
・location
・XHR

【アクセスできないオブジェクト】

・window
・document
・DOM操作全般

実際はこんな感じ。
（下記は拝借したもので、詳細は出典を参照。）

（HTML＋JavaScript）

割り算元の数値：<input type="text" id="inputtotalnum" /><br/>
割る数値　　　　：<input type="text" id="num" />
<input type="button" value="送信" onClick="send()">
<br />

<div id="disp" ></div>
<script type="text/javascript">
// （1）ワーカーの実装チェック
if (window.Worker) {
 // Web Workersに関する処理を記述
 document.getElementById("button").addEventListener("click", send, false);
 var worker = new Worker("multiple.js");
} else {
 window.alert("このブラウザではWeb Workersは利用できません");
}

function send() {
 var total =document.getElementById("inputtotalnum").value;
 var num = document.getElementById("num").value;
 // （2）ワーカーに入力値を送る
 worker.postMessage({ "total": total, "num": num });
}

// （3）ワーカーからのメッセージ取得時の処理
worker.onmessage = function (event) {
 document.getElementById("disp").innerHTML = event.data;
}
</script>


（Workerの動作ファイル「multiple.js」）

onmessage = function (event) {
 var i = 0
 var n = 0;
 var ret = event.data;
 // 倍数計算
 for (i = 1; i < ret.total; i++) {
   if (i % ret.num == 0) n++;
 }
 // UIスレッド側にメッセージを送付する
 postMessage(ret.total + "における" + ret.num + "の倍数は" + n + "個です");
}


（５）Drag and Drop API

HTML側では、ドラッグする要素にdraggable属性を指定して、
ドロップ先の要素にdropzone属性を指定する。

…が、dropzone属性をサポートしているブラウザが今は怪しい様子。
加えて、dropzone属性を使用しなくても一部のブラウザでは
ドラッグ＆ドロップ機能を実現可能とのこと。

JavaScript側では、DataTransferオブジェクトで
ドラッグデータをドロップ先へ受け渡す。

（例）

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset=utf-8>
<title>ドラッグ＆ドロップ　サンプル</title>
<style>
#fruits {
	/*単なるスタイリング*/
	width:500px; height:100px; margin:20px; background-color:#FF9966; border:1px solid #cc3333;
}
#dropbox {
	/*単なるスタイリング*/
	width:500px; height:100px; margin:20px; background-color:#CCFF66; border:1px solid #00cc00;
	/*以下はwebkit系ブラウザでドラッグ＆ドロップを動かすための指定（ブラウザのサポートが進めば、必要なくなると思われます）*/
	-khtml-user-drag: element;
}
</style>
<script>
/***** ドラッグ開始時の処理 *****/
function f_dragstart(event){
	//ドラッグするデータのid名をDataTransferオブジェクトにセット
	event.dataTransfer.setData("text", event.target.id);
}

/***** ドラッグ要素がドロップ要素に重なっている間の処理 *****/
function f_dragover(event){
	//dragoverイベントをキャンセルして、ドロップ先の要素がドロップを受け付けるようにする
	event.preventDefault();
}

/***** ドロップ時の処理 *****/
function f_drop(event){
	//ドラッグされたデータのid名をDataTransferオブジェクトから取得
	var id_name = event.dataTransfer.getData("text");
	//id名からドラッグされた要素を取得
	var drag_elm =document.getElementById(id_name);
	//ドロップ先にドラッグされた要素を追加
	event.currentTarget.appendChild(drag_elm);
   //エラー回避のため、ドロップ処理の最後にdropイベントをキャンセルしておく
	event.preventDefault();
}
</script>
</head>
<body>

<p>好きな果物は何ですか？</p>
<div id="fruits" ondragover="f_dragover(event)" ondrop="f_drop(event)">
<img src="images/apple.gif" id="apple" alt="りんご" draggable="true" ondragstart="f_dragstart(event)">
<img src="images/orange.gif" id="orange" alt="みかん" draggable="true" ondragstart="f_dragstart(event)">
<img src="images/grape.gif" id="grape" alt="ぶどう" draggable="true" ondragstart="f_dragstart(event)">
</div>

<p>下のボックスに入れてください。</p>
<div id="dropbox" ondragover="f_dragover(event)" ondrop="f_drop(event)">
</div>

</body>
</html>


（６）Canvas API

JavaScriptで2Dグラフィックをかける。

この技術を使ったプロトを作ったことがあるけれど
JavaScriptのリハビリにはそこそこ大変だった…。


（７）History API

ブラウザ閲覧履歴などをJavaScriptから操作できる。
ブラウザバック ＋ ブラウザフォワード ＋ α という感じ。
この「α」部分がHTML5から追加になった。

（例）

//前のページへ
window.history.back();

//次のページへ
window.history.forward();

//指定ページに移動
window.history.go(1)

//履歴情報の追加
window.history.pushState({name : 'xxxxxxxxxx'}, null, '/name')

//履歴情報の監視
//ブラウザの「戻る」「進む」or 同様の操作が行われると呼ばれるイベント
window.addEventListener('popstate', function(event) {
   // 任意の処理
   var state = event.state;
   alert(state.name):
});

//現履歴情報の取得
window.history.state



【出典】

http://www.hp-stylelink.com/news/2013/08/20130802.php



いいなと思ったら応援しよう！