Chrome+HTML5 Conferenceのプログラム のうち、本稿ではプログラマーセッションの後半の2講演についてレポートします。
前半の講演 に引き続き、HTML5を中心にしたプログラマー向けの内容となりますが、後半の2講演はより実践的な内容となっています。HTML5をどう活用しているのか、また活用するにあたっての考え方など、事例をベースにした講演となっています。
長山武史さん、外山真さん「Webアプリの道も一歩から ～はてなブックマークの場合～」
株式会社はてなのはてなブックマークは今年5月にChrome Web Store向けのウェブアプリ「はてなブックマーク」をリリースしました。そのはてなブックマークアプリにおいて、どのようにHTML5のAPI活用し、どういったフローで開発したのかを、担当ディレクターの長山武史さん、開発者の外山真さんに講演いただきました。なお、講演資料はこちら で公開されています。
まずは長山さんより、はてなブックマークというサービスの概要から、はてなブックマークアプリの紹介、そして開発フローについてお話いただきました。
開発フローの初期は、アイディアのラフスケッチを行なって、紙にアイディアを書き出していきます。その後、まとまったアイディアを清書しつつ画面仕様に落としこみ、今回はウェブアプリなので、ウェブアプリらしさを意識しながらアイディアを磨いていったとのことでした。ウェブアプリらしさについては、Googleの指針 を参考にされたそうです。
そうしてできあがったアイディアをベースに、デザイン（外観）とプロトタイプ（機能）を開発していきます。デザインと機能を組み合わせてできあがったものをチェックして、再びアイディア・計画を練り直し、開発に戻るというサイクルを繰り返してアプリの完成度を高めていったそうです。また、ある程度完成してきた段階のアプリを社内向けに公開して、そこで意見を募る仕組みなども用意されているとのことでした。
続いて、外山さんより、実際の開発において手法や使用したHTML5のAPIなどについて解説いただきました。
アプリケーション全体の設計ではいわゆるMVCを意識して、サーバー側のAPIをモデル、ユーザーへの表示をビュー、ユーザーのアクションをコントローラー（いわゆるブラウジング）としたアーキテクチャをベースに開発を進めたそうです。
はてなブックマークアプリは、Google Chrome専用のウェブアプリであるため、HTML5のAPIやCSS3などを積極的に取り入れた実装となっています。Ajaxでページ遷移をさせずにスムーズにコンテンツを切り替えつつ、HTML5のHistory APIを活用してURLから画面を再現できるように実装したり、CSS3のFlexible Box LayoutやCSSグラデーション、CSS Transitionsなどを使って多彩な表現を実現したりと、最先端の技術を有効に活用しているそうです。まだまだ事例の多くないHTML5を最大限に活用した稀有なケースと言えるでしょう。前述の資料ではサンプルコードを含めて解説されていますので、ぜひご覧いただければと思います。
太田昌吾さん「実践・ウェブアプリ高速化テクニック」
続いての講演は筆者太田昌吾 と（私の体調不良のため）急遽代理スピーカーをお願いした小松健作 さんで、ウェブアプリの高速化についてお話させていただきました。講演資料はこちら にて公開しています。
高速化というとプログラミングのテクニックに注目してしまいがちなところがあるかと思います。今回はもっと大きな目線での高速化についてお話ししました。ウェブアプリにおいて大切なのはユーザーが快適にウェブアプリを利用できること、いわゆるUser Experienceが非常に大切です。数msの速さを比べるような小手先のテクニックで高速化をしても、ユーザーが速さを体感できなければ意味がありません。ユーザーに速いと感じさせるためのテクニックが本講演の主題となります。
ウェブアプリにおける高速化では、通信の高速化（削減）と処理速度の高速化の2つが鍵となってきます。こういった高速化のテクニックは古くから研究が進んでおり、オライリー社の『ハイパフォーマンスWebサイト』 、『 続・ハイパフォーマンスWebサイト』などの書籍でそれらを知ることができます。
さて、ウェブアプリには通信が必須なので、通信を高速化（もしくは通信量を削減）するためにgzipやCSSスプライトといったテクニックがあります。また、HTML5ではApplicationCacheやlocalStorageなどでファイルをキャッシュして通信を減らすことなどが可能です。ただし、ApplicationCacheは動的なコンテンツに弱く、動的なコンテンツ向けのキャシュ手法としてlocalStorageを使った方法が有効です。
また、処理速度を高速化するというアプローチについては、前述のとおり数msの速さの高速化ではなく、ユーザーに速いと感じさせるテクニックが重要です。具体例を挙げますと、Gmailのスター（重要なメールをチェックする機能）では、スターアイコンが押された時、その瞬間に押された状態にアイコンを変化させています。サーバーからのレスポンスを待たずに、ユーザーには押したという結果を見せています。高速であるように見せる、有効なテクニックの1つです。
さて、そういった高速化のテクニックは数多くありますが、これらのテクニック・ノウハウはウェブアプリのソースコードやアプリを支えるインフラなどを複雑なものにしてしまいがちです。ApplicationCacheにしてもキャッシュの定義を管理するコストは小さくありませんし、CSSスプライトなどはHTML、CSS、JavaScriptどれも複雑にしてしまうでしょう。
これらの管理コストが増大すると、より画期的な高速化やその他の改善に着手しにくい環境ができてしまいます。そして一度手を入れにくくなった環境は、そう安々とは開発しやすい環境に戻すことはできなくなってしまいます。ちょっとした改善をあえて我慢して、ウェブアプリをシンプルに保ち、ベストだと思えることに集中することが大切です。Good is the Enemy of Great（「 いいね」は「すごい！」の敵）となってしまうのです。この考えは高速化のみならず、開発全般に当てはまるはずです。
「HTML5パネルディスカッション」
プログラマートラック最後のセッション「HTML5パネルディスカッション」は、後日別記事で掲載される予定です。
