MENU

ライフハッカーさんが「ブラウザのホーム画面を時計にすると、いろいろ捗る」と仰るのでJS版を作ってみた。


https://blog.motoo.net/etc/homeClock.html

ブラウザのホーム画面を時計にすると、いろいろ捗る : ライフハッカー[日本版]という記事を見て、そこで紹介されているThe Colour Clockというサイトを眺めてみたけど、どうにもこうにもしっくりこない。たぶんFlashであることや、オフラインで使えないことや、時・分・秒をRGBに置き換えると時や分を超えるときに急な色変化があることなど諸々あったので、アイデアだけパク……参考にさせて頂いて、JS版を自分向けに作ってみた。

自分用に再構築するにあたって、

・時・分・秒をRGBに置き換えるよりは、マンセル環をグルグル回るようにしてみよう。
・周期は1時間くらいで良いかな?
・どうせなら時刻のテキストは補色で表示してみっか。

くらいですかね。

てな感じで落ち着いたのがコレ。(上のサンプルはわかりやすいように1分ローテ)

<div id="clock"></div>
<div id="rgb"></div>

という表示枠を設置して、

body {
	font-family: Georgia;
	font-style: italic;
	margin: 0;
	padding: 0 50px;
}
#clock {
	font-size: 80px;
	height: 120px;
	margin-top: -60px;
	position: absolute;
	top: 50%;
}
#rgb {
	font-size: 12px;
	position: absolute;
	bottom: 1em;
}

みたいな適当なスタイルあてて、

<script type="text/javascript">
	var timer = 100;
	jQuery(document).ready(function(){
		setInterval(function() {
			var today = new Date();
			var hh = today.getHours();
			var mm = today.getMinutes();
			var ss = today.getSeconds();
			jQuery('#clock').html(hh.fillZero(2) + ' : ' + mm.fillZero(2) + ' : ' + ss.fillZero(2));
			
			//var now = (hh + mm / 60 + ss / (60*60)) / 24;	//24時間ローテーション
			var now = (mm + ss / 60) / 60;	//1時間ローテーション
			//var now = (mm % 10 + (ss + today.getMilliseconds()/1000) / 60) / 10;	//10分ローテーション
			//var now = (ss + today.getMilliseconds()/1000) / 60;	//1分ローテーション
			
			//背景色
			var r = Math.floor(255 * (0.5 + Math.sin(now * 2 * Math.PI)));
			var g = Math.floor(255 * (0.5 + Math.sin(now * 2 * Math.PI + 1 * 2 / 3 * Math.PI)));
			var b = Math.floor(255 * (0.5 + Math.sin(now * 2 * Math.PI + 2 * 2 / 3 * Math.PI)));
			if (r < 0) r = 0; if (r >255) r = 255;
			if (g < 0) g = 0; if (g >255) g = 255;
			if (b < 0) b = 0; if (b >255) b = 255;
			
			jQuery('#rgb').html('background-color: rgb('+r+', '+g+', '+b+');');
			jQuery('body').css({ 'background-color': 'rgb('+r+', '+g+', '+b+')' });
			
			//文字色(背景色の補色)
			var rgbMax = Math.max.apply(null, [r, g, b]);
			var rgbMin = Math.min.apply(null, [r, g, b]);
			rgbCoef = rgbMax + rgbMin;
			jQuery('body').css({ 'color': 'rgb('+(rgbCoef - r)+', '+(rgbCoef - g)+', '+(rgbCoef - b)+')' });
		}, timer);
	});
	Number.prototype.fillZero = function(n) {
		return Array((n+1) - this.toString().split('').length).join('0') + this;
	}
</script>

こんな感じで動かします。
(数値を2桁表示にする部分はHigé au laitさんのブログから拝借。多謝。)

もし元のサイトみたいに、時・分・秒でRGBを割り当てたいなら、

			var r = Math.floor(hh / 24 * 255);
			var g = Math.floor(mm / 60 * 255);
			var b = Math.floor(ss / 60 * 255);
			jQuery('body').css({ 'background-color': 'rgb('+r+', '+g+', '+b+')' });

こんな感じで書き換えればいいと思うよ。

あとはローカルのApacheの公開ディレクトリに置いて、ホームに設定するだけ。
自分が使ってるChromeでは、新しいタブを開いたときにChrome独自ホームが表示されてしまうので、合わせてNew Tab Redirect!っていうChromeアドオンも導入してます。(追記)このNew Tab Redirect!ってのもいいんだけど、新しいタブを開いたときに、フォーカスがアドレスバーに行かない。どうにかならんもんかと思ったけど、自分でExtension作っちゃえばいいんじゃん!と思い直し、

{
	"name": "homeClock",
	"version": "1.0",
	"permissions": [],
	"chrome_url_overrides" : {
		"newtab": "clockHome.html"
	}
}

というmanifest.jsonを作成して、homeClock.html(関連JSも含む)と同じディレクトリに配置して、Chromeの機能拡張(デベロッパーモード)からそのディレクトリごと読み込んでホームの設定完了!!

現在ホームページとして絶賛活躍中。たぶんすぐ飽きると思うけど。

ご参考になれば……いや、ならないね。ただのマスターベイション報告でしたw