HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。Experts.jp日本に、もっとエキスパートを。俊平HTML5が引き寄せる近未来を、9つの「...HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。Experts.jp編集長)2013年7月8日0click01827その広がりと深まりゆえに、現在のWebは非常にわかりづらいものになっています。そこでこの記事では9つの「○○ウェブ」という切り口から、「今のWeb技術では何ができるのか」についてにフォーカスして語ってみたいと思います。適宜デモへのリンクを挟みながら、Webのポテンシャルを紹介するのに注力します。ここ数年で急速に進化を遂げたHTML5は、Webのあり方を大きく変えつつあります。いえ今はまだ、「Webが大きく変わった」と言える段階ではないように思います。筆者はちょくちょく、色々な所でHTML5の概要についての講演をさせていただいていますが、そうした経験から言うと、HTML5のポテンシャルはまだ多くの人に知られておらず、十分にその力が活用されていないように思えます。その理由は、「HTML5の全体像が見えにくい」ことにあるのではないか、と考えています。HTML5をはじめとしたWeb標準は、「比較的細かい粒度の仕様書が山ほどある」という状態で、その全てを把握するのは技術者であっても至難の業です。それらの仕様は、全てのブラウザで利用できるというわけでもありません。その結果、「使えるのかどうかわからないけど、なんかスゴイ機能が山ほどあるらしい」という、巨大なブラックボックスのような印象を抱いている方がたくさんいらっしゃるように感じます(そのおかげで、ぼくなんかにもまだ講演のご依頼があったりするわけですが・・)。そこでこの記事では、「今のWeb技術では何ができるのか」についてにフォーカスして語ってみたいと思います。適宜デモへのリンクを挟みながら、Webのポテンシャルを紹介するのに注力します。プログラムコードや仕様の解説があるわけではないので、既にHTML5について知識をお持ちのエンジニアにとっては少し物足りない内容かもしれませんが、どうかご容赦ください。Web技術は今や巨大で、その全てをたった一回の記事で紹介するのは現実的ではありません。そこでこの記事では、「9つの『○○ウェブ』」という切り口から、近未来のWebの形に迫ってみたいと思います。グラフィカルWeb・・・ウェブは、以前より高度なグラフィック操作が可能になっています。マルチメディアWeb・・・現在のWebでは、動画や音声などのマルチメディアをプラグインなしで利用可能です。オフラインWeb・・・Webアプリはオフラインでも利用可能なように開発することができます。ハイパフォーマンスWeb・・・Webアプリのパフォーマンスは日々向上を続けています。プラットフォームとしてのWeb・・・Webは、OSレベルのプラットフォームとして利用されつつあります。レスポンシブWeb・・・スクリーンサイズやメディアの種類などに合わせて、Web文書の見栄えを動的に変更できます。セマンティックWeb・・・より豊富なセマンティクスやメタデータにより、Webを「データベース」として扱いやすくなります。リアルタイムWeb・・・リアルタイム性の高いWebアプリをより開発しやすくなります。コンポーネント化するWeb・・・再利用可能なUIコンポーネントを集めてWebアプリを作ることが可能になります。グラフィカルWebもはや多くの方がご存知ですが、HTML5ではグラフィック系の機能が大きく進化しました。Canvasという機能を利用すれば、2Dのビットマップグラフィックを自由自在に制御できます。動的なグラフ、ゲーム、アニメーション、画像の加工など、Canvasの応用範囲は実に広大です。WebGLという技術を使用すれば、Canvas上で3Dグラフィックを実現することもできます。Graphics)は、ベクターグラフィックを扱うことのできる技術です。ベクターグラフィックですので、ズームしても画質が劣化しないだけではなく、Canvasに比べてインタラクティブなUIを作りやすいという特性があります(内部的にDOMを持つため)。CSSの表現力も一昔前とはケタ違いです。複雑なアニメーションなども、プログラミング(JavaScript)なしで実現出来るだけではなく、描画処理をブラウザ任せにできることから、高速なアニメーションが期待出来ます。グラフィカルWebの例は、枚挙に暇がありません。Canvasを使用したデモは、「canvasdemos」というサイトが海外にあり、数多くのサンプルやゲームが公開されています。ほかには例えば、エキスパートNo.23の高橋登史郎さんが作ったccchartというライブラリは、Canvasを使用したグラフ描画ライブラリです。Experiments」というコーナーがあり、そこで多数のデモが公開されています。Demoなどは、驚くような完成度を持つ3Dフライトシミュレーションです。Graphics)というテクノロジーを利用すると、ベクターグラフィックを扱うことができます。本サイトの運営を手伝ってくださっている面白法人カヤックさんが、以前手がけた「SVG女子」は、SVGをふんだんに使用したアニメーション作品となっています。SVG女子CSS3を使用したすごいデモは、こちらのまとめが役に立ちました。スーパーマリオなんかも、JavaScriptを使わずにCSSのみで表現できちゃう。マルチメディアWebHTML5では、<video>や<audio>と言った要素を使用して、動画や音声の再生をプラグイン無しで行えるようになりました。API)と言ったことも現在では可能になりつつあります。YouTubeは既にHTML5を用いた動画再生に対応しています。アクセスし、「HTML5仕様版を有効にする」をクリックすると、以降はYouTubeの動画がHTML5を用いて再生されるようになります。動画プレーヤーAppleが公開している、HTML5ビデオを用いたデモ。API」のデモを集めたページ。Chromeは、友人とドラムセッションを行えるというデモアプリです。オフラインWebHTML5では、オフラインでもWebアプリを利用可能にするための様々な機能が備わっています。「アプリケーションキャッシュ」という機能を利用すると、「Webアプリが必要とするリソースを全てローカルにキャッシュし、オフライン時でもそのキャッシュを利用する」という方法により、オフライン状態でもWebアプリを利用可能にすることができます。オフライン時にユーザが行った操作(データの追加、更新、削除など)を保存しておく仕組みとして、昨今のブラウザは各種のストレージを備えています。APIと言ったストレージに対してデータの読み書きを行い、オンライン時にそれらのデータをクラウドと同期することで、「オフラインでも読み書きを行える」Webアプリを作ることができます。Drive上で作成したドキュメントやスプレッドシート、プレゼンテーションは、オフライン状態であっても表示が可能です(ドキュメントとプレゼンテーションについては、オフライン時の編集にも対応)。Chromeの利用が必須、かつオフラインアクセスの有効化が必要ですが、非常に便利なので有効にする価値があります。ハイパフォーマンスWeb「ハイパフォーマンスWeb」という用語は、ぼくが適当に作りました。HTML5に端を発した、Webを進化させようとする一連の取り組みの中で、Webのパフォーマンスを向上するために、様々な取り組みが行われているのです。APIが、既に様々なブラウザで利用可能です。Workersという仕様も存在します。Webの通信プロトコル(HTTP)の欠点を補ってWeb全体を高速化しようとする試みも行われており、Googleが提唱するSPDYという通信プロトコルや、SPDYをベースにして仕様策定が始まったHTTP2.0なども、活発に開発が行われています。ページ速度分析ツール」を挙げることができます。ブックマークレットとして利用することで、あらゆるページの読み込みにかかった時間を計測することができ、わかりやすく可視化してくれます。ページ速度分析ツールWebを高速化する通信プロトコルとして注目されているSPDYでは、エキスパートNo.2の小松さんが以前作ったデモがシンプルでわかりやすい。「画像を150個ダウンロードする」というタスクを、HTTPとSPDYのそれぞれで実行し、実行にかかった時間を計測することができます。Engineは、HTTPSで接続すると自動的にSPDY接続となるのです)。Test「HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。(後編)」に続きます。