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

Mike Dewey
Mike Dewey

はじめに

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

deviantART コミュニティはこの新しい描画ツールを熱心に歓迎し、今ではツール自体も適度なサイズのウェブ プロパティと同程度のトラフィックを認識しています。リリース以来、deviantART muro を使用して約 5 秒に 1 回新しい絵が提出されています。ここに示しているのは完了した描画の数です。すでに描画が開始されたもののうち、保存されていないものも多数あります。

この記事では、私たちが HTML5 をどのように使用しているか、なぜそのテクノロジーを採用したのか、そして大規模なウェブサイトで初めて本格的な HTML5 アプリケーションを開発するときに発見したことについて、いくつかの背景情報を提供しています。

指導員の自己紹介

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

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

Draw Here は、全盛期に 1 日に 100 枚ほどの絵を描くのに使用されていました。主要なウェブ アプリケーションの最終的な仕上げは行われていませんが、単に実験以上のものとして呼び出せるほど完全なものでした。2006 年半ばにプロジェクトは放棄されましたが、サイトは現在もまだ発展途上にあり、大半は笑顔のためだけに残っています。

deviantART muro が使用するテクノロジー

創業当初はさまざまな HTML5 技術を使いこなしており deviantART muro のリード開発者になってこの記事をお読みになっている方なら、Google が Silverlight や Flash といったプラグイン ベースの技術ではなく HTML5 を採用した理由をご存じでしょう。堅牢で、オープン標準を使用したものを必要としていました。

Canvas と SVG のどちらを選択すべきか

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

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

キャンバスを使用すると、何かをキャンバスに積み重ねると、それを忘れてしまいます。空白のキャンバスと 1 時間描画されたキャンバスは、コード内でまったく同じように動作し、メモリ使用量もほぼ同じです。ラスター描画プログラムは通常、火事にはうまく対応し、テクノロジーを忘れてしまい、難しいこともあります。たとえば、高速の元に戻す関数を作成することは、SVG よりもキャンバスの方がはるかに困難です。SVG では、配置した最後の数行までハンドルを維持でき、元に戻す操作はオブジェクトを削除するだけです。キャンバスでは、線が描画されると、その下に何があったかはわからないため、線を削除するにはその線が存在する領域を再描画する必要があります。

要点を少し理解してキャンバスに HTML5 を使用するという 他の HTML5 機能も活用することにしましたその一例が、localStorage を使用してユーザーのブラシ設定を追跡することです。 これにより、さまざまなブラシを好みに合わせて設定し、次回ツールを使用するときにその設定に戻ることができます。localStorage を使用すると、Cookie を使用したり、サーバーに移動したりすることなく、好みの設定を取得できます。

描画キャンバスの使用

Canvas は過去 5 年間で大きく進化しました。Draw Here ではパフォーマンスが悪く、キャンバス ポートを公開しませんでした。ご想像よりもパフォーマンスが優れていると言えるでしょう。キャンバスの広い部分をクリアしたり、複雑な図形を再描画したりすると、通常は人間が感じるよりも速い速度で描画されます。唯一の問題は、getImageData() を使用してピクセルをサンプリングすることです。処理の速度は明らかにキャンバスのサイズに左右されますが、大きなキャンバスでは、誤ったタイミングで getImageData() を行うと、アプリケーションの応答が遅いとユーザーが感じるのに時間がかかります。

キャンバスに関するさまざまなチュートリアルを読んでから、最初は 1 ページに 1、2 回など、控えめに使うべき重いものだという印象がありました。誰もが理解できているかはわかりませんが 私はそうだったので deviantART muro のコーディングを始めたときしばらくして、キャンバスがあれば多くの労力を省けるところがたくさんあることに気づきました。たとえば、アプリのモックアップでは、プライマリ カラーとセカンダリ カラーを示す 2 つの重なり合う三角形のカラー選択ツールが必要です。

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

私の第一印象は、従来の HTML と CSS を使ってこのようなちょっとした UI 機材を作ることを検討し始めました。 CSS のハッキングが得意な人であれば、CSS を使ってこれらすべてを行う方法を指摘するかもしれませんが、色が変化する 2 つの部分の三角形の形からはあまりよくわかりません。

キャンバスだけを使うことにしたのですが、DOM 要素 1 つと JavaScript を数行使ってウィジェットを作成しました。deviantART muro はいたるところでキャンバス ノードを使っています。各レイヤはキャンバスであり、Z-Index を切り替えるだけでレイヤの順序を変更できます。描画領域を縮小して表示するズームの「Navigator」パレットは、レイヤ キャンバスをソースイメージとして使用して drawImage() をときどき呼び出すもう一つのキャンバスにすぎません。描画領域カーソル（ブラシのサイズとズームに応じてサイズを調整する 2 トーンの円）も、マウスの下にフロート表示されるキャンバスです。

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

Internet Explorer（IE）

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

Google は当初、Internet Explorer で機能するように最善を尽くすことで最善を尽くし、ウェブ開発における最も共通点がないスタイルを採用することを当初から決めていました。ウェブ コミュニティは、既知のすべてのブラウザで同じサイトが開くまでは公開できないというアプローチを採用しているため、ユーザーはブラウザがないことをユーザーに通知できません。平均的なユーザーにとって、速度の問題はインターネット接続が原因となっており、どのページもほぼ同じようにレンダリングされます。そこで、戻るボタンの色など、ユーザー インターフェースに関する任意の小さな要素を基に、好みのブラウザを決定します。

HTML5 仕様を使って思い浮かぶ優れた機能を作成し、Internet Explorer で動作させることを試みました。うまく機能しない場合は、ブラウザがまだウェブ標準を実装していないためにその機能が利用できないことを説明するモーダルをポップアップ表示します。

当初は、Google の ExplorerCanvas（exCanvas）で機能するように試みました。驚くほど、キャンバスをまねることで、ただし、欠点が 1 つあります。キャンバス上で行われるすべてのストロークは、基盤となる VML 変換の DOM オブジェクトです。キャンバスで試せるほとんどのものはこれで問題ありませんが、deviantART muro のブラシの中には、多くのストロークを重ねて形を作るものもあります。Internet Explorer で、数千のノードを持つ VML に直面すると、たとえ高速マシンであっても、フォールバックして停止します。そのため、多くの描画呼び出しでは、実際の VML でコーディングを行い、ノードを連結する手法を使用し、move コマンドを使用してギャップがある場所を指定する必要がありました。インターフェースの小さなコントロールや要素の多くは、canvas タグを使用しています。通常、このような小さな使用は 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 の間で変換レイヤを記述することもできますこのテクノロジーを使い始めると、それはまったく新しい世界に足を踏み入れたようなものです。

リファレンス