40さい!おめでとう時計のひみつ

2013年12月から登場した 「40さい!おめでとう時計!」の仕組みを簡単に紹介します。 ※本企画は2014年3月に終了しました。

ふしぎなところ

時刻はどうやって表示しているの?という質問をよく受けます。 まずは、この辺から説明しましょう。

撮影

時刻を事前にボードに書き込んでおいてそれを撮影していると思われているかもしれませんが、残念ながらそうではありません。 もしそうであれば、 1日は全部で 60分×24時間=1440分ですから、最低でも1440枚のボードの準備とその撮影を行わなければなりません。 これが最も大変ですが、仕組み的には単純です。 しかし、この方法ではある時刻には同じ写真しか登場しません。 同じ時刻でも翌日は違う写真を期待するのであれば、さらに撮影枚数は増えてしまい、作業量が現実的ではなくなります。

実はなにも書かれていないボードをもってもらい、それを撮影します。 これにより、撮影枚数は必要最低限に減らすことができます。 今回のおめでとう時計では幼稚園の先生に撮影を行ってもらいました。 実際に用意した写真は90枚弱です。

時刻の数値フォント

ボードの部分に表示されている時刻の数値フォントは、写真とは別に作成しました。 手書き感のあるフォントを目指しました。




試作段階では10種類程作成して試した結果、最終的に上記の3種類を組み合わせて利用しています。

最上段の数値フォントは幼稚園の先生にクレヨンで作成してもらいました。 1種類では時刻表示が単調になりますので、オリジナルフォントの色を変更したものを用意しました。 下2段は、私(八尋)がコンピュータで色を変更したフォントです。

当初はフリー素材として利用できる数値フォントを利用する計画だったのですが、どれも今回の時計のイメージと一致するものがなく、今回の用途に適した数値フォントを自作することにしました。

そこで思い付いたのが園児(私の計画では年長さん)にヨレヨンで数字を書いてもらって、それをデジタル化してという思惑ですが、これもうまく行かず。。。。ちょっとハードルが高かったようです。

数値フォントを並べて時刻をつくる

12:34であれば と並べます。 これも当初は、それでおしまいのはずだったのですが、どうみても手書き感が伝わって きません。 そこでフォントを配置する際にゆらぎを設けました。 ランダムに上下位置をずらして配置することで、手書き感がぐっとでてくるようになりました。

時刻と写真を組み合わせる

を写真のボードの上に合成します。 問題は、具体的に写真のどの位置に合成するか?実はここを最も悩みました。 プログラムが写真を解析してボードの位置とサイズを認識し、自動的に合成位置とサイズを決めるというのが、最も理想的であり、人にも自慢できる方法なのですが、これには画像認識の技術が必要となり時間的にも間に合わないと判断し、この方法は早々に断念しました。

そこである程度の手間はかかるものの手動で位置決めをするしかないという結論に至ります。 それも写真の枚数が増えると膨大な作業量となりますので、これを簡素化するために、写真撮影の際に次の条件を満たすように幼稚園の先生に事前にお願いしました。

  • ボードのサイズは写真全体の面積の1/4程度になるようにする。
  • ボードの位置は右上、右下、左上、左下、中央の5箇所の内のいずれかとする。

と、お願いし、幼稚園の先生もそれを意識して撮影はしれくれたのですが、どれも予定していた通りの場所にボードが写っておらず、うまく位置合わせができずの状態で、この手法は撃沈されました。

最終的に、手作業で写真毎にボードの位置情報を持たせることにより解決する方法に落ち着きました。 そのためのツールも別に作成しました。

ボード位置決めツール
ボード位置決めツール

1分おきに表示を変更する

これはいたって簡単で、JavaScriptのsetTimeout関数を用いて実現しています。

サーバ側では事前に時刻が載っている写真を作成するのではなく、アクセスがあった時に始めて時刻と写真を組み合わせます。 その際、写真はランダムに選択されます。 一度作成した時刻付の写真はサーバ側のキャッシュと呼ばれる場所に保存してあり、同じ時刻にアクセスが行われた場合にはキャッシュに保存している写真を送信します。 したがって、同じ時刻であれば、どの端末から誰が見ても同じ写真となります。

短大版 東海時計