Lesson 03 HTML5を使ったWebアプリケーション事例紹介(後編) - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Webアプリケーション編

2011.10.20 THU

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

Webアプリケーション編

	Lesson 02			HTML5を使った Webアプリケーション事例紹介(後編)
	制作・文			外村和仁（ピクセルグリッド）

ここでは、HTML5の機能を使ったWebアプリケーションを紹介する。また、HTML5を使ったデモ的なアプリケーションや、機能をサポートしていないブラウザに対しては別の手法で代替えするフォールバックという方法で対応している例もある。

※前編はこちら

ふぉくすけの壁紙メーカー
http://wallpapers.foxkeh.com/ja/

ふぉくすけ壁紙メーカー【1】は、Mozilla Japanが提供しているWebアプリケーションだ。これはまるでFlashのような操作感で壁紙を作成できるWebアプリケーションで、「SVG」という技術で作られている。SVG というのはScalable Vector Graphicsの略で、ベクターデータを描画するマークアップ言語だ。HTML5 よりも前から存在している仕様だが、ブラウザの対応が進んだことや、HTML5 からSVG がHTML の中にインラインで記述できるようになったことをきっかけに最近注目を集め、HTML5の周辺技術として扱われることも多い。

SVGの最大の特徴はベクターデータなので、拡大しても劣化しないということだ。通常Web で使用するPNG やGIF、JPEGといった画像はビットマップ形式なので拡大するとどうしてもぼやけてしまう。それに対してベクターデータであるSVG は拡大しても劣化することがない。【2】は同じデータをSVG とPNG で書き出し、それぞれを同じ倍率で拡大したものだ。PNGがかなりぼけてしまっているのに対して、SVGは劣化せず表示されているのがわかる。Illustrator から直接書き出すことができるのもSVGの利点の一つだろう。Illustrator で書いたロゴをそのままSVGで書き出し、img要素やobject要素で指定することで簡単にWebサイトにSVGを表示することが可能になる。また、SVGはアニメーションやフィルターの機能もサポートされているので、Flashのような動的なアプリケーションを作成することも可能だ。

Internet Explorer 9 ではアニメーションなどの一部機能を除いてSVG に対応したが、Internet Explorer 8 以下のバージョンではサポートされていない。しかし、Internet Explorer 8 以下のブラウザは「VML（Vector Markup Language）」というSVGによく似た言語をサポートしており、これを使うことでSVGに近い機能を実現することが可能だ。

しかし、SVGとVML両方に対応するように書こうとするのはとても大変である。それを解決するのが「Raphael.js（http://raphaeljs.com/）」というJavaScript のライブラリだ。Raphael.js を使えば、ブラウザがInternet Explorer 8 以下であれば「VML」、そうでないブラウザには「SVG」を使って描画してくれる。

Raphael.jsのサイトに数多くのデモが紹介されているので、これを見ればどのようなことが実現可能かがわかるだろう。Raphael.jsを使った実例として、日産リーフのサイトがある【3】。これもまるでFlashで作られたかのようなサイトだが、Raphael.jsを使って実装されている。

このように、SVGはすでにクロスブラウザでも使える技術なので、使える場面では積極的に使っていくといいだろう。

【1】ふぉくすけの壁紙メーカー(http://wallpapers.foxkeh.com/ja/)

【2】拡大するとPNGがかなりぼけてしまっているが、SVGは劣化せず表示されている

【3】Raphael.jsを使った実例（日産リーフ）

Sketchpad
http://mugtug.com/sketchpad/

Sketchpad【4】はCanvas でつくられたペイントアプリケーションで、かなり多機能で細部まで作り込まれている。書いた絵をPNGで出力することも可能だ。CanvasはJavaScriptで描画する機能なので、このようなお絵かきアプリにはとても向いている。前述のSVGと機能が似ている部分もあるが、Canvasは「ピクセル」で描画するのに対して、SVGは「ベクター」で描画するという違いがある。これらはよく比較されることがあるが、どちらが優れているということはなく、使用する目的によって使い分けるべきである。

また、Canvas はこのようなお絵かきアプリケーションも得意だが、他にもグラフの描画やゲームなど、幅広く使うことができる。「jsdo.it（http://jsdo.it/）」というHTML/CSS/JavaScript のコードを共有できるサービスがあり、ここではCanvasを使った作品も多く投稿されているので一度見てみると面白いだろう。有名な作品だと、Flashでの作品を移植したパーティクル崩し【5】などがある。

このようにCanvas やSVGなどの技術を使うことで、これまでFlashが得意としてきたインタラクティブなアプリケーションを作ることが可能になる。もちろん、Flash はCanvas やSVG に勝るところが多々あるので、Flashの必要性がなくなることはしばらくはないだろう。

【4】Sketchpad(http://mugtug.com/sketchpad/)

【5】jsdo.it （パーティクル崩し）

Every Time Zone
http://everytimezone.com/

Every Time Zone【6】は各国の時間を見るWebアプリケーションだ。iPadなどの端末で見ることを前提にされているが、PCでもGoogle ChromeやSafariで閲覧できる。このアプリケーションはHTML5のApplication Cacheを使って、オフラインのときでも閲覧することが可能になっている。Application CacheはHTMLや画像などの静的ファイルをローカルに保存してキャッシュする仕組みだ。

Application Cache を実装するには「キャッシュマニフェスト」というファイルを作成し、そのファイルをHTML のhtml要素に指定する。キャッシュマニフェストに書いてあるファイルはローカルに保存され、キャッシュマニフェストのファイルが更新されるまではファイルをサーバに取りに行かずにローカルに保存したファイルを参照するようになる。そうすることで、一度キャッシュしたファイルであればオフラインでも見ることが可能になる。

Every Time Zoneのソースを例にとってさらに詳しく解説していこう。まずEveryTime ZoneのHTMLを見ると、html要素に【7】のように書いてある。ここで指定している「everytimezone.manifest」というのがキャッシュマニフェストだ。この中身は【8】のようになっている。

まずマニフェストファイルは「CACHE MANIFEST」という行から始める。そのあとに書いてある「/index.html」などがキャッシュするファイルを指定している部分だ。#から始まる部分はコメントと見なされるので、最後の「#v25」という部分は無視される。

Application Cache では、キャッシュしたファイルの更新には注意する必要がある。キャッシュしたファイルは更新されても、ローカルのファイルを参照し続けるので最新の状態にならない。キャッシュされたファイルを新しいものに更新するには、キャッシュマニフェストのファイルを更新する必要がある。たとえばEvery Time Zoneで、index.htmlが更新されたとしよう。しかし、index.htmlを更新しただけでは、更新する前にアクセスしていたユーザーは新しいindex.htmlを参照しない。そこで、everytimezone.manifestを更新する必要がある。キャッシュマニフェストが更新されると、ブラウザはキャッシュするファイルを最新のものに更新するので、ユーザーは最新のindex.html を見ることができるようになる。マニフェストファイルの変更は前と何かしら変更点があればいいので、バージョン情報を記載しておいてそれを更新するというのがいいだろう。上記の「#v25」もそのような用途で使われていると考えられる。

また、キャッシュマニフェストはMIMEタイプを「text/cache-manifest」にして配信する必要がある。使用しているサーバがApacheであれば、.htaccessに【9】のように書くといいだろう。

今後はモバイル端末なども増え、オフラインでアプリケーションが動くことが望まれるケースが多くなると思われるので、Application Cacheは今後のWebアプリケーション制作では重要な技術になるだろう。

【6】Every Time Zone(http://everytimezone.com/)

【7】

【7】

【8】

【9】

yubichizu
http://latlonglab.yahoo.co.jp/service/map.html

yubichizはYahoo!ラボからリリースされているiPadで使う地図アプリケーションだ。このアプリケーションは地図上のテキストをタップして詳細情報を表示したり、お店や場所を検索できるアプリだ。指で地図をなぞってその通り沿いを検索できる道沿い検索【10】、検索結果を見やすいサムネイル表示ができる機能【11】など、多機能な地図アプリケーションだ。

このアプリケーションはHTML5 のWebStorage を使って「状態の保存」、Application Cacheで「起動の高速化」、Geolocation APIで「現在地を取得する」などさまざまな機能を使って実装されており、HTML5 でのアプリケーションの利点をフルに活用したアプリケーションといえる。

また、yubichizuはiOSのフルスクリーンモードにも対応している。フルスクリーンモードとはSafariのツールバーが非表示になるなど、Web アプリケーションをまるでネイティブアプリのようにして起動することができる機能だ。フルスクリーンモードで起動するにはまず【12】のようなmetaタグをHTMLに記述する。

このmetaタグが記述してあるサイトをホーム画面に追加【13】し、ホーム画面から起動するとフルスクリーンモードで起動することができる【14】。フルスクリーンモードでは戻るボタンなどもなく、コンテンツ以外に表示されるのはステータスバー（iPhone、iPad 画面上部の時間や電池残量が表示されている部分）のみなので、画面領域を広く使えるなどの利点がある。フルスクリーンモードでは、【15】のようなmetaタグを書いておくとステータスバーの色を変更できるという特徴もある。

フルスクリーンモードでの注意点はリンクを押して遷移する際、すべて別ウィンドウでSafari が起動するので、アプリケーション内で画面遷移する場合はJavaScript で画面を書き変える必要があることだ。このように、Safariで立ち上げるときと比べて特殊な環境のフルスクリーンモードだが、使い方によってはWebアプリケーションをネイティブアプリにより近づけるための手段の一つなので覚えておくといいだろう。