#内容
Overlays(com.applay.overlay)というアプリを使います。
このアプリにはフローティングブラウザを表示する機能があるのですが、
- 操作の透過
- 背景の透過
- 枠の完全非表示
- 縦画面、横画面で個別に表示位置を指定
といったことが可能です。
そこで、画像のような時計をhtmlで作り、常時表示するようにしてみました。
この時計の運用を数ヵ月間試す限りでは安定していて、動きが止まったり落ちてしまったりすることはありませんでした。
また、動画やブラウザよりも前面に表示されるため、時間を把握しつつ色々なことが出来ます。
そして何より、時計はhtmlで記述できるのでかなり自由度の高いカスタマイズが可能ということになります。
Overlaysアプリの使用方法は割愛します。手順はこちらのサイト (helicoptar.web.fc2.com/flatclock.html)にまとめました。
htmlソースとリソース（参考／汚いコードなので閲覧注意）
flatclock.htm
<html>
<head>
<title>flatclock</title>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"><meta name="viewport" content="width=device-width*1.5,user-scalable=no,initial-scale=1.5,maximum-scale=1.5">
<!-- 改訂の履歴
2019.09.21 新規
2019.10.19 スクロールバー非表示
2019.12.14 OLED保護対応
-->
<script type="text/javascript">
<!--
doonce = 1;
function refresh() {
now = new Date();
seco_now = now.getSeconds();
minu_now = now.getMinutes() + seco_now / 60;
hour_now = now.getHours() + minu_now / 60;
rotateimg(document.seco, seco_now * 6);
rotateimg(document.minu, minu_now * 6);
rotateimg(document.hour, hour_now * 30);
if (doonce) {
document.hour.style.visibility="visible";
document.minu.style.visibility="visible";
document.seco.style.visibility="visible";
moveratio = document.dial.width / 200;
if(oled_save_range) {setTimeout("oledsave()", 3000);}
doonce = 0;
}
now = new Date();
setTimeout("refresh()", 1000 - now.getMilliseconds());
}
function rotateimg(img, deg) {
if (img) {img.style.transform="rotate(" + deg + "deg)";}
}
oled_save_range = 20;
posx = Math.floor(Math.random() * (oled_save_range * 2 + 1))
posy = Math.floor(Math.random() * (oled_save_range * 2 + 1))
function oledsave() { // oledを保護するため時計の位置を移動する
xshift = Math.floor(Math.random() * 3) - 1;
yshift = Math.floor(Math.random() * 3) - 1;
if (posx > oled_save_range * 2 - 1) {posx--;}
else if (posx < 1) {posx++;}
else {posx += xshift;}
if (posy > oled_save_range * 2 - 1) {posy--;}
else if (posy < 1) {posy++;}
else {posy += yshift;}
if (document.all.clock) {document.all.clock.style.right = "" + posx * moveratio + "px";}
if (document.all.clock) {document.all.clock.style.top = "" + posy * moveratio + "px";}
setTimeout("oledsave()", 600000);
}
// -->
</script>
</head>
<body text="green" link="green" alink="red" vlink="#7cff9c" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="refresh()" style="overflow:hidden">
<div id="clock" style="position:absolute; right:0; top:0; width:80%; position:fixed;">
<img name="dial" style="width:100%; position:absolute; left:0; top:0; opacity:0.66;" src="flatclock_dial.png">
<img name="hour" style="position:absolute; left:0; top:0; visibility:hidden; opacity:0.66;" src="flatclock_hour.png" width="100%">
<img name="minu" style="position:absolute; left:0; top:0; visibility:hidden; opacity:0.66;" src="flatclock_min.png" width="100%">
<img name="seco" style="position:absolute; left:0; top:0; visibility:hidden; opacity:0.83;" src="flatclock_sec.png" width="100%">
</div>
</body>
</html>
flatclock_dial.png (512512)
flatclock_hour.png (512512)
flatclock_min.png (512512)
flatclock_sec.png (512512)
