HTML5HTML5 　入門編　入門編

HTML5HTML5 ってなにってなに ??

W3CW3C がが HTML4HTML4 に代わる次世代のに代わる次世代の HTMLHTMLとして策定を進めているとして策定を進めている HTMLHTML 仕様仕様

HTML HTML のの 55 回目に当たる大幅な改定版回目に当たる大幅な改定版

なぜ今なぜ今 HTML5HTML5 なのか、なのか、 XHTMLXHTML は？は？

20002000 年年W3CW3C はは XHTMLXHTML を正式勧告し、その後も改訂を進め、を正式勧告し、その後も改訂を進め、ルーズなルーズな HTMLHTML ではなく、厳密にパースが可能なではなく、厳密にパースが可能なXHTMLXHTML にシフトするはずだった。しかし、世の中のにシフトするはずだった。しかし、世の中の流れは流れは W3CW3C が想定した方向へ動かなかった。が想定した方向へ動かなかった。

大手の企業やサービスは、機械処理になじみやすいXML ベースの XHTML を利用したが、 HTML を作っている多くの人々は、主に Web ブラウザが特に不平をいわないからという理由で移行しなかった。

歴史的背景歴史的背景

簡単に言えば、シンプルに誰でも書けて間違っていて簡単に言えば、シンプルに誰でも書けて間違っていてもそれなりに表示されてしまうもそれなりに表示されてしまう HTMLHTML に比べに比べて、て、 XHTMLXHTML は扱うのが難しく、多くのサイト運営者は扱うのが難しく、多くのサイト運営者にとってにとって W3CW3C の提唱するセマンティック・ウェブをの提唱するセマンティック・ウェブを実現させる為の仕様は複雑すぎたのだろう。実現させる為の仕様は複雑すぎたのだろう。※※ セマンティック・ウェブについては、付録を参照セマンティック・ウェブについては、付録を参照

現場の開発者は、シンプルで実際に動くものを好んだ現場の開発者は、シンプルで実際に動くものを好んだHTMLHTML 以外だと以外だと　　 XML→YAMLXML→YAML

　　 SOAP→RESTSOAP→REST

とか

W3C発ではないWeb関連技術・仕様が広まった　 XMLHｔｔｐ Request

　 JSON

2004年 6月Webブラウザベンダが集まって作った団体「WHAT WG」が発足HTMLや APIの仕様策定（Web Applications 1.0、Web Forms 2.0）

をサクサク進める

「WHAT WG」Web Hypertext Application Technology Working Group

Safari,Mozilla、 Opera等が中心マイクロソフトは、WHAT WGへの参加を拒否！

2006 年 10 月W3C がついに XHTML への全面移行というシナリオが無謀だったと認める

2007 年 4 月W3C のスタンスの変化を見た WHAT WG が提案をもちかける『 WHAT WG で開発してきた仕様を W3C の HTML 研究会で出発点として採用して「 HTML5 」と名付けて開発をしてはいかが？』

2007 年 5 月W3C が WHAT WG の提案を受け入れる

すでにすでに HTML5HTML5 の一部に対応しているブラウの一部に対応しているブラウザザ

Safari4Safari4 Google Google ChromeChrome

Opera1Opera100

FireFoxFireFox3.53.5

InternetInternetExplorerExplorer88

○○ ○○ ○○ ○○ ××

HTML5HTML5 で追加、強化された機で追加、強化された機能能

動画、オーディオ再生動画、オーディオ再生22 次元ベクターグラフィック次元ベクターグラフィック セマンティック・ウェブの実現セマンティック・ウェブの実現

レイアウト機能レイアウト機能文書の構造化文書の構造化

新しい要素を少し紹介します新しい要素を少し紹介します

audioaudio タグ タグ videovideo タグタグ

AudioAudioタグタグ音声の再生ができる音声の再生ができる

<audio src=“<audio src=“音声ファイル”音声ファイル” ></audio>></audio>

videovideoタグタグ動画の再生ができる動画の再生ができる

<video src=“<video src=“動画ファイル”動画ファイル” ></video>></video>

canvascanvas タグタグcanvascanvasは、ブラウザ上に図を描くために策定された仕様は、ブラウザ上に図を描くために策定された仕様。。FlashFlashやや JavaJavaのようにプラグインを使わずに、のようにプラグインを使わずに、 JavaScriptJavaScriptベースで図を描くことができる。ベースで図を描くことができる。もともとはもともとは AppleAppleが発祥で、当初、が発祥で、当初、 Mac OSMac OSでおなじみのでおなじみの DaDashboardshboardで使われた技術仕様、その後で使われた技術仕様、その後 WHAT WAGWHAT WAGで採用されで採用された。た。CanvasCanvas要素は、すでに要素は、すでに Safari1.3Safari1.3以降、以降、 Opera9Opera9以降、以降、 FirefoFirefox1.5x1.5以降で実装されている。以降で実装されている。IEIEは対応していないが、は対応していないが、 GoogleGoogleが公開したが公開した ExplorerCanvasExplorerCanvasというという JavaScriptJavaScriptライブラリを使用すればライブラリを使用すれば canvascanvasの機能をエの機能をエミュレートできるミュレートできる

CanvasCanvasのサンプルのサンプルhttps://developer.mozilla.org/ja/A_Basic_RayCasterhttps://developer.mozilla.org/ja/A_Basic_RayCasterhttp://nic-nac-project.de/~jcm/index.php?nav=puzzlehttp://nic-nac-project.de/~jcm/index.php?nav=puzzlehttp://www.benjoffe.com/code/demos/canvascape/http://www.benjoffe.com/code/demos/canvascape/

考察・まとめ考察・まとめマイクロソフトの動き次第で、マイクロソフトの動き次第で、 HTML5HTML5の普及の普及のスピードが変わりそうのスピードが変わりそう

iPhoneiPhone、、 AndroidAndroid等の等のWebkitWebkitベースのブラウベースのブラウザを搭載したスマートフォンがシェアを伸ばしザを搭載したスマートフォンがシェアを伸ばしていることを考えると、ていることを考えると、 PCPCの世界よりスマーの世界よりスマートフォンの世界の方がトフォンの世界の方が HTML5HTML5の普及は早そうの普及は早そう

セマンティック ウェブによって、検索エンジ･セマンティック ウェブによって、検索エンジ･ンとの親和性が高まると思う。ンとの親和性が高まると思う。 SEOSEOコンサルコンサルは廃業になってしまうのでは？は廃業になってしまうのでは？

まだまだあるので、次回続編を予定しています。まだまだあるので、次回続編を予定しています。実践編とか実践編とか

付録付録

セマンティック・ウェブとは？セマンティック・ウェブとは？セマンティック・ウェブ (Semantic Web) は W3C のティム・バーナーズ＝リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によって World Wide Web の利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。

現在の World Wide Web 上のコンテンツは主に HTML で記述されている。 HTML では文書構造を伝えることは可能だが、個々の単語の意味をはじめとする詳細な意味を伝えることはできない。これに対し、セマンティック・ウェブは XML によって記述した文書に RDF や OWL を用いてタグを付け加える。この、データの意味を記述したタグが文書の含む意味を形式化し、コンピュータによる自動的な情報の収集や分析へのアプローチが可能となると期待されている。

HTML5HTML5 で実装されているサイで実装されているサイトト

HTML5 で実装されているサイトを集めたサイトhttp://html5gallery.com/

HTML5版 Youtubeの demoサイトhttp://www.youtube.com/html5

Safariの welcomeページhttp://www.apple.com/safari/welcome/