こんにちは，太田です。今回はGoogle Chrome拡張に使えるHTML5関連技術の解説をお送りします。

Google ChromeはWebKit（Safari）と連携して，HTML5とその周辺技術の実装を積極的に進めています。一般的なウェブサイトでは，互換性の問題からHTML5などの最新実装を積極的に使用することは困難ですが，Chrome拡張ではそういった問題にとらわれずに最新の技術を試すことができます。今回から数回はそういったHTML5関連の話題を取り上げます。

Chrome拡張で使えるHTML5

HTML5は2010年1月時点で策定途中の段階です。既に一部のブラウザで実装されている仕様であっても，（実装によるフィードバックを受けて）仕様が修正される可能性があります。多くのブラウザで実装されていて実質的に確定している部分もありますが，まだほとんど実装されていない仕様や，実装はされたものの標準化には至らない可能性のある仕様などもあります。そのため安易にHTML5を使うべきではないという点は最初に申し上げておきます。

では，実際HTML5周辺の状況はどうなっているのかという点に関しては，JavaScriptに関する部分について，2009年までのまとめ（すなわち，Chrome 4に搭載される予定の部分）を書きましたので2010年のJavaScript：「これまで」と「これから」をご参照いただければと思います。また，本格的にHTML5を学びたい方は，Web標準とその周辺技術の学び方を足掛かりにされるのをお薦めします。

さて，今回はHTML5のなかで，Chrome拡張で役立つCanvasとドラッグ・アンド・ドロップを取り上げたいと思います。

Chrome拡張でのCanvas

canvasはHTML5の仕様の中（正確にはCanvasの2D context APIはHTML5から分離されます）でも比較的早く実装が進んでおり，IEでもExplorerCanvasやuuCanvas.jsやFlashCanvasなどのライブラリを使うことで（一部機能は制限されるものの）canvas相当の機能を使うことができるため，一般的なウェブサイトでも利用されることが増えています。

ChromeではCanvasのほとんどの機能が実装されているので，画像の加工やテキストの描画など今までFlashを使うしかなかったような機能をJavaScriptで実装できるようになっています（もちろん，Flashを使うまでもない場面でCanvasを使用できるという意味であり，Flashを使うべき高度なアニメーションなどは現状のCanvasでは限界があります）。

さて，Chrome拡張でのCanvasの利用ケースですが，なんといってもBrowser Actions API，Page Actions APIで使用するアイコンでの利用がかかせません。Browser Actions，Page Actionsで使用するアイコンにはCanvasのデータをそのまま適用することができるので，ダイナミックな（といっても19pxしかありませんが）表現が可能です。

Chrome拡張でのCanvas利用例

Canvasを使用するには，まずcanvasタグを用意します。画像をベースに使う場合は画像も読み込んでおくとよいでしょう。

<canvas id="canvas" width="19" height="19"></canvas>
<img src="sbm_icon.png" id="icon">

canvasタグはimgタグに似ていて，widthやheightはstyle（スタイルシート）ではなく要素に直接指定できます（スタイルシートでのサイズ指定も可能ですが，ブラウザによってサイズ指定に失敗することがあるようです）。

では，Browser Actionsのアイコンを回転させるサンプルを見てみます。

window.onload = function(){
  var canvas = document.getElementById('canvas');
  var icon = document.getElementById('icon');
  var ctx = canvas.getContext('2d');//コンテキストの取得
  ctx.translate(9.5, 9.5);//中心を移動
  var count = 0;
  var rotate = function(){
    ctx.clearRect(-9.5, -9.5, 19, 19);
    ctx.rotate(3 * Math.PI / 180);//3°回転
    ctx.drawImage(icon, -8, -8);
    chrome.browserAction.setIcon({
      imageData:ctx.getImageData(0, 0, 19, 19)
    });
    if (++count >= 120) {
      clearInterval(timer);
    }
  };
  var timer = setInterval(rotate,1);
};

canvasの操作はcanvasの要素自体ではなく，その要素から取得するコンテキスト（canvas.getContext('2d')で取得するオブジェクト）を介して行います。コンテキストを取得したら，translateメソッドで中心を右下にずらしています。これは，rotateメソッドが左上を中心に回転するので，中心点を調整しないとアイコンが見切れてしまうためです。

setIntervalで回転処理を繰り返すように登録し，rotateメソッドで3度ずつ回転させて，drawImageメソッドで画像をcanvasに書き出し，getImageDataメソッドでImageDataを取得してBrowser Actionsのアイコンに反映しています。count変数で処理回数を記録し，アイコンが1周したところで終了させています。

なお，繰り返しのたびにclearRectメソッドで描画をリセットする必要があります。drawImageは前回のデータに上塗りするので余計な描画が残ってしまうためです。この点は少し注意が必要です。

なお現時点のChromeでCanvasを使用するとメモリをかなり消費します。この例のようなアニメーションを何度も繰り返すとメモリをどんどん消費していくのがタスクマネージャ（Windows標準のものではなく，Chromeに搭載されたもの）で確認できます。ある程度時間が経つとほとんどのメモリは開放されるようですが，やはりCanvasでのアニメーションは多用しないほうがよさそうです。