デジタル時計を作ってみました。
まあ、作ってみたとは言っても、基本的にはこちらのTutorialzineさんが公開しているデジタル時計のソースをダウンロードしてきて、時刻表示以外のところを削ぎ落として、ちょびっとjavascriptをいじらせてもらった程度ですけどね。
その時計がこれ。
大和撫子七へn……じゃなかった、八万六千四百変化するデジタル時計です。
別にたいしたことはしてないです。当初の予定では、デジタル時計を作るのに結構手間かかるだろうな〜と思っていたから、その制作過程で記事が一本書けるだろうという算段だったんですが、良い感じのを提供してくれている人がいたおかげで、僕の作業としては、コードを二行くらい書いただけです。HTMLはそれなりに書き換えさせていただきましたが。
こんなんで作ったとか宣言してたら、本家の人に怒られちゃうかしら。商用で二次配布しているわけではないから、大丈夫かな……？
ここにマウスがホバーすれば、出て来ます。
ブログパーツっぽい感じに作ったは良いんですが、今のうちのデザインだと、ブログパーツを置くようなところがなくて……とりあえずここに置いとくことにしました。
何か良い置き場所の提案とかないですかね？ マジで。
ま、それだけです。
技術的な話もくそもなくなってしまったので、せっかくだからこの記事は、作品制作のカテゴリに入れてやることにしますわ。
で、ほら。時刻の表示も数字6桁じゃないですか。20時30分40秒だったら、203040だし。
だから、この現在時刻の6桁を、そのままカラーコードとして使ってみようと思いましてね。何時にどんな色になるのかなーっていう、そんな興味本位な感じでやってみました。
00:00:00から23:59:59まで、一秒ごとに一色ずつ変化するので、八万六千四百変化ってわけですね。一日は86400秒だから。
ま〜……正直、たいして変化しないですww
RGBのRの部分が特にね。0〜23じゃ、何かもうあれだわ。この場合の23は16進数だから、10進数で言うと35ですかね。でも、それでも全然だよね。GとBも、Rに比べれば変化するとは言え、それでも0〜89（10進数で）ですから、指定できる範囲（0〜255）の3分の1くらいですわ。
なので今回は、指定するカラーコードは時刻をひっくり返した値にしています。つまり、23時59分59秒だったら、#959532になるわけですね。これだと、そこそこ変化する。各色とも、上の桁が0〜9まで変化するからね。RとGは10進数で……え〜と……0〜149まで変化するのかな？ B……0〜145までか。まあ、いずれの場合も下の桁は0〜9までは変化しないから、途中いくつか取れない値があるけど、でもさっきよりはマシになったね。
09時59分59秒から10時00分00秒に変わるときとか、結構大きく色が変わるかなぁ。
まず、冒頭でも出て来たTutorialzineさんのサイトに行って、ファイルを落として来る。
そしたら、script.jsの中に時刻表示を制御しているところがあるので、そこをこんな風にアレンジする。
[php]
//script.jsの後半の方
(function update_time(){
//この行を書き換える
//var now = moment().format(“HHmmssdA”);
var now = moment().format(“HHmmss”);
//この2行を追加
var color = now.split(“”).reverse().join(“”);
$(‘#clock.light .digits div span’).css({borderColor:’#’+color, backgroundColor:’#’+color});
〜 中略 〜
})();
[/php]
どうやら、文字列を反転するための便利な関数ってのはjavascriptには用意されていないみたい。代わりに配列の順番を逆にする関数はあるので、一度文字列を配列にして、順番を逆にして、また文字列に直しています。
やってることはこれだけです。
今回は時刻だけだけど、考えてみたら、西暦を下二桁だけにすれば、あるいは平成で考えれば、日付も6桁になるね。今日（2013/06/29）なら、#130629か、平成なら25年だから、#250629になるかな。
何か両方の値を使って、上手いこと応用できると面白いかもですね。ちょっと考えてみます。
まあ、作ってみたとは言っても、基本的にはこちらのTutorialzineさんが公開しているデジタル時計のソースをダウンロードしてきて、時刻表示以外のところを削ぎ落として、ちょびっとjavascriptをいじらせてもらった程度ですけどね。
その時計がこれ。
大和撫子七へn……じゃなかった、八万六千四百変化するデジタル時計です。
別にたいしたことはしてないです。当初の予定では、デジタル時計を作るのに結構手間かかるだろうな〜と思っていたから、その制作過程で記事が一本書けるだろうという算段だったんですが、良い感じのを提供してくれている人がいたおかげで、僕の作業としては、コードを二行くらい書いただけです。HTMLはそれなりに書き換えさせていただきましたが。
こんなんで作ったとか宣言してたら、本家の人に怒られちゃうかしら。商用で二次配布しているわけではないから、大丈夫かな……？
ここにマウスがホバーすれば、出て来ます。
ブログパーツっぽい感じに作ったは良いんですが、今のうちのデザインだと、ブログパーツを置くようなところがなくて……とりあえずここに置いとくことにしました。
何か良い置き場所の提案とかないですかね？ マジで。
何やってんのかってーと
実際に動きを見てもらえば分かるんですが、一応、毎秒ごとに色が少しずつ変わるんですね。ま、それだけです。
技術的な話もくそもなくなってしまったので、せっかくだからこの記事は、作品制作のカテゴリに入れてやることにしますわ。
作ろうと思った理由
CSSで色を指定するときって、6桁で指定するじゃないですか。#123456とか#ff1118とか。で、ほら。時刻の表示も数字6桁じゃないですか。20時30分40秒だったら、203040だし。
だから、この現在時刻の6桁を、そのままカラーコードとして使ってみようと思いましてね。何時にどんな色になるのかなーっていう、そんな興味本位な感じでやってみました。
00:00:00から23:59:59まで、一秒ごとに一色ずつ変化するので、八万六千四百変化ってわけですね。一日は86400秒だから。
実際に作ってみて
時刻をそのままって言いましたが、実際にそのままやってみると、カラーコードが#000000から#235959まで変化することになりますね。ま〜……正直、たいして変化しないですww
RGBのRの部分が特にね。0〜23じゃ、何かもうあれだわ。この場合の23は16進数だから、10進数で言うと35ですかね。でも、それでも全然だよね。GとBも、Rに比べれば変化するとは言え、それでも0〜89（10進数で）ですから、指定できる範囲（0〜255）の3分の1くらいですわ。
なので今回は、指定するカラーコードは時刻をひっくり返した値にしています。つまり、23時59分59秒だったら、#959532になるわけですね。これだと、そこそこ変化する。各色とも、上の桁が0〜9まで変化するからね。RとGは10進数で……え〜と……0〜149まで変化するのかな？ B……0〜145までか。まあ、いずれの場合も下の桁は0〜9までは変化しないから、途中いくつか取れない値があるけど、でもさっきよりはマシになったね。
09時59分59秒から10時00分00秒に変わるときとか、結構大きく色が変わるかなぁ。
色を変えるためのコード
俺もやってみよう！ って思う人はいないような気がしますが……もしやるなら。まず、冒頭でも出て来たTutorialzineさんのサイトに行って、ファイルを落として来る。
そしたら、script.jsの中に時刻表示を制御しているところがあるので、そこをこんな風にアレンジする。
[php]
//script.jsの後半の方
(function update_time(){
//この行を書き換える
//var now = moment().format(“HHmmssdA”);
var now = moment().format(“HHmmss”);
//この2行を追加
var color = now.split(“”).reverse().join(“”);
$(‘#clock.light .digits div span’).css({borderColor:’#’+color, backgroundColor:’#’+color});
〜 中略 〜
})();
[/php]
どうやら、文字列を反転するための便利な関数ってのはjavascriptには用意されていないみたい。代わりに配列の順番を逆にする関数はあるので、一度文字列を配列にして、順番を逆にして、また文字列に直しています。
やってることはこれだけです。
今回は時刻だけだけど、考えてみたら、西暦を下二桁だけにすれば、あるいは平成で考えれば、日付も6桁になるね。今日（2013/06/29）なら、#130629か、平成なら25年だから、#250629になるかな。
何か両方の値を使って、上手いこと応用できると面白いかもですね。ちょっと考えてみます。
