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