鈴木メモ

Illustratorの練習メモとか、作ったものとかのブログです。

*

大きなデジタル時計のサイト「いまなんじ?」を作りました

      2015/08/15

141220-n-11

パソコンに大きなデジタル時計を表示させるページをつくってみました。
朝の支度をする時に、TVのニュースのデジタル時計の代わりにこれを見ようかと。

サイト「いまなんじ?」について

パソコンのディスプレイから1~2m程度離れても見れるように、デジタル時計を大きめに表示するWEBサイトです。
時計部分は同じで、背景違いのページもつくりました。

[いまなんじ?-sora]
空の背景画像が1時間ごとに変わります。アクセスした時間にあわせて昼なら青空、夕方は夕暮れ、夜は月、みたいになるよう24枚の画像をセットしています。
141230-n-s

[いまなんじ?-neko]
猫の背景画像が1時間ごとに変わります。時計は正直見づらいけど、かわいいから。これもアクセスした時間にあわせて24枚の画像をセットしています。
141230-n-n

[いまなんじ?-siro]
24時間ずっと白背景に黒文字です。見やすさ重視。
(現在のサイトのトップページはここになってます。)
141230-n-si2

(使い方)
・はじめにインターネットでページにアクセスしたら、あとは時計が動き続けます。
・時計はjavascriptで動いています。パソコンの時計と同期するので、正確な時刻より数秒遅れることがあります。(時計がすごくズレていたらパソコンの時刻合わせをして下さい。)
・動作確認はWindows7,IE11。macやスマホではフォントが変わったり画像の縦横比が崩れたりするかもしれません。
[免責]時刻の正確性を保証するものではありません。サイトの利用によって起きた損害について一切の責任を負いかねます。

(使い方・そのほか)
・『付けっぱなしにしたい』
途中で画面が暗くなる場合は次の2つを確認して下さい。
①スクリーンセーバーを無しにする、②電源オプション(Windowsの場合)のスリープ設定の時間を変えてみる。
・『大きくしたい』
インターネットの全画面表示(フルスクリーンモード)はInternet Explorerの場合「F11」キーです。元に戻したい場合はもう一回「F11」キーで戻って来られます。
(※この画像はPlaceItを利用したフルスクリーンモードのイメージ画像です。)
placeit
・『小さくしたい』
ウインドウの端を掴んでサイズを小さくすると文字や画像も小さくなります。
141230-n-12

(反省点)
・最初の読み込みと、00分になった時の再読み込みに時間がかかるので、ちょっとイライラするかも。

(利用しているもの)
・背景の写真はパブリックドメインのものを加工して使用させてもらってます。Pixabayで検索したものが中心です。
・時計と背景画像はウインドウサイズに合わせて伸び縮みします。BackstretchFitTextを組み合わせて利用しています。

いろいろなデジタル時計サイトさん

サイトを作る途中でデジタル時計を表示するサイトさんがどんなのがあるかを探したのでリンクのまとめ。
(サムネイル画像をブックマークレットで取得したらなぜか海外時間がでてしまってますが、サイトはちゃんと日本時間が見られます。)

あとこちらはスクリーンセーバーですが素敵なので。リンクはGIGAZINEさんの紹介ページです。

 - WEB, お知らせ