Home > ロフトワークの強さ > キーワード・コラム > HTML5がやってきた！ Vol.2
おはようございます！
loftwork.jpのウェブマスターに背突かれて土曜の朝から原稿を書いています。
さて「HTML5がやってきた！ vol.2」ということで今回はHTML5の登場によって可能になる新たな機能を中心に紹介します。
前回は「セマンティック Web」という少し堅めの話を書きましたが、今回はもう少し楽しいお話になるかと思います。仕様もまだ固まっておらず、市場に出回る参考書籍はせいぜい数冊という状況でこれだけ騒がれているHTML5ですが、それなりの理由はあります。
「HTML5がWebの世界をより面白く、便利に変革してくれる」という人々の期待があるからです。
「じゃあ、どんな風に面白く、便利になるの？」というところが今回のテーマです。
はたしてHTML5が現実の世界とどのように折り合いをつけていくのか？というあたりは次回のお題にまわして、今回は楽しく参りましょう（土曜日だし）！
さっそく紹介に入っていきたいと思いますが、その前にみなさん『私立！ブラウザ学園』はもう読まれましたか？その中の一節で、先生に指名された黒夢（クロム）君はこのように解答しています。
「あ、これ？あーはい、えっとcanvas要素でグラフを描きーの、video要素はFlash要らず、と…はいこれでいいスか？」
見た目はチャラ男でも実は頭脳明晰な黒夢君はCanvasやVideoといった新要素がラクラク理解できたようです。
ちなみに黒夢君は「動作が軽い」⇒「軽い男」⇒「チャラ男」という理由でこのようなキャラ設定になっています（豆知識）。
CanvasはWeb上に図形を描写するために新たに追加された要素（タグ）です。今までは図形を表現する際にはImg要素を使用してJPEGや GIFといった形式の静止画を張り付ていました。一方Canvasで描写された図形はブラウザがその場で生成するイメージです。そのためユーザーの動きによって画像を切り替えるなどという離れ業も可能です。例えばユーザーが数値を入力するとグラフが変化する、などインタラクティブな表現も Canvasによって実現可能です。
下に表示したのがCanvasを使用して描写したガントチャート。ツールチップが表示されています。
Rgraph
次はCanvasを使用して分子構造を3Dで描写できるサイト。ドラッグで回転させることもできます。これがCanvasの実力！
CanvasMol
Macをお使いの皆さまには馴染みの深いDashboardですが、実はあそこで使われていた技術がCanvasの土台になっています。
ブラウザベンダーが独自に拡張した機能が標準化される良い例です。
各ブラウザとコーデックの対応状況
video要素はその名の通り動画を再生する機能です。前回お話したとおり、今までは動画再生にはプラグインが必須でした。プラグインを使用すればそれだけバグのリスクも高まりリソースも余計に食う、と。
これからはシンプルなコードで動画ファイルを指定するだけでOKです。ただし、Videoに関しては一つ問題があります。それは表示させる動画のフォーマットがいまだ定まっていないことです。フォーマットを定めることが HTML5の意義であるだけ少し残念ですね。
さてここからHTML5の一番核心の部分を理解するためにAPIという概念の理解が必要となります。
で、APIとは一体何でしょうか？
例えば、郵便番号を入力すると自動で住所が入力されて便利！という経験をした方も多いかと思いますが、あれはひとつのAPIです。
また、お店や会社の地図情報がGoogle Mapsから提供されているのを見たことがある方も多いかと思 います。あれもひとつのAPIです。
loftwork.jpの「交通・アクセス」画面
よくわかりませんね。
ではブラウザの気持ちになって上の例を考えてみましょう。
ユーザーに「〒150-0043」という数字の羅列を入力されたあなたはそれに対応した住所を探してきて表示させないといけません。
郵便番号と住所の対応を全て記憶している人はまれでしょう。分厚い一覧表で調べる必要があるかもしれません。
もっと能率的に処理するならば「誰か調べておいて」とお願いするのが一番です。
便利なことに、現実に郵便番号から住所を調べてきてくれるプログラムが存在し、それを利用することで住所の入力補助が可能になっています。
このように、自前で用意するのが難しいデータや表現について、その処理を専門とするプログラムが外部に存在し、それらがAPIと呼ばれています。ブラウザはネットワークを介して外部に処理を行ってもらい、自分は「結果」を受け取るだけ。このようなシンプルな仕組みが実現できるのもAPIのおかげです。
HTML5はこれらAPIを統括する「ディレクター」です。
勘違いされやすいところですが、厳密に言えばHTML5自体が全知全能で、あらゆる処理を一挙に引き受けるわけではありません。HTML5が優秀なのは、自分の能力の限界を知っていて「この処理は専門の方にお願いしましょう」とエキスパート達（API）にすぐ協力を要請できることです。その姿はまるで様々なクリエイターを率いてプロジェクトを成功に導く敏腕ディレクターです。
今までは「この処理はこの方に」という取り決めが無いままにWebアプリケーションが作られていました。それだとユーザーも開発者も困ることが多いため、HTML5は処理をお願いする「委託業者」とその「連絡方法」について仕様という形で取り決めることにしたのです。
では各種APIとその機能について見てみましょう。
その名のとおりWeb上でドラッグ&ドロップができるAPIです。
Gmailなど一部のサービスですでにドラッグ&ドロップは実現されていますが、このAPIを使用すれば誰にでも扱いやすい形でよりシンプルに記述されることになります。Web上に表示されている要素を別の位置に移動したり、ローカルのファイルをWeb上にドロップしたり、これまでにない動きをブラウザだけで実現します。
例えば次のサイト。ローカルにある画像、テキストオーディオなど様々なファイルをドロップするだけでブラウザ上で再生します。ちなみに「File API」というAPIを使用してファイルの種類を読み込んでいます。ローカルとインターネットがブラウザ経由で繋がりました。
Drag'n Drop Firefox 3.6
次はドラッグするファイルの種類によってコマンドが変化するRPG風ゲーム。
HTML5であそんでみたクエスト
Webアプリケーションは通常オンライン環境が前提となっています。HTML5のアプリケーションキャッシュやWebストレージといった機能を使用すればオフライン環境でもWebアプリケーションを使用することができます。技術的にはアプリケーションを実行するために必要なファイル群をローカルにキャッシュあるいは格納させる仕組みです。今のところ具体的なデモはあまりありませんが、将来的には、オフライン環境で書きかけのメールを編集したり、画像を操作したり、ゲームで遊んだりと、オンラインとオフラインの境界があいまいになってくるようなWebアプリケーションが登場することでしょう。
ちなみに先程紹介したドラッグ&ドロップの応用編が下記のサイトです。画像をローカルからドラッグ&ドロップで読み込んでそのまま編集（もちろんオフラインで）。そして編集したデータをそのままtweet！
HMTL5 Image Uploder
駆け足で紹介してきましたが、他にもWeb Sockets、Geolocation、Web Workers等、様々な機能がHTML5を支えています。残念ながら全てを紹介することはできませんが、お詫びに一つHTML5にまつわる小ネタを紹介します。
見ているページがHTML5で書かれているかどうかを見分ける一番簡単な方法です。
まずページのソースを表示させてください。ページの文頭に「!DOCTYPE」で始まる文字列が表示されていると思います。DOCTYPEは「そのドキュメントがどんな形式で書かれているか」（文書型）を表しており、ブラウザは文書型によってレンダリング（表示）モードを切り替えています。古いバージョンが宣言されたなら古いレンダリングモードで辻褄をあわせる、これを後方互換といいます。ちなみにHTML4.01の宣言文は以下の通り。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
「HTML 4.01 Transitional」 とはっきり宣言されているのが分かります。ではHTML5で書かれた文書の宣言文はどうでしょうか？
<!DOCTYPE html>
すごくシンプルです。というより、どこにも「HTML5」という記述がありません。これは「最新のレンダリングモードで表示してくれていいよ」という宣言になります。かっこいいですね「このお店で一番高いワインください」って言っているみたいで。
ちなみにHTML5 markup detectorをGoogle Chromeにインストールするとその文書がHTML5かどうか自動で判別してくれます。
今回はWebアプリケーションがらみの新機能を中心に紹介しました。色々なデモサイトを紹介しましたが、見るときは「部屋を明るくして」、ではなくて必ず最新のブラウザを使ってください。
次回はこれらの新しい機能がどんな風に浸透していくのか、HTML5が抱えている問題も含めて考えてみたいと思います。
プロジェクトデザイン ・ スマートフォン ・ アクセス解析 ・ ソーシャルメディア ・ ライフハック ・ オウンドメディア ・ 教育・研究機関 ・ Webアプリケーション ・ BtoB ・ クリエイターコラボレーション ・ コミュニティサイト ・ クロスメディア ・ SaaS ・ CMS ・ ブログ ・ アバター ・ プロジェクトマネジメント ・ Webサイト ・ ECサイト ・ SNS ・ SEO ・ 携帯 ・ デコメール ・ 映像 ・ loftwork.com ・ Flash ・ 印刷
Copyright© 2000-2012 Loftwork inc. ALL Rights Reserved.
