https://twitter.com/kozeni_shkt/status/709743397196541953
http://www.b-ch.com/ttl/index.php?ttl_c=467
[iOS]部屋の灯りが消えたら自動でGet Wildを再生してGet Wild退勤するのJavaScript版です。
Mac+Firefoxで動作確認した。Macの照度センサーはカメラの辺りにある。
ホスティング
localStorageに設定値を記憶しているのでブラウザ閉じても、また開けばすぐに使えるはず
実装
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>GetWild</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="value">CurrentValue: -</div>
<div id="threshold">-</div>
<div id="slider" style=" margin:5px;width: 700px;"></div>
<input id="url" type="text" value="" style=" margin:5px;width: 700px;"/>
<script>
$(function() {
var isGetWild = false;
var threshold = 100;
var getwild_url = "https://youtu.be/LgBxze0ye94?t=1m45s";
// GetWild退勤
function getWildAndTough() {
window.open(getwild_url);
}
// 設定値読み込み
if ("url" in localStorage) {
getwild_url = localStorage["url"];
}
if ("threshold" in localStorage) {
threshold = localStorage["threshold"];
}
// Url
$("#url").val(getwild_url)
$("#url").on("change", () => {
getwild_url = $("#url").val();
localStorage["url"] = getwild_url;
});
// しきい値設定
$("#threshold").html(threshold);
$( "#slider" ).slider({
max:1000,
min:0,
value:threshold,
step: 1,
slide: (event, ui) => {
threshold = ui.value;
localStorage["threshold"] = threshold;
$("#threshold").html(threshold);
}
});
// センサ
window.addEventListener('devicelight', function(event) {
var lux = event.value;
$("#value").html("CurrentValue: " + lux + 'lux');
if (lux < threshold) {
if (!isGetWild) {
isGetWild = true;
getWildAndTough();
}
} else {
isGetWild = false;
}
});
});
</script>
メモ
- 2016/4月現在では、照度センサーが使えるブラウザがFireFoxしかない
- Youtubeを新しいタブで開いているからポップアップ許可が必要
- Youtubeの再生開始時に広告が入るとGetWild退勤じゃなくてCM退勤になる
- devicelightイベントがロード時に発生しないのか、初期値が取れない