ケーススタディ - deviantART muro での HTML5

Mike Dewey
Mike Dewey

はじめに

2010 年 8 月 7 日、deviantART は 10 周年を迎えました。誕生日を記念して、deviantART muro という HTML5 描画ツールをリリースしました。このツールは、スタンドアロンのウェブ アプリケーションとして使用できるほか、フォーラムのコメントに写真を追加するための軽量な描画ツールとしても使用できます。

deviantART コミュニティはこの新しい描画ツールを熱烈に歓迎し、ツール自体は、かなり規模の大きいウェブ プロパティと同程度のトラフィックを獲得しています。リリース以来、deviantART muro を使用して新しい絵が 5 秒ごとに 1 回送信されています。これは、完成した図面の数にすぎません。開始されたものの保存されていない図面は、この数よりはるかに多くあります。

以下の記事では、Google が HTML5 をどのように使用しているか、Google がこの技術を選択した理由、主要なウェブサイト向けの最初の本格的な HTML5 アプリケーションの作成中に私が発見したことについて説明します。

プレゼンターの自己紹介

2005 年後半、私は Draw Here で使用される描画ツールの開発を担当したデベロッパーの 1 人でした。このツールは、ブックマークレットによって起動する「ウェブ グラフィティ」ツールでした。任意のウェブページに画像を描画するために使用されていました。Draw Here は当初、SVG を使用して作成されました（Firefox 1.5 ベータ版がリリースされたばかりで、SVG をサポートした最初のブラウザの 1 つでした）。

Internet Explorer では、SVG はバックグラウンドで作成されていましたが、描画は VML を使用してレンダリングされていました。当時、WebKit は SVG をサポートしていなかったので、キャンバス（当時は WebKit でのみ使用できる新しいテクノロジー）を使用して SVG をレンダリングするようにコードを移植しました。ある時点では、SVG コードを古いブラウザでレンダリングできるように、div 要素を貼り付けたポートも作成しました。（もちろん、これはできることを示すためのジョークで、使用するのは非常に遅かった）。

全盛期には、Draw Here を使用して 1 日に約 100 件の描画が行われていました。大規模なウェブ アプリケーションの最終的な仕上げはされていませんでしたが、テストというレベルを超える完成度でした。2006 年半ばにプロジェクトは中止されましたが、サイトは現在も残っています（ほとんどは冗談半分です）。

deviantART muro で使用されるテクノロジー

初期の頃にさまざまな HTML5 テクノロジーを使用した経験があるため、deviantART muro のリード デベロッパーを任されました。この記事を読んでいる人なら、Silverlight や Flash などのプラグイン ベースのテクノロジーではなく、HTML5 を採用した理由を理解できるでしょう。堅牢でオープンな標準規格を使用するものが必要でした。

Canvas と SVG の選択

描画レイヤにはキャンバスを使用することにしました。キャンバスと SVG のどちらを使用するべきか迷うことがあるかもしれません。これらの 2 つのテクノロジーでできることには多くの重複があります。Draw Here が証明したように、どちらのテクノロジーでも描画アプリケーションを作成できます。

描画したオブジェクトのハンドルを保持する場合は、SVG が適しています。たとえば、ユーザーが線を描画し、線の一部をドラッグして形状を変更できるようにするには、SVG を使用すると非常に簡単です。キャンバスで同じことをしようとすると、非常に不便です。

キャンバスを使用すると、キャンバスに要素を配置して、それ以上気にする必要がなくなります。空白のキャンバスと 1 時間描画されたキャンバスは、コードではまったく同じ動作をし、メモリ フットプリントもほぼ同じです。通常、ラスター描画プログラムは Fire and Forget テクノロジーと非常によく連携しますが、特定の作業は難しくなります。たとえば、高速な元に戻す機能を作成するのは、SVG よりもキャンバスの方がはるかに困難です。SVG では、最後に配置した数本の線へのハンドルを保持しておけば、それらのオブジェクトを削除するだけで元に戻すことができます。キャンバスでは、線を描画するとその下に何があったか分からなくなるため、線を削除するにはその線が描画されていた領域を再描画する必要があります。

思い切ってキャンバスに HTML5 を使用することを決めた後、他の HTML5 の機能も少しずつ使用することにしました。たとえば、localStorage を使用してユーザーのブラシ設定を追跡する方法があります。これにより、さまざまなブラシを好みに合わせて設定しておけば、次回ツールを使用するときにその設定に戻すことができます。localStorage を使用すると、これらの設定を取得するために Cookie を使用したり、サーバーへのアクセスを必要としたりする必要がなくなります。

Canvas の使用

Canvas は過去 5 年間で大きく進化しました。Draw Here では、パフォーマンスが良くなかったため、キャンバス ポートは公開しませんでした。おそらく、想像以上にパフォーマンスが高いと思われます。キャンバスの大部分を消去したり、複雑な形状を再描画したりすることは、通常、人間の知覚よりも速い速度で行うことができます。たまに遅すぎると感じるのは、getImageData() を使用してピクセルをサンプリングする場合のみです。オペレーションの速度はキャンバスのサイズに依存しますが、大きなキャンバスで getImageData() を不適切なタイミングで実行すると、アプリケーションの応答が遅いとユーザーが感じるほど時間がかかることがあります。

さまざまなキャンバス チュートリアルを読んだ後、キャンバスは重量級のもので、ページに 1 ～ 2 回程度しか使用しないほうがよいという印象を受けました。誰もがこの感覚を理解しているかどうかはわかりませんが、私は理解していたため、deviantART muro のコード作成を始めた当初は、この機能は控えめに使用していました。しかし、しばらくすると、キャンバスが役立つ小さな場所がたくさんあることに気づきました。たとえば、アプリのモックアップでは、プライマリ カラーとセカンダリ カラーを示す 2 つの重なり合う三角形のカラー選択ツールが指定されています。

カラー選択ツール
カラー選択ツール

最初は、従来の HTML と CSS でこの小さな UI ギミックを作成する方法を考えました。CSS のハッキングに長けている人は、これらすべてを CSS で行う方法を指摘するかもしれませんが、色が変化する 2 つの部分が三角形の形状をしているため、そうは見えません。

キャンバスを使用することを思いついた私は、1 つの DOM 要素と数行の JavaScript でウィジェットを作成しました。deviantART muro では、キャンバスノードが至る所で使用されています。各レイヤはキャンバスであり、レイヤの順序を変更するには z インデックスを切り替えるだけです。描画領域の縮小ビューを表示するズーム ナビゲータ パレットは、レイヤ キャンバスをソース画像として使用して drawImage() を呼び出す別のキャンバスにすぎません。描画領域のカーソル（ブラシのサイズとズームに応じてサイズが調整される 2 色の円）も、マウスの下に浮かぶキャンバスです。

他の HTML5 テクノロジーに比べてキャンバスをより自由に使用できたのは、Google の ExplorerCanvas ライブラリにより、Internet Explorer でキャンバスをシミュレートできるためです。次のセクションに進みます。

Internet Explorer（IE）

大手ウェブサイトの多くがまだ HTML5 を使用していない主な理由は、Internet Explorer のユーザーを失うことを望まないことです。deviantART が HTML5 描画アプリケーションを作成したと聞いたとき、ほとんどのデベロッパーが最初に思い浮かぶのは「IE はどうなった？」という質問でしょう。

当初、Internet Explorer で動作するように最善を尽くすことは決定しましたが、共通の最低基準に沿ったウェブ開発は行わないことにしました。ウェブ コミュニティでは、既知のすべてのブラウザで同じに見えるまでサイトを公開できないというアプローチが取られているため、ユーザーは自分のブラウザに不足している機能が何かを判断できません。一般的なユーザーにとって、速度の問題はインターネット接続に起因するものであり、どのページもほぼ同じようにレンダリングされます。そのため、ユーザーは、戻るボタンの色など、ユーザー インターフェースの些細な要素に基づいて、お気に入りのブラウザを決めます。

Google は、HTML5 仕様を使用して思いついたクールな機能を作成し、Internet Explorer で動作するようにしようと決めました。動作しなかった場合は、ブラウザにウェブ標準がまだ実装されていないため、その機能は使用できないことを説明するモーダルを表示することにしました。

当初は、Google の ExplorerCanvas（exCanvas）で動作するようにしようとしました。ほとんどの点でキャンバスを模倣するのに驚くほど適しています。ただし、1 つ欠点があります。キャンバスで描画されるすべてのストロークは、基盤となる VML 変換の DOM オブジェクトです。キャンバスで試すほとんどの作業では問題ありませんが、deviantART muro のブラシの中には、多くのストロークを重ねてシェイプを作成するブラシもあります。高速マシンであっても、Internet Explorer が数千個のノードを含む VML に遭遇すると、クラッシュして停止します。このため、多くの描画呼び出しでは、実際に VML でコードを記述し、ノードを連結して、移動コマンドを使用してギャップがある場所を指定するというトリックを使用する必要があります。インターフェースの小さなコントロールやその他の要素の多くはキャンバス タグを使用しています。これらの小さな用途は通常、exCanvas で問題なく動作します。

exCanvas で一部の機能を動作させるだけでなく、Google Chrome Frame プラグインをインストールすれば、ご利用のバージョンの Internet Explorer を引き続き使用できることをユーザーに案内しました。Google Chrome Frame は、Google Chrome のレンダリング エンジンを Internet Explorer に埋め込むプラグインです。ユーザーから見ると、使い慣れたブラウザを使用しているだけですが、裏では Chrome の HTML5 機能と高速な JavaScript を使用してページがレンダリングされます。

Chrome Frame で動作するように移植するのは簡単だとは聞いていましたが、こんなに簡単だとは思いませんでした。追加のメタタグを追加するだけで、IE で動作するようになります。

概要

HTML5 仕様の新しいテクノロジーを扱うのは楽しい作業です。今回使用した機能はすべて、本番環境で使用できるレベルだと思います。IE で問題なく動作させる必要がある場合でも、canvas と exCanvas を組み合わせることで、驚くほど多くのことができます。SVG と VML 間の変換レイヤの作成も、驚くほど簡単に行えます。この技術を使い始めると、まったく新しい世界に足を踏み入れることになります。

参照