canvas を HTML マークアップで補完する: 第 1 回 canvas API と HTML/CSS モデルを融合させる

それぞれが持つ長所を同時に活かすハイブリッド実装

HTML の canvas は、パフォーマンスが優れていることに加え、オーバーヘッドが低く、ピクセルを直接操作できるなど、多くの点で卓越していますが、テキストのレンダリング、SEO、アクセシビリティー、そしてデバイス非依存のマークアップなどに関しては、HTML のほうが遥かに優れており、canvas では力不足です。この記事では、従来の HTML/CSS モデルの長所と canvas API の長所を比較対照し、それぞれの最も優れた側面を利用した、canvas と HTML のハイブリッド・アプリケーションの概念を紹介します。また、canvas 要素の上に HTML 要素を重ね合わせる各種の手法についても検討します。

Kevin Moot, Software Developer, The Nerdery

Photo of Kevin MootKevin Moot は、子供の頃に自分の (ずらりと 6 色を揃え、驚異的な 280x192 の解像度を持つ) Apple IIe でゲームを作成して以来、コンピューター・グラフィックスに興味を持っています。HTML5 の Canvas 技術を使用して最先端の Web サイトの数々を作成した彼は、HTML/CSS、JavaScript、.NET などを専門分野にしています。彼は現在、The Nerdery でインタラクティブ・ソフトウェアの開発者として働いています。



Ryan DeLuca, Software developer, The Nerdery

Photo of Ryan DeLucaRyan DeLuca は 1998年にプログラミングを始めました。その趣味は、わずか数年後にフリーランス・プログラマーとしての経歴に変わっていました。その経験を形として表すことに決めた彼は、ウィスコンシン州スーペリア校に入学し、2011年に理学士号を取得して卒業しました。卒業から間もなくして、PHP、JavaScript、CSS、および HTML を専門とするソフトウェア・エンジニアとして The Nerdery に入社しました。彼が持つさまざまな能力には、リレーショナル・データベース/SQL とグラフィックスの操作も含まれます。



2012年 9月 13日

はじめに

この全 2 回からなる連載記事の第 1 回では、canvas API の長所と HTML/CSS モデルの長所を組み合わせたアプリケーションを作成する方法を学びます。ハイパフォーマンスながらもオーバーヘッドの小さいグラフィックを必要とする Web アプリケーションを作成するには、canvas API を使用するのが最高の選択となりますが、従来の HTML/CSS モデルの有用性を検討することなく canvas を中心にアプリケーション全体を設計するのは短絡的と言えるでしょう。canvas API を使用するのが当然と考えるのではなく、canvas では不可能ではないとしても実現するのが難しい部分を、HTML/CSS が持つ有用な特徴の数々を活用することで補う方法を学んでください。

頻繁に使用される略語

  • API: Application Programming Interface
  • CSS: Cascading Style Sheets
  • HTML: HyperText Markup Language
  • UI: User Interface

この記事では、canvas 要素と併せて従来の HTML コンポーネントを利用してアプリケーションを設計する「ハイブリッド」手法を検討します。純粋な canvas ベースの実装が理想的な実装とは程遠い理由を含め、この手法を採用する動機について説明するとともに、canvas API と従来の HTML/CSS モデルを比べたときにそれぞれが勝る点、劣る点について検討します。さらに、アプリケーションを設計する際に HTML 要素と canvas 要素のレイアウトおよび相互作用を計画するのに役立つ数々のサンプルも紹介します。

記事で使用するサンプルのソース・コードは、「ダウンロード」セクションからダウンロードすることができます。


HTML/CSS モデルの長所

HTML と CSS を使用した従来の Web モデルの方が優れているシナリオはいくつかあります。このセクションでは、canvas API ではあまり十分な (あるいはまったく) サポートがされていない部分に関して、HTML/CSS モデルがもたらす最も有用なメリットについて概説します。具体的には、HTML の堅牢なテキスト・サポートと、セマンティクスの面で意味のある HTML マークアップに関連するメリットです。

HTML の堅牢なテキスト・サポート

HTML の主な長所の 1 つは、<b></b> などのフォーマット設定タグから font-weight:bold などの CSS ルールに至るまで、広範なスタイル指示を使って簡単にテキストに装飾を付けられることです。

その一方、canvas API は、テキスト・ストリングをビットマップとしてレンダリングする fillText() メソッドを公開しています。このメソッドは、下位レベルで呼び出される単純なメソッドであり、さまざまな制約を伴います。なかでも最大の制約の 1 つになっているのは、fillText() に渡すテキスト・ストリングには 1 つの統一スタイル・ルールしか適用できないことです。このコンテキストでの「スタイル・ルール」とは、フォント名、フォント・サイズ、フォントの色などを設定する (CSS ルールと同様の) 単一のルールだと思ってください。

統一スタイルを適用したテキスト

図 1 に示すテキストを見てください。

図 1. サンプル・テキスト
赤色のフォントで作成された「Variety is the spice of life!」というテキスト

このテキストには一貫して統一スタイル・ルール (赤色、イタリック、Arial フォント) が適用されるため、HTML/CSS または canvas のどちらを使ったとしても、まったく同じようにレンダリングするのは簡単です。

リスト 1 とリスト 2 のコードで、このテキストをレンダリングする方法を、HTML と CSS を使用した場合と canvas を使用した場合とで比較します。実際に動作するサンプルについては、「参考文献」を参照してください。

リスト 1 は、図 1 のテキストを HTML と CSS でレンダリングした場合のコードです。

リスト 1. 統一スタイルを適用したテキストを HTML と CSS でレンダリングする
<style>
    .uniform-style {
        font: italic 12px Arial;
        color: red;
    }   
</style>
<span class="uniform-style">
    Variety is the spice of life!
</span>

リスト 2 では、同じテキストを canvas を使ってレンダリングした場合のコードです。

リスト 2. 統一スタイルを適用したテキストを canvas でレンダリングする
var canvas = document.getElementById('my_canvas');
var context = canvas.getContext('2d');

context.font = 'italic 12px Arial';
context.fillStyle = 'red';
context.fillText('Variety is the spice of life!', 0, 50);

動的スタイルを適用したテキスト

今度は、図 2 に示すテキストを見てください。

図 2. 動的スタイルを適用したテキスト
フォントの色とサイズに変化をつけた「Variety is the spice of life!」というテキスト

リスト 3 に、このテキストをレンダリングするために必要な CSS ルールを記載します。

リスト 3. 動的スタイルを適用したテキストを HTML と CSS でレンダリングする
<style>
    .dynamic-style {
        font: 12px Arial;
        color: blue;
    }
    .dynamic-style strong {
        font-size : 18px;
        color: green;
    }    
    .dynamic-style em {
        color: red;
        font-weight: bold;
        font-style: italic;
    }    
</style>
<span class="dynamic-style">
    <strong>Variety</strong> is the <em>spice of life</em>!
</span>

canvas API には、異なるフォント・スタイルを使用してテキストを装飾できるようにする HTML タグや CSS クラスの概念が存在しないため、上記のサンプルに記載されているテキスト・ブロックを canvas API でレンダリングするとなると、かなりややこしいことになります。

canvas API はシーケンシャル・ステートマシンとして機能するため、図 2 の効果を再現するには、「タイプライター的」手法とも言える処理が必要になります。つまり、使用するスタイルを選択し、そのスタイルを使用するテキストの部分を入力したら、次に使用する別のスタイルを選択し、そのスタイルを使用するテキストの部分を入力するといった具合に処理します。

このように処理するには、一般に、次のアルゴリズムを使用することで対処できます。

  1. テキストの次の部分に使用するスタイル (18px Arial、緑色) を設定します。
  2. テキストの次の部分 (Variety) を canvas にレンダリングします。
  3. 特定のピクセル数 (60) の分だけ右へ移動します。
  4. テキストの各部分について、ステップ 1 からステップ 3 を繰り返します。

リスト 4 に、このアルゴリズムの最も基本的なネイティブ実装を記載します。

リスト 4. 動的スタイルを適用したテキストを canvas でレンダリングする
context.font = '18px Arial';
context.fillStyle = 'green';
context.fillText('Variety', 0, 50);
context.translate(60, 0);  //move 60 pixels to the right (a)

context.font = '12px Arial';
context.fillStyle = 'blue';
context.fillText('is the', 0, 50);
context.translate(35, 0); //move 35 pixels to the right (b)

context.font = 'italic bold 12px Arial';
context.fillStyle = 'red';
context.fillText('spice of life!', 0, 50); // (c)

図 3 に、3 つの別個のテキスト・ブロックがそれぞれ順にレンダリングされて表示される様子を示します。

図 3. キャンバスにレンダリングされていくテキスト
a として「Variety」、b として「Variety is the」、c として「Variety is the spice of life!」というテキストが表示される様子。

この記事の後半で、canvas のネイティブ関数 fillText() の上にさらに抽象化の層を追加することによって、この手法を改善する方法を説明します。ただし、どの手法にしても、中核となるのは同じタイプライター・アルゴリズムです。

HTML/CSS では当然のものとして使われているほとんどのテキスト・スタイル (例えば単語のラップ、文字の間隔、行の高さなど) は、canvas API のネイティブではサポートされていないことに注意してください。これらのテキスト・スタイルが必要な場合には、自分でアルゴリズムを変更して、必要な関数を実装しなければなりません。

これで、canvas API ではテキストのレンダリングが一仕事となる理由、そして最小限の作業でテキストをフォーマット設定するという点では、従来の HTML/CSS モデルの方が優れている理由が明らかになったはずです。


HTML 内の意味のあるセマンティクス

優れた Web 設計の基本となるのは、セマンティクスが適切で意味のある HTML 構造になっていることです。適切な構造と意味を持つように考慮して作成された HTML マークアップからは、沢山のメリットがもたらされます。

canvas は根本的には単なるグラフィック・プロッターであるため、意味のあるマークアップという概念はなく、canvas 専用に作成されたアプリケーションでは、意味のある HTML マークアップによってもたらされるメリットは基本的に失われてしまいます。例えば、検索エンジンや視覚障害を持つユーザーの観点からは、基本的に canvas 要素は何もないブラック・ボックスのようなものです。

ここからは、意味のある HTML マークアップがもたらすいくつかのメリットについて検討します。

検索エンジンによる認識

検索エンジンは、自動化された検索ボット/スパイダーによって読み取った情報をベースに、検索用のインデックスを作成します。検索スパイダーは Web ページにアクセスすると、HTML を構文解析して、意味のある情報を可能な限り抽出します。

プログラムによって canvas 上にレンダリングされたテキストは、結局のところビットマップでしかないため、検索スパイダーはこのテキストを完全に無視します。したがって、アプリケーションが canvas だけで開発されている場合、検索スパイダーはそのページからごくわずかなコンテキスト情報しか収集できないことを理解することが重要です。

そうは言っても、検索エンジンは、<canvas> 要素に含まれる HTML5 非対応のブラウザー用のフォールバック・テキストを読み取ることはできます。リスト 5 に、フォールバック・テキストの一例を記載します。

リスト 5. <canvas> 要素内のフォールバック・テキスト
<canvas>
   We are sorry, your browser doesn't support HTML5!
</canvas>

検索エンジンによって認識されないという問題は、canvas で特別新たに生じた問題というわけではなく、これまでも Flash や Silverlight などのブラウザー・プラグイン用に作成されたアプリケーションが直面してきた問題です。

アクセシビリティー

視覚障害を持つユーザーは、音声変換ツール (スクリーン・リーダー) を利用して Web ページのコンテンツを読みます。スクリーン・リーダー・ツールがヘッダー、フッター、リストなどの違いを理解できるようにするには、構造化 HTML マークアップを使用します。canvas ベースのアプリケーションをはじめ、HTML マークアップを生成しないアプリケーションは、スクリーン・リーダーが認識できるコンテンツの手がかりを残しません。

適切に構造化された HTML は、ユーザーが標準的なキーボード・ショートカットを使用して、ページをナビゲートできるようにします。例えば、Tab キーによって、フォーカスをページの次のリンクに移動させるなどです (図 4 を参照)。

図 4. Tab キーを使用してフォーカスをページ上のリンクに移動させる
W3C Web サイトのスクリーンショット

Flash や SIlverlight などのブラウザー・プラグインでさえも (一般的に使用されるキーボード・ショートカットをサポートすることにより) アクセシビリティーを提供するという点で飛躍的に前進していますが、残念ながら canvas にはそのようなアクセシビリティーに対応した機能は組み込まれていません。

機器およびユーザー・エージェント

ページがどのようにレンダリングされるかは、最終的にはユーザー・エージェントによって決まります。同じ HTML マークアップでも、機器によって解釈の仕方が異なる場合があるためです。例えば、ほとんどのモバイル機器では、<input type="text"> 要素をタップすると、ユーザーがテキストを入力できるようにオンスクリーン・キーボードが表示されます。HTML5 仕様に準拠するブラウザーでは、E メール・アドレス、Web サイトの URL、電話番号、日付など、さらに多様な入力タイプを使用できるようになっています。

図 5 に、iOS 機器に表示された <input type="date"> 要素を示します。ブラウザーは自動的に全機能を備えた日付ピッカーを表示するので、入力要素のタイプを date として定義する以外、日付ピッカーを実装するために追加で必要なコードはありません。

図 5. iPhone での <input type="date"> の処理
iPhone での日付入力の図

セマンティクスが適切な HTML を作成するときには、基本的に、ユーザー・エージェントがその特定の機器のユーザーに最善の方法でコンテンツを表示できるものと信頼して、ユーザー・エージェントと契約していることになります。

それとは対照的に、canvas 要素内でレンダリングされるすべてのコンテンツは、あらゆる機器で常に同じように表示されます。つまり、ユーザー・エージェントとの契約を破ることになります。したがって、その特定の機器がコンテンツを表示する最善の方法を認識していると信頼することができなくなります。

ハイパーリンクの認識

Web は根本的に、ハイパーリンクを中心に作成されます。ハイパーリンクのない Web は想像もできません。最近のユーザー・エージェントは、ユーザーがリンクにナビゲートできるようにするだけでなく、コンテキストに応じた追加機能も豊富に提供します。例えば、新しいタブにページを開いたり、リンク・アドレスをコピーしたり、リンクを E メールで送信したりするなどの機能です。

ハイパーリンクのテキストを canvas にレンダリングすることはできますが、厳密に言えば、canvas にはハイパーリンクの概念はありません。

青い下線付きのテキストをレンダリングして、ハイパーリンクをシミュレートしたとしても、ユーザー・エージェントはそれが本物のハイパーリンクであると認識することはないため、コンテキストに応じた有用な機能をユーザーに提供することはできません。


canvas API の長所

HTML の長所を考えると、canvas 用に作成されたアプリケーションは厳しい事態にさらされているように思えるかもしれません。しかし、canvas を中心としたソリューションの設計には、いくつかのメリットがあります。そのなかでも大きなメリットとしては、canvas ではグラフィックに関するパフォーマンスが高いこと、そして異なる機器間で一貫性をもたせられる可能性があることにあります。

グラフィックに関するパフォーマンス

画像、テキスト、およびアニメーションのレンダリングなど、ある特定のタスクは HTML でも canvas でも実現することができます。

このようなタスクは、canvas で行ったほうが必ず処理時間が短縮されます。canvas には、HTML の構文解析と階層型文書モデルの保守に伴うオーバーヘッドがないためです。

HTML 中心のアプリケーションで主なパフォーマンス・キラーとなるのは、ノードの追加、削除、または更新です。文書モデルに対するこれらの更新により、ブラウザーは大抵の場合、ページをまるごと再ペイントまたは再フローすることになりますが、そのプロセスにはかなりの計算コストがかかります。リアルタイム・アプリケーションに必要な文書モデルの更新が 1 秒間に何度も行われるとなると、ブラウザーの処理速度の低下は避けられません。

速度が極めて重要な場合には、HTML 中心のアーキテクチャーから canvas 中心のアーキテクチャーに切り替えることが、最大のパフォーマンスを実現する上で最も望ましい手段となるはずです。高いパフォーマンスを得るには、HTML のように堅牢なマークアップ言語と CSS の柔軟性を扱う代わりに、下位レベルの API を扱わなければならないという犠牲を伴うのです。

異なる機器間での一貫性

ブラウザーのレイアウト・エンジンにはそれぞれ違いがあることから、従来の HTML/CSS モデルでは常に、異なるプラットフォーム間で一貫した表示を実現するのに苦労してきました。Web ページをプラットフォーム間で非常に似た外観にすることはできても、ピクセル単位まで一貫した設計を実現するのは困難です。

グラフィックを canvas 上に描画すれば、そのような問題は消えてなくなります。canvas では、グラフィックとテキストの表示をピクセル単位で制御できるため、あらゆるプラットフォームで 100% 一貫した出力になることを保証できます。


canvas と HTML のハイブリッド実装を勧める論理的根拠

canvas 指向のアプリケーションを作成する場合、canvas の短所は、従来の HTML/CSS モデルの機能を利用することで克服することができます。

前述のように、canvas の最大の制約は、堅牢で使いやすい UI コンポーネントを実装するのが難しいことです。UI を実装する最善の手法を決定するときには、UI 要素の要件を評価することが有益な手段となるはずです。検討すべき評価基準の一例を以下に記載します。

  • 要求されている UI 要素のコンテンツはどのようなものか?
  • そのコンテンツを更新しなければならない頻度はどの程度か?
  • コンテンツに対話性がある場合、どの程度の対話性が要求されているのか?

こうした評価基準の中に強力な要件があれば、それがほぼ、いずれか一方の実装を示唆することになります。例えば、要求されているコンテンツがアプリケーションの特定の側面を単純なテキストで表示することであれば、基本的な HTML 要素が最も効率的な手段となり、パフォーマンスの低下を引き起こすこともないはずです。一方、要素をアニメーション化したり、頻繁にコンテンツが更新されるリッチな要素にしたりする場合には、canvas を使用するのがより望ましい手法となるでしょう。また、対話の容易さが要件であるとしたら、通常は HTML 要素が最も自然な手法となります。これは、jQuery などのライブラリーが提供する関数と組み合わせる場合には、特に言えることです。

ここからは、canvas と HTML のハイブリッド実装に適したいくつかのシナリオを検討します。

迅速なプロトタイプの作成

プロトタイプは、おそらく canvas よりも HTML と CSS を使用したほうが遥かに迅速に作成することができます。一例として、メニューを備えたアプリケーションについて考えてみてください。メニューは HTML/CSS 構造に大いに役立つこと、そして jQuery プラグインをはじめとする既存の豊富なライブラリーを利用できることから、HTML でメニューを実装する場合の作業量は、canvas で同じものを実装する場合に比べるとわずかなものになります。HTML 要素によるパフォーマンスの低下は、このプロトタイプの例ではさほど問題になりません。このプロトタイプは、完全に最適化されたシステムではなく、概念検証として意図されているためです。

HTML と CSS を使用するプロトタイプの側面は、アプリケーションが完全に具体化されてから、純粋な canvas で実装することもできます。メニューの例の場合、最終的な成果物でメニューを canvas に変換すると、ブラウザー文書モデルへの依存関係が取り除かれることになるため、パフォーマンスが顕著に改善されるはずです。

開発ツール

HTML マークアップでは大量の情報を簡単に表示できることを考えると、開発ツールでの表示には HTML と CSS を使用するのが適しています。その一例は、アプリケーションにデバッグ用のコンソールを追加する場合です。デバッグ用のコンソールには、フレーム・レート (fps)、アプリケーションのすべてのオブジェクトとそれぞれの座標のリストなどの統計を表示することが考えられます。

この場合も、HTML 要素の導入によるパフォーマンス・ヒットは大きな問題になりません。開発ツールは開発者専用であり、決してエンド・ユーザーに表示されることはないためです。

ユーザー・インターフェースのオーバーレイ

アプリケーションに、テキストとフォーム要素 (チェック・ボックスやドロップダウン・リストなど) を組み合わせたリッチな UI が必要な場合には、HTML が当然のソリューションとなります。このような種類のコンポーネントを canvas で再現するには、かなりの時間がかかるだけでなく、アプリケーションがアクセシビリティーの問題を抱える可能性もあります。

反対に、HTML の長所はリッチなユーザー・エクスペリエンスを可能にします。例えば、一連の HTML ベースの UI コンポーネントによって、canvas 領域の上に浮かび上がる「ヘッドアップ」ディスプレイを構成することもできます。

アプリケーションのリアルタイム・パフォーマンスに与える影響を最小限に抑えるには、文書モデルの変更 (要素の更新、挿入、および削除) をできる限り少なくするように心掛けてください。文書が頻繁に更新されると、アプリケーションのパフォーマンスが低下します。

コンパニオン・ユーザー・インターフェース

アプリケーションの対話型リアルタイム・コンポーネントの外側に UI 要素を表示する場合、それは HTML と CSS を使用する絶好の機会です。例えば、最初の開始シーケンスの間だけ、あるいはアプリケーションが一時停止しているときにだけ、UI 要素を表示させることができます。

ゲームのロードおよび保存のインターフェースも、HTML ベースのコンパニオン UI を利用できる好例です。ユーザーがゲームを保存している間、ゲームは一時停止されるため、アプリケーションのリアルタイム・パフォーマンスに与える影響はありません。HTML/CSS を使用すれば、このインターフェースを迅速に開発して、適切に構造化されたマークアップによるすべてのメリットを得ることができます。


canvas と HTML のハイブリッド実装をする

このセクションでは、Web ページ・レイアウト内で canvas 要素を他の HTML 要素と組み合わせる基本的な手法をいくつか概説します。すべての手法を網羅することはしませんが、以降に概説するいくつかの手法は、HTML と canvas の両方の長所を最大限利用する一方でそれぞれの短所を最小限に抑えるための例となります。アプリケーションのアーキテクチャーを計画する際には、どの手法 (または手法の組み合わせ) が目標を達成するのに最適であるかを検討してください。

以降のシナリオで前提となるのは、以下の 2 つの主要なコンポーネントです。

  • canvas 要素: 主にグラフィックとアニメーション・コンポーネントを収容します。
  • HTML 要素: メニュー、ナビゲーション要素、フォームなど、UI のさまざまな側面を収容します。

canvas 要素のスクロール

<canvas> タグはブロック・レベルの要素と見なされます。したがって、HTML 要素と canvas 要素を組み合わせる最も単純な手法は、<canvas> 要素をただ単に文書の本体に挿入することです。この要素はデフォルトで他の部分に対して相対的に配置されるため、canvas 要素を文書の他の部分と一緒にスクロールさせるために特に必要となるマークアップや CSS はありません。

canvas 要素を前景要素として使用する

<canvas> 要素をページ上の絶対位置に配置するには、要素が前景に表示されるように z-index を設定します。

Flash アプリケーションを組み込む場合と同じように、この手法は、ページ上にある他の HTML 要素と相互作用しない canvas アプリケーションに適しています。

canvas 要素が前景の最前面にあれば、canvas 要素はあらゆる形態のユーザー入力 (マウスのクリック、タッチ・イベントなど) を取り込むことができます。

図 6 に、canvas 要素を絶対位置に配置される前景要素として配置する方法を示します。

図 6. canvas 要素を文書の上に重ねる
「HTML」と書かれた 1 つの大きな正方形の中に、「Canvas」と書かれた小さい正方形が含まれている図と、それを横から見て立体的に表し、「HTML」と書かれた正方形と「Canvas」と書かれた正方形が別の層に分かれて配置されている様子を示した図

クリックして大きなイメージを見る

図 6. canvas 要素を文書の上に重ねる

「HTML」と書かれた 1 つの大きな正方形の中に、「Canvas」と書かれた小さい正方形が含まれている図と、それを横から見て立体的に表し、「HTML」と書かれた正方形と「Canvas」と書かれた正方形が別の層に分かれて配置されている様子を示した図

リスト 6 のコードは、z-index に大きな値を設定して、canvas 要素を最前面の前景層として配置する CSS の例です。

リスト 6. canvas 要素を前景要素として配置する CSS
canvas {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    right: 0px;
}

canvas 要素を背景要素として使用する

<canvas> 要素は、Web ページの背景にコンテンツを表示するためにも使用できます。

この手法を使用して、標準 HTML コンテンツの背後に、アニメーション化されたリッチな背景シーンを表示することができます。背景の canvas シーンは、文書内のあらゆる透明な領域から透けて見えます。

図 7. canvas 要素を文書の背後に配置する
「HTML」と書かれた、リアルタイム・グラフィックを示す青色の正方形と、その背後にある「Canvas」と書かれた別の正方形を示す図と、それを横から見て立体的に表し、「HTML」と書かれた正方形と「Canvas」と書かれた正方形が別の層に分かれて配置されている様子を、頂点を点線で結ぶことで示した図

クリックして大きなイメージを見る

図 7. canvas 要素を文書の背後に配置する

「HTML」と書かれた、リアルタイム・グラフィックを示す青色の正方形と、その背後にある「Canvas」と書かれた別の正方形を示す図と、それを横から見て立体的に表し、「HTML」と書かれた正方形と「Canvas」と書かれた正方形が別の層に分かれて配置されている様子を、頂点を点線で結ぶことで示した図

リスト 7 のコードは、z-index に負の値を設定して、canvas 要素を最背面の背景層として配置する CSS の例です。

リスト 7. canvas 要素を背景要素として配置する CSS
canvas {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
}

canvas 要素の上に HTML 要素を重ねる

canvas 要素の上に 1 つ以上の HTML 要素を重ねる手法もあります。図 8 に示すように、この手法は、多数の UI コンポーネントを必要とするアプリケーションには有力な候補となります。この例では、canvas 要素が提供するグラフィック層の上に、HTML ベースの UI コンポーネント一式が表示されます。

図 8. canvas 要素の上に HTML 要素を重ねる
「Canvas」と書かれた 1 つの大きな正方形の中に、「HTML」と書かれた長方形が左側にあり、同じく「HTML」と書かれた小さい正方形が右側の両隅に 2 つある図と、それを横から見て立体的に表し、「Canvas」と書かれた正方形と「HTML」と書かれた 3 つの HTML ユニットが別の層に分かれて配置されている様子を、頂点を点線で結ぶことで示した図

クリックして大きなイメージを見る

図 8. canvas 要素の上に HTML 要素を重ねる

「Canvas」と書かれた 1 つの大きな正方形の中に、「HTML」と書かれた長方形が左側にあり、同じく「HTML」と書かれた小さい正方形が右側の両隅に 2 つある図と、それを横から見て立体的に表し、「Canvas」と書かれた正方形と「HTML」と書かれた 3 つの HTML ユニットが別の層に分かれて配置されている様子を、頂点を点線で結ぶことで示した図

CSS を使用して個々の UI コンポーネントを配置することで、これらの UI コンポーネントが canvas 要素の上の前景における特定の位置に表示されるようにすることができます。

リスト 8 のコードは、<div> 要素に含まれる UI コンポーネントを、z-index に大きい値を設定することで前景に配置する例です。

リスト 8. HTML コンポーネントを前景要素として配置する CSS
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
}

HTML ベースの UI コンポーネントは最上位層にあることから、デフォルトでユーザー入力に応答します。例えば、特定の要素にチェック・ボックス、スクロール・バー、またはハイパーリンクなどの UI 要素が含まれる場合、ユーザーによるマウスのクリックは、これらの UI 要素によってインターセプトされます。通常、これらの UI 要素のいずれかをクリックしても、そのイベントが下位層にある canvas サーフェスにまで到達することはありません。けれども場合によっては、ユーザー入力が canvas サーフェスに到達したほうが望ましい場合もあります。

特定の HTML 要素を、ユーザー入力を無視するように構成するには、pointer-events という CSS プロパティーを設定します (リスト 9 を参照)。pointer-events を none に設定すると、その要素は、通常であればユーザー入力に関連付けられことになるすべての動作を無視します。つまり、<div> 内に含まれるテキスト、ハイパーリンク、フォーム要素はすべて選択不可能になり、基本的に使用できなくなります。

リスト 9. pointer-events プロパティーを設定する CSS
div.user-interface {
    position: absolute;
    z-index: 100;
    top: 50px;
    left: 50px;
    pointer-events:none;
}

入力イベントが下位層に到達すると、<canvas> 要素がそのイベントをインターセプトする場合があります。例えば、<canvas> 要素に、マウス移動イベントをキャプチャーするイベント・リスナーが配置されている場合などです。

pointer-event のプロパティーは、Internet Explorer を除くすべてのブラウザーでサポートされています (Internet Explorer には、同様の動作をまねるための次善策が用意されています)。

入力サーフェスを持つ canvas 要素の上に重ねる場合

ユーザー入力を取り込むもう 1 つの手法は、前の手法と似ていますが、pointer-events:none の CSS プロパティーを使用する必要はありません。この手法では、canvas 要素と HTML UI 要素の上に、もう 1 つの層を追加します。この層は、ユーザー入力を取り込むためだけに追加されます。

この手法が適しているシナリオは、HTML 要素が表示目的のためだけに存在している場合です。入力サーフェスは、その下にある要素にイベントが到達する前に、すべてのイベントをトラップするため、HTML インターフェース要素とは一切やりとりすることができません。図 9 に一例を示します。

図 9. canvas 要素の上に HTML 要素を重ね、さらに入力サーフェスを追加で重ねる
「Canvas」と書かれた正方形を背面に配置し、「HTML」と書かれた 3 つの HTML UI ユニットをその前面に、そして「HTML」と書かれた入力サーフェスを最前面に配置した様子を、頂点を点線で結ぶことで立体的に示した図

入力サーフェスを実装するには、canvas 要素と同じ幅と高さを設定し、絶対位置に配置される <div> を作成します。<div> を空のままにすれば、基本的に、ユーザー入力を取り込むことを唯一の目的とする透明の層になります。

ユーザー入力を取り込むには、すべてのイベント・リスナーをこの <div> にアタッチします。この要素は最前面にあるため、すべてのユーザー入力は、下位にある要素ではなく、この要素によって取り込まれます。


次のステップ

この連載の第 2 回では、この記事で取り上げた概念をさらに詳しく説明し、canvas と HTML のハイブリッド・アプリケーションの実装例を紹介します。canvas ゲームの上に基本的な HTML UI を重ねて追加する方法、そして canvas 内に UI 要素を作成する方法をステップ・バイ・ステップで説明します。また、第 2 回ではアニメーションおよびテキストをレンダリングする際の考慮事項を説明し、HTML と canvas の長所を活かす方法の例を紹介します。

図 10 に、第 2 回で作成するサンプル・ゲームの構想を示します。

図 10. HTML 要素と canvas 要素を組み合わせたサンプル・アプリケーション
2 つのボックスとプレイヤーが前面に表示された画面

まとめ

今回の記事では、canvas API と比べて HTML モデルが勝る点と劣る点、canvas と HTML のハイブリッド・アプリケーションを作成する理由、そして HTML 要素と canvas 要素を重ねる各種の方法を説明しました。

この時点で、皆さんは HTML と canvas の長所を最大限に活用するアーキテクチャーを選択する方法を考えていることでしょう。連載の第 2 回では、今回の記事で学んだ新しいスキルを使いこなして、スペース・シューター・ゲームを実装します。お楽しみに。


ダウンロード

内容ファイル名サイズ
Article source codecanvashtmlpt1sourcecode.zip2KB

参考文献

学ぶために

  • 実動サンプル: テキストを HTML で表示するための一連の CSS ルールをセットアップする例を含め、この記事で使用した実動サンプルを見てください。
  • HTML5 の Canvas を使って素晴らしいグラフィックスを作成する」(developerWorks、2011年2月): canvas を使用して Web ページを機能強化する方法を学んでください。canvas は HTML5 の単純な要素ですが、強力な機能が満載されています。
  • HTML5 Canvas: Canvas API の使用法に焦点を当てたこのデモを見て、極めて単純なアニメーションの色を設定する方法を学んでください。
  • HTML5 の基礎: 第 4 回 最後の仕上げ」(developerWorks、2011年7月): HTML5 と HTML5 の canvas 要素での変更内容の詳細を学んでください。
  • Canvas Pixel Manipulation: Safari Dev Center に用意されているこのデモを見て、canvas を管理して効果的なビジュアル・アセットを開発する方法を学んでください。
  • WHATWG: HTML5 の微調整に W3C と協力して取り組んでいるこの開発者コミュニティーについて調べてください。
  • Canvas チュートリアル: Mozilla の開発者たちによるこのチュートリアルで、独自の HTML ページに <canvas> 要素を実装する方法を学んでください。
  • HTML5 Canvas リファレンス: W3Schools.com のリファレンスに用意されている演習を利用して、canvas の知識に磨きを掛けてください。
  • jQuery Events API: ユーザーがブラウザーを操作するときに適用される振る舞いを登録するためのメソッドについて詳しく学んでください。
  • developerWorks Web architecture ゾーン: さまざまな Web ベースのソリューションを話題にした記事を調べてください。広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、Web 開発の技術文書一覧を参照してください。
  • developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
  • developerWorks オンデマンド・デモ: 初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
  • developerWorks は Twitter を利用しています。今すぐ developerWorks のツイートをフォローしてください。

製品や技術を入手するために

  • jQuery: このよく使われている JavaScript ライブラリーを入手してください。HTML 文書のトラバース、イベント処理、アニメーション化、そして Ajax によるやりとりを単純化するこのライブラリーは、迅速な Web 開発に役立ちます。
  • Modernizr: HTML5 および CSS3 で作成される次世代の Web サイトの作成に役立つ、オープンソースの JavaScript ライブラリーをダウンロードしてください。
  • IBM 製品の評価版: DB2、Lotus、Rational、Tivoli、および WebSphere のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=834255
ArticleTitle=canvas を HTML マークアップで補完する: 第 1 回 canvas API と HTML/CSS モデルを融合させる
publish-date=09132012