PR

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

2012年6月5日(火)
安田 陽

前回でお伝えしたように、シリコンバレーでは特に昨年あたりから「オープンな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)

株式会社レキサス

2000年にレキサス入社後、開発部、営業部、社長室を経て現在マーケティングチームに所属。2009年2月にリリースした音楽系iPhoneアプリがランキング2位に。現在は沖縄と東京、シリコンバレーを行き来しながら新ネタを日々妄想中。
ツイッターはこちら > @yoyasuda

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています