囲まれた庭からの脱却を目指すアプリ開発第2回

スマホアプリ開発にも役立つHTML5の8つの技術

前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。今回はスマートフォン向けアプリケーション開発の観点

安田陽

2012年6月5日 20:00

前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンなWebの技術でスマートフォン向けアプリを開発」という動きが強くなってきています。そして、オープンなWebの技術を語るときに欠かせない存在のひとつとしてHTML5が挙げられます。

今回はスマートフォン向けアプリケーション開発の観点からHTML5をおさらいしてみましょう。

1. HTML5の8つの特徴的な技術

HTML5には「セマンティックス」「オフライン＆ストレージ」「デバイスアクセス」「コネクティビティ」「マルチメディア」「3D、グラフィックス、エフェクト」「パフォーマンス＆インテグレーション」「CSS3」という8つの特徴的な技術があり、各技術を表すロゴも決められています。

図1：HTML5ロゴに関するW3CのWebサイト

以下では特に、これら8つの技術を使うとスマートフォン向けWebブラウザで何ができるのかについて、簡単に振り返ってみたいと思います。

1）セマンティックス

HTML5ではこれまでと同じくタグを使ってWebページを組むことができますが、文書構造を明確に定義するための新たなタグが追加されています。これまで、適切な要素がない場合は

を使うことが多かったと思いますが、HTML5では文書内の要素のそれぞれの役割に応じて、例えば

、

といったタグを使うことで、Webブラウザや検索エンジンに対してより明確にそのページの文書構造を伝えることができるようになります。なお、HTML5のタグについては多くのサイトや書籍で詳しく解説されていますのでご確認いただければと思います。

表1：HTML5のタグを利用したページ記述方法の例

これまでの記述方法	HTML5タグを利用した記述方法

2）オフライン＆ストレージ

Webサイトでユーザーのデータを保存する方法としては、これまではサーバ側に保存する仕組みを設けるか、クッキーを使うしかありませんでした。しかしHTML5では、ブラウザ内にデータベースを持つことができるようになっており、これまでのクッキーによるデータ保持方法に比べ大幅に機能強化されています。

ここではiOSとAndroid OSでの利用を前提とし、以下2つの方法についてご紹介したいと思います。

2-1）Web Storage

Web Storageは、キーと値のペアで使えるシンプルで非常に便利なオフラインストレージの方法で、ブラウザを終了するとデータが消える「セッションストレージ」と、ブラウザが終了してもデータが残る「ローカルストレージ」の2種類があります。このWeb Storageを使うことで必要なストレージ機能の多くはカバーできると思われますが、構造化されていなかったり、データベーストランザクションの概念がない、という側面もあります。

2-2）Web SQL Database

Web SQL Databaseは端的に言うと「ブラウザに搭載されるSQLデータベース」です。実装部分はSQLiteが基になっており、従来のデータベースの特長そのものを受け継いでいるため、リレーショナル構造やトランザクションもサポートされています。なお、Web SQL Databaseは現状iOSやAndroid OSで使用することはできるのですが、HTML5の仕様から外れることがすでに正式に決定、将来に亘りメンテナンスされないことがW3Cから発表されています
→参照：Web SQL Database（W3C）