HTML5にはたくさんの新しい機能があります。それらのうち、「JavaScriptを使って、スクリプト内から利用するもの」に絞って、その利用の仕方を解説していきます。
HTML5の機能で、現時点で既にかなり使えるものといえば、なんといっても「Canvas」です。Canvasは、グラフィックを描画し表示することのできる新しいHTML要素です。これを利用し、JavaScriptを使ってグラフィックを描画する方法について説明していきましょう。
今回は、グラディエーションの塗りつぶしや座標変換など、描画に関するその他の機能について説明していきましょう。
Web Storageは、テキストのデータにキーをつけて保管できる、簡易データ保管機能です。「データベースというほどじゃないけど、ちょとデータを保存しておきたい」というときにとても重宝します。
HTML5では、WebブラウザにSQLiteというデータベースが内蔵され、database APIによりデータベースアクセスが可能となっています。このデータベース機能について説明しましょう。
HTML5では、ドラッグ&ドロップのための属性がHTMLに追加されました。また簡単なスクリプトを追加することで、データの受け渡しなども行えるようになっています。
HTML5からは、ローカルボリュームにあるファイルにアクセスすることができるようになりました。そのために用意された「File API」について説明しましょう。
双方向通信を可能にするWebSocket。その対応サーバーのインストールから実際の利用まで一通りを説明しましょう。
HTML5では、複数のスレッドを同時に実行し、並行処理を行わせることができます。そのための「Web Workers」オブジェクトについて説明していきましょう。
SVG(Scalable Vector Graphics)は、タグを使って簡単に図形を作成できる新しいグラフィック描画機能です。これを利用した図形の表示や、インタラクティブなグラフィック操作などを行ってみましょう。
今回は、JavaScriptを使ってSVGのグラフィックを操作する方法について説明しましょう。といっても、基本的にはDOMオブジェクトがわかればだいたい想像がつくものですよ。
SVGでは、「アニメーション」に関する機能が豊富です。ここでは、アニメーション用に用意されているタグ類の使い方についてまとめて説明をしていきましょう。
HTML5のデータベースには、SQLに依存しない「Indexed Database API」というものが用意されています。この新しい方式のデータベース機能について説明しましょう。
HTML5では、WebブラウザからGPS機能を利用するための「Geolocation API」が用意されています。これを利用して、ブラウザからGPSを使ってみましょう。
ローカル環境で動作可能なWebアプリを作成する場合、HTMLやその他のファイルをローカルにキャッシュする機能が必要になります。そのためのAPIについて説明しましょう。
HTML5では「Web Messaging」と呼ばれる機能が用意されており、複数のウインドウ間でメッセージをやりとりすることが可能です。この機能の基本的な使い方について説明しましょう。
サーバーと接続し通信する機能としては「Web Socket」が有名ですが、実はもっと手軽にサーバーに接続し、必要に応じてサーバーから情報を受け取る方法があるのです。それが「サーバー送信イベント(Server-Sent Events)」という機能です。
「XMLHttpRequest? 知ってる、使ってるよ」という人。Ajaxの基本と思えるXMLHttpRequestも実は進化しているのです。新しいXHR2を利用れば、Ajax通信でできることの幅がぐっと広がるのです。