一般に「HTML5」と呼ばれている仕様は、HTML要素の仕様だけでなく、Webアプリケーション用APIの仕様も含んでいます。これらのAPIを使うことによってHTML5では、2D/3Dグラフィックスの描画やローカルパソコンへのデータの保存といったことが可能になります。
HTML5ではJavaScriptを使うことで、できることが従来より大幅に増えます。しかし、これは逆に言えば、HTML5の機能を活用するには、JavaScriptのスキルが不可欠だということです。
このパートでは、筆者がHTML5(+JavaScript+CSS3)で作成したお絵描きアプリケーション「My Animals Note!」をサンプルにして、HTML5におけるJavaScriptプログラミング、具体的にはcanvas要素を使ったグラフィックス描画や、Web Storage APIを使ったローカルパソコンへの画像データの保存について説明します。
これまでFlash、サーバーサイドアプリケーション、デスクトップアプリケーションとして実装していた処理が、HTML5だけで実装できることをぜひ実感してください。今回のサンプルアプリケーションは、HTML5対応が進んでいるブラウザ「Safari5」を対象にして作成しています*1。Safari5はアップルのWebサイト(http://www.apple.com/jp/safari/)で無料ダウンロードできます。インストールしていない人は、この機会に入手してみてください。
マウスで線画を描いてローカルPCに保存
最初に、サンプルアプリケーションの動作について説明しておきましょう*2。アプリケーションのHTMLドキュメントをブラウザで開くと、オープニングアニメーションが始まります(図1)。こうしたオープニングアニメーションは通常、Flashを使用して作成しますが、ここではCSS3だけで作っています(本特集最後のコラム「CSS3だけでアニメーションを作成する」を参照)。
ページの下部の「スタート!!」ボタンをマウスでクリックすると、「背景選択」の画面になります(図2)。ここでは絵を描く領域の背景に置く画像を選びます。例えば「牛」の画像を選ぶと、図3のような画面になります。この画面にマウスを使って線画を描きます。
描画する際の線の色はページ上部に並んだ色の付いた四角形をクリックして選択し、線の太さは左上のリストボックスから選びます。
キャンバスの上でマウスのボタンを押したまま、マウスカーソルを移動させると、軌跡に沿って選んだ色・太さの線が描画されます(図4)。リストボックスの隣に並んでいるメニューで、「キャンバス:クリア」をクリックすると、描いた線画を消去します。「キャンバス:保存」で、描いた線画のデータをローカルパソコンに保存します。 線画を保存した後に、新しい線画を描いて、それを保存することもできます。この場合には、前の線画の画像データを残したまま、新しい線画の画像データを追加で保存します。保存したデータを削除したいときには、上部のメニューの「保存データ削除」をクリックします。保存したすべての画像データを削除してしまいますから、注意してください。
線画の画像データをパソコンに保存したら、ページ上部のメニューから「3.保存データ」を選択します。すると、保存した線画データが「保存データ」画面に表示されます(図5)。線画をクリックすると、線画が上下左右に飛び回るアニメーションが始まります。
複数の線画を保存した場合は、最近保存したデータが上の方に表示されます。線画の左の[×]をクリックすると、その線画のデータだけ削除できます。
以上がサンプルのお絵描きアプリケーションのおおまかな動作です。この記事ではこのうち主に、JavaScriptで実装している部分、すなわち、線の色と太さを選んでマウスで線画を描く部分と、線画の画像データをローカルパソコンに保存したり削除したりする部分について解説します。いずれもHTML5の目玉となる新機能です。