編集部からのお知らせ
記事まとめPDF「日本のスタートアップ」
お勧め記事まとめPDF「マイクロサービス」
HTML5 Experts.jp

HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。(前編) - (page 2)

白石俊平(オープンウェブ・テクノロジー代表)

2013-08-13 17:08

グラフィカルウェブ

 もはや多くの方がご存知ですが、HTML5ではグラフィック系の機能が大きく進化しました。

 例えば Canvasという機能を利用すれば、2Dのビットマップグラフィックを自由自在に制御できます。動的なグラフ、ゲーム、アニメーション、画像の加工など、Canvasの応用範囲は実に広大です。さらにWebGLという技術を使用すれば、Canvas上で3Dグラフィックを実現することもできます。

 一方SVG(Scalable Vector Graphics)は、ベクターグラフィックを扱うことのできる技術です。ベクターグラフィックですので、ズームしても画質が劣化しないだけではなく、Canvasに比べてインタラクティブなUIを作りやすいという特性があります(内部的にDOMを持つため)。

 また、CSSの表現力も一昔前とはケタ違いです。割と複雑なアニメーションなども、プログラミング(JavaScript)なしで実現出来るだけではなく、描画処理をブラウザ任せにできることから、高速なアニメーションが期待出来ます。

 グラフィカルウェブの例は、枚挙に暇がありません。

 Canvasを使用したデモは、「 canvasdemos」というサイトが海外にあり、数多くのサンプルやゲームが公開されています。 ほかには例えば、エキスパートNo.23の高橋登史郎さんが作ったccchartというライブラリは、Canvasを使用したグラフ描画ライブラリです。


ccchart

 WebGLを使用したデモは、「 Chrome Experiments」というサイトに「WebGL Experiments」というコーナーがあり、そこで多数のデモが公開されています。 一つ例を挙げるなら、Pitts Special Demoなどは、驚くような完成度を持つ3Dフライトシミュレーションです。


Pitts Special Demo

 さらに、SVG(Scalable Vector Graphics)というテクノロジーを利用すると、ベクターグラフィックを扱うことができます。 本サイトの運営を手伝ってくださっている面白法人カヤックさんが、以前手がけた「SVG女子」は、SVGをふんだんに使用したアニメーション作品となっています。


SVG女子

 CSS3を使用したすごいデモは、こちらのまとめが役に立ちました。スーパーマリオなんかも、JavaScriptを使わずにCSSのみで表現できちゃう。


CSSのみで作られたマリオ

マルチメディアウェブ

 HTML5では、videoaudioと言った要素を使用して、動画や音声の再生をプラグイン無しで行えるようになりました。 その後もマルチメディア系の機能は進化し続けていて、「動画の字幕を表示する」(要素)「音声データを動的に操作する」(ウェブ Audio API)「MIDI機器を扱う」(ウェブ MIDI API)と言ったことも現在では可能になりつつあります。

 例えば、YouTubeはすでにHTML5を用いた動画再生に対応しています。youtube.com/html5 にアクセスし、「HTML5仕様版を有効にする」をクリックすると、以降はYouTubeの動画がHTML5を用いて再生されるようになります。


YouTube HTML5 動画プレーヤー

 Appleが公開している、HTML5ビデオを用いたデモ。Appleさんも、昔はHTML5に物凄く肩入れしていたんですけどね・・・


AppleによるHTML5ビデオのデモ

 JavaScriptで音声操作を実現する、「「Web Audio API」のデモを集めたページ。例えば以下のJAM with Chromeは、友人とドラムセッションを行えるというデモアプリです。


JAM with Chrome

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]