これからのWebのあり方について考えてみた。

前回、「Progressive Enhancementという考え方」で「Webを活用する環境が多様化したことにより、全方位的なアクセシビリティ、コンテンツの供給力が何よりも重要になってきている」ということを述べましたが、Webを取り巻く環境が変化すると共に、フロントエンドテクノロジーも日々進化を繰り返しています。今回は技術的な観点からどのようにWebのあり方が変わっているのかを考えてみます。

HTMLの軌跡

Tim Berners-Leeが提唱した「広くあまねくアクセシブルなWeb」がどのようなものなのかを知るには、HTMLについて理解する必要があります。1989年にWWWが開発され、文書に相互的な機能を持たせる『ハイパーテキスト』という概念が生まれました。以下、Tim Berners-Lee氏が「The「World Wide Web: Past, Present and Future」で述べた内容を和訳したものの一部です。

ウェブの到達目標は、人間とハイパーテキストの相互のやりとりが十分直感的に分かりやすいものとなって、コンピュータで読みとれる形の情報の空間が、人々の思考、やり取り、仕事のパターンの状態を適切に反映できること。

「コンピュータでも読み取れる形の情報」というのは、コンピュータが人間に代わって文書を適切に分析できるワークフレーム、つまりHTMLのことです。『HTML』とはその名の通り、文書を論理的にマークアップするための言語で、文書構造をコンピュータにも理解しやすいように論理的な意味付けを行い、それらを有益な情報として分析できるようにする役割を持っています。

そして、コンピュータに保存されている文書の『ハイパーリンク』を収集し、その構造を分析することによって、サーチエンジンによる検索データベースが実現しています。これが世界中のネットワークを司る仕組み、『WWW』なのです。

Semantic Web

ティムの思惑とは裏腹に、1993年にHTML1.0が公開されてからブラウザベンダーによる拡張が度重なり、見栄えを表現する要素や属性が追加され、本来の目的とはそぐわないWebサイトが乱立することになりました。そうした状況を踏まえ、『W3C』は標準化を本格的に推進し、HTML4.0では文書を論理的にマークアップする言語として本来の目的を果たすように改められ、見栄えを表現する手段として『CSS』が考案されます。

そして、拡張性、柔軟性に欠けるHTMLの弱点を克服するため、XMLにより独自の意味や構造を持ったマークアップを可能にする言語『XHTML』が開発され、『Semantic Web(セマンティック・ウェブ)』という分野が注目されるようになります。以下、「メタ情報とセマンティック・ウェブ」より引用します。

ウェブは人間が読むための「文書のウェブ」から、様々なデータを自在に発見して利用できる「データのウェブ」へと向かいます。メタデータを適切に与えることで、文書情報をこの「データのウェブ」に組み込むことが可能になります。

「文書のウェブ」は、情報の検索や活用が原始的で単純レベルに留まっているWebページを指し、「データのウェブ」は、その情報が持つ意味を表す『メタデータ』を付加することでコンピュータがより精度の高い分析を行えるようになるWebページを指します。いわゆるセマンティックなマークアップというのは、『XML(HTMLをXML標準に対応させたXHTMLを含む)』によって記述され、その中にメタデータの記述言語を用いて情報の意味付けを行ったものをいいます。

実際は、技術の標準化などに時間がかかることから、利用できるのは先になるだろうと多くの方が予想していたようですが、Webの発展に合わせてそのニーズが高まり『microformats(マイクロフォーマット)』と総称されるマークアップ方式が多くのサイトで採用されてきています。

そのように、W3CはSemantic Webを実現するために技術の標準化を順調に進めていましたが、期待していたほどは普及しませんでした。なぜなら『Ajax』に代表されるようなWebアプリケーションのニーズが、XHTMLによるマシンリーダブルなWebページよりもニーズが高まっているからです。こうした背景の基、新たにHTMLを進化させる仕様として策定されているのが『HTML5』です。

Webアプリケーション

HTML5ではこれまでの後方互換性を保ちながら、進化の土台となる重要な機能を加え、大きなバージョンアップが行われました。以下、主な新機能を列挙します。

Canvas

FlashやJavaのようにプラグインを使わずに、JavaScriptベースでグラフィックを描くことができます。「Chrome Experiments」でデモが公開されています。

Audio/Video

ブラウザで音声や動画の再生を可能にします。プラグインは必要としません。

Web Storage

データをブラウザ側に蓄積する仕組みです。クッキーとは異なり、より大きなデータを蓄積できるため、ユーザーエクスペリエスの向上、サーバー負荷の低減に役立てます。

Offline Web Applications

オフライン時でもWebアプリケーションが動作する仕組みです。ネイティブアプリケーションと同等の機能を提供します。

Webのストリーム化、コミュニケーションのリアルタイム化がトレンドになりつつある現状を考えると、このような進化は自然な流れであるといえます。すでに、グラフィック表現を可能にする『Canvas』は多くのブラウザで実装されていますし、リッチでインタラクティブな3Dアプリケーションを作成するAPI『O3D』という強力な機能も実装される予定です。

メーラーを代表とするネイティブアプリケーションと同等の機能を提供するには、インタラクションを司る『JavaScipt』の進化も必須になりますが、ほとんどのブラウザでJavaSciptエンジンの高速化が進められており、実現する日もそう遠くはないでしょう。

クロスプラットフォーム

Webアプリケーションがネイティブと同等になるのであれば、各々のデバイスに対応するよりも、標準技術を基に汎用性のあるアプリケーションの方が効率的です。今までもWindowsを代表とする様々なテクノロジーがクロスプラットフォームを実現しようとしてきましたが、ついにHTML5によって最大級のクロスプラットフォームが実現するかもしれません。

アプリケーションがハードウェアやOS、モバイルから電子機器などのあらゆるデバイスでサポートされるということは、それだけ開発がシームレスになるということであり、開発コストの低減、素早いサービス展開など、開発者だけでなくユーザーにとっても有益な結果をもたらします。

クロスプラットフォームは、HTML5だけが独占している話題ではなく、AdobeではFlashアプリケーションをiPhoneアプリケーションに変換する「Flash for iPhone」など、Flashをあらゆるデバイスに移植するというプロジェクトを発表しています。また、MicrosoftではPCとモバイル、テレビといったスクリーンをソーシャルサービスと繋ぎ、統一されたインタフェースを実現する「Three Screens and a Cloud」というプロジェクトが注目されています。

このように、ベンダーの戦略に共通するものがあり、改めて時代の変化を感じさせると共に、今後さらに加速化するであろうプラットフォーム競争の覇者となるのはどのベンダーなのか。しばらく目が離せそうにありません。

仕様による標準化

これまでの競争と違うのは、標準技術の仕様に準拠することが前提になっていることです。Windowsが普及した頃は、Windows仕様のアプリケーションを開発するのがスタンダードでしたが、HTML5やJavaScriptという標準技術に基づいて開発されたアプリケーションはプラットフォームに依存しないため、あらゆるデバイスで拡張性の高い開発が可能になります。

標準技術をベースにアプリケーションが開発され、OSやモバイルなど、デバイスに依存しないプラットフォームが普及すれば、市場競争が活発化することで実装の多様化が進み、目覚しいほどの進化が期待できます。

そのようなことから、今後はAdobe 『AIR』、Microsoft 『Silverlight』、そして『Google Chrome OS』上で動作するブラウザをターゲットに開発されていくと思われます。「AIR vs Silverlight vs HTML5」という構図が思い浮かびますが、調べてみたところAIR、Silverlightは共にHTML5に対応する見通しのようです。Google Chromeは当然対応しているので、HTML5はアプリケーションの標準技術として欠かせないものになっていくのではないでしょうか。

アクセシブルなWebへ

新時代のブラウザの登場、モバイルデバイスの普及などによって、Webのストリーム化、コミュニケーションのリアルタイム化が行われ、Webのあり方に大きな変化がもたらされています。そのような時代のニーズに合わせてHTML5という標準技術が公開され、Webアプリケーションの進化、クロスプラットフォーム、仕様の標準化が推進され、着々とTim Berners-Leeが意図したWeb本来の姿に変貌を遂げようとしています。この方向性はW3Cの多大なる努力の結果という見方もできますが、Webが進化する上ではごく自然な成り行きだったようにも思います。

ここまでくればTim Berners-Leeが提唱した「広くあまねくアクセシブルなWeb」の意味が掴めてくるのではないでしょうか。前回の記事で「全方位的なアクセシビリティ」と「コンテンツの供給力」が重要だと述べましたが、これまでのことを踏まえてそれぞれ解説してみます。

【全方位的なアクセシビリティ】

まず、アクセシビリティが何なのかをおさらいしましょう。以下、「JIS X 8341-3 高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部:ウェブコンテンツ」より引用します。

基本方針として高齢者や障害者への配慮、多様な機器やディスプレイ、ブラウザで利用できること、これらを企画から運用に至るプロセス全体で常に考慮すること

簡潔にまとめると「あらゆる環境に配慮し、誰にとっても使いやすい方法で情報を提供すること」です。まず、ハンディのある方々への配慮というように、バリアフリーという観点では認知されてきていると思います。

ただし、高齢者や障がい者など身体に障害や不自由がある方々のための対応というよりは、最低限の使いやすさを確保するために必要な指標という方がしっくりきます。例えば、駅に設置されているエレベーターは、高齢者や車椅子を利用されている方々はもちろん、健常者にとっても便利なものです。それをWebの世界に還元すると、アクセスした誰もが容易に情報を共有できるようにするということになります。

多様化が進むWebの世界でそのような取り組みがより求められていることは既知の事実であり、その中心にいるのがW3Cです。W3Cの取り組みによって、あらゆるデバイスで共通化を行うクロスプラットフォーム、環境に依存しない技術の標準化が進み、全方位的なアクセシビリティが現実的なものになってきているのです。

【コンテンツの供給力】

前回の記事で「『Progressive Enhancement』は、コンテンツそのものに重きを置き、Webの本来の能力を最大限に生かそうという試みなのです。」と述べましたが、コンテンツとは何を意味するのでしょう。以下、「Webアクセシビリティについて」より引用します。

基本的要件として、視覚、聴覚、身体のハンディにかかわらずコンテンツを操作・利用できること

この引用分では、ハンディがある方への対応という捉え方をしてしまうかもしれませんが、上記と同様、誰か或いは何かのデバイスに特別な対応をするということではありません。「広くあまねくアクセシブルなWeb」とは、クロスプラットフォームや標準化によって、あらゆる環境下でWebを閲覧できるということも一つありますが、最も本質的な部分は『コンテンツ』にあります。

ここで以下のような階層で囲まれた円を想像して欲しいのですが、最も内側にある階層がコンテンツであり、それはセマンティックなHTMLでマークアップされたものだと思ってください。コンテンツを包み込んでいる真ん中の階層は、CSSによって"見栄え"を整え、さらに全体を包み込んでいる外側の階層はJavaScriptによって"ふるまい"を与えます。

Webアプリケーション及びWebサイトの土台として、基本的にこの3つ要素が関わっており、最も深く、中心にあるのがコンテンツです。Webの世界はグーグルボットに代表されるクローラーというプログラムによって成り立っています。Web上にある文書や画像などの情報を周期的に取得し、データベース化、インデックス化を行います。要するに彼らはコンテンツだけを求めています。

また、高齢者や弱視の視覚障害を持つ方、特に全盲の方は、当然視覚が確保できないので音声読み上げソフトを利用してWebサイトの情報を取得します。それでも画像や動画などの情報は読み上げることができないので、alt属性などに情報を付加したりするなどの配慮が必要になります。繰り返しになりますが、多様な環境で利用されるWebの世界では、コンテンツが全てです。Webサイト上で、情報を発信、普及、収集、要求したりするのには、コンテンツというレベルでの情報提供は必須なのです。

今後、技術の進展により様々な実装の登場とそれらの競争が予想されますが、コンテンツの供給においては、技術云々の問題ではなく私たち制作者側の意識によって良くも悪くもなります。より良い情報伝達を行うためには、Webアクセシビリティ確保の必要性を認識し、利用者側の立場に立つことが大切だと思います。それこそターゲット層云々の問題でもなく、私たちが例外なく空気を必要とするように、Webという世界で過ごすために必要なものは何なのか、もう一度振り返って考えてみる必要があるのではないでしょうか。

HTML5の実際

Webアクセシビリティの重要性が高まっていく世の中で、情報伝達すらも儘ならないようなWebサイトは、収益機会を逃すだけでなく、自社の信用を落とすことにも繋がります。では、コンテンツを供給するために必要な「セマンティックなマークアップ」とはどのようなものをいうのでしょうか。Webアプリケーションの項目で「Webアプリケーションのニーズが、XHTMLによるマシンリーダブルなWebページよりもニーズが高まっているからです。」と述べましたが、だからといってSemantic Webが切り捨てられるという訳ではありません。

HTML5では、section、nav、aside、header、footerなど、セマンティックなタグが追加され、より論理的なマークアップが可能になります。これらのタグを利用することで、単純に構造が分かりやすくなるなどといった表面的なメリットだけではなく、クローラーが文書の内容をより正確に収集できるようになり、検索の精度が格段に向上するという恩恵を受けられます。コンピュータにやさしいマークアップは最終的に人間にとってもやさしいものになるのです。

HTML5は2022年以降にW3C勧告に至ると言われていますが、「Browser support for CSS3 and HTML5 CSS3 and HTML5 feature support」というサイトでHTML5の対応状況を見る限り、それまで全く使えないということはなさそうです。新世代プラットフォームである『Google Wave』や『Web Kit』などがHTML5を駆使した仕様になっているということもあり、Firefox、Safari、Opera、Google ChromeなどのモダンブラウザでHTML5の実装が進んでいますし、Microsoftの次期ブラウザである『IE9』も標準技術に準拠するという意向を示しています。

また、JSライブラリを使用すれば、今すぐにでも以下のような機能を利用することができます。現状では、JavaSciptエンジンに依存していますが、プラグインが必要なくなるのも時間の問題だということです。

typeface.js

テキストをSVGに自動置換してフォントを表現するライブラリ

Bluff

Canvasを用いてグラフを描画するライブラリ

raphael

SVGでチャートグラフ、円グラフなどの曲線をベクターとして扱うことが可能になるライブラリ

280 Slides

280 Slides
PowerPointをWEBアプリケーションとして実現するライブラリ

Processing.js

Processing言語をJavaScriptに流用したライブラリ

cpick.js

色を選択するためのカラーパレットを表示するライトウェイトなライブラリ

progress.js

プログレスバーを表示するライトウェイトなライブラリ

border-radius.js

class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなライブラリ

table.js

class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリ

radar.js

canvas要素でレーダーチャートを描画するライブラリ

他のライブラリはJavaScipt ライブラリー - HTML5.JPからどうぞ。

最後に

Webが時代を終わらせ、Webが時代を作り始めている今日、あらゆる業界に多大な影響を与えていることと思います。時代の変化に合わせて新しい技術が生み出され、誰もがインターネットを持ち歩く世の中になりました。そうした時代の覇者になるべく、大手ベンダーは自社の技術を駆使し、凌ぎを削り合っています。そして、私たちWeb制作者はそうした変化に合わせて、パラダイムの転換を行わなければなりません。

ここにきてやっと、Tim Berners-Leeが望んだWebのあり方に時代が追いついたという感じがしてなりません。「Webのあり方」という地図があったとして、私たちはしばらく間違った道を半ば開き直りながら進んでいたのではないでしょうか。誤った道をどんなに効率的に進んでも、行き着くところは誤った目的地です。ティムの手元には何年も前から正確な地図があり、長い年月をかけて私たちを正しい道に戻してくれたのです。

しかし、進むべき道がが明確になったとはいえ、順風満帆にことが進むとは限りません。多くの誘惑が出てきて、道を塞ぐこともあるかもしれません。そうした中で心がけることは、正確な地図をなくさないということです。どんなに遅くても、寄り道しても、正確な地図さえあればいずれ目的地に到着することができるのです。『Progressive Enhancement』という考え方が広まっていることも、一つの道標です。迷子にならないようにしましょう。

* * *

頭の整理をしようとして、アウトプットをしていたらこんなに長文になってしまいました。何だか宗教の信者ｗのようになってしまいましたが、少しでもお役に立てれば幸いです。