WebKit Clock - HTML5 canvas, CSS3, Web Fontsでつくる
なんだかただの告知板の様になってしまっているこのブログですが、今回もプチコンテンツの告知です。HTML canvas, CSS3, Web Fonts, SVG, JavaScript を使い、世界時計 "WebKit Clock" をつくりました。外部リソースは除き、画像ファイルを一切使わないというルールのもとやってみた。その名の通りWebKitブラウザ対応ですのでSafariかGoogle Chromeをご用意くださいませ。
きっかけは、@spiralstairsさんの制作された "iOS Icons in Pure CSS" を拝見して。これはiPhoneでおなじみのアップル純正アプリアイコンをWebKitのCSS3のみで描画したというコンテンツですが、時計アプリアイコンがなかったので、では自分で描いてみようと思ったというそれだけの理由です。
結論としては時計アプリアイコンの描画はCSSだけではどうしても表現出来ない部分があって、部分的にSVGを使用した。その部分とはズバリ時計の長針と短針。CSSで三角形を表現することは可能ではあるのですが、この手法だと少なくともWebKitではエッジにアンチエイリアスが適用されないため時計の針という最も重要となるパーツのクオリティとしては不適当と判断した。SVGにしたことでエッジがスムーズかつ回転させてもビットマップ画像のようにぼやけてしまうことのないシャープな輪郭を維持することが出来ました。
構造としては見た目にもすっきりしたアイコンだけあって特に難しいことはなく非常にシンプル。この記事をWebKitブラウザでご覧いただいている方は下の実サンプルにマウスオーバーするとレイヤー構造が見られます。
その後、ちょっとだけと言いつつ時計よりよっぽど手間を加えて世界時計に。都市名をクリックするとその都市の位置が地図上にフォーカスされ時間が表示されというなんの変哲もない機能ですが、平面のものは既に沢山あるようですしせっかくHTML5なのでcanvasを使い球面上に配置することで地球儀にしてみました。ふだんウェブではGoogleマップなどメルカトル図法の地図ばかり見ているので、都市間の位置関係がちょっと新鮮。
canvasに描画する地図データは正確にはGeoJSONという緯度・経度を収録したポイントデータです。このデータはこちらのサイトで公開されているほか、さらに元となったオリジナルはthematicmapping.orgで配布されているのですが、いずれも海岸線のデータではなく200ヶ国を超える国々の輪郭線（海岸線と国境線）を収めた巨大なものです。軽量化のためポイントを間引いたデータではあるものの数にして8,000ポイント以上あり、canvasへの描画処理時にはポイント毎に球面上における位置を算出し・パスでつなぎ・内部を塗るという処理をしています。地球儀を回転させる際には15ミリ秒ごとに全て描画し直すという命令を送っている重量級の処理となるため、かなりのCPUリソースを使用してしまいます。なのでiPadやiPhoneでは残念ながら実用的な速度では動作しません。海岸線のみの、もっと計量なGeoJSONデータが手に入れば格段に速度向上が見込めるはずで、最近探していたのはそういった訳でした、はい。どなたかご存知ないですかね。。
いまのところサマータイムには対応できていないのですが、そんなところまでオリジナルの時計アプリにそっくり！というのは冗談で、来年の夏が来る頃までには対応させるという気長でそして忘れちゃうかもしれない予定です。
ちなみに本日Googleが世界各地の現在時刻を表示させる機能のリリースをしたりして少し涙目。WebKit Clockは #easterisland のようにハッシュを付ければリストにある都市の時刻は表示できます。。
