「HTML5 Rocks」だけじゃない、ブラウザ各社のHTML5チュートリアルを集めました

Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。

グーグルの「HTML5 Rocks」

グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 Rocks」をオープンしました。

HTML5 Rocksは現在3つのコーナーに分かれています。

1つ目は「Interactive Presentation」。これはHTML5の新たなAPI、DOM APIやLocal Storage、WebWorkerなどさまざまな機能を紹介するプレゼンテーション。機能と共にJavaScriptでのコーディング例や実際に動作するデモなどが用意されており、HTML5の入門的なコンテンツとなっています。

2つ目の「Playground」では、HTML5の機能に対応したHTML5/CSS/JavaScriptが用意され、その動作を実際に試すことができるコーナー。実際に動作するコードが提供され、その一部を変更すると動作がどう変わるか、といったことも試せます。

3つ目の「Step by Step Tutorials」では、HTML5やGoogle Chromeの機能の使い方、プログラミングの方法などを紹介する解説記事が投稿されています。

マイクロソフトは「ScriptJunkie」

グーグルの「HTML5 Rocks」のオープンは開発者のあいだで話題になっていましたが、あまり話題にならずひっそりと今月オープンしたのがマイクロソフトの「ScriptJunkie」。

HTML、CSS、JavaScriptとWebブラウザ用のコード、スクリプトの解説が中心で、ブログ形式で新しいコンテンツが追加されていくようなレイアウトになっています。最近の記事では「Optimizations For Improving Page Load Times」や「Shape Up Your Buttons with jQuery UI」などが面白そうです。

解説記事のほかに「Forum」が用意され、読者同士の情報交換が行えます。が、この記事を書いている6月27日の時点では投稿が3つしかなく、まだ盛り上がってはいないようです。

モジラは「Developer Center」

モジラは以前からWebデベロッパー向けに情報提供サイト「Mozilla Developer Network」を運営しており、HTML5についてのまとまった情報提供もブラウザベンダの中ではもっとも以前から行っていたのではないかと思います。

その「Mozilla Developer Network」の中に「HTML5」コーナーがあり、HTML5の解説を集中的に行っています。

解説はいくつかのコーナーに分かれています。主なものを紹介しましょう。

• HTML5 elements
  HTML5で加わった新たな機能のいくつかを紹介しています。記事「Using audio and video」でオーディオやビデオを、「Forms in HTML5」ではフォームの新たな機能などを紹介。

• Canvas support
  Canvasタグの使い方を「Canvas support」と「Canvas support」の2本の記事で解説。

• Web application features
  Webアプリケーションで活用できるオフライン機能、Web Workers機能、DOMストレージなどの機能を、記事「Offline resources in Firefox」、「Web workers」、「WHATWG client-side session and persistent storage (aka DOM Storage)」などで紹介しています。

オペラは「Dev.Opera」

オペラもWebデベロッパー向けの情報提供を以前から「Dev.Opera」で行っており、HTML5に関する情報もここを中心に行われています。

HTML5とCSS3の情報などが集まっているのは「Open Web」タグのページ。記事「document Everything you need to know about HTML5 video and audio」や「document HTML 5 canvas - the basics」、「document CSS3 transitions and 2D transforms」など、多数の記事が掲載されています。

オペラについてはHTML5だけでなく「Web標準カリキュラム」についても紹介しておきます。これはYahoo!やWaSP（The Web Standards Project）などが協力して作成した、Web標準を学ぶためのオンラインコンテンツです。全体で10章ある充実したもの。一部は日本語化されていますので、HTML5の解説と合わせておすすめします（参考：Web標準を学ぶ重量級コンテンツ「Web標準カリキュラム」の日本語訳が公開開始）。

アップルは「HTML5 Showcase」

アップルはHTML5の魅力を伝える「HTML5 Showcase」を開設したことで話題になりましたが、このHTML5 Showcaseは、以前の記事「オレサマHTML5はごめんだ」で紹介したようにSafariにしか対応していませんのでご注意。

HTML5.JPおよびHTML5関係のコミュニティ

ブラウザベンダ以外のコンテンツも紹介しておきましょう。これまで紹介してきたのはほとんど英語のコンテンツでしたが、日本語で読めるHTML5関連の情報としてまとまっているのが「HTML5.JP」です。

W3Cなどが公開するHTML5に関連した文書を日本語訳したものが数多く掲載されています。例えばHTML4とHTML5の違いを詳しく解説したW3Cの文書の日本語訳「W3C - HTML 5 differences from HTML 4」などはおすすめです。

HTML5関連の主なコミュニティも2つ紹介します。1つはHTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」（参考：HTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」がスタート）。

もう1つは、Googleグループ上で運営されている「html5-developers-jp」です。どちらもメーリングリストを中心として運営されており、誰でも参加できます。過去のメーリングリストの内容も公開されていますから、興味のある方はぜひのぞいてみてください。

最後に、PublickeyでもHTML5関連の情報はつねに発信しています。タグ「HTML5」をぜひお見逃しなく！