このたび、「icotile（アイコタイル）」が「第0回 HTML5プログラミング＆クリエイティブ コンテスト」で優秀作品に選ばれました。
このコンテスト、「第0回」とあるように今回が初めての試みで、スタッフの方は手探りでの運営だったのこと。いろいろと大変だったんじゃないかと思います。このようなチャンスと栄誉を頂きありがとうございました。
「HTML5」ってその定義がイマイチわかりにくいので、受賞のお礼も兼ねて、icotile のどのあたりが HTML5 だったかを簡単に説明したいと思います。
Web Storage (local storage)
icotile は、Twitter のフォローしている人／フォローされている人をタイル上にすべて表示して一覧性を高めています。初回の読み込みでは時間がかかりますが、一度読み込むと素早く表示されます。そして、アイコンをクリックするとその人の情報が素早く表示されます。
これは、取得した情報を Web Storage というブラウザ内の領域に保存し、情報が存在する場合にはこの中の情報を表示しているためです。いわゆる「キャッシュ」として利用しています。
Web アプリケーションなのにさくさく表示／操作できることを実現したかったため、icotile にとって Web Storage は重要な要素でした。これがなければ icotile は作っていなかったと思います。
ただ、ローカルのストレージとしては容量がちょっと少ない（5MB?）ので、もうちょっと増やしてもらい、かつバイナリデータも保存できるようになれば、アイコンの画像データもキャッシュできてよりサクサク動かせるのかなと思っています。この辺りの進化には期待しています。
Web workers
Web workers は、別ファイルの JavaScript をバックグラウンドで実行できる仕組みです。多分。ちょっと自信ありません。実は、あまりよく理解していないまま使っているので、これの効果が出ているかちょっと微妙です。
icotile では、UI 操作やアニメーション表示が JavaScript の処理にブロックされて操作感が失われることを防ぐために、長い処理が続くような JavaScript を外部のファイルにして、workers でバックグラウンド処理させています。いや、させようとしていました。
ところが、workers では DOM の操作や localStorage へのアクセスが出来ないので、実際に行っているのは XMLHttpRequest でのデータ取得だけとなってしまいました。XMLHttpRequest 自体がバックグラウンドで動作するので、実は全然効果がないんじゃないかと思っています（workers とのやり取りのコストの方が大きいかも）。この辺りは今後の課題です。
CSS3
CSS3 は HTML5 の一部ではないと思いますが、いろいろと便利に使っているので書いておきます。といっても、CSS まわりは @piyotori がメインで担当したので、アニメーションとかよくわかっていません。そのうち @piyotori がブログを書くと思うので、そちらを参照いただければと思います（Canvas についても）。
＜追記＞ @piyotori が重い腰を上げてブログかきました。「icotileのロゴデザインをしました -icotile のどのあたりが HTML5 なのか？ 番外編-」
僕が CSS3 で便利だと思ったのは、画像を使わずにボタンのデザインができたことです。たとえば「Following」ボタンは画像ではなく CSS でデザインされています。CSS でボタンを生成するサイトとかもあるので、Photoshop が苦手なエンジニアでもかっこいいボタンを簡単に作れます。また、画像の読み込み時間が減らせられたり、JavaScript でサイズや色を変えたりすることもできるので、CSS でのボタン描画はおすすめです。
また、box レイアウトで簡単に段組みが組めるあたりも便利でしたが、いくつか罠があり、この辺りはうまくまだ使いこなせていない感じです。
というような感じで、icotile は HTML5 の技術（と jQuery）を使ってデスクトップアプリケーションっぽい操作感を実現しています。実際はデスクトップアプリにはかなわないですが、これまで Web アプリよりは直感的で操作感のよいアプリケーションを作ることが HTML5 によって出来るんじゃないかと思います。
そもそも icotile を作るきっかけは、本業の UI デザイナーとして HTML5 を勉強しておきたかったためで、一応 UI に重点に置き開発を行いました。その結果、選考スタッフから、
説明を読まなくても理解しやすいUIをOpen Webテクノロジーをうまく使いこなして実現している点が高評価。デスクトップ・アプリに近いUIをOpen Webでも簡単に実現できることを証明する良い事例になる。
というコメントを頂きました。目指していたことを評価していただけたので、大変うれしかったです。
これまでの Web の UI は、ページの構成やレイアウト、その遷移が中心となっていましたが、よりインタラクティブな UI を HTML5 を使って実現できるようになったと思います。この icotile がその１つの事例として参考にしてもらえれば幸いです。