HTML5

  • [アーティクル]

HTML5 によるアプリケーションのビルド: 理解すべきこと

Brandon Satrom

HTML5 が登場したことで、これからの Web は確実に変化します。

このような意見を、あるいは似たような話を耳にしたことがあるでしょう。わくわくした方も、驚きを隠せなかった方も、「なぜ?」と眉をひそめた方もいるでしょう。おそらく、多くの方はこのような感想が渦巻いたに違いありません。

どのような反応をしたとしても、責められることはありません。HTML5 は魅力的です。ご存知のように Web を変える可能性を確かに持っています。しかし、大げさにとらえられすぎてもいます。それ以上に、HTML5 の真意は理解しにくいところがあります。私自身も HTML5 を使ってアプリケーションをビルドしているときに、同じような感情が湧き上がりました。HTML5 のテーマは広範に及び、的を絞ることが難しいため、大多数の開発者はこの魅力的で新しいテクノロジのどこから手をつければよいかを理解していません。

この記事は MSDN マガジンにおける連載第 1 回目です。そして今回は、冒頭で紹介した一文が真実 (重要) である理由を読者の皆さんに完全に理解していただくことが目標です。今後数か月、このコラムでは、Web 開発者およびマイクロソフトのツールとテクノロジを使用する開発者として、HTML5 の重要性を理解していただくお手伝いをします。HTML5 に関する複雑な部分を簡素化し、誇張して伝えられている部分の多くを解明することを考えています。また、HTML5 の現在利用可能な機能と、少し先になりますが、注目すべき魅力的なテクノロジについてもいくつか紹介していきます。最後に、HTML5 のテクノロジを今すぐ導入したうえで、古いブラウザーを使用しているユーザーに優れたエクスペリエンスを提供し続けるのに役立つヒントをいくつか示します。

HTML5 について興奮している方には、その興奮をすぐに実践できるアイデアに変えるお手伝いをします。HTML5 に懐疑的な方には、HTML5 が重要な理由を理解していただく手助けをします。そして HTML5 の重要性に困惑を隠せない方も心配はいりません。この連載はそのような困惑から始まります。

HTML5 とは

ここまでお読みいただいて、HTML5 の重要性が人によって異なることにお気付きでしょう。ある人にとっては、HTML5 は <header> や <footer> のようなタグや、マークアップで使用できるほんの少しの属性が新たに追加されたにすぎません。また、ある人にとっては、HTML5 は Web における新しくて興味深いあらゆるものを表します。それは、1 つのブラウザーだけに実装されるテクノロジであったり、HTML5 に正式に含まれていない他の仕様だったりします。確かに、多くの場合、HTML5 が実際に意味するものを理解することは、たくさんの人が最初にぶつかる壁と言えます。

正直なところ、HTML5 にさまざまな定義があることには正当な理由があります。HTML5 は巨大なのです。World Wide Web コンソーシアム (W3C) という国際標準化団体による正式な定義によれば、HTML5 は次世代 Web テクノロジに関連する 100 件以上の仕様から構成されています。HTML5 という簡単な俗称に、このように 100 件以上もの仕様をすべて組み込んだことを考えれば、W3C の説明はあまりに簡単すぎると言えるでしょう。HTML5 ほど幅広い意味を持つものを明白な方法で定義するのは難しいことですが、W3C は HTML5 を Web における変化の統一概念として導入することで、その変化の範囲への対応を図ったと考えられます。

実際、HTML5 とは開発者が次世代 Web サイトや次世代アプリケーションをビルドできるよう設計された一連の HTML 仕様、CSS 仕様、および JavaScript 仕様を表す包括的な用語です。この用語の定義で重要なのは HTML、CSS、および JavaScript の 3 つです。W3C は、開発者が改良されたマークアップ、充実したスタイル機能、および新しい JavaScript API をどのように使用すれば、新たな Web 開発機能を最大限に活用できるかを明確に示しています。要するに、HTML5 = HTML + CSS + JavaScript です。

これがすべてです。HTML5 は、HTML、CSS、および JavaScript への変更が大半を占めます。100 件以上仕様が含まれていることを不安に思う必要はありません。この 3 つの用語によって HTML5 の対象範囲を理解できます。少し単純すぎると思いますか。そうかもしれません。しかしすぐおわかりになるように、HTML5 の包括的な定義は、導入する時間および労力に値するだけ多くのテクノロジを選択するといった問題ではありません。

この定義において、マイクロソフトが HTML5 に占める位置についてもう少し説明します。

HTML5 と Internet Explorer

先ほど述べたように、HTML5 を構成する一連の仕様は W3C が管理しています。W3C を構成しているのは専任のスタッフと、Web の将来を方向付け、決定付けるのを支援するために出資している企業や個人です。W3C は合意に基づく組織であり、通常、委員会 (ワーキング グループ) を形成して関連仕様を策定する作業を分担し、運営しています。仕様は、どのメンバーでも提案することが可能です。また W3C では、最初の草案から正式な勧告まで 5 段階のプロセスを経て、W3C が所有するすべての仕様 (HTML5 の傘下にまとめられる仕様よりも多くの仕様) が策定されます。

マイクロソフトは W3C のメンバーであり、多くの HTML5 標準およびワーキング グループの仕様策定プロセスに極めて積極的な役割を果たしていています。大手のブラウザー ベンダーがすべてそうであるように、マイクロソフトは HTML5 に多くの投資を行い、W3C および他のベンダーとも連携しています。したがって開発者は、HTML5 テクノロジが、主要ブラウザーのすべてにおいて確実に相互運用可能な方法で実装されることを期待できます。

マイクロソフトがブラウザー ベンダーという側面も持つことから、そのアプローチは 4 つに分けられます。

  1. Internet Explorer 9 を使って現時点で最高のサイト対応 HTML5 を提供する
  2. Internet Explorer のプラットフォーム プレビューを使って今後追加予定の機能を開発者に公開する
  3. W3C に提出するテストを通じて相互運用性の向上に取り組む
  4. HTML5 Labs を使って未確定の標準のプロトタイプを作成する

"サイト対応 HTML5" とは、マイクロソフトが ＨＴＭＬ5 テクノロジについての説明に使用する用語で、主要ブラウザーのすべてが幅広くサポートするようになったため、現在使用可能と判断できる ＨＴＭＬ5 テクノロジを指します。新しい HTML タグ、キャンバス、スケーラブル ベクター グラフィックス (SVG)、オーディオおよびビデオ、地理位置情報、Web ストレージ、多くの新しい CSS3 モジュールといったテクノロジが該当し、これらのテクノロジは Internet Explorer 9 をはじめとする主流ブラウザーに実装されています。この連載では多くの時間を使って、こうしたテクノロジとその導入方法を紹介します。

現時点では利用できませんが、マイクロソフトはパブリック プラットフォーム プレビューを使用して、フィードバックを集めると同時に、開発者に次期バージョンのブラウザーについての情報を提供する予定です。Internet Explorer 9 の場合は、6 ～ 8 週間ごとにマイクロソフトからプラットフォーム プレビューがリリースされていました。リリースされるたびに HTML5 の新たな強化、機能、およびパフォーマンスの向上が発表され、開発者はそれを試して評価を行いました。Internet Explorer 9 は、3 月にリリースされました。7 月上旬の現在、マイクロソフトは Internet Explorer 10 の 2 つのプラットフォーム プレビューをリリースし、Internet Explorer のプレビューを今後も定期的にリリースしていくことを発表しています。最新のプレビューを利用することで、開発者として学習し、テストし、そのブラウザーの発展に影響を与えることができます。Internet Explorer の最新のプラットフォーム プレビューは、IETestDrive.com (英語) からダウンロードできます。

すべてのブラウザーで HTML5 の一貫した動作を確保するため、マイクロソフトは相互運用性に重点を置いて取り組んでおり、HTML5 関連では唯一最大の一連のテスト ケースを作成して W3C に提出しています。この一連のテスト ケースは、各ブラウザーにおける HTML5 の "対応準備状態" をテストする正式なソースとして、W3C が初めて採用することになります。開発者にもたらされるテスト ケースの最終結果は、HTML5 テクノロジを導入および実装でき、すべてのブラウザーで一貫して動作することを信頼できることを示します。マイクロソフトによる相互運用性に関する取り組みの詳細については、bit.ly/dxB12S を参照してください。

HTML5 テクノロジの一部は既に Internet Explorer 9 に組み込まれており、Internet Explorer 10 に組み込む予定の他のテクノロジについては、Internet Explorer のプラットフォーム プレビューを通じて発表されています。しかし、人気があって話題性のある仕様の中には、W3C やブラウザー ベンダーによる作業がもう少し必要なものもあります。そのような例の 1 つが Web Sockets です。Web Sockets は、開発者がバックエンド サーバーとの双方向通信チャネルを開くことで、以前の Web アプリケーションでは実現できなかった "リアルタイム" レベルの接続を可能にする魅力的な仕様です。開発者としては、ビルド中のアプリケーションに Web Sockets を今すぐにでも使いたい場面は数え切れないほどあることは想像に難くないでしょう。しかし Web Sockets 仕様は、その主となる側面がまだ定まっていないため急速に変化しており、W3C 内で議論が続けられています。この状況では、この機能を一貫性および信頼性をもってすべてのブラウザーに実装することは困難です。

Web Sockets (Web Sockets については今後のコラムで詳しく取り上げる予定です) のように未確定または発展途中の仕様に対して、マイクロソフトは HTML5 Labs を開設しました。HTML5 Labs は、開発者が、そのようなテクノロジのドラフト実装をテストするための Web サイトです。このサイトでは、ダウンロードしてローカルに試すことができるプロトタイプおよびいくつかの仕様のホスト型のデモを提供します。ラボの目的はこのような仕様をテストできる場を提供することと、その仕様がブラウザーで安定し、実装に近い状態になったときに、マイクロソフトおよび W3C へフィードバックを提供してもらうことです。HTML5 Labs の詳細については、html5labs.com (英語) を参照してください。

HTML5 と Microsoft 開発者ツール

HTML5 に対するマイクロソフトのアプローチに関しては、W3C およびブラウザーでサポートする HTML5 テクノロジへの関与以外に、開発者にとって重要なもう 1 つの取り組みがあります。それは、HTML5 のツールに対するアプローチです。

2011 年初め、マイクロソフトはサービス パックによって 2 つの開発ツールを更新しました。1つは Visual Studio 2010、もう 1 つは Expression Web 4 です。この 2 つのツールのサービス パックはどちらも、検証用に HTML5 ドキュメント タイプを提供し、HTML5 の新しいタグと属性に IntelliSense 機能を提供します。Visual Studio 2010 SP1 を使用している場合は [ツール]、[オプション] を順にクリックして、[オプション] ダイアログ ボックスの [テキスト エディター]、[HTML]、[検証] を順にクリックします。次に、[ターゲット] ボックスの一覧の [HTML5] をクリックすると、HTML5 スキーマを有効にすることができます (図 1 参照)。また、任意の HTML ファイルで、[HTML ソースの編集] ツールバーを使って HTML5 を既定のスキーマに設定できます (図 2 参照)。

Enabling the HTML5 Schema via the Options Dialog

図 1 [オプション] ダイアログ ボックスによる HTML5 スキーマの有効化

Setting the HTML5 Schema on the HTML Source Editing Toolbar

図 2 [HTML ソースの編集] ツールバーでの HTML5 スキーマの設定

既定のスキーマを設定すると、Visual Studio では、新しいタグ固有のグローバル属性および HTML の 28 個の新しいセマンティック タグが IntelliSense によってサポートされます (図 3 参照)。

HTML5 IntelliSense in Visual Studio 2010 SP1

図 3 Visual Studio 2010 SP1 の HTML5 の IntelliSense

2011 年 6 月、マイクロソフトは、Web Standards Update for Microsoft Visual Studio 2010 SP1 をリリースすると同時に、HTML5 のサポートをさらに更新しました。この拡張機能は、Visual Studio 2010 のすべてのエディションで機能し、HTML5 の新たな IntelliSense と検証機能を Visual Studio に追加します。また、地理位置情報機能および DOM ストレージのような新しいブラウザー機能のための JavaScript の IntelliSense が用意されるとともに、CSS3 の包括的な IntelliSense 機能と検証機能も提供されます。この拡張機能は定期的に更新され、その都度 HTML5 開発用の強化ツールを提供します。この機能は、bit.ly/m7OB13 からダウンロードできます。

Expression Web 4 SP1 では、[ツール] メニューの、[ページ編集オプション] をクリックし、[ページ編集オプション] ダイアログ ボックスの [作成] タブで HTML5 スキーマを設定すると、同じ IntelliSense が提供されます。また、このツールでは、border-radius、box-shadow、transform などいくつかのドラフトの CSS3 モジュール に対して CSS3 の IntelliSense が提供されます。

WebMatrix (web.ms/WebMatrix 参照) を使用している場合は、作成した新しい .html、.cshtml、または .vbhtml ドキュメントのすべてに、図 4 のような既定のマークアップが含まれていることに気付いた方もいるでしょう。次回のコラムで紹介するように、これが基本となる有効な HTML5 ドキュメントです。中でも注目すべきなのは、doctype および meta charset タグから余計な情報がかなり削減されていることです。この簡略化された doctype を使用すると、最近のすべてのブラウザーは HTML5 モードに切り替わります。WebMatrix は、既定で HTML5 ドキュメントを提供することによって、HTML5 モードへの切り替えを容易にします。

図 4 WebMatrix の既定の HTML ドキュメント

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
</html>

新しい HTML5 のツール (これらは 2011 年の 1 月からリリースされています) で満足できなければ、4 月に MIX11 で発表された ASP.NET MVC 3 Tools Update により ASP.NET MVC が最近おもしろくなっています。ASP.NET MVC 3 Tools Update では、その他数多くの新しいツールの機能と同時に、新しいプロジェクトに HTML5 の doctype を使用するためのオプションが提供されます (アプリケーションの Script フォルダーに Modernizr 1.7 が組み込まれます)。Modernizr は、HTML5 開発を大幅に簡略化する JavaScript ライブラリです。これについては今後のコラムで詳しく説明します。

ここで重要なのは、HTML5 は一般に使用されているブラウザーに登場し始めたばかりであるにもかかわらず、迅速かつ公式にツールのサポートが追加され、マイクロソフトに関しては、コミュニティからもライブラリ (Modernizr など) のサポートが追加されていることです。現在は、マイクロソフトのツールによりサポートされた HTML5 を入手でき、その HTML5 のサポートは時間とともに拡大および向上し続けることを期待できます。

アプリケーションに HTML5 を "導入" する

ここまでで、HTML5 が一気に導入または移行できるような 1 つのエンティティでないことは認識されたことでしょう。HTML5 の導入とは、大量のテクノロジの中から選別することではなく、テクノロジごとに評価を行い、アプリケーションにふさわしいテクノロジを見極めることです。そのテクノロジをすぐに導入できるかどうかを見極めるときは、評価する HTML5 テクノロジごとに (少なくとも) 次の要因を調べます。

  1. そのテクノロジが、すべての主要ブラウザーにどの程度広範に実装されているか
  2. 特定の機能をサポートしていないブラウザー向けに、そのテクノロジおよび "ポリフィル" サポートをどのように導入するか

1 番目の要因が最も重要です。サイトへのアクセスに共通して使用しているブラウザーを合わせて認識していれば、100 件以上ある仕様のうちどのサブセットをそれ以上評価する価値があるか明確なイメージが得られます。そのサブセットは、サイトのユーザー向けに今すぐ信頼して導入できる安定した仕様のセットから構成します。

ただし、HTML5 テクノロジの安定したセットがわかるとしても、新しいブラウザーに移行していないユーザーを無視すべきではありません。日常、サイトの開発に深く関与しているのであれば、特定のブラウザーを使ってサイトにアクセスするユーザーの割合にも見当がつくと思います。多くの場合、古いブラウザーを使ってアクセスするユーザーの割合を把握すれば、HTML5 テクノロジを導入することによりそれらのユーザーに悪影響が及ぶだろうという結論に達するのは簡単なことです。さいわい、いつになるかわからない HTML5 の導入日まで待つことから救ってくれる "ポリフィル" があります。

Paul Irish (jQuery および Modernizr プロジェクトの開発者) は、ポリフィルを「将来の API を模倣し、古いブラウザーへのフォールバック機能を提供するつなぎ役」と定義しています。ポリフィルは Web サイトの補修剤のようなものです。サイトを閲覧しているユーザーが特定の HTML5 機能を利用できるかどうかを調べる手段であり、そのサポートの "代わりをする" つなぎ役またはサイトが十分機能できる機能維持 (グレースフル デグラデーション) の手順を提供することです。

ポリフィル関連のライブラリの中で最も人気があるのは、先ほど述べた JavaScript ライブラリの Modernizr です。Modernizr は、セマンティック マークアップの基本的なポリフィル、主要 HTML5 テクノロジの機能検出、およびサポート対象の機能に基づく条件付き CSS のサポートを提供します。既に述べたように Modernizr については今後のコラムのテーマとして特に取り上げていく予定です (その他の多くのポリフィル ライブラリも合わせて)。詳細については、modernizr.com (英語) から Modernizr をダウンロードしてください。

導入するテクノロジを選択する際、その最終的な一覧は、広くサポートされる仕様とそうでない仕様 (特定のブラウザーをポリフィルを使ってサポートする必要がある仕様) の組み合わせになっていることがあります。現在のニーズおよびコンテキストに基づいた一覧にするにはどのような構成にすればよいか、理解しているのは導入するテクノロジを選ぶ開発者だけです。

今後数か月にわたって、地理位置情報、フォーム機能、キャンバスから、Web Workers、Web Sockets、IndexedDB まで重要な仕様をいくつか紹介します。中には広くサポートされ "サイト対応" の仕様もあれば、Web Sockets のように、現状がどのような状態でも無視できないほど革新的なものもあります。各仕様において、現在のサポートおよび既知の将来におけるサポート、サイトにその仕様の機能を実装する方法についての基礎知識、および既定の機能がサポートされていないブラウザーをポリフィルを利用してサポートする方法を紹介します。

現在の HTML5 についてより詳しく知るには、HTML5 に関する書籍をいくつかお読みになることをお勧めします。特にお勧めするのは、Bruce Lawson および Remy Sharp 著『Introducing HTML5』(New Riders、2010年) と Mark Pilgrim 著『HTML5 Up and Running』(O’Reilly Media、2010年) です。また、すべての仕様の最新情報については W3C.org (英語) を参照してください。Internet Explorer 9 および Internet Explorer 10 のプラットフォーム プレビューをダウンロードするには、それぞれ BeautyoftheWeb.com および IETestDrive.com (英語) を参照してください。マイクロソフトのブラウザーで提供されているすばらしい HTML5 エクスペリエンスの詳細について参照できます。

何より、今すぐ HTML5 の導入を開始しましょう。Web は今後確実に変わります。HTML5 を使って優れた次期 Web アプリケーションをビルドすれば、その一翼を担うことができます。

Brandon Satrom は、テキサス州オースティン郊外でマイクロソフトの開発者エバンジェリストとして活躍しています。彼のブログは userInexperience.com (英語)、Twitter は twitter.com/BrandonSatrom (英語) でフォローすることができます。

この記事のレビューに協力してくれた技術スタッフの Jon Box、Damian Edwards、および Clark Sell に心より感謝いたします。