HTML5のいろいろを触ってみる

目次

Notifications API

ユーザーへのデスクトップ通知の設定や表示のためのもの

Slack等でも使っているやつ

気になる人のための参考リンク
通知てすと

サンプルコード

							
var options = {
	body: 'テスト',
	dir: 'rtl',
	icon: './public/pc_profAni03.gif'
};
var timerNotice = new Notification("テスト通知", options);
setTimeout(function() {
timerNotice.close();
}, 5000);

事前に・・・

							
if (("Notification" in window)) { // Notificationに対応しているかどうか
	if (Notification.permission === "granted") { // 通知が許可されているか？
		// 許可されていた場合、通知の処理
	} else if (Notification.permission !== "denied") { // 許可されていないけれど拒否もされていない場合
		Notification.requestPermission().then(function (permission) { // 通知の許可を求める
			if (permission === "granted") {
				// 許可されていた場合、通知の処理
			}
		});
	}
}

通知にイベントも仕込める

Clickイベント通知てすと

Web Worker

バックグラウンドのスレッドで実行するためのシンプルな手段　だそうです

気になる人のための参考リンク

テスト

てすと

サンプルコード

メインスレッドコード

							
if (window.Worker) {
	testWorker = new Worker("public/js/worker1.js");
	var inpText = document.getElementById("testWebWorkerText");
	testWorker.onmessage = function(e) {
		inpText.value = e.data;
	};
	testWorker.postMessage('てきとー');
}

サンプルコード

Workerコード

							
onmessage = function(e) {
	var baseTime = new Date().getTime();
	var count = 0;
	while(true) {
		var currentTime = new Date().getTime();
		var tmpTime = new Date().getTime();
		while((tmpTime - currentTime) < 1000) {
			tmpTime = new Date().getTime();
		}
		var dif = currentTime - baseTime;
		postMessage(dif);
		if(dif > 1000000) {
			break;
		}
	}
}

力尽きた

おわり

ソース