卒業論文
HTML5 Canvas開発支援ソフトの開発
07ec095 中嶋大嗣
指導教員：坂本直志 准教授

目次

  1. HTML5とその普及
  2. 用語解説
  3. 開発するアプリケーションの仕様
  4. CanvasMakerのマニュアル
  5. プログラム・解説
  6. 考察
  7. 参考文献

1.HTML5とその普及

HTML5とはHTMLの新しいバージョンであり、現在W3Cによって策定が進められている。

また、HTML5はHTML4からは大幅な改定がされており、多くの仕様も加えられている。 その中には、音声を扱うaudio要素や動画を扱うvideo要素、図を描けるcanvas要素などがある。 このような仕様を利用すれば、今まではFlash等のプラグインを用いて行っていた表現の多くはHTMLの標準技術のみで 行うことが可能になる。

img要素で画像を埋め込むのと同じように簡単に音声や動画をWEBページに埋め込むことのできるaudio,video要素は普及しやすいと考えられる。

その他、既存のWEBページで使われている多くのFlashは画像や文字、図形が所定の動きをする程度の簡単なものである。 これはcanvas要素で実現するのが好ましいと考えられる。しかし、audioやvideo要素に対してcanvas要素は扱うのにJavaScriptによるプログラミングの 知識が必須であり敷居が高い。

本研究では、既存のWEBページで多く使用されている簡単なFlash表現と同等のcanvas要素による表現を、HTML4程度の知識で作成できるツールを提供する。

2.用語解説

HTML5

HTML5は現在策定中のHTMLの新しいバージョンである。 前バージョンはHTML4.01及びXHTML1.1となる。

HTML５では多くの要素や属性が追加されている。 例えば、文書構造を表す要素にはsectionやarticleなどが追加されていて、 マルチメディアを扱うための要素にはcanvasや、video,audioが追加されている。 またフォームも拡張されていてinput要素のtype属性の値に datetimeやemailなどが追加されている。

frameやfont要素など廃止された要素もある。

HTML5では次のようなAPIなどが追加されている （HTML５の仕様書とは独立しているものもあるが、広い意味のHTML5として含めている）。

また、HTML５はXHTML5として扱うことが可能である（XHTML5）。

Canvas

ここではHTML5の仕様に含まれるcanvas要素とそれを扱うためのAPIを指す。 なお、APIはHTML5の仕様とは別に「HTML Canvas 2D Context」という仕様になっている。

canvas要素はグラフやゲームのグラフィック、その他の視覚的イメージをその場で描画できる解像度に依存する ビットマップキャンバスとスクリプトを提供する。

canvasを使用すれば、FlashやJavaアップレットのようにプラグインを使用せずに図を描画することができる。

現状、機能・性能でFlashに劣るが、今後、多くのライブラリの出現や、ブラウザの進化により十分な機能・性能を得ることが予想できる。

HTML4

1997年12月18日に、W3C勧告としてHTML 4.0の仕様が発表された。 この仕様にいくらかのマイナーな修正が加えられたHTML 4.01は1999年12月24日にW3C勧告となった。 Strict DTDの他にHTML 3.2からの移行過渡期のためのTransitional DTDと フレームを使うことのできるFrameset DTDの3つのスキーマを持つ。

この後、HTML 4.01をベースとしてXHTML 1.0が策定されることになる。

JavaScript

ECMAScriptの標準実装であり、プロトタイプベースのオブジェクト指向言語である。

JavaScriptは主にWEBページでの強力なユーザーインターフェイスや動的なWEBページを実現するためにブラウザ等でのクライアントサイドの実装で使用される。 他にも、 PDF-documentsやsite-specific browsers、desktop widgets等でも使用されている。

ECMAScript

ECMAScriptはECMA Internationalによって策定されているスクリプト言語の仕様である。

この言語はWEBでのクライアントサイドスクリプトとして広く使われていて、JavaScriptやJScript,ActionScript などが実装している。

DOM

ドキュメントオブジェクトモデル（DOM）はHTMLやXHTML、XML文書内のオブジェクトを扱う為のクロスプラットフォームや言語に依存しない規則である。 DOMの諸相(要素)は使用するプログラミング言語の構文で操作することができる。DOMの実装はAPIの使用で定義されている。

W3Cによって、Level 1からLevel 3まで勧告されており、XML文書を扱う「Core」、HTML文書を扱う「HTML」等のモジュールに分かれている。

JSON

JSONは、人間が読める形式の軽量なテキストベースのデータ交換フォーマットである。 これは、JavaScriptでの単純なデータ構造とオブジェクトと呼ばれる連想配列の記述法から派生している。 ただし、JavaScript以外でも多くの言語がJSON形式のパースや生成をサポートしている。

データ構造をシリアライズしてネットワークで通信する為に多く使われる。これは、 主にXMLの代わりとしてWEBアプリケーションとサーバー間での通信に使用される。

例として配列は次のように表す。

["apple", "orange", "grape"]

また、オブジェクト（連想配列）は次のように表す。

{id;"07ec095", name:"Daishi", age:22}

Web Storage

キーバリュー形式でのデータをクライアント側で貯蓄するためのAPIである。 クッキーと似ているが、保存できるデータの数や容量が大きいことやリクエストで送信されないこと等で 大きく異なる。

Web Storageには、ウィンドウごとの一時的な保存に使用するsessionStorageと、 ウィンドウをまたいでセッションが終了しても存続するlocalStorageがある。

3.開発するアプリケーションの仕様

アプリケーション名
Canvas Maker

目的

前述のとおりHTML5は、今まではブラウザの独自機能やプラグインで行っていた機能も多く取り込んだWEBの標準化でもある。 HTML5を使用する上では標準技術を使用するべきであり、将来性や多くのブラウザ・端末のサポート、ベンダーのロックインがない等、標準技術を使用するメリットも大きい。

その中で、現在WEBページでのFlashの用途の多くは、「画像が入れ替わる」や「ロゴが動く」「文字が表示される」等の簡単な用途である。

このような簡単な用途ならば、HTML5 Canvasに移行できるの明らかである。そこで、これらのような簡単な動作をするHTML5 CanvasをHTML5の新たな知識がなくても、 開発できるアプリケーションを開発する。

動作環境

HTML5 Canvas,localStorage、JSONのネイティブサポート(ECMAScript 5の仕様)に対応しているブラウザ。W3C DOMの仕様に準拠しているブラウザが理想。

動作確認済みのブラウザはChrome 8, Firefox3.6

機能一覧

エディタ

図１　エディタの画面構成

GUIによる操作で Canvasの動作を作成できる。

次の3つの概念を使用して、Canvasの動作を作成する

利用できるオブジェクト、アクション、イベントの種類は「マニュアル-利用できるオブジェクト、アクション、イベント」を参照

さらに、スライドショーなどオブジェクトなどが多くなる場合の為に、オブジェクトやイベントをまとめて1つのシーンとし複数のシーンを扱える。

プレビュー

作成中のCanvasを実際に表示させて動作確認ができる。

アウトプット

制作物をWEBページに埋め込むために次のものを出力する。

保存・読み込み

編集中のデータは保存できる。データの保存はlocalStorage上に行う。

localStorageには次のデータをを保存する

UI仕様

概ね次のコントロールが必要である。

4.CanvasMakerのマニュアル

manual.html

何が出来る？

CanvasMakerはHTML5 Canvasの利用を支援するツールです。

HTML5 Canvasとは、HTML5で新たに加えられたグラフィックを描画するための仕様です。 これを使用することで、今まではFlash等を使用して行っていたグラフィック表現が標準技術でできるようになります。 ただし、Canvasへのグラフィックの描画にはJavaScriptを使用するので、 HTMLによるマークアップの知識だけでなくJavaScriptでのプログラミングの知識が必要になります。

CanvasMakerを使用する事で、HTML4程度の知識があればHTML5 Canvasの仕様やJavaScriptでのプログラミングの知識がなくても、 GUIによる操作でCanvasを動作させるためのJavaScriptを生成できます。

起動方法

ダウンロードしたファイルを解凍します。その中にあるEdit.htmlを開きます。

動作を確認しているブラウザ

画面の説明

CanvasMakerの編集画面のスナップショット
図２　編集画面
①編集領域

現在編集しているシーンが表示されています。オブジェクトを選択することや、オブジェクトの移動、サイズ変更ができます.

②オブジェクト領域

オブジェクトの追加、または、オブジェクトの選択ができます。

③プロパティ領域

現在選択されているシーン・オブジェクト・アクション又は共通のプロパティを編集できます。

④アクション領域

アクションの追加、または、アクションの選択ができます。

⑤シーン領域

シーンの追加、または編集するシーンの切替ができます。

⑥メニュー
Preview
作成したキャンバスの動作を確認します。
Generate
作成したキャンバスからスクリプトを生成します。
Save
編集中のキャンバスを保存します。キャンバスのnameプロパティの値がストレージ名になります。
Load
保存してあるデータの一覧を表示します。一覧からデータの読み込み・削除ができます。

クイック・チュートリアル

HelloWorld

目的

Canvas Makerを使用して「Hello Canvas」と言う文字列を表示するCanvasコードを生成してみます。

領域の設定

初めにの基本的な設定を行います。 ここでは何も変更を加えていない状態から始めます。初期状態に戻したい場合はブラウザの更新を使用すると、変更が破棄されます。

今回はサイズのみを設定します。

編集領域をクリックしてください。プロパティ領域にシーンのプロパティが表示されます。 その中のwidthとheightをそれぞれ「300」と「200」に設定します（テキストボックスに値を入力してエンターを押す）。

テキストオブジェクトの追加

次に、テキストオブジェクトを1つ追加します。

オブジェクト領域の中から「Add Text」というボタンを探します。 ボタンの左の「text」という項目に「Hello Canvas」と入力します。さらに「size」の項目には「48」と入力します。 そして「Add Text」ボタンを押します。すると、編集領域にテキストが表示されます。

次に、追加されたテキストの設定をします。 キャンバス領域内で追加されたテキストをドラッグしてキャンバスの中央辺りに移動します。

製作物の確認

作成したものが正しく動作するかを確認します。メニューの「Preview」をクリックしてください。 新しいウィンドウが開き、Previewの見出しの下に作成したCanvasが表示されれば成功です。

Previewのスナップショット
図３　Preview画面

アウトプット

制作物をHTMLに埋め込むために、コードやスクリプトを取得します。メニューのGenerateをクリックします。 新しいウィンドウが開き、コードやスクリプトが表示されます。

Generateのスナップショット
図４　Generate画面

「Generated Code」(図中①)は生成したjavascriptです。使用するHTML内で実行してください。 「Required js files」(図中②)は他に読み込む必要のあるjsファイルを読み込む例です。下のリンクから必要なjsファイルをダウンロードして、HTML内で読み込んでください。 「Painted Canvas sample」(図中③)はキャンバス要素の例です。これをHTML内の表示したい場所に配置してください。これらの作業でHTML内に作成したCanvasが表示されます。

また、「HTML Sample」(図中④)はHTMLに作成したCanvasを配置した例です。このままHTMLとして保存し、開くと実行できます。

データの保存

編集したデータをローカルに保存し後で開けるようにしましょう。

まず、保存する際の名前を決めます。キャンバス領域のオブジェクトがない所をクリックします。プロパティ領域にキャンバスのプロパティが表示されるので、 そのなかのnameを「HelloCanvas」に設定します。

メニューから、saveをクリックしてデータを保存します。保存されたデータはメニューのloadから読み込むことができます。

このソフトでの使用する概念の説明

オブジェクト

シーンに配置できる物を1つ1つ表す（実行時にはCanvasに表示される物）。テキストや画像、図形等。

オブジェクトはプロパティを持つ。

アクション

動作を表す。アクションで定義した動作をイベントから呼び出すことができる。

アクションはプロパティを持つ

プロパティ

オブジェクトやアクションの見た目や動作を表す。

設定できる項目はプロパティの対象の種類によって異なる。

イベント

アクションを実行するタイミングを示す。プロパティの項目の1つでシーンやオブジェクトが所持している。

タイミングが設定でき（クリック時や3秒後など）、タイミングに対して対象（オブジェクト）、動作（アクション）を設定できる。 （例：「キャンバスがクリックされたら（タイミング）」「テキストオブジェクト１が（対象）」「スライドインする（動作）」。）

また、タイミングに対してはパラメータを指定できます。

シーン

オブジェクトとイベントはシーンごとに設定できる。アクションによりシーンを切り替えて使用する。

各概念の関係図

各概念の関係図
図５　各概念の関係図

利用できるオブジェクト、アクション、イベント

オブジェクト

Text

1行のテキストを表示します。

TextBox

複数行のテキストを表示します。改行が扱え、幅・高さを指定することで自動改行も行います。

Image

画像を表示します。画像はデータとして保存されます。

ImageUrl

画像を表示します。画像はURLのみが保存され、実行時にアクセスします。

Rect

長方形を表示します。

アクション

Slide in

オブジェクトが画面外から元々の座標に向けて移動します。スライドインを行うオブジェクトは事前に画面外に移動されます。

Slide out

オブジェクトが画面外へと移動します。

Open Url

設定されたURLを開きます。

Shift Scene

設定したシーンへ移ります。

イベント

Click

クリック時に動作を起こします。Clickを複数配置した場合には、クリックされるごとに上にあるものから処理されます。

パラメータ
"r"
一度イベントが発生しても、それを削除せずクリックされるたびに実行します。
timer

クリック時に動作を起こします。Clickを複数配置した場合には、クリックされるごとに上にあるものから処理されます。

パラメータ
Number
タイマーが実行されるまでの時間を表します（ミリ秒）。

操作例

いくつかの目的に合わせた操作手順を記述します。

WEBページ装飾の為のアニメーションを作成する

目的

始めに何も無いCanvasが表示され、数秒後に画像がスライドインしてくるアニメーションを作成します。

全体の設定

全体のプロパティを設定します。この例では「name:AnimationTest」「width:640」「height:220」と設定します。

画像オブジェクトの追加

オブジェクト領域内で「Add Image」ボタンを探します。その左のfileの項目で追加する画像ファイルを選択します。

この例ではこのファイルを使用しました

ファイルを選択したら、「Add Image」ボタンを押し画像を追加します。 なお、今回はオブジェクトのプロパティを変更しません。追加された画像オブジェクトは「name:Image0」「x:0」「y:0」となっています。

アクションの作成

「スライドインする」という動作を表すアクションを作成します。アクション領域のセレクトでSlide inを選択します。選択したら「Add」ボタンを押しアクションを追加します。 次にアクションのプロパティを設定します。アクション領域内で追加されたSlideIn0をクリックします。すると、プロパティ領域にSlideIn0のプロパティが表示されます。 「direction:right」に設定してします（他は変更なし）。

イベントの設定

シーンにイベントを設定しキャンバスが表示されて1秒後に作成したアクションSlideIn0がImage0に対して実行されるように設定します。設定は次の手順で行います。

  1. キャンバス領域のオブジェクトがない部分をクリックして、キャンバスのプロパティを表示します。
  2. プロパティ領域内のEventの項目で「Timer」を選択し「Add」ボタンを押します。するとEventの下にOnTimerが表示されます。
  3. 表示されたOnTimer内のテキストボックスに「1000」と入力します（1000ミリ秒のタイマー）。
  4. OnTimer内の「Add」ボタンを押します。すると、OnTimer内の下に2つのセレクトが表示されます。
  5. 2つのセレクトにそれぞれ「Image0」「SlideIn0」を選択します（Image0がSlideIn0する）。

実行

これで完成です。Preview等から実行してみます。

スライドショー形式の資料を作成する

目的

プレゼンテーションに使用するようなスライドを作ります。つまり、多くのシーンをクリックにより順番に表示させます。

まず、図のよう多くのシーンが作成されている状態を考えます（シーンは領域のAddボタンで追加できます）。

CanvasMakerの編集画面のスナップショット
図６　複数のシーンを作成した状態１
CanvasMakerの編集画面のスナップショット
図７　複数のシーンを作成した状態２

アクションの作成

「次のシーンに移行する」というアクションを追加します。アクション領域で「Shift Scene」を追加します。 追加したアクションShiftScene0のプロパティの「scene」を「next」に設定します（1つ下のシーンに移行の動作）。

イベントの設定

Scene0の状態でキャンバスをクリックすることでScene1に移行するように設定します。

Scene0のイベントを編集するので、シーン領域内でScene0をクリックしてScene0の編集に移ります。次にキャンバス領域でキャンバスをクリックしてキャンバスのプロパティを開きます。 キャンバスのプロパティのイベントで「Click」を追加し、追加したclickにShiftScene0を追加します（オブジェクトは指定しなくて良い）。

Scene1以降も同様の手順でクリック時にShiftScene0を実行するように設定していきます。

実行

Previewを押して実行します。始めにScene0の内容が表示され、これをクリックすることでScene1の内容が表示されれば成功です。

Tips

オブジェクトが画面の外に出るなどして見えなくなってしまった。

オブジェクト領域のselectから選択してください。

5.プログラム・解説

ソースコード

CanvasMaker-source.tar.gz

解説

「アプリの仕様上でのオブジェクト」とプログラミングでのオブジェクトを混在しないために、前者を「CanvasMakerオブジェクト」と表現する。

また、JavaScriptはプロトタイプベースの言語であり、厳密なクラスという概念はないが、 それを模倣したコーディングを行っているので、 以下の解説ではクラスとそれに関連する語句を使用する。

Edit.html

アプリケーション開始時に表示するページであり、編集画面のページである。

Editクラスのインスタンスを生成する。

divEdit
編集領域
divObject
オブジェクト領域
divProperty
プロパティ領域
divAction
アクション領域
divScene
シーン領域
divMenu
メニュー

Edit.js

Editクラスを定義する。EditクラスはCanvasMakerの編集画面自体を表す。

コンストラクタ

各要素の取得や、イベントの関連付けを行う。編集中のシーンの「CanvasMakerオブジェクト」を格納する配列とアクションの配列を生成する。 PropertyクラスとSceneクラスのインスタンスを生成する。

また編集中のシーンのプロパティや共通のプロパティはこのクラスで直接持つ。そのため、setProperty,getPropertyメソッドも実装する。

onResize_window()
現在のウィンドウの大きさに合わせて各領域の位置と大きさを設定する。起動時とwindowのresizeイベントで呼び出される。
draw()

所持している「CanvasMakerオブジェクト」を全て編集領域に描画する。この時いずれかの「CanvasMakerオブジェクト」のdrawメソッドが偽を返した場合、描画に失敗しているので、 一定時間後にdrawメソッドを再度呼び出す。

描画順序はobjects配列の先頭からとなる。よって描画重なった場合は後方の項目が前方の項目を覆う。
createDataFromSaveList(obj)
objはsaveListプロパティを持ったオブジェクトの配列。objの各要素に対してsaveListに含まれるプロパティのみを持ったオブジェクトを作り、その配列を返す。
saveFile(filename,addlist)

編集中の内容をlocalStorageに保存する

filenameは保存する際の識別子。実際のlocalStorageのキーはSYSTEM_CONST.SAVE_STORAGE+filenameとなる。

addlistがfalseならばリストには加えない一時的な保存。 addListがtrueならばlocalStorageのSYSTEM_CONST.SAVE_STORAGE_LISTを読み込み、リスト内にキーがfilename値がSYSTEM_CONST.SAVE_STORAGE+filename の要素を作り保存する。

loadFile(filename)
localStorageに保存してあるデータを読み込み編集中にする。filenameは保存に使用した識別子。
createObjectName(name)
objects配列に存在する「CanvasMakerオブジェクト」のnameと重複しない文字列を生成し返す。形式はnameにできるだけ小さい整数を繋げた物となる。
showListAction()
actions配列に含まれるアクションのリストを生成し、アクション領域に表示する。リストの各要素のクリックイベントにonClick_Actionメソッドを関連付ける。
showListEvent(obj)

objが持つevents配列に含まれるイベントのリストを生成し、プロパティ領域内のlistEventに表示する。この時各要素に、イベントに関連付けるアクションを追加するaddボタンと、 イベントを削除するdelボタン、イベントを並び替えるためにevents配列の1つ前の要素と入れ替えるupボタンを生成する。

イベントが持つアクションとの関連付けのリストはEventクラスのgetActionsNodeメソッドでノードを取得し表示している。

onClick_btnPreview()
onClick_btnGenerate()
Preview.html又はGenerate.htmlを開く。その際一時的に編集内容を保存する必要があるので、 localStorageにSYSTEM_CONST.SAVE_BUFFERを識別子に編集中のデータを保存する。
onClick_btnSave()
saveFileメソッドを用いて編集中のデータを保存する。識別子filenameには編集中のデータの共通プロパティのnameを使用する。
onClick_btnLoad()
localStorageのSYSTEM_CONST.SAVE_STORAGE_LISTを読み込み、保存されているデータの一覧を表示する。 データの一覧の各項目にopenとdeleteボタンを追加する。それぞれその項目のデータを読み込み、削除する。
onClick_btnObjDelete()
現在選択されているオブジェクト又はアクションを削除する。
onClick_btnObjDown()
現在選択されているオブジェクトをobjects配列の先頭に並び替える（描画順序が最初になる）。
onClick_btnAddText
onClick_btnAddTextBox
onClick_btnAddImage
onClick_btnAddImageUrl
onClick_btnAddRect
「CanvasMakerオブジェクト」を生成してobjectsの先頭に追加する。オブジェクトのnameはオブジェクトの種類を用いてcreateObjectNameメソッドで生成する。 その他必要な初期値はオブジェクト領域で入力されたものを使用する。
setSelObject()
「CanvasMakerオブジェクト」一覧のselObjectの要素を更新する。
onChange_selObject()
selObjectで選択された「CanvasMakerオブジェクト」を選択する。
onClick_btnAddAction()

selActionで選択された種類のアクションを生成し、actionsに加える。

selActionの値はアクションの種類となっている。アクションのnameはこの値に整数を繋げたものを使用する。 アクションクラスの名前は（Action+アクションの種類）となっているので、eval関数を用いてコンストラクタを呼び出す。

onMouseDown_cnvEdit(e)
各オブジェクトがクリックされたか否かを判断し、選択処理を行う。また、オブジェクトを移動、サイズ変更するためのドラッグ処理を行う。
onClick_Action(action)
actionを選択し、プロパティを編集できる状態にする。
unSelectActions
全てのアクションを選択解除する。

「CanvasMakerオブジェクト」

「CanvasMakerオブジェクト」を実装するクラスの共通メンバ

objectType
「CanvasMakerオブジェクト」の種類を表す文字列。
saveList
保存する必要のある要素名の配列
name
インスタンスごとに割り当てる固有の名前。
selected
編集中に自身が選択されているかどうかを表す真偽値。
draw
編集領域に自身を描画する関数。編集領域内のCanvasのContextを引数とする。読み込みが完了していなく描画できなかった場合は偽を返す。
onMouseDown

編集領域がクリックされると呼び出される。引数に編集領域のCanvas内での座標x,yを受け取る。

自身がクリックされたかを調べる当たり判定と、自身がクリックされた場合必要な処理をした後、真を返す。クリックされなければ偽を返す

getProperty
「プロパティ」オブジェクトが自身のプロパティを参照するために、編集する必要のある要素を持ったオブジェクトを生成し返す。
setProperty
「プロパティ」オブジェクトから「プロパティ」に含まれる全ての要素を持ったオブジェクトが渡されるので、そのうち必要なものを自身の要素に適用する。
initType
localStorageに保存したデータから「CanvasMakerオブジェクト」を復元した際に呼ばれる。この際変数は型情報を失っているため設定する必要がある。 またsaveListにある要素を元にデータの読み込みなどをする必要がある場合は行う。

ObjectText.js

「CanvasMakerオブジェクト」の内のテキストに関する物を実装するためのクラスを作成している。

ObjectTextクラス

「アプリ上でのTextオブジェクト」を実装する。

ObjectTextBoxクラス

「アプリ上でのTextBoxオブジェクト」を実装する。

ObjectImage.js

「CanvasMakerオブジェクト」の内の画像に関する物を実装するためのクラスを作成している。

ObjectImageクラス

「アプリ上でのImageオブジェクト」を実装する。

ObjectImageUrlクラス

「アプリ上でのImageUrlオブジェクト」を実装する。

ObjectShape

「CanvasMakerオブジェクト」の内の図形に関する物を実装するためのクラスを作成している。

ObjectRect

「アプリ上でのRectオブジェクト」を実装する。

Action.js

各アクションを実装するクラスを定義する。

アクションクラスの共通要素

ActionType
アクションの種類を表す文字列。
saveList
保存する必要のある要素名の配列
name
インスタンスごとに割り当てる固有の名前。
getProperty
「プロパティ」オブジェクトが自身のプロパティを参照するために、編集する必要のある要素を持ったオブジェクトを生成し返す。
setProperty
「プロパティ」オブジェクトから「プロパティ」に含まれる全ての要素を持ったオブジェクトが渡されるので、そのうち必要なものを自身の要素に適用する。

ActionSlideInクラス

「CanvasMakerオブジェクト」がスライドインすることを表すアクションを実装する。スライドインの速度とスライドインしてくる方向のプロパティを持つ。

ActionSlideOutクラス

「CanvasMakerオブジェクト」がスライドアウトすることを表すアクションを実装する。スライドアウトの速度とスライドアウトして行く方向のプロパティを持つ。

ActionOpenUrlクラス

URLを開くことを表すアクションを実装する。開くURLと新しいウィンドウで開くか否かを表すプロパティを持つ。

ActionShiftSceneクラス

シーンを移行することを表すアクションを実装する。移行先のシーンを表すプロパティ(特殊な値として順序で次のシーンを表す_SceneNextも指定できる)を持つ。

Event.js

EventクラスとDoActionクラスを定義する。Eventクラスは「CanvasMakerオブジェクト」やシーンが所持するイベントを実装する。 DoActionクラスは「CanvasMakerオブジェクト」とアクションのペアで「誰が何をする」を表す。

EventオブジェクトはDoActionオブジェクトの配列を保有する。

getActionsNode(edit)
getActionsNodeはイベントオブジェクトが持つアクションのリストのノードを返す。editはEditクラスのインスタンス。

Scene.js

Sceneクラスを定義する。Sceneクラスはシーンの管理とシーン領域の動作を実装する。

コンストラクタ
シーン領域内の各ボタンの要素を取得しイベントを関連付ける。
onChange_scene(scene)
シーンの選択を変更する。現在編集中のシーンのデータ（Editオブジェクトが保持）を保存し、次に編輯するシーンsceneのデータをEditオブジェクトに設定する。

Property.js

Propertyクラスを定義する。Propertyクラスはオブジェクトや、アクション、シーンのプロパティの編集に使用する。 ただしプロパティの内のイベントの編集は別のクラスで実装する。

コンストラクタ
プロパティ領域内の各プロパティの入力のための要素とリスト要素を取得する。各要素の編集時にonChangeメソッドを関連付ける。
set(obj)
プロパティを編集するオブジェクト(シーンやアクションも含む)を設定するためにsetメソッドを使用する。引数にはプロパティを編集するオブジェクトを渡す。 メソッド内では渡されたオブジェクトのgetPropertyメソッドを使用してオブジェクトの現在のプロパティを保持し、オブジェクト自体も編集中のオブジェクトとして保持する。 さらに、setVisibleメソッドを使用して編集できるプロパティを設定する。
get()
getメソッドはプロパティの各要素をもったオブジェクトを生成して返す。これをオブジェクトのsetPropertyに渡すことで編集後の値をオブジェクトに設定する。
onChange()
onChangeメソッドはプロパティが編集されると呼び出される。メソッド内では一意であるプロパティnameの重複をチェックし、重複していればエラーとした上で編集中のオブジェクト のgetPropertyメソッドを使用して編集前の値に戻す。重複していなければ編集中のオブジェクトのsetPropertyメソッドを使用して編集した値をオブジェクトに反映させる。

const.js

定数を定義している。

Msgクラス

ユーザーへの確認やエラー表示などで使用する文章の文字列を定義する

SYSTEM_CONSTクラス

ストレージの名称などシステムで使用する文字列を持つ

Generate.html

制作物のアウトプットをするページである。

Generateクラスを使用して、アウトプットするコードを取得し表示する。

divCode
制作物の描画をするJavaScriptを含むScriptタグを出力する
divRequiredJs
共通の処理を記述したjsファイルを読み込むscriptタグを出力する
divCanvasSample
描画領域であるCanvasタグを出力する
divSample
これらを使用したHTMLの例を出力する

Preview.html

制作物の動作確認をするページである。

制作物の動作に必要な外部jsファイルはリンクしてある。Canvas要素はGenerateクラスから必要な属性を取得し設定する。 Generateクラスを使用し、実行するコードを取得しeval関数で動作させる。

divCanvas
この中にスクリプトでcanvas要素を追加する。

canvasmaker_core.js

制作物の動作に必要な外部jsファイルである。

CANVASMAKERクラスが定義されていて、他の全てのオブジェクトや変数はCANVASMAKERクラスの要素として定義する。

CANVASMAKERクラスのonClickメソッドはcanvas要素がクリックされると呼び出される。 Clickイベントを持っているオブジェクト又はシーン（1つ）がクリックされた場合はClickイベントのキューの先頭のものを実行する。

アクションのアニメーション等で毎フレームごとに処理お行う必要がある場合、CANVASMAKERクラスのaddUpdateメソッドを使用して、 毎フレームごとに実行する関数を登録する。

制作物の動作に必要な「CanvasMakerオブジェクト」、アクションを実装するクラスを定義する。 「CanvasMakerオブジェクト」は「Obj+種類」、アクションは「Act+種類」のクラス名とする。 これらは各プロパティを反映させた後、makeメソッドを呼び出すことで初期化される。 また、「CanvasMakerオブジェクト」クラスは自身を描画するdrawメソッドを持つ。 アクションは実行待ちになった際に呼び出されるinitメソッドと、実行時に呼び出されるexecuteメソッドを持つ。

Generate.js

localStorageからSYSTEM_CONST.SAVE_BUFFERをキーにデータを読みこみ、それを元に制作物のアウトプットを生成する。

「生成されるコード」

生成するプログラムは概ね次の構造となっている。

  1. CANVASMAKERクラスのインスタンスを生成。変数名に共通プロパティのnameを使用し、複数の制作物で競合しないようにする。
  2. CANVASMAKERオブジェクトを初期化
  3. アクションの生成、初期化
  4. シーンを読み込む関数として、「CanvasMakerオブジェクト」とイベントの生成、初期化を行う関数をシーンごとに生成する。
  5. 先頭のシーンを読み込む関数を実行する。
  6. 描画
  7. イベントに応じてアクションを実行

シーンの移行を行うアクションでは次のシーンを読み込む関数を実行した後、描画を行っている

Util.js

簡略化のために共通処理をする静的なメソッドを持つ。

removeAllChildNode(obj)
引数に渡したノードの子ノードを全て削除する。
removeItem(arr,obj)
配列arrから値がobjである要素を削除する。

CImageCanvas.js

CImageCanvasクラスを定義する。CImageCanvasクラスは画像を読み込みCanvas要素に描画する機能を実装する。

コンストラクタ
load(src)
srcから画像を読み込む。URLやBlob dataが使用できる。
loadAndDraw(src,cx,x,y)
画像を読み込み、完了時に描画する。cx:描画に使うコンテキスト. x,y:描画する座標.
loadAndCall(src,func)
画像を読み込み、完了時に関数funcを呼び出す。
getImage()
読み込まれた画像であるImageオブジェクトを返す。
draw(cx,x,y)
コンテキストcxを使用して座標x,yに画像を描画する。
draw(cx,x,y,w,h)
画像を幅w、高さhに伸縮して描画する。
draw(cx,sx,sy,sw,sh,x,y,w,h)
画像の内の座標(sx,sy)幅sw高さshからなる四角形に囲まれる部分を座標x,y、幅w、高さhに伸縮して描画する。

6.考察

開発結果

開発したアプリケーションCanvasMakerでは、 生成するプログラムに次のような処理を設定できる。

これらの組み合わせで、目的である「画像が入れ替わる」や「ロゴが動く」「文字が表示される」等のプログラムは生成できた。 また、この中にはフェードインの動作など不足している機能もあるが、これは簡単なバージョンアップで対応していくことができる。 このような点から、開発したアプリの動作と設計は目的を達成していると言える。

Flashが好まれている理由としては機能や性能で優れているだけでなく、 オーサリングツールが優れているも重要だと考えられる。 canvasでもこのようなツールを提供することで、HTML5の普及に貢献できたと思う。

今後の展開

canvasを使用するより多くの表現に対応するために、 「CanvasMakerオブジェクト」や、アクション、イベントの種類やそれぞれのプロパティの項目を増やしていく必要がある。 具体的には次のようなもの等の追加である。

このアプリケーションはCanvasの用途として特定の事を想定していないので、 例えば、Canvasでのスライドショーの制作に特化したアプリケーションを考えると、 それに対してスライドショーを製作するのには煩わしい。そこで、このようなことを解決するために マクロといった機能を追加する必要がある。具体的には次のような用途で使用する。

アプリケーションが対応していない動作を作成するために、 高度な機能として一部のコードをユーザーが直接書ける機能も追加したい。 用途の例としては、「CanvasMakerオブジェクト」がクリックされたときにcanvas要素以外の要素に変更を加える等が考えられる。

また、グラフィック表現でも目的によってはSVGやCSS3を使用する事が適切な場合もある。 canvas以外にもこのような仕様を扱うアプリケーションも必要になるだろう。

7.参考文献

  1. HTML5, http://www.w3.org/TR/html5/
  2. HTML Canvas 2D Context, http://www.w3.org/TR/2dcontext/
  3. Web Storage, http://www.w3.org/TR/webstorage/
  4. 白石 俊平 : HTML5&API入門, 日経BP社
  5. 羽田野 太巳, 白石 俊平, 古籏 一浩, 太田 昌吾 : Google API Expertが解説する HTML5ガイドブック, インプレスジャパン