「HTML5対応チェックサンプルページ」について

HTML5が話題となってきています。正式な勧告は2014年になってからとは云え,既に多くのブラウザはHTML5に盛られた機能を実装しつつあります

このページでは,ブラウザがHTML5における次の機能に対応しているかどうかをチェックする極々簡単なWebページのサンプルを紹介しています。利用のブラウザを用いて是非サンプルページを閲覧してみてください
(注意)利用のブラウザでリンクされたサンプルページがクリックにより表示されない場合,リンク箇所を右クリックし,「新規(別)ウィンドウで開く」ことにより試みてください
新しいタグを利用して,本Webページの「新着情報」欄に似た構成のページを作成しています。FrameやTableを 作成するタグを使っていないことに着目ください。「新着情報」欄らし きページとして表示されるかどうかがチェックポイントです サンプルページを表示
HTML5ではキャンバス領域に直接描画する機 能が付加されています。このサンプルページでは,この描画機能を用いて簡単な図を描いています。最新バージョンの多くのブラウザで動作を確認しています。 サンプルページを表示
本Webページに於ける大会結果については PDFファイルやJPEGファイルを用いてきましたが,それらのファイル作成に当っては,「編集者メモ」欄でも紹介している「ソフトテニス大会運営ツールキット」プログラムにより作成したSVG(ScalableVectorGraphics)ファイルを基としてき ました。これまでも<参考>として幾つかのSVG画像を掲載してきたところですが,それらはただただ閲覧者のブラウザの表示機能に頼ったものであり,あくまでも<参考>にしか過ぎませんでした。「SVGファイルを直接大会結果ページ作成に用いたい」というのがツールキット作成者である編集者の長い間の希望でした
HTML5ではSVG画像が正式に画像として取り扱われることとなっていて,そのためのSVGタグも用意されています。各種ブラウザもSVGタグ内に書か れたSVGドキュメントを解釈し画像の表示を行うようになりつつあります。サンプルページでは,この新しいSVGタグを用いてSVG画像の表示を試みていますので是非試してみてください。
サンプルページを表示
HTML5ではWeb Forms 機能についての仕様がより高機能で便利な方向に改められ,ブラウザもそれらに対応することが求められています。 ここでは簡単な例を用いてブラウザのHTML5 Web Forms 機能対応度をチェックします。例では,各入力値のチェックなどにJava Scriptを一切用いていないことに留意ください
サンプルページを表示
HTML5でのvideoタグ並びにビデオファイル再生に,各種ブラウザがネイティブに対応しつつあります。 ここでは極々少時間のビデオファイルを用いてブラウザのビデオ再生機能をチェックします。MPEG-4(H.264)ビデオ(拡張子.m4v,.mp4),Webmビデオ(拡張子.webm),Oggビデオ(拡張子.ogv)の4種類のビデオファイルを用意しました   サンプルページ1を表示   サンプルページ2を表示

参考文献: サンプルページ作成にあたっては次の文献を参考としました
田所 淳:「Webのポテンシャルを引き出すHTML5」第1回~第6回,日経BP社:「日経SYSTEMS」 2011.4~2011,9
Mark Pilgrim著,矢倉眞隆 監修,水原 文 訳:「入門HTML5」,オライリー・ジャパン,2011.04.21
小松 健作:「Webシステムを変えるHTML5」第2回【高機能な入力画面】,日経BP社:「日経SYSTEMS」 2011.11
http://www.w3.org/TR/html5/the-input-element.html