HTML5が新しいWebの世界を創る

最近テック系のブログやニュースなどでHTML5を取り上げられることが多くなり、目にされた方も多いと思います。人気ブログの「Techwave」でも以下のような記事でHTML5に言及しており、その注目の高さが伺えます。

これらの記事の中で、HTML5をベースにしたWebアプリの可能性が非常に高く評価されており、今後のモバイルアプリの主流がネイティブアプリからWebアプリに移行すると予想されています。

そこで今回はこのHTML5およびWebアプリについて取り上げ、その可能性を探ってみたいと思います。

■ HTML5とは
最初にHTML5とはどういうものなのか簡単に説明したいと思います。HTML5は現在ほとんどのサイトで使用されているHTML4の次のHTML仕様にあたるもので、W3CWHATWGいう両団体が一緒になって策定しており、現在もその作業が続けられています(最終的な完成は2022年頃を予定)。
HTML5が生まれた背景には、Webが単なる文書の閲覧から、より高度なアプリケーションへと変化をしていく中で、今までのマークアップ言語という位置づけからアプリケーションのプラットフォームとして拡張すべきであるというブラウザベンダーや開発者の強いニーズがあります。したがってHTML5は従来のマークアップ言語としての仕様の見直しも行われていますが、加えてアプリケーションを開発する為のAPIや関連仕様が大幅に強化されているのが特徴です。

主な特徴としては以下のようなものがあります。

  • グラフィック機能の強化(Canvas / SVG / WebGL
  • マルチメディア機能の強化(Audio / Video) ※FlashPlayerなどのプラグインが不要
  • オフライン機能の強化(Web Storage / IndexedDB
  • キャッシュ機能の強化(Application Cache
  • マルチスレッド対応(Web Workers
  • 双方向通信機能の強化(WebSocket
  • ローカルファイルの操作(File API
  • 位置情報の取得(Geolocation API
  • input要素のtype追加(email / date / range / serach / tel / color / number

※動作を確認したい方はこちら ⇒ http://slides.html5rocks.com/

もっと詳しく知りたい方は以下のスライドが大変分かりやすく解説していますのでこちらをご覧下さい。
[iframe src=”http://www.slideshare.net/slideshow/embed_code/2480964?rel=0″ width=”425″ height=”355″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”]
 
■ HTML5はここまで出来る!
HTML5の機能を前段でご紹介しましたが、実際にどのようなものが実現可能となるのか興味をもたれた方も多いと思います。そこで、HTML5で作られたアプリをいくつかご紹介致します。

ペイントツール 「Sketchpad
[iframe width=”294″ height=”220″ src=”http://www.youtube.com/embed/XRoTLvhKJv8″ frameborder=”0″ allowfullscreen]

シューティングゲーム 「GWT Quake
[iframe width=”320″ height=”210″ src=”http://www.youtube.com/embed/XhMN0wlITLk” frameborder=”0″ allowfullscreen]

デジタルマガジン 「Aside HTML5 magazine
[iframe src=”http://player.vimeo.com/video/23445324?title=0&byline=0&portrait=0″ width=”400″ height=”225″ frameborder=”0″]

どうでしょう?一見するとFlashで作られているのかと見間違えるようなリッチなUIに驚かれた方も多いと思います。このように今まではFlashなどを使わなければ実現が難しかったようなことをHTML5を用いることによって実現することが可能になりつつあります。
さらに現在「DAP(Device APIs and Policy Working Group)」というワーキンググループがブラウザ経由でデバイスのネイティブ機能にアクセスするためのAPIの策定を行っています。どこまで実現するかは分かりませんが、将来的には電話帳、カレンダー、カメラなどの機能をJavascriptを使って操作できるようになると期待されています。

■ HTML5アプリ or Nativeアプリ?
モバイルアプリ開発者の関心事の一つとして「HTML5アプリを作るか、それともNativeアプリを作るか」というものがあるのではないでしょうか?2011/5に開催されたGoogle I/Oで「HTML5 versus Android: Apps or Web for Mobile Development? 」という同様の趣旨のセッションが行われました。以下に簡単にまとめてみたいと思います。

[iframe width=”350″ height=”226″ src=”http://www.youtube.com/embed/4f2Zky_YyyQ” frameborder=”0″ allowfullscreen]
資料:retomeier_html5_versus_android.pdf
 

HTML5アプリの利点
  • オープンな仕様であり、多くのデバイスに対応可能である。(現在は様々なデバイスがブラウザを標準搭載したり、Webビューを組み込むことが可能である)
  • 柔軟性に富んでいる。(HITML、CSS、Javascriptとそれぞれの役割がはっきり分かれておりコントロールしやすい。また、CSSを変えるだけで自由にデザインを変更でき、様々なアプリケーションへの水平展開が容易にできる。)
  • 多機能である。(位置情報や音声、マルチタッチなどのインプット機能、キャンバスなどのアウトプット機能、AjaxやWebSocketなどのネットワーキング機能、Web StorageやIndexedDBなどのオフライン機能が充実している。)
  • 広く支持された技術である。(ライブラリ、デバッグツール、コミュニティが充実している。)

 

Nativeアプリの利点
  • ハードウェアの機能に幅広くアクセスできる。(ハードウェアは常に進化しており、新しい機能が次々と搭載されている。)
  • システム機能と密接に連携できる。(システムのイベントを監視して起動するなどバックグラウンドでシステムと連携できる。)
  • 他のネイティブアプリとハイレベルな連携ができる。(それぞれのアプリが機能的に補完し合い、よりリッチなユーザー体験を実現する。)
  • ウィジット、ライブウォールペーパー、プッシュ通知などユーザーをアプリに誘導する仕組みがあり、より深いエンゲージメントが築ける
  • 動作が高速かつスムーズでリッチなUIを実現できる。

ちなみに、このセッションの中では最終的にどちらが良いという結論は出されず、Googleとしては「We do both.」というのが回答でした。いくらHTML5がリッチなコンテンツを提供できるとはいえ、Nativeアプリの方がより優れたUXを提供できるというアドバンテージを持っている以上、ユーザーのニーズに合わせて両者を選択するというのが現時点での解なのかもしれません。

■ Hybridという選択肢
前述したセッションではどちらが良いという結論は出されませんでしたが、それ以外の方法としてHybridという方法が提示されました。これは文字通りNativeアプリとHTML5を組み合わせたもので、Nativeアプリに組み込まれているWebビューなどを利用してWebページを表示し連携させる方法です。最近ではPhoneGapWorklightなどのサービスを利用してマルチプラットフォームに対応する事例も増えてきています。また、若干アプローチは異なりますが、TitaniumappMobiのようにHTML+Javascriptで作成されたプログラムをNativeコードに変換するサービスを利用する事例も増えてきています。今後HTML5アプリのマーケットは決済の仕組みも整備され規模も拡大していくと思いますので、このようなサービスを利用してNativeアプリに対応しつつ、今後到来するHTML5時代に柔軟に対応できるようにするということも一つの選択肢として視野に入れたおいた方が良いでしょう。

■ 本格的に始まったHTML5の流れ
このように今後ますます注目を集めるHTML5ですが、いち早くHTML5に対応するサービスもここ最近次々と出始めています。

また、各ベンダーもHTML5化に向けて様々な動きを見せているようです。

さらには、ディズニーがHTML5のゲームエンジン「Rocket Engine」を買収するなど興味深い動きを見せており、その注目の高さを感じさせます。

■ WAC2.0はHTML5がベースに
この他の注目の動きとして、各携帯キャリアの動きがあります。世界の主要携帯電話事業者が参加する、WAC(モバイル向けアプリケーションの共通化団体)が2011年2月に開催した「Mobile World Congress 2011」の中で、スウェーデンのエリクソンがWAC仕様のアプリケーションの配信ストアをクラウドベースで提供するのを皮切りに、ボーダフォン、米ベライゾン・ワイヤレス、AT&T、テレノア、オレンジ、中国移動など8事業者がWACストアを2011年内に開始する予定とのアナウンスがされました。WAC仕様のアプリケーションはゲームやSNSなど1万2000程度になるとのことです。
また、この会議の中でWAC仕様の今後のロードマップも示され、まずHTML5に対応したWAC2.0を2011年2月に公開、2011年9月には、HTML5とネットワークAPIを装備したWAC3.0をリリース予定とのことです(これによりキャリア課金や位置情報機能の利用が可能になる)。

■ HTML5が新しいWebの扉を開く
これまでHTML5のご紹介をしてきましたが、その可能性を感じて頂けたのではないでしょうか?私はこのHTML5が今までのWebの世界を飛躍的に変化させるのではないかと考えています。Webページはよりインタラクティブになり、クリエイティブなものへと変化していくでしょう。例えばStippleのようなイメージが近いのですが、あなたがあるコンテンツ(雑誌とかテレビとか)を見ていて、俳優さんが気になる洋服を着ていたとします。そしてその洋服をクリックすると洋服の詳しい情報が表示され、ワンクリックで購入できたり、友達に共有したりすることができる。友達が「いいね」をしていれば、「○○さんがいいねと言っています。」と表示される。そういった体験が当たり前になるのではないかと思います。最早そこに従来のような広告の概念はないかもしれません。
またエンタープライズの分野においても様々なアプリケーションがRIA(Rich Internet Applications)化していき、ブラウザがOSの時代になるのかもしれません(特にHTML5のオフライン機能に注目しています)。

以上、簡単ではありますが今回はHTML5の話題を取り上げてみました。この分野は非常に進化のスピードが速く、様々な企業の思惑もからんで予測が非常に難しくなっています。今後も何か動きがあれば記事にしていきたいと思いますので、何卒よろしくお願い致します。

(おまけ)
[iframe width=”392″ height=”220″ src=”http://www.youtube.com/embed/g7_mOdi3O5E” frameborder=”0″ allowfullscreen]
個人的には近いうちにこんな感じになるんじゃないかなと思っています。多分そこにはFacebookを使っているとか、何かのアプリを使っているという感覚はないのかもしれませんね。

プロフィール
本田 雄三(ほんだ ゆうぞう)
主にWeb系の開発を行っています。 「ソーシャルメディア」、「スタートアップ」、「スマートフォン」、「クラウド」関連の情報をちょっぴり技術寄りな視点で発信していきたいと思います。



この記事のタグ:


関連する記事

関連する記事は見当たりません…
プロフィール
本田 雄三(ほんだ ゆうぞう)
主にWeb系の開発を行っています。 「ソーシャルメディア」、「スタートアップ」、「スマートフォン」、「クラウド」関連の情報をちょっぴり技術寄りな視点で発信していきたいと思います。