Peter Lubbers氏、Brian Albers氏、Frank Salim氏によって書かれたPro HTML5 Programmingは、開発者がモダン・ブラウザの潜在能力を活用したHTML5アプリケーションを開発するのを支援することを目的として書かれた本だ。
焦点をあてている分野は以下のようなものだ。
- Communication API: リアルタイムなクロスオリジン通信のための2つの重要な構成要素に関して詳しく述べている: Cross Document MessagingとXMLHttpRequest Level 2だ。
- Canvas API: 開発者がグラフやチャート、画像やアニメーションを動的に描画するためのAPIに関して述べている
- Geolocation API: このAPIを使えば、ユーザは現在の位置情報をWebアプリケーションと共有することができ、それによって、位置情報を利用したサービスを利用可能となる。
- Web Sockets API: Web経由で利用可能な、単一のソケット経由の全二重通信を定義する。
- Web Storage API: Webリクエストをまたいでデータを簡単に永続化するためのAPIであるHTML5 Web Storage (DOMStorageとも呼ばれている)に関して詳細に述べる。
- Web Workers API: このAPIによって、Webアプリケーションのバックグラウンド処理が可能となる。
- HTML5 Audio and Video: 新規に追加された要素によって、プラグインなしでオーディオやビデオが利用可能となり、共通の統合されたスクリプト記述可能なAPIを提供する。
この本の出版社であるApressは、’Using the HTML5 Web Sockets API’というタイトルの第6章を含む抜粋版をInfoQに提供してくれた。。
InfoQは、著者のひとりに、この新しい本に関して質疑応答を行った。
InfoQ: Peterさん、こんにちは。ご自身について、簡単にご紹介いただき、どのような経緯でHTML 5に関する本を書くことになったかを教えて頂けませんでしょうか。
Peter氏: 私は、8年間オラクルで働いた後に、4番目の従業員として2008年にKaazingに加わりました。Kaazingは、HTML5の仕様に(TCPConnectionとして)加えられた時から、HTML5 WebSocket APIとプロトコルに関係しており、今日ある姿になるように協力してきました。私どもは、WebSocketに関するトレーニングを2008年に提供することから始めました。どのブラウザもWebSocketをサポートするなど想像だにされなかったころです。私たちのWebSocketゲートウェイは、完全な(そして高速な!)標準のエミュレーションを提供しており、IE 6のような旧式のブラウザでもHTML WebSocketを実際に利用することができるのです!
私はKaazing社でドキュメンテーションとトレーニングを担当しています。Kaazingの共同設立者(Jonas Jacobi氏とJohn Fallows氏)は、かつてのOracleでの私の同僚であり、2006年に書かれたApress社のJSFとAjaxの本の編集レビューで彼らを手伝っていました。彼らは、私たち(Brian Albers氏(Kaazingの開発部門のVP)とFrank Salim氏(Kaazingの人間コード生成機)と私)にHTML5 WebSocket 5に関する本を書くように薦めました。そのころHTML5の本がないか調べてみたところまったくありませんでしたし、HTML5プログラミングに関するリソース自体が非常に限られている状況でした。
この本はありきたりの「HTML5 入門」ではありませんし、HTMLの歴史の講義でもありません。現時点までに、私たちは、HTML5が大きな流れであることがわかってきましたし、この本によって、既に大半のモダンなブラウザで動作するシンプルで強力なAPIを使ったコーディングに取りくんでもらいたいのです。
InfoQ: HTML5とは何ですか?また、HTML5によって解決しようとしている問題は何ですか?構成要素の概略をご説明いただき、それぞれがどのように関わっているかを説明いただけませんか?
Peter氏: HTML5は単なるHTMLの反復的な改善ではなく、時間がとてもかかりました。HTMLの最新のバージョン(4.01)は、10年以上前にリリースされているのです。
HTML5について語るとき、私たちは、より広いHTMLとCSS、JavaScriptの組合わせを取り上げます。例えば、HTML5は新しくcanvasとvideo要素を導入しました。それ自身でも十分強力なのですが、JavaScriptでプログラム的な制御を与え、CSSでスタイルを整えた時にその潜在能力は完全に発揮されます。
HTML5の要は単純さです。アイデアの一つは、「牛の道を舗装しよう」です。つまり以前は、難しかったことを非常に単純にするように努力しようということです。以前は、FlashやSilverlightといったプラグインや大量の複雑なJavaScript使ってはじめて実装できたことが、現時点では簡単にできるのです。例えば、HTML5では、ネイティブのform inputタイプ(日付やカラーピッカーなど)やform検証、ネイティブのソケット(全二重通信)、ネイティブの描画API(SVGとcanvas)、(Geolicationを利用した)位置情報の利用を導入しました。
InfoQ: 様々なHTML5 APIに対する現在のブラウザの対応状況はどのようなものでしょうか。また近い将来、改善されていくのでしょうか。
Peter氏: ブラウザのHTML5の機能の採用は、急速に加速してきています。実際のところ猛烈なスピードです。これは、とてもワクワクするような状況です。多くのモダン・ブラウザ(Chrome、Safari、Firefox、Opera)は既に機能群の75%から90%をサポートしており、この数字は日々増えて言っています。
あなたが使っているブラウザのあなたが利用しているバージョンでは、どの機能がサポートされているかを知るには、html5test.comやcaniuse.comのようなサイトをご覧になってください。
IE8で約28%の機能しかサポートしておらず(IE6ではわずか3%)遅れをとっているIEでさえ、IE 9では、HTML5に「倍賭け」しており、HTML5の機能の60%近くがサポートされます。これらのうちのいくつかは、ハードウェア最適化をともなっており、他のブラウザと互角の競争を可能とするでしょう。
InfoQ: あなたの著書のなかでは、いくつかのHTML5 APIが紹介されています。これらのAPIによって、どのように開発者がより良いアプリケーションを開発できるようになるのか、例を示していただけませんか。
Peter氏: もちろんです。Webアプリケーションで、デスクトップアプリケーションと同等の機能をもったのもがますます増えています。例えば、Kaazingでのとても才能のある同僚であるFrank Salim氏は、WebSocketsとCanvasを使ってVNCクライアントを開発しました。これは数年前(もしくは数ヶ月前)には想像だにできなかったことでしょう。
一般的に、HTML5を使うと、よりステートフルで、トランザクションを中心としたWebアプリケーションを作ることが可能となります。リモートのサーバにWebSocketを使って直接接続することができますし、Geolocationを使って位置情報を利用したアプリケーションを構築し、それをMap APIと組み合わせることも可能です。すばらしいアニメーションゲームをSVCやcanvasを使って構築することもできます(2Dのものだけではなくブラウザ上での3Dも望むのであれば可能)。
個々のAPIも強力ですが、それらのいくつかを組み合わせれば、すごいアプリケーションが作れるのです。例えば、HTML5では、新しいApplication Cacheを使って、オフラインアプリケーションを作成できます。そこにクライアント側のWeb Storage(localStorgeと呼ばれる永続化ストレージ)を使うと、もちろん、オフラインアプリケーションとストレージをうまく組み合わせることができます。オフラインになったとき、当てにならないブラウザのキャッシュの挙動(戻るボタンを押しても前のページは消えてしまっている)に頼らなくてもよくなります。アプリケーション全体が利用可能で、アプリケーションがオンラインになったことを検知するまで、保存されるデータはクライアント側に送られます。
InfoQ: HTML5に現時点で欠けており、将来追加されるべきだとお考えの機能はありますでしょうか。新しいAPIやすでに存在するものに対する変更はありますか。
Peter氏: もちろんです。もう少し磨きをかけないとならないものはありますし、ブラウザは相互運用性に注力しなければならないでしょう。HTML5のもともとの設計方針を失うべきではないでしょう。改善できる分野は、さまざまなAPI(Cross Document MessagingとWebSocket)でのバイナリサポートや、3D Canvasのサポートの強化などがあります。他の機能へのアクセスのしやすさは現時点ではまだ欠けています。
WebGLへの取り組みを通じて、JavaScriptにOpenGLをもたらしたのならず、汎用的なバイナリデータAPIも生み出しつつあります。高速な3D APIには、バイナリバッファが必要です。これを受けて、TypedArrayと呼ばれるバイナリデータを操作するAPIが新しく提案されています。この提案が軌道に乗れば、TypedArrayはHTML5のあらゆるところで便利に利用できるものとなるでしょう。
InfoQ: HTML5アプリケーションを開発しようととりかかる場合には、どのように行えばよいでしょうか。アプリケーションの開発やデバッグ、テストなどで利用できるツールはどのようなものがあるのでしょうか。
Peter氏: 現時点では、HTML5をサポートしているIDEは多くありませんが、Creative Suite 5用のDreamWeaver HTML5 Packや、Visual Studioなどが、構文の補完機能を提供しています。また、単純にUltraEditのような優れたテキストエディタやEclipseのようなIDEを利用することも可能です。
ブラウザのデバッグ機能は、今日、とても優れたものとなっています。また、ブラウザベンダは、開発者向けツールに多くの素晴らしい機能を追加し続けています。例えば、Google Developer Toolsや、Speed Tracer、Safari Web Inspector、Firefox Firebug、Opera Dragonflyなどです。あなたが、これらのツールをしばらく見ていないなら、多くの素晴らしい機能にびっくりするでしょう。
毎週、毎週、私はブラウザの素晴らしい新機能を目にします。例えば、Chromeは、最近、オフラインアプリケーションのデバッグ機能とアプリケーションキャッシュの閲覧機能、開発者ツールからのWeb SQL Databaseへのコンソールアクセス機能を追加しました。本当に洗練されています。
InfoQ: 初めてのHTML5プロジェクトを始めようとしているチームに対して、どのようなアドバイスをしますか。気をつけなければならない落とし穴はどのようなものでしょうか。ベストプラクティスをご紹介ください。
Peter氏: (すべての)誇大広告を信じないこと、Pro HTML5 を購入すること。これでOKです ;-)
冗談はさておき、たくさんの素晴らしい情報が存在します。Googleのhtml5rocks.comサイトをみておきましょう。その他の素晴らしいリソースとしては、Paul Irish氏のhtml5boilerplate starter kitがあります。これは、何年もの専門知識を凝縮して、(多くの場合、最大の懸念事項となる)古いバージョンのためにサイトをうまく対応させるティップスやトリックを利用しています。html5boilerplate starter kitの文書 (インラインコメントとコードの抜粋)は、現時点でのベストプラクティスを含んでいると思います。そのほかにも優れたサイトは多数あります。
私は、HTML5のトレーニングを世界中で提供しています(HTML5促成コース、ブートキャンプ、WebSocketコース)。ですので、素早く立ち上げを行う必要があるのであれば、私に声をかけてください!
InfoQ: HTML5を始めたばかりの人々にとって、あなたの著書から得られるもっとも価値のあることはなんですか?また、次のレベルに進みたいと考えているより熟練した開発者にとってはどうでしょうか。
Peter氏: HTML5の強力なシンプルさです。
書名が示すように、Pro HTML5 Programmingは、既にHTMLやJavaScriptを理解しており、新しいHTML5 APIを利用したいと考えているデザイナや開発者を対象にしています。
しかし、HTMLやJavaScript、CSSにはじめて触れる人にとっても、HTML5は、とても単純であり、実際のところ多くの場合、見た目より簡単です。この本によって、人々が刺激をうけ、HTML5 APIを想像的な方法で利用されることを願っています。
Pro HTML5では、新しいHTML5 APIの利用方法を説明しています。実践的で実際に利用されているHTML5機能の例を提供し、どの機能が現在のバージョンのブラウザでサポートされているかを示しています。一般的で、利用価値のあり強力なHTML5 APIを選んで取り上げているので、すばやくスキルの立ち上げをおこなうことが可能です。GeolocationやWeb Storage、WebSocket、Web Worker、 Canvas、Audio、Videoやその他のHTML5の機能を利用してアプリケーションを構築する方法を学ぶことができます。
これらの機能をどのように組み合わせるか、また他のWebの標準技術とどのようにシームレスに協調して動作させるかを知ることができます。私たちが利用した例は、HTML5 ドキュメントを利用しており、ネィティブのブラウザ機能を利用することもできます。
InfoQ上でHTML5から、より詳細な情報を得ることができる。