2009年にW3CがXHTML2をやめてHTML5の開発に集中したことや、GOOGLE, APPLE & MicrosoftのVPやCEOが揃って ”これからは、HTML５” と言ったことをきっかけに、HTML5の注目とその浸透率は、日に日に加速している。実際に最終的なHTML5の完成は２０２２年以降とされているが、ブラウザーのサポートの早さと企業の後押し次第では、予想よりずぅ〜と早く完成するのではないかという見解もある。
そこで、今回はHTML5の中でも簡単に使用できる便利な機能をいくつかピックアップして紹介したいと思います。
Doctype
Doctypeの歴史をたどると、なぜこんなバカバカしい長ーーーいDoctypeになったかわかりますが（ヒント：IE)、そんな長い古い昔の歴史は忘れて、新しく短いきれいな新しい歴史に向かう第一歩です。
古いDoctype:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
新しいHTML5 Doctype:
<!DOCTYPE html>
すばらしい。こうやって人間は、昔の苦労を忘れていくんですね〜。
Script と Links の Types
新しいHTML5では、JavaScriptやCSSファイルなどを入れる場合、そのファイルがどんなタイプかを指定するtypeを指定する必要がなくなり、簡単になりました。
古いLinkとScript
<link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="script.js"></script>
新しいLinkとScriptの入れ方
<link rel="stylesheet" href="style.css" /> <script src="script.js"></script>
コンテンツを編集
最近よくWeb2.0などで見られるのが、ディスクトップアプリーケーションなどの用に、文書などのコンテンツをクリックすると、フォームになり、それで編集して、コンテンツをアップデートすると言ったようなのがありますが、現状では、jQueryのJeditableに見られるようにJavascriptを使って作られています。
新しいHTML5では、contenteditable=”true”を指定するだけで、その属性内の内容が編集できるようになります。例えば、p に指定するとこんな感じです。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>contentediable</title> </head> <body> <p> この文書をクリックするだけで文書の内容を編集できます。編集した内容をJSでアップデートさせることで、簡単に高機能なUIが実現します。 </p> </body> </html>
HTML5 フォームインプット
フォームは、いろんなアプリーケーションで最も使われている属性です。今回HTML5では、様々な機能がフォームのinput属性に追加されました。その一つがtypeで指定できる様々な種類です。range inputの使い方は、前回のチュートリアルでも紹介しましたが、他にも以下のリストが使えるので、是非是非試してみてください。また、typeを指定することで、validationも行ってくれるので、いち早くすべてのブラウザーが対応してくることを願うのみです。
- Search
- tel
- url
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color
Audioのサポート
ちょっとしたBGMを流すにも、ちょっとしたFlash Playerなどを用意する必要がありましたが、HTML5では、audioタグが用意されているので、簡単に音楽を流せる。もちろん、まだ実際にサポートしているブラウザーは少ないので、すぐに使うにはリスクが高いがもうあと１年もすれば大丈夫でしょ。
<audio autoplay="autoplay" controls="controls">
<source src="song.ogg" />
<source src="song.mp3" />
</audio>
Videoのサポート
音楽だけでなく、動画もHTML5で使える様になるのは、業界にとってはかなりの大ニュースだと思います。Youtubeもいち早くHTML５でビデオを埋め込みをサポート＜http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html＞させるなど、いろいろな方面から活発的にHTML５のビデオサポートが行われている。
<video controls preload>
<source src="omoshiroVideo.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="omoshiroVideo.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> HTML5ビデオにサポートされていません。 <a href="cohagenPhoneCall.mp4">ビデオをダウンロードしてお楽しみください。</a> </p>
</video>
videoタグ内にある”preload”を見てもらうとわかる様に、簡単にpreloadを出来るのもうれしいですねー。 他にも、media elements APIを使えばビデオプレヤーのカスタマイズなどもできるので、カスタマイズしていいのができましたら、是非共有してください。
少しでも早く使いたい方へ
もうウェブ業界である程度身を置いている人であれば知っていると思いますが、CSSのサポートが最悪だったIEが、今回、HTML5のサポートも今の所最悪です。
ただ、実際に日本でのIEの浸透率は、海外と比べてもダントツで大きいために、日本国内でのHTML5を使用すためには、できるだけIEでもしっかり動かしたい。
ただ単にHTML5を使いたいがためにわざわざJSを使うのは気が引けますが、知らない人のために、こんな物があるというのだけ紹介しておきましょう。
JSでHTML5をIEで使えるようにする
