Tweet

第1回 Webの3つの問題を解決する「HTML5」とは何なのか

HTML5が解決する、Webの“3つ”の問題とは

　HTML5は、Webにとって計り知れないほど大きな意義を持つバージョンアップです。なぜなら、これまでのWebが抱えていたさまざまな問題を一挙に解決しようとする、とても意欲的なバージョンとなっているからです。

　では、それらの問題とはどのようなもので、HTML5はそれらをどう解決しようとしているのでしょうか。

□ 【問題1】Webブラウザ間の互換性が低い

　最初に挙げられるのは、Webブラウザ間の互換性の低さです。あるWebブラウザでは正常に動作するHTML/CSS/JavaScriptなどでできたWebプログラムが、ほかのWebブラウザでは動作しないというのは日常茶飯事です。

　この問題の原因をひと言でいうなら、「仕様と実装が乖離（かいり）している」のが理由だといえるでしょう。仕様があいまいだったり、そもそも標準化されていない仕様だったり、さらにはWebブラウザが仕様に従っていなかったりと、仕様と実装の乖離はさまざまな原因から起こります。

→ 【解決】Webブラウザ間の互換性を向上させる

　HTML5では、この問題を解決すべく、「すでにWebブラウザが実装している機能を詳細に分析し、そこから仕様を抽出する」という作業が広範にわたって行われました。これにより、既存のWebブラウザが備えている機能には「標準に準拠」しているというお墨付きを与えられます。

　その仕様に従ったプログラムを書けば、どのWebブラウザでも動作する可能性が高くなり、Web開発者／デザイナにとって大変喜ばしいことになります。さらには、今後その機能を実装しようとするWebブラウザベンダにとっても、文書化された仕様が存在するので、実装が非常に楽になります。

□ 【問題2】文書内に埋め込まれた「意味」が不明確

　次に挙げられる問題としては、「以前のHTMLは、文書構造の「意味」を表すための機能が不足していた」ということが挙げられます。

　例えば、「見出し」「本文」といった文書構造を表すのに、これまでは<div>要素を用いることが一般的でした。しかし、<div>要素は厳密にいうと「意味を持たない」という意味の要素です。<div>が多用されたHTML文書は、開発者が目で見て読むのであれば、文書構造の意味を把握することは容易かもしれません。

　しかし、例えば検索エンジンやスクリーンリーダーなどのプログラムにとっては、「どこからどこまでが重要な本文なのか」「この<ul>要素はナビゲーションメニューを表しているのか、文書中の個条書きなのか」すらも分からないのです。

→ 【解決】文書内に埋め込まれた「意味」を明確にする

　HTML5では、この問題に対処するため、数多くの意味的要素（「セマンティックな要素」と呼ばれます）が追加されました。それだけではなく、Web文書のアクセシビリティ（障害を持つ人々にとっての扱いやすさ）を向上させるための仕様（WAI-ARIA）や、文書中に埋め込まれたデータの意味を明示するための仕様（Microdata）など、さまざまな周辺技術との統合も果たされています。

□ 【問題3】Webアプリの機能が制限されている

　最後に挙げられる問題は、Webアプリ関係の機能が貧弱だったことです。Webアプリは、インターネットからダウンロードされてそのまま実行されるという性格を持つため、ユーザーのセキュリティを脅かすような機能は制限されてしかるべきです。

　しかし、それを差し引いても、従来のWebアプリにできることはあまりに貧弱でした。何せ、アップロードするファイルを選択する際、複数のファイルを同時に選択することすらできなかったのです！

→ 【解決】よりリッチなWebアプリを構築可能にする

　こうした機能の貧弱さを補うべく、現在さまざまなAPIが新たに提案されています。Webブラウザによる実装も急ピッチで進められており、「Webアプリだから不可能」といわれる機能は、近い将来かなり限られたものとなることでしょう。

今後は、HTML5“とか”の有用な使い方を紹介

　こうして見てきたように、HTML5はWebが抱える問題を次々に克服し、Webを次のステージに進めようとしています。近い将来、「どんなUI（ユーザーインターフェイス）でもHTML5で書くのがアタリマエ」という時代が来るかもしれません。

　それほど意義のあるバージョンアップなだけに、HTML5の仕様は膨大で、さらにいまも進化を続けています。こうした流れの速さは、少なくとも今後1、2年は収まることがないでしょう。

　本連載では、「HTML5や、その周辺技術は何を可能にするのか」という切り口から、以下のようなテーマについて語っていきたいと思います。

• HTML5マークアップ
  • HTML5の記述方法
  • セクション関連要素
  • 強化されたフォーム要素
  • ルビ
  • IFrameのサンドボックス化
  • メニューとコマンド
  • ……
• HTML5関連API
  • ビットマップグラフィックを操作する（Canvas要素）
  • ベクタグラフィックを操作する（SVG）
  • 動画・音声を再生する（Video/Audio要素）
  • オフラインWebアプリケーションを実現する
  • クロスドメイン通信を実現する
  • ローカルストレージを利用する（Web Storage、Indexed Database API）
  • バックグラウンド処理（Web Workers）
  • サーバプッシュを実現する（Server-Sent Events）
  • ソケット通信を実現する
  • ファイルの読み書き（File API/File Writer API）
  • 位置情報取得（Geolocation）
  • 情報を通知する（Web Notification）
  • パフォーマンスを測定する（Web Timing、Resource Timing）
  • モバイルデバイス用のAPI
  • ……
• CSS3関連
  • CSS3セレクタ
  • CSS Transitions
  • CSS Transforms
  • CSS Animations
  • Webフォント
  • メディアクエリ
  • ボックスレイアウト
  • ……

　ただし、WebブラウザによるHTML5の実装がまちまちであるという現状も加味して、「広く使える」機能を優先して紹介しようと考えています。従って、記事の順序はこのとおりになるわけではありません。

　次回は連載の初回ということで、HTML5の基本的な記述方法や文法についてお話したいと思います。お楽しみに！

■ ＠IT関連記事

HTML5が拓く新しいWeb 新たなアプリのプラットフォームとなるHTML5に対してWebブラウザベンダの取り組みを聞くインタビュー 「デザインハック」コーナー

HTML5で何が変わる？ InfoTalk#17 フォトレポート Development Photography（6）　HTML5で、アプリとWebの関係は、JavaScriptはどう変わる？ コネクティ若狭氏＆サイボウズ・ラボ竹迫氏が登壇した勉強会をレポート 自分戦略研究所 > 自分戦略研究室 2010/4/19

D89Web標準HTMLタグリファレンス Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。Web標準のタグリファレンスを7回連載でおさらいします 「デザインハック」コーナー

いまさら聞けないCSS／スタイルシート入門 Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー

D89 CSS/スタイルシート リファレンス辞典 無数にあるCSS/スタイルシートのプロパティを大まかに分類し、1つずつ正しい使い方を紹介しながら、リファレンス辞典を完成させていく連載です。コードサンプルやDOMの指定方法まで丁寧に説明します 「デザインハック」コーナー

初心者のためのJavaScript入門 JavaScriptで本格的なプログラミングの世界へ。実用的なアプリケーションを作れるようになるまで 「Coding Edge」フォーラム

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

Webブラウザ別CSSハック＆フィルタTips Webブラウザの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのさまざまなCSSハック＆フィルタTipsをお届けします 「デザインハック」コーナー

Webブラウザ非互換性の温床となったのは何か？ AcidテストとWebブラウザの仕組み（前編）　IE8.0やFirefox3.0の出現で、注目されるWebブラウザ。いまこそ、復習しよう。Webブラウザの非互換性の発生源を探ろう 「リッチクライアント ＆ 帳票」フォーラム 2008/7/3

Webブラウザ標準適合性のわなとAcidテストの正体 AcidテストとWebブラウザの仕組み（後編）　1つのWebページを開くだけで100項目のWebブラウザの標準適合性が検証できるAcidテスト。Acidテストの正体に踏み込む 「リッチクライアント ＆ 帳票」フォーラム 2008/7/31

白石俊平（@Shumpei） Google API Expert（HTML5） HTML5開発者コミュニティ「html5-developers-jp」管理人 株式会社オープンウェブ・テクノロジー 代表 HTML5関連でいろいろ活動中。いまはHTML5をビジネスに活用すべく、日々奮闘中です。第1弾サービス、「DaVinciPad」は順調に稼働中。趣味は子どもたちと遊ぶこと 著書 ・「HTML5＆API入門」（2010 日経BP社） ・「Google Gearsスタートガイド」（2007 技術評論社）

1-2

INDEX
HTML5“とか”アプリ開発入門（1）　 Webの3つの問題を解決する「HTML5」とは何なのか
	Page1 どっからどこまでが「HTML5」なの？ ざっくり覚える「HTML5」の全体像
	Page2 HTML5が解決する、Webの“3つ”の問題とは 今後は、HTML5“とか”の有用な使い方を紹介

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード