semantic clock




埋め込みコードをコピー
URL



埋め込みコードをコピー
URL



埋め込みコードをコピー
URL



埋め込みコードをコピー
URL


使い方

シンプルなデジタル時計を作りました。
現在の時刻、日時、曜日を取得し、表示してくれます。
機能としては、普通の時計と変わりはないですが、利用方法に特徴があります。

googleマップやyoutubeでコードの埋め込みをしたことがある人は、想像がつきやすいと思います。
上記にある埋め込みコードの作成ボタンを押してください。
そうすれば、クリップボードに<object type="image/svg+xml" data="https://~~"></object>のようなコードがコピーされます。
そしてそのコードを好きなサイトに貼り付ければ、即座に反映されます。
画像ファイルやスクリプトファイルをダウンロードする必要はありません。

コードを埋め込む方法以外に、URLを活用する方法もあります。
上記のURLボタンを押してもらえば、別タブでデジタル時計が表示されるので、すぐにディスプレイ画面いっぱいに表示させたい、と言う時に便利です。
またデザイン面でも、あまり凝った作りにしていないので、色々なものに利用できるかと思います。

svgでの描画

今、現在主流な画像フォーマットとしてPNG,JPEG,GIF、そしてsvgが挙げられます。
ACTIVE-FRAMEにはSVGを活用していますが、先ほどの4つの中で、SVGが一番聞きなれないものだと思います。
おそらく、PNG,JPEG,GIFではSNSでの投稿も可能ですが、SVGはほとんど対応していないため馴染みがないのでしょう。

SVGはScarable Vector Graphics(スケーラブル ベクター グラフィクス)の略で、拡大しても荒れることのないベクターデータでできています。
また、特徴としてこの画像は、webコンテンツの利用に特化しています。
その理由としては、svg画像の作成に、webプログラミング言語を使うことができるためです。

SVGは主にXML(Extensible Markup Language)で記述され、それに加えてHTML,CSS,JavaScriptもまた組み合わせることができます。
普通はillustratorで作成するので、これら4つもの言語を使うことができるということはあまり知られていません。
フロントエンドエンジニアの方であれば、これだけ複数の言語を記述できるSVG画像にとても魅力と可能性を感じることでしょう。

semantic clockについて

今回、semantic clockを実装する上で行ったことをご紹介します。
まず、現在時刻の取得ですが、これはJavaScriptの標準機能から以下を用いました。

メソッド 取得値
getHours 時間
getMinutes
getSeconds
getMonth
getDate 日付
getDay 曜日

これらを使って簡単に取得することができます。
SVGでも問題なく動くことに最初は驚きました。
そして画像上のテキストが時間が進むごとに変わる仕組みですが、これはまた次回説明したいと思います。

semantic clockはACTIVE-FRAMEのコンテンツとして試しに作って見たものですが、想像よりはるかにSVGが幅広い技術に対応しており、可能性をすごく感じました。
JavaScriptで実装する時計のシステムはネット上にいくらでもありますが、これをSVGの画像として実装することで、得られるメリットはとても大きいです。
web上に上がっている便利なサービスはすでに飽和状態にあるので、これからは、既存のものからどう差別化を図るかが重要課題になりつつありますね。