4D Japan Knowledge Base

Scalable Vector Graphicsで日本語を使う

4D v11 SQLではScalable Vector Graphics（SVG）で絵を描くことができるコマンドDOM EXPORT TO PICTUREが用意されました。このコマンドで自由にピクチャを生成できます。コマンドのリファレンスには具体的な例が記述されています。

参考：DOM EXPORT TO PICTUREコマンドリファレンス

しかしコマンドリファレンスの例を参考に日本語を出力しても上手く行かないかもしれません。日本語を正しく出力する場合には、日本語を含んだフォントを指定しなければなりません。デフォルトのフォントは日本語の文字を含んでいないかも知れないのです。

実際に日本語を出力するテストをしてみましょう。4D v11 SQLを起動し、フォームを一つ用意してください。そのフォームに、ボタンと変数を配置します。変数の名前はデフォルトで「Variable1」になっていると思いますが、念のため確認してください。そしてボタンに後述のコードをコピーして貼り付けます。

  `ボタンメソッド
C_PICTURE(Variable1)
Variable1:=Variable1*0  `ピクチャを初期化
$t_text:=Request("表示する文字列を入力";"こんにちは！")
If (OK=1)
	  `プラットフォームに合わせて使用フォントを決定する
	PLATFORM PROPERTIES($i_platform;$i_system)
	If ($i_platform=Windows )
		$i_system:=$i_system%256
		If ($i_system=6)
			$t_font:="MingLiU"  `Windows vista用
		Else 
			$t_font:="MS-Mincho"  `Windows用
		End if 
	Else 
		$t_font:="ヒラギノ明朝 Pro W3"  `MacOS用
	End if 
	$i_fontSize:=26
	  `SVG用のXMLを用意
	$svg:=DOM Create XML Ref("svg";"http://www.w3.org/2000/svg")
	  `背景の矩形を描く
	$t_color:="blue"
	$ref:=DOM Create XML element($svg;"rect";"fill";$t_color;"x";0;"y";-$i_fontSize;"width";150;"height";50)
	  `文字を描く
	$t_color:="red"
	$ref:=DOM Create XML element($svg;"text";"font-size";$i_fontSize;"fill";$t_color;"font-family";$t_font;"writing-mode";"tb")
	DOM SET XML ELEMENT VALUE($ref;$t_text)
	  `ピクチャにする
	DOM EXPORT TO PICTURE($svg;Variable1;Copy XML Data Source )
	  `後処理
	DOM CLOSE XML($svg)
	REDRAW(Variable1)
End if 

準備が整ったら、フォームエディタ左上にある緑色の「実行ボタン」を押してフォームを表示させてください。そしてボタンを押します。正しくフォームが作成されていれば次のように表示されます。

SVGはxmlでグラフィック命令を記述して描画を行うための言語なのです。工夫次第で可能性は無限にあると言えます。そしてSVGの仕様はW3Cで決められています。

参考：W3C : Scalable Vector Graphics (SVG)

実は上記の例題では、１点だけ未実装の指定があります。文字を書く時のtextエレメントの指定でwriting-modeというのが見て取れると思いますが、このモードの指定でtbは縦書きになります。しかしながら、現在の４Ｄでは未実装となっております。