Canvas機能について

　Gumikiでは、Ver1.22よりHTML5系のcanvas系の機能を試験実装しました。


　canvas機能とは、JavaScriptによってブラウザページ上に図形などをレンダリング時、あるいはその後に作画できる機能で、HTML5.0で新しく採用されたものです。（↑の画像っぽいものがCanvasで作画されたものです）
　ところが、Opera/Firefoxでは早くから実装されたものの、InternetExplorerでの実装が遅れており、IEでは現在でも使うことができません。しかし、天下のGoogle様がExplorer Canvasという、canvas系機能のエミュレーションを行うJavascriptライブラリを公開しています。
　Gumiki ver1.22のcanvas機能もこのExplorer Canvasを活用しつつ、canvas系の作画をサポートしていきます。（といっても静的な、初歩的なものだけですが・・・）

canvasの有効性とGumiki実装のポイント

　図表を使いたい場合は、PowerPointやペイントで画像として作り保存し、それを表示するのが通常の使い方です。しかし、ごく単純な図表（包含図程度）であれば、canvasを使って動的に作成すれば画像ファイルは不要となりますし、後からパラメータをいじるだけで変更も容易です。Gumiki的に見てもページテキストと一体化するため管理が楽になります。

　ところで、「Canvas機能は図形を作画できるもの」と言っても、作画はJavaScriptを使うことになり、要するにプログラムコードを書くことになります。また、図表提示のために欲しい機能に限って機能（※１）が用意されていなかったりもします。
　そこで Gumiki ver1.22では、Gumiki命令（行頭命令）だけで簡単に必要な機能を実現できるようにcanvas(ExprolerCanvas）を拡張しました。

※１：主に楕円描画機能とテキスト描画機能。
　テキスト作画は現在Firefox3.1以外のブラウザでは実装されていないため、DOMを活用しCanvas領域の上に重ねる形で実現してみました。

canvas系機能を使う場合

　Googleのサイトより、ExplorerCanvas Release 3（excanvas.js）をダウンロードしてきて、Gumikiの /app_modフォルダの直下に配置することにより、Gumikiエンジンが自動認識してCanvas系機能を使うことができるようになります。

　ver1.22系の差分にはこのexcanvas.jsをこっそり含めてありますので、差分を適用すればそのまま使えるようになるはずです。

canvas系機能のリファレンス

　全て行頭命令での実装です。
　#canvas_XXXX 命令は必ず #start_canvas～#end_canvas の中でのみ用いてください。


#canvas
#start_canvas
#end_canvas
#canvas_text
#canvas_box
#canvas_circle
#canvas_ellipse
#canvas_line
#canvas_alpha
#canvas_linewidth
#canvas_treemodel
#canvas_command

 #canvas - canvasタグ互換

 #canvas (id) (Xサイズ) (Yサイズ)

　HTML5.0の<canvas>タグ互換命令です。単にcanvasタグと置き換えるだけです。Gumikiのcanvas機能を用いるときは使う必要はありません。
　idはそのcanvasタグにつける名前で重複しない半角英字を任意に付けてください。Xサイズ、Yサイズはキャンバスの領域です。

 #start_canvas - canvas作画の開始

 #start_canvas (id) (Xサイズ) (Yサイズ) (オプション)

　Canvas領域を設置し、Gumikiのcanvas命令を使える状態にします。この命令のあとで、canvas系の命令を記述していきます。終了したところで #end_canvas と入れてください。閉じないと作画されません。また、#start_canvas～#end_canvasの中にはたんなる表示文字列は原則入れないことを推奨します。
　idはそのcanvasタグにつける名前で重複しない半角英字を任意に付けてください。Xサイズ、Yサイズはキャンバスの領域です。
　オプションの所には"black"か"white"、"box"、あるいは指定なしを選べます。blackだと領域が黒に、whiteだと領域が白に塗り潰された状態を初期状態とします。boxだと黒い枠線だけ付きます。無指定のときは領域は透明領域となります。

 #end_canvas - canvas作画の終了

 #end_canvas 

　canvas領域定義を完了します。#start_canvasとは対となり、これで定義を確定し作画プロセスに移行します。
　#start_canvas～#end_canvasは idを変える事により、１ページで複数回定義可能です。

 #canvas_text - 領域内にテキストを表示する

 #canvas_text (文字列) (x座標) (y座標) (色文字列) (文字サイズ)

　canvas領域内にテキストを表示します。x,y座標はcanvas領域における相対座標であり、テキストの左上位置となります。図形作画順に関わらずテキストが一番最後に上に被せられます。
　色文字列は、htmlの色定義文字列を使います（例：black,white,pink,blue...）。
　文字サイズは、style定義で使うサイズ指定を記述します（例：8pt,10px...)。
　色文字列と文字サイズは記述しない場合デフォルトとなります。

 #canvas_box - 領域内に矩形を表示する

 #canvas_box (x1) (y1) (x2) (y2) (オプション) (r値) (g値) (b値)

　(x1,y1)～(x2,y2）領域の矩形を表示します。
　オプションは fill とすると塗り潰し、boxとすると塗り潰し無しとなります。
　rgb値は0～255で指定してください。

 #canvas_circle - 領域内に正円を表示する

 #canvas_circle (x1) (y1) (r1) (オプション) (r値) (g値) (b値)

　(x1,y1)座標を中心とする、半径r1の正円を作画します。
　オプションは fill とすると塗り潰し、boxとすると塗り潰し無しとなります。
　rgb値は0～255で指定してください。

 #canvas_ellipse - 領域内に楕円を表示する

 #canvas_ellipse (x1) (y1) (x2) (y2) (オプション) (r値) (g値) (b値)

　(x1,y1)～(x2,y2）領域で規定される楕円を作画します。
　オプションは fill とすると塗り潰し、boxとすると塗り潰し無しとなります。
　rgb値は0～255で指定してください。

 #canvas_line - 領域内に線を引く

 #canvas_line (x1) (y1) (x2) (y2) (r値) (g値) (b値)

　直線を引きます。

 #canvas_alpha - 作画のアルファチャンネルを指定する

 #canvas_alpha (α値)

　以降の作画に対してアルファ値（透過率）を設定します。0（完全透過）～1（非透過）の間の小数値で指定します。

 #canvas_linewidth - 線の太さを設定する

 #canvas_linewidth (太さ)

　作画線の太さを設定します。

 #canvas_treemodel - ツリーモデルを作成する

 #canvas_treemodel モデル文字列

　文字列を（か，か）で区切り、階層的なモデルを表現し引数に渡すことによりツリーモデルを自動的に作成する、かなり強力な命令です。



　階層は１０階層までサポートしています。（横に表示しきれませんが…）
　なお、文字列の代わりに「----」と半角ハイフンを４つ記述することにより、項目をスキップすることができます。

ツリーモデルの拡張について

　ツリーモデルは柔軟に活用するための仕様を策定中です。ver1.22現在では暫定的な拡張機能として一部のエスケープシーケンスを取り入れています。エスケープ文字は「@＋英数字１字」で、これを単語が入る部分に挿入することで、特別な動作が行われます。

著作権についての注意点

　HTML Canvasを用いて、Wiki系の記法と絡めてツリーモデルを楽に表現するという実装アイデアは独自のものなので、他システムへの流用時は使用連絡か著作権表示をよろしく頼みます（笑）

 #canvas_command - 任意のコマンドを入力する

　Gumikiでサポートする作画機能は「canvas命令の一部を簡略化したもの」です。canvas系オブジェクトを直接操作したい場合、この命令を用いることで直接JavaScriptの形で埋め込むことができます。複数回入力しても構いませんが、セミコロンで区切って一度に複数行入力することもできます。なお、結局単にJavaScriptを入力しているだけなので、文末にセミコロンが必要となります。
　canvas系オブジェクトの詳細については各自で調べてください。（HTML5.JP様を参考にすると良いでしょう - http://www.html5.jp/canvas/how.html）

 #canvas_graph - 横棒グラフを作成する (ver1.22-b3以降）

 #canvas_treemodel モデル文字列(name1:pixel1:col1:text1,…)

　横棒グラフを生成します。モデル文字列の書式は以下の通り：


　これをカンマで区切ることで複数定義できます。name:pixelは必須ですが第３、第４引数は省略可能です。色を省略した場合、デフォルトあるいは最後に使われた色情報をそのまま利用します。デフォルトカラーはスカイブルー色です。



　ツリーモデル同様、Webでの情報表現で有用な命令となっています。
　注意：対応はver1.22-b3以降です。

---

→TopPage