|
Webデザイン |
 |
| Lesson01 | スマートフォンにおける HTML5の対応状況 |
| 制作・文 | 樋山 淳 |
| スマートフォンの利用率は急激に伸びてきている。ここでは、スマートフォン対応Webページを制作する際に必須の技術となるHTML5の対応状況を重要な機能に絞って解説しよう。 |
スマートフォン用サイトに
必須となるHTML5
スマートフォン向けのサイトを構築する上で検討しなくてはならないのがHTML5＋CSS3である。
HTML5に関してはこれからのPC向けWebサイトの構築においても必須となる技術であり、PC、スマートフォンともにここ数年間、一番のトレンド技術になることは間違いないだろう。ここではHTML5＋CSS3でどのようなことがスマートフォンでできるか、どのような問題があるかを見ていこう。
HTML5に関してはこれからのPC向けWebサイトの構築においても必須となる技術であり、PC、スマートフォンともにここ数年間、一番のトレンド技術になることは間違いないだろう。ここではHTML5＋CSS3でどのようなことがスマートフォンでできるか、どのような問題があるかを見ていこう。
スマートフォン向けの
エンジンが普及の決め手
スマートフォン対応サイトでHTML5＋CSS3がここまで普及しているのは、ブラウザに搭載されているエンジンが重要な役割を担っている。
現在、スマートフォンの主流となりつつあるiPhone、Android、そして最近のBlackBerry に搭載されているブラウザのエンジンにはWebkitが採用されている。
Webkitは元々KHTMLと呼ばれるWebエンジンを元に、Appleが整備してきたWebブラウザ用エンジンであり、ACID Test（http://www.acidtests.org/）では他のブラウザエンジンに比べて良好なテスト結果を示している【1】。
現在はオープンソースプロジェクトとして公開され、Appleだけでなく、Googleや他の企業も開発に参加している。
また、当初からHTML5＋CSS3をいち早く取り入れており、スマートフォン市場では圧倒的なシェアを持つブラウザ用エンジンといえるだろう。
【1】「http://webkit.org/」でWindows、OSXのバイナリーと開発用ソースが公開されている
現在、スマートフォンの主流となりつつあるiPhone、Android、そして最近のBlackBerry に搭載されているブラウザのエンジンにはWebkitが採用されている。
Webkitは元々KHTMLと呼ばれるWebエンジンを元に、Appleが整備してきたWebブラウザ用エンジンであり、ACID Test（http://www.acidtests.org/）では他のブラウザエンジンに比べて良好なテスト結果を示している【1】。
現在はオープンソースプロジェクトとして公開され、Appleだけでなく、Googleや他の企業も開発に参加している。
また、当初からHTML5＋CSS3をいち早く取り入れており、スマートフォン市場では圧倒的なシェアを持つブラウザ用エンジンといえるだろう。
【1】「http://webkit.org/」でWindows、OSXのバイナリーと開発用ソースが公開されている
マルチメディア対応と
フォーマットの問題
スマートフォンとHTML5を語る上で切っても切り離せないのが、<audio>タグと<video>タグだ。
近年、スマートフォン向けの動画サービス市場が本格的に立ち上がり始めている【2】。
しかし、順風満帆に見えるオーディオ、ビデオ対応だが、ここに来てそのフォーマット問題で揺れている。
オープンソース系のサポートを推進したいGoogle、Firefox陣営と、H.264に代表される有料のフォーマットを推進するApple、MSなどの陣営とで次期HTML5対応ビデオフォーマットを何にするかで割れているためだ。
HTML5のドラフトが2008年に公開されてから、何度かこのフォーマット問題が話し合われているが、いまだに具体的な解決案が出てきていない。
特に2010年になってからは、GoogleがWebMというロイヤリティフリーの動画フォーマットを発表したが、知的財産権などに問題があるとの指摘もあり、WebMが標準的な動画フォーマットになるかはまだわからない。
また、問題となっていたH.264の有料化に関しても、フリーの動画に関してはライセンスを徴収しないというアナウンスがされたりと、事実上H.264陣営とWebM陣営という二つのフォーマットで真っ二つに割れているといえる。
ただし、現状ではオーディオフォーマットではAAC、ビデオフォーマットではH.264を利用していればスマートフォンの対応は問題ない。
【2】YouTubeのサイト。いち早くHTML5での動画サービスに対応した
近年、スマートフォン向けの動画サービス市場が本格的に立ち上がり始めている【2】。
しかし、順風満帆に見えるオーディオ、ビデオ対応だが、ここに来てそのフォーマット問題で揺れている。
オープンソース系のサポートを推進したいGoogle、Firefox陣営と、H.264に代表される有料のフォーマットを推進するApple、MSなどの陣営とで次期HTML5対応ビデオフォーマットを何にするかで割れているためだ。
HTML5のドラフトが2008年に公開されてから、何度かこのフォーマット問題が話し合われているが、いまだに具体的な解決案が出てきていない。
特に2010年になってからは、GoogleがWebMというロイヤリティフリーの動画フォーマットを発表したが、知的財産権などに問題があるとの指摘もあり、WebMが標準的な動画フォーマットになるかはまだわからない。
また、問題となっていたH.264の有料化に関しても、フリーの動画に関してはライセンスを徴収しないというアナウンスがされたりと、事実上H.264陣営とWebM陣営という二つのフォーマットで真っ二つに割れているといえる。
ただし、現状ではオーディオフォーマットではAAC、ビデオフォーマットではH.264を利用していればスマートフォンの対応は問題ない。
【2】YouTubeのサイト。いち早くHTML5での動画サービスに対応した
まだまだ発展途上な
Canvas機能
HTML5の機能でもっとも注目を集めているのがCanvas機能だろう。
Canvas 機能はJavaScript だけで描画が行える。従来Flashを用いなければできなかったWeb上での描画機能が、このCanvas 機能によってある程度は再現できるようになる。
Canvas 機能はJavaScriptと組み合わせることによって、【3】のような多彩な機能をスマートフォン上で提供することができる。また、Canvas にテキストを描画するCanvas Textは最近までiPhone、Androidともに実装されていなかったが、どちらもOSのバージョンアップによって対応された。
さて、一見すると良いことずくめに見えるCanvas機能だが、やはり対抗馬となるFlashと比べると、描画スピードにまだまだ問題があるようだ。
Yasunobu Ikeda氏（http://clockmaker.jp/blog/）がブログ上でCanvasとFlashとで描画スピードの比較テストを公開している（http://clockmaker.jp/blog/2010/10/canvas_js_demo/）。このテストでは、CanvasとFlashを用いた3Dのデモで、Flashの方が描画スピードが速かったという結果が出ている【4】。
また、Flash環境ではAdobe Flashという統合型開発環境が用意されており、誰でも気軽に開発できるが、Canvasにはそのようなオーサリングツールがまだ存在しない。
この問題が、スマートフォンにおいてCanvasがまだ普及しない根幹的な原因であり、早急な対応が望まれている。
【3】Canvas 機能でできることをよく見てみると、Flashでできることとかなり重複することがわかるだろう
【4】Youtube上（http://bit.ly/fNxd6z ）で公開しているCanvasとFlashの描画テスト
Canvas 機能はJavaScript だけで描画が行える。従来Flashを用いなければできなかったWeb上での描画機能が、このCanvas 機能によってある程度は再現できるようになる。
Canvas 機能はJavaScriptと組み合わせることによって、【3】のような多彩な機能をスマートフォン上で提供することができる。また、Canvas にテキストを描画するCanvas Textは最近までiPhone、Androidともに実装されていなかったが、どちらもOSのバージョンアップによって対応された。
さて、一見すると良いことずくめに見えるCanvas機能だが、やはり対抗馬となるFlashと比べると、描画スピードにまだまだ問題があるようだ。
Yasunobu Ikeda氏（http://clockmaker.jp/blog/）がブログ上でCanvasとFlashとで描画スピードの比較テストを公開している（http://clockmaker.jp/blog/2010/10/canvas_js_demo/）。このテストでは、CanvasとFlashを用いた3Dのデモで、Flashの方が描画スピードが速かったという結果が出ている【4】。
また、Flash環境ではAdobe Flashという統合型開発環境が用意されており、誰でも気軽に開発できるが、Canvasにはそのようなオーサリングツールがまだ存在しない。
この問題が、スマートフォンにおいてCanvasがまだ普及しない根幹的な原因であり、早急な対応が望まれている。
【3】Canvas 機能でできることをよく見てみると、Flashでできることとかなり重複することがわかるだろう
【4】Youtube上（http://bit.ly/fNxd6z ）で公開しているCanvasとFlashの描画テスト
Geolocationを使った
位置情報
HTML5における位置情報確認（Geolocation API）はPCよりもスマートフォンでより利便性の高い機能といってもよいだろう。
Geolocation APIを利用することにより、GPS機能を持ったスマートフォンでは自身の位置情報を緯度経度により観測でき、そのデータを元にGoogleマップに代表される地図情報サービスを使って自身の位置をマップ上に表示できるようになる。
Geolocation APIには【5】のような多彩な機能がある。このような機能を利用しているサービスの代表といえば、いわずと知れたGoogleマップだ。
Googleマップでは、スマートフォンのブラウザ上においても位置情報を取得し、自身の位置をGoogleマップ上で表示することができる【6】。
【5】これらはiPhoneでもAndroidでも利用できる一般的な機能である
【6】iPhoneのSafari上で表示したGoogleマップ。位置情報を確認するダイアログが表示される
Geolocation APIを利用することにより、GPS機能を持ったスマートフォンでは自身の位置情報を緯度経度により観測でき、そのデータを元にGoogleマップに代表される地図情報サービスを使って自身の位置をマップ上に表示できるようになる。
Geolocation APIには【5】のような多彩な機能がある。このような機能を利用しているサービスの代表といえば、いわずと知れたGoogleマップだ。
Googleマップでは、スマートフォンのブラウザ上においても位置情報を取得し、自身の位置をGoogleマップ上で表示することができる【6】。
【5】これらはiPhoneでもAndroidでも利用できる一般的な機能である
【6】iPhoneのSafari上で表示したGoogleマップ。位置情報を確認するダイアログが表示される
その他の機能
スマートフォン上ではこれら以外にも【7】のようなHTML5の機能が利用できる。まだ現状では対応していないWebアプリケーションにおけるマルチスレッド機能なども追加されていくことだろう。
【7】ここで紹介している以外も、これから機能が拡張され、より自由度が高くなるだろう
【7】ここで紹介している以外も、これから機能が拡張され、より自由度が高くなるだろう
