近代以降、人は時間にしばられ、あるいは守られながら生活をするようになりました。 ここでそれが良いことだとか悪いことだとか考えるような詮無い事はしません。 今日は、私達の暮らしに欠かせない「時間」を測定する装置について考えていきたいと思います。

つまり時計である

時間を計測する装置、つまるところ「時計」と呼ばれる装置なのですが、 今あるアナログ時計のデザインに私達はあまりにも慣れ親しみすぎてしまいました。 なのでその存在からは一旦離れて、 改めて私達の生活に必要な「時間」を測る装置のデザインについて思いを馳せます。

なんでこんな事を考え始めたのか

VueでSVGベースのコンポーネントを試してみたかったからです。 ハワイの住人は非常に緩やかな時間感覚をもっていて、それは「ハワイアン・タイム」などと呼ばれるそうです。 常日頃時間に追われて生活していると、ふとそういう物に憧れをもつ事があります。 「大雑把な時間感覚で、ゆるく生きていきたい」と。

そこで、大雑把に時間を把握できるデザインの時計を考えてみようと考えました。

作ってみたサンプル達

そしてこちらが作ってみたサンプルです。 実用性等はあまり深く考えずに自由に、4種ばかり作ってみました。

• ArClock

サンプル1 : 比較的普通なそれ

普段目にするアナログ時計にかなり近いデザインです。 異なる点と言えば、針が円弧になり、時間を表す部分が12時間ではなく24時間単位、つまり1日で1周になる所です。

なぜ今あるアナログ時計が24時間ではなく12時間で1週なのかは詳しく調べていないのでわかりませんが、 12時間の方がぱっと見てより精細に時間を知ることが出来るのは確かです。 ですので、より大雑把にする為に24時間にしてみました。

サンプル2 : 波の様なそれ

このサンプルはちょっとお気に入りです。

時間部分のトータルが24時間になっているのはサンプル1と同様ですが、基点が朝の6時になっていて、右端からスタートします。 つまり、右の円弧は6時から18時までの「昼間」を表し、左の円弧は18時から翌6時までの「夜間」を表します。 右から左にしたのは、東から昇って西に沈む太陽をイメージしていたりします。

分と秒も一応なんとなく分かるようにはなっていますが、これは、あまりに動きがないとつまらないので付けたただの飾りです。 昼間/夜間のだいたい何時くらいなのかがわかれば良いというテーマの時計です。

サンプル3 : 週を意識したそれ

もっと大雑把にしてみました。一週を一つの単位として表現してみた時計（？）です。 月曜日を起点として、現在週のどの辺りなのかを大まかにあらわします。 今回作った時計（？）の中で最も動きの無い、面白みのない物となりました。

日曜日を中央に押し込んだ理由は3つあります。 1つ目は、Saturday と Sunday で “S” が続いて見づらいこと、 2つ目は、7だと360を割り切れないこと、 3つ目は、6ならばリボルバーの弾倉っぽくなるのでイメージとして採用してみようと思った次第です。 （しかし、調べたら7発装填のリボルバーも存在する様でした。 ナガンM1895 – Wikipedia ）

この7つの曜日が全て赤く染まる時、我々は月曜日の到来に恐れおののく事でしょう。

サンプル4 : 年を意識したそれ

さらに単位を大きくして、年にしてみました。 年輪をイメージしていますが、輪になってないしひとつの層は別に年じゃないでしょう？というのは野暮な突っ込みです。 むしろゼンマイをイメージしていると言った方が理解を得られるかもしれません。

このゼンマイ状の線は、現在が1年のどの辺りなのかを示しますが、 半径ではなく線分の長さであらわしている為、見た目と実際に感覚としてズレが生じるでしょう。 しかし、年始の一ヶ月よりも年末の一ヶ月の方が短く思えるのはわりと一般的な感覚のように思えます。 そんな錯覚も表現出来てしまう時計であります。

角層の塗りは60秒で終端にたどり着きます。 ちょっとした動きが欲しかったのと、ぐるぐる動いているのが楽しかったので付けてみました。

技術的な話

これらのサンプルは全てインラインSVGで作られていて、 パスは一部の物を除いてほとんど <path> の A コマンドで描画してあります。 動きはほとんど stroke-dash-array と stroke-dash-offset で実装されていて、アニメーションは全て transition です。

せっかく Vue で作ったサンプルなので <path>　の d 属性を直接書き換えてアニメーションを、とも思ったのですが、 頂点の数が変わると transition は効かないので他の方法をとりました。

SVGベースのVueコンポーネント

インラインSVGをベースにしたVueコンポーネントを今回試してみましたが、なかなか面白いものです。 <path> の描き方を理解すると大抵の物は描けますし、動的に操作する事も容易です。 例えばデータを渡してグラフを描画するコンポーネント実装などでその実力を大いに発揮しそうです。というか、まさにそういうケースで先日発揮しました。

そういった部品を実装しててふと思い出したのが ActionScript3 で作るFlashコンテンツで、非常に類似しています。 AS3でも受け取ったデータから Graphics クラスで動的に描画をするなどしていましたね。 あんなイメージです。

Netlify

Netflix とよく似ている為よくタイポしてしまいがちな Netlify にデプロイしてみました。

Netlify: All-in-one platform for automating modern web projects.
Build, deploy, and manage modern web projects

このサービスは、GitHub等のリポジトリサービスと連携して、そのリポジトリの指定したブランチにpushするだけでデプロイが完了するというお手軽なWebサーバーです。 それに加えて、様々な機能をご利用いただけます。

• ビルドコマンドをデプロイ前に実行してくれる
• Functions 機能で AWS Lambda にもデプロイできる
• Form 機能でフォームリクエストをハンドリングできる
• Let’s Encrypt によるSSL対応（独自ドメインが必要）

Lambdaと連携出来るので、開発コストはさておき大体の事は実現できそうですね。 今回はビルドコマンドの実行ぐらいしか活用していませんが、機会があればがっつり使ってみたい所存です。

まとめ

色々な時計を作ってみましたが、先に申し上げたとおり、実用出来る代物ではありません。 少なくとも、この国で今の生活をしているかぎりは…。