Gumiki::Official Site
大小さまざまな規模のWebサイトをブラウザ上から容易に構築できるCMSシステム"Gumiki"の公式サイトです

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を使うことになり、要するにプログラムコードを書くことになります。また、図表提示のために欲しい機能に限って機能(※1)が用意されていなかったりもします。
 そこで Gumiki ver1.22では、Gumiki命令(行頭命令)だけで簡単に必要な機能を実現できるようにcanvas(ExprolerCanvas)を拡張しました。

※1:主に楕円描画機能とテキスト描画機能。
 テキスト作画は現在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 の中でのみ用いてください。

NOTICE
以下の命令はver1.22b現在有効な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を変える事により、1ページで複数回定義可能です。

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

・記述例:
#start_canvas test1 400 80 black
#canvas_text 文字です。BRタグで<br>折り返しもできます 100 10 red
#end_canvas


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

・記述例:
#start_canvas test2 400 80 box
#canvas_box 10 10 250 70 fill 128 128 255
#canvas_box 200 20 350 40 box 0 255 0
#end_canvas


 #canvas_circle - 領域内に正円を表示する
 #canvas_circle (x1) (y1) (r1) (オプション) (r値) (g値) (b値)
 (x1,y1)座標を中心とする、半径r1の正円を作画します。
 オプションは fill とすると塗り潰し、boxとすると塗り潰し無しとなります。
 rgb値は0〜255で指定してください。

・記述例:
#start_canvas test3 400 80 box
#canvas_circle 100 40 35 fill 255 255 0
#canvas_circle 140 40 25 box 0 0 0
#end_canvas


 #canvas_ellipse - 領域内に楕円を表示する
 #canvas_ellipse (x1) (y1) (x2) (y2) (オプション) (r値) (g値) (b値)
 (x1,y1)〜(x2,y2)領域で規定される楕円を作画します。
 オプションは fill とすると塗り潰し、boxとすると塗り潰し無しとなります。
 rgb値は0〜255で指定してください。

・記述例:
#start_canvas test4 400 80 white
#canvas_box 30 20 200 70 box 0 0 0
#canvas_ellipse 30 20 200 70 fill 128 128 255

#canvas_box 230 10 260 70 fill 0 0 0
#canvas_ellipse 230 10 260 70 fill 255 128 255
#end_canvas



 #canvas_line - 領域内に線を引く
 #canvas_line (x1) (y1) (x2) (y2) (r値) (g値) (b値)
 直線を引きます。

・記述例:
#start_canvas test5 400 80 black
#canvas_line 10 70 320 30 128 128 255
#end_canvas


 #canvas_alpha - 作画のアルファチャンネルを指定する
 #canvas_alpha (α値)
 以降の作画に対してアルファ値(透過率)を設定します。0(完全透過)〜1(非透過)の間の小数値で指定します。

・記述例:
#start_canvas test6 400 80 box
#canvas_box 10 10 250 70 fill 128 128 255
#canvas_alpha 0.8
#canvas_box 100 20 350 40 fill 0 128 128
#canvas_alpha 0.3
#canvas_box 100 40 350 60 fill 0 128 128
#end_canvas


 #canvas_linewidth - 線の太さを設定する
 #canvas_linewidth (太さ)
 作画線の太さを設定します。

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

○記述例
#start_canvas test10 450 210 box
#canvas_treemodel ACT(STG(弾幕STG,通常STG),格闘),RPG(ARPG,SRPG)
#canvas_text ゲームジャンル情報(例) 290 193 blue 10pt
#end_canvas


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

○記述例
#start_canvas test11 450 120 box
#canvas_treemodel TEST1(TEST2(TEST3),----(TEST4)),TEST5(----(TEST6))
#end_canvas


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

@U現在の文字ブロックから上部に小さな10pixel長の線を引きます。ツリーモデルは通常は直列的多分木であり合流はありえないわけですが、どうしても便宜上必要とする時に用いることで合流が可能となります。ただし隣接したブロックに使わないと意図通りの動作になりません。
@Yこれが挿入された以降、作画座標を上に1段スライドさせます。通常これは使う必要はありません。できあがったツリーモデルが若干縮められる余地があると判断した時に埋め込むものです。
@S左端のブロックは左線を作画しないようにします。ツリーモデル全体に影響が及びます。
@0デフォルトの色にします
@1現在の文字ブロックだけ背景をクリーム色にします
@2現在の文字ブロックだけ背景をブルーにします
@7現在の文字ブロックだけ背景を白にします
@@@の文字を表示します

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

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

・記述例:
HTML5.JP(http://www.html5.jp/canvas/how4.html)さんのサンプルソースを使わせていただきました

#start_canvas test7 200 140
#canvas_command ctx.beginPath(); var grad = ctx.createLinearGradient(0,0, 0,140); grad.addColorStop(0,'rgb(192, 80, 77)'); grad.addColorStop(0.5,'rgb(155, 187, 89)'); grad.addColorStop(1,'rgb(128, 100, 162)'); ctx.fillStyle = grad; ctx.rect(0,0, 140,140); ctx.fill();
#end_canvas


 #canvas_graph - 横棒グラフを作成する (ver1.22-b3以降)
 #canvas_treemodel モデル文字列(name1:pixel1:col1:text1,…)
 横棒グラフを生成します。モデル文字列の書式は以下の通り:

name: リスト名。左側に表示されます
pixel: グラフのpixel数
col: 色番号(16進6桁表現)。省略化
text: グラフの右側に表示するキャプション。省略化

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

○記述例
#start_canvas test21 500 250 box
#canvas_graph <u>消耗品回復量</u>:0,カボチャ:9:aaaacc:19,にく(基本):42:aaaadd:84,アイス(基本):62:aaaadd:124,おいしい魚(基本):62:aaaadd:124,ヒナレの葉:102:ddbbcc:205,白POT:182:ddbbaa:365,アロエの葉:182:ddbbaa:365,ローヤルゼリー:182:ddbbaa:365,マステラの実:250:ffaaaa:500,ランカーWSP:273:ffaaaa:546
#end_canvas


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


TopPage