• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• 文書/NiVE2 マルチテキスト へ行く。
  • 1 (2011-07-30 (土) 06:46:38)
  • 2 (2011-07-30 (土) 08:42:19)
  • 3 (2011-07-31 (日) 04:36:24)
  • 4 (2011-07-31 (日) 06:56:45)
  • 5 (2011-07-31 (日) 06:56:45)

• 追加された行はこの色です。
• 削除された行はこの色です。

NiVE2用エフェクトプラグイン『マルチテキスト』（ruche.nive2.effects.wpf.MultiText.dll）の使用方法マニュアル。~
このページには http://www.ruche-home.net/doc/multi-text でアクセスできます。

#contents

*この文書について [#about-page]

この文書では、[[NiVE2用エフェクトプラグインセット ruche.nive2.effects>ダウンロード#nive-effects]] に含まれているエフェクトの1つである『マルチテキスト』の使い方を解説します。~
導入手順等の基本的なことについては解説していませんので、添付のreadme.txtを参照してください。
この文書では、[[NiVE2用エフェクトプラグインセット ruche.nive2.effects>ダウンロード#nive-effects]] に含まれているエフェクトの1つである『マルチテキスト』の使い方を解説します。

基本的に最新バージョンについて取り扱います。~
過去のバージョンからの変更箇所については[[更新履歴>#history]]を参照してください。

なお、導入手順等の基本的なことについては解説していませんので、添付のreadme.txtを参照してください。

*エフェクト概要 [#about-effect]

**できること [#about-effect-capability]

『マルチテキスト』では次のようなことが行えます。

-1エフェクトでの複数テキスト配置
--描画順序設定
-文字の装飾
--フォント、太字、斜体設定
--塗り潰し、縁取り設定
--下線、取り消し線、傍点&note{dot:文字の上に付く点。主に特定の単語や文章を強調する場合に用いられる。};設定
--影設定
-文字間や行間のマージン設定
-表示速度設定
--フェードイン時間設定
-テキスト全体、背景全体の不透明度、明度、彩度設定
-テキストのブレンド方法設定
-変数表示＆設定
-HTMLライクなタグによる装飾
--独自タグ設定
-エクスプレッションによるデリゲート設定

**テキスト装飾例 [#about-effect-example]

例えば、表示文字列に次のような文字列を設定したとします。

#pre{{
<u>HTML</u>みたいに<font color="red">タグ付け</font>できるよ！
<i>デフォルトで<big>定義</i>されている</big>
<shadow color="red" depth="3">タグ</shadow>や<b fill="blue">属性</b>もあるし、
<grad>自分でタグを<wide>定義</wide>することもできるよ！</grad>
&lt;エンティティ文字&gt;にも対応<font color="violet">&hearts;</font>
変数を使うことも$sample
}}

これは次のように表示されます。~
なお、[[タグ>#property-tag]]設定で @code{grad}; タグと @code{wide}; タグを、[[変数>#property-variable]]設定で @code{sample}; 変数を予め設定してあります。

#ref(example_deco.png,nolink,HTMLみたいにタグ付けできるよ！ ...);

*基本的な使い方 [#basic-usage]

基本的に、最初に必要な分のテキストを配置して、キーフレームを打ちながら表示文字列を設定する流れになります。

+~テキストの描画対象となるレイヤーを用意する。
+~レイヤーに『マルチテキスト』エフェクトを追加する。
+~[[ベーススタイル>#property-style]]、[[ベース表示速度>#property-speak]]等を設定する。
+~[[テキスト>#property-text]]を必要な数だけ追加する。
+~各テキストの配置を設定する。
+~各テキストの表示文字列を設定する。様々な[[テキスト書式>#format]]を用いることができる。
+~その他の[[設定項目>#properties]]を適宜設定する。

*設定項目一覧 [#properties]

プロパティ名はエクスプレッション用ですが、『マルチテキスト』では各プロパティを直接操作するよりもデリゲート隠しプロパティを用いることを推奨します。~
詳しくは[[エクスプレッション対応>#expression]]の項を参照してください。

**ルート項目 [#property-root]

|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:||c
|~[[テキスト>#property-text]]|~texts|[[テキスト>#property-text]]を追加できる可変長リスト。|
|~[[ベーススタイル>#property-style]]|~ |すべてのテキストのデフォルトとなる[[スタイル>#property-style]]。|
|~[[ベース表示速度>#property-speak]]|~ |すべてのテキストのデフォルトとなる[[表示速度>#property-speak]]。|
|~[[変数>#property-variable]]|~variables|[[変数>#property-variable]]を追加できる可変長リスト。|
|~[[スタイルタグ>#property-tag]]|~tags|[[タグ>#property-tag]]を追加できる可変長リスト。|
|~[[背景ポスト処理>#property-post]]|~ |エフェクトを適用したレイヤーに対する[[ポスト処理>#property-post]]。|
|~（デリゲート）|~delegate|[[エクスプレッション>#expression]]用の隠しプロパティ。|

**テキスト [#property-text]

|>|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:|LEFT:||c
|>|~表示文字列|~text|レイヤー上に表示する文字列。&br;様々な[[テキスト書式>#format]]を使用可能。|
|>|~描画順序|~order|複数のテキストがある場合の描画順序。&br;数字が小さいテキストほど先に描画される（奥側になる）。&br;数字が同じ場合はリストの先頭側にあるテキストほど先に描画される。|
|~全体配置|~基準位置|~arrange.position|配置の基準位置。&br;レイヤーの左上端を @code{(0,0)}; とする相対座標。|
|~|~横基準|~arrange.halign|基準位置に対してテキスト領域のどの位置を割り当てるかの指定。&br;例えば横基準を「右」にすればテキスト領域の右端位置＝基準位置となる。|
|~|~縦基準|~arrange.valign|~|
|~|~最小サイズ|~arrange.size.min|テキスト領域の最小サイズ。&br;テキスト量が少ない場合もこのサイズ未満にはならない。|
|~|~最大サイズ|~arrange.size.max|テキスト領域の最大サイズ。&br;あくまで配置用サイズの最大値であり、領域外の文字も表示はされる。&br;領域外の文字を非表示にしたい場合は『範囲変更』を併用すること。|
|~|~回転中心位置|~arrange.rotate.center|テキスト全体を回転させる場合の中心位置。&br;レイヤーの左上端を @code{(0,0)}; とする相対座標。|
|~|~回転角度|~arrange.rotate.angle|テキスト全体の回転角度。|
|~行配置|~行揃え|~arrange.row.align|テキスト全体の領域に対する各行の配置。|
|~|~最小サイズ|~arrange.row.size.min|各行の最小サイズ。&br;幅を大きくすると中央揃えや右揃えにした場合も行が左寄りになる。&br;高さを大きくすると行間が空く。|
|~|~最大サイズ|~arrange.row.size.max|各行の最大サイズ。折り返しサイズでもある。&br;幅を小さくするとその幅を超える場合に行が折り返される。&br;高さを小さくすると上下の行と重なり合う。|
|~|~行高タイプ|~arrange.row.htype|行によって文字の大きさが違う場合に、各行の高さをどう定めるかの指定。&br;「全行均一」にした場合は一番高い行に合わせられる。|
|~|~行間|~arrange.row.span|行間の指定。&br;デフォルト状態を @code{100}; 、行が完全に重なる状態を @code{0}; とするパーセント値。|
|~拡張書式|~変数|~option.variable|[[変数書式>#format-variable]]の有効/無効を切り替える。|
|~|~変数ネスト|~option.variable.nest|[[変数書式>#format-variable]]が有効である場合に[[変数のネスト>#format-variable-nest]]の有効/無効を切り替える。|
|~|~タグ|~option.tag|[[タグ書式>#format-tag]]の有効/無効を切り替える。|
|~|~エンティティ|~option.entity|[[エンティティ書式>#format-entity]]の有効/無効を切り替える。|
|>|~[[スタイル>#property-style]]|~ |[[スタイル>#property-style]]の上書き設定。&br;チェックを付けた項目についてはベーススタイルの設定を上書きする。|
|>|~[[表示速度>#property-speak]]|~ |[[表示速度>#property-speak]]の上書き設定。&br;チェックを付けた項目についてはベース表示速度の設定を上書きする。|
|>|~[[ポスト処理>#property-post]]|~ |表示文字列に対する[[ポスト処理>#property-post]]。|
|>|~ブレンド|~blend|表示文字列の背景レイヤーへのブレンド方法。|
|>|~（デリゲート）|~delegate|[[エクスプレッション>#expression]]用の隠しプロパティ。|

**スタイル [#property-style]

文字の見栄えを設定します。&br;
ベーススタイル以外はチェックボックスによって各項目を設定するか否かを選択でき、設定しなかった項目についてはデフォルト値が用いられます。

-[[テキスト>#property-text]]ごとのスタイル設定におけるデフォルト値はベーススタイルで設定した値になります。
-[[タグ>#property-tag]]ごとのスタイル設定におけるデフォルト値については[[タグ書式>#format-tag]]の項を参照してください。

|>|>|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:|LEFT:|LEFT:||c
|~文字配置|>|~行内位置|~valign|行内における文字の位置。&br;例えば文字を小さくして文字位置を上端にすることで上付き文字にしたりできる。|
|~|~スケール|~横|~scale.x|各文字のサイズ倍率。&br;デフォルト状態を @code{100}; とするパーセント値。&br;負数にすることで上下左右を逆さにもできる。|
|~|~|~縦|~scale.y|~|
|~|~マージン|~上|~margin.top|各文字の上下左右にある文字との間に適用する余白幅。&br;どの文字間にもここで設定した値を満たすような余白が取られる。&br;例えば右余白3pxの文字と左余白5pxの文字が隣り合う場合、余白は5pxとなる。&br;あくまで文字間の余白であり、テキスト全体の上下左右端に対しては適用されない。&br;&br;なお、余白設定の適用は[[テキスト>#property-text]]の行間設定の適用より前に行われる。&br;そのため、行間の設定値に応じて実際の余白幅は変動する。|
|~|~|~下|~margin.bottom|~|
|~|~|~左|~margin.left|~|
|~|~|~右|~margin.right|~|
|~フォント|>|~ファミリ|~font.family|文字のフォントファミリの選択。&br;フォントによっては全角文字をサポートしていない場合がある。&br;その場合は「ＭＳ Ｐゴシック」が全角文字の代替フォントとして適用される。|
|~|>|~サイズ|~font.size|文字の大きさ。&br;一般によく用いられるポイント値ではなく、ピクセル値で指定する。&br;基本的にこの値が文字の縦幅となるが、メイリオ等は余白サイズが上乗せされる。|
|~|>|~太さ|~font.weight|文字の太さ。通常、太字のいずれか。|
|~|>|~スタイル|~font.style|文字のスタイル。通常、イタリック体、斜体のいずれか。|
|>|>|~塗り色|~fill.color|文字の塗り潰し色。&br;塗り潰したくない場合は透明色にすること。|
|~縁|>|~色|~edge.color|文字の縁の塗り潰し色。|
|~|>|~幅|~edge.width|文字の縁の幅。&br;縁を表示したくない場合は @code{0}; にすること。|
|~|>|~形状|~edge.type|文字の縁の形状。鋭角、面取り、丸角のいずれか。|
|~下線|>|~色|~underline.color|下線の色。|
|~|>|~幅|~underline.width|下線の幅。&br;下線を表示したくない場合は @code{0}; にすること。|
|~|>|~端形状|~underline.cap|下線の端の形状。なし、四角、三角、半円のいずれか。&br;なし以外にした場合、形状分だけ線の長さが伸びる（線幅の半分）。|
|~|>|~破線パターン|~underline.pattern|破線パターン。 @code{(1,0)}; で実線となる。&br;数値列によって線幅と空白幅を交互に表す。&br;各々の値は、線幅を @code{1}; とする相対サイズ（小数も使用可能）。&br;数値の個数が奇数個の場合、偶数個となるように同じ数値列2つを繋げた扱いとなる。&br;即ち、例えば @code{2,3,0}; は @code{2,3,0,2,3,0}; と等価として扱われる。|
|~|>|~オフセット|~underline.offset|下線の基準位置である文字下端からの縦方向のオフセット割合。&br;正数にすると下方向、負数にすると上方向へ移動する。&br;文字の縦幅を @code{100}; とするパーセント値。|
|~|>|~Z位置|~underline.z|テキスト内での描画順序。値が小さいほど先に描画される（奥になる）。&br;表示文字列のZ位置は @code{0}; で固定となる。&br;値が同じ場合、文字列→下線→取り消し線→傍点の順に描画される。&br;なお、値が @code{100}; より大きい場合、影が適用されなくなる。|
|~取り消し線|>|~色|~strike.color|基準位置が文字中央であること以外は下線と同じ。|
|~|>|~幅|~strike.width|~|
|~|>|~端形状|~strike.cap|~|
|~|>|~破線パターン|~strike.pattern|~|
|~|>|~オフセット|~strike.offset|~|
|~|>|~Z位置|~strike.z|~|
|~傍点&note{dot};|>|~色|~dot.color|傍点の色。|
|~|>|~幅|~dot.width|傍点の直径。&br;傍点を表示したくない場合は @code{0}; にすること。|
|~|>|~オフセット|~dot.offset|某店の基準位置である文字上端からの縦方向のオフセット割合。&br;下線の説明を参照のこと。|
|~|>|~Z位置|~dot.z|テキスト内での描画順序。&br;下線の説明を参照のこと。|
|~影|>|~色|~shadow.color|影の色。&br;影を表示したくない場合は透明色にすること。&br;他の色とは違い、グラデーション色は設定できない。|
|~|>|~方向|~shadow.dir|影の方向。|
|~|>|~距離|~shadow.depth|文字から見た影の距離。|
|~|>|~ぼかし幅|~shadow.blur|影のぼかし幅。&br;大きい値にすればするほど処理が重くなる。&br;距離を @code{0}; にすることで文字が発光しているような表現も可能。|
|~|>|~品質|~shadow.quality|影の品質。|

**表示速度 [#property-speak]

各文字が表示されるタイミングを設定します。~
[[テキスト>#property-text]]ごとの表示速度設定はチェックボックスによって各項目を設定するか否かを選択でき、設定しなかった項目についてはベース表示速度で設定した値が用いられます。

|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:||c
|~文字間隔|~speak.letter|文字の表示時間間隔（ミリ秒単位）。&br;前の文字が表示開始されてからこの時間が経過した後に次の文字が表示開始される。|
|~改行間隔|~speak.row|改行時の待機時間（ミリ秒単位）。&br;入力された改行にのみ適用され、折り返しによる改行には適用されない。|
|~フェードイン|~speak.fadein|文字の表示開始から完全不透明になるまでの時間（ミリ秒単位）。&br;文字間隔より大きい値にすることも可能。&br;その場合、前の文字のフェードインが完了する前から次の文字が表示開始される。|
|~スキップ行数|~speak.skip.row|文字間隔指定や改行間隔指定を無視して最初から表示状態にする行数と文字数。&br;フェードイン指定も無視して最初から表示される。&br;スキップ文字数指定はスキップ行数指定の次の行に対して適用される。&br;例えばスキップ行数が @code{0}; ならば1行目、 @code{2}; ならば3行目が対象となる。|
|~スキップ文字数|~speak.skip.letter|~|
|~余白スキップ|~speak.skip.blank|有効にすると行の先頭および末尾の空白文字をスキップする。&br;折り返しによって先頭や末尾にきた空白文字はスキップされない。|

**変数 [#property-variable]

[[変数書式>#format-variable]]で用いることができる変数を設定します。~
文字列値と数値（小数点以下桁数可変＆固定）がありますが、どちらもその値がそのまま変数値となります。

なお、変数は[[エクスプレッション>#expression]]からデリゲート隠しプロパティを用いて設定することも可能です。

|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:||c
|~変数名|~variable.name|変数の名前。&br;半角の英数字および @code{_}; (アンダーバー)を使うことが可能。&br;数字やアンダーバーのみの変数名でも問題ない。&br;他の変数と同じ名前を付けた場合、リストの後ろにある変数が優先される。|
|~変数値（文字列値、数値）|~variable.value|変数の値。|

**タグ [#property-tag]

[[タグ書式>#format-tag]]で用いることができるタグを設定します。

ここで設定していない名前のタグを用いることも可能で、その場合は一切スタイル設定のされていないタグとして扱われます。~
ただし、予めいくつかのスタイルが設定されている[[標準タグ>#format-tag-std]]もあります。

|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:||c
|~タグ名|~tag.name|タグの名前。&br;半角の英数字および @code{_ - . : ! @}; を使うことが可能。&br;数字や記号のみのタグ名でも問題ない。&br;他のタグと同じ名前を付けた場合、すべての項目がマージされる。&br;同一名かつ同一項目が設定されている場合はリストの後ろにあるタグが優先される。|
|~[[スタイル>#property-style]]（タグ名以外の項目）|~ |タグによる[[スタイル>#property-style]]の上書き設定。&br;チェックを付けた項目についてデフォルト値を上書きする。|

**ポスト処理 [#property-post]

エフェクト適用対象のレイヤーや各[[テキスト>#property-text]]に対して、レイヤーとテキストを合成する直前に行う画像変換処理を設定します。~
『範囲変更』エフェクトを適用している場合、レイヤーへの処理は有効範囲のみに適用されます。

|~表示名|~プロパティ名|~内容|h
|LEFT:|LEFT:||c
|~不透明度|~post.alpha|後ろのレイヤーや背景をどれだけ透過するかの設定。&br;@code{100}; で完全不透明、 @code{0}; で完全透明（＝非表示）。|
|~明度|~post.brightness|明るさ。数値を小さくするほど黒に近付く。|
|~彩度|~post.saturation|鮮やかさ。数値を小さくするほどグレースケールに近付く。|

*テキスト書式 [#format]

各[[テキスト>#property-text]]の表示文字列には[[変数書式>#format-variable]]、[[タグ書式>#format-tag]]、[[エンティティ書式>#format-entity]]を用いることができます。~
これらの書式はテキストの拡張書式設定で無効にすることも可能です。

各書式は、有効である場合、次の順序で適用されます。

+[[変数書式>#format-variable]]
+[[タグ書式>#format-tag]]
+[[エンティティ書式>#format-entity]]

**変数書式 [#format-variable]

あらかじめ設定した変数値を任意の位置に文字列として展開できます。

***構文と記述例 [#format-variable-syntax]

変数の構文は次の通りです。~
@code{[}; と @code{]}; で囲まれた部分は省略可能です。

#pre(soft){{
$'''name'''
}}
#pre(soft){{
$('''name'''[,'''width'''[.'''digits'''][,'''pad''']])
}}
#pre(soft){{
${'''name'''[,'''width'''[.'''digits'''][,'''pad''']]}
}}

変数名 @code{'''name'''}; には半角の英数字および @code{_}; (アンダーバー)を使うことが可能です。

変数名以外の各パラメータの解説も兼ねて、具体的な構文の一覧を以下に示します。~
ここでは説明の便宜上、変数名 @code{foo}; の変数に @code{12.3}; という小数値が設定されているものとします。

|~書式|~解説|~記述例|~表示例|h
|LEFT:||||c
|~@code{$foo};|変数の値を展開する。&br;変数の直後に英数字が続く場合には使えない。|@code{答えは$fooです。};|答えは12.3です。|
|~@code{$(foo)};|変数の値を展開する。&br;変数の直後に英数字が続く場合でも問題なく使える。|@code{$(foo)cm};|12.3cm|
|~@code(${foo});|~|@code(${foo}msec.);|12.3msec.|
|~@code{$(foo,'''w''')};|変数の値を文字幅 '''w''' で右詰めまたは左詰めして展開する。&br;正数ならば右詰め、負数ならば左詰めとなる。&br;余白は半角スペースで埋められる。&br;文字幅 '''w''' より実際の幅の方が大きい場合は何もしない。&br;なお、文字は半角も全角も同じ1文字としてカウントされる。|@code{x=$(foo,6)px};|x=&nbsp;&nbsp;12.3px|
|~@code(${foo,'''w'''});|~|@code(y=${foo,3}mm);|y=12.3mm|
|~@code{$(foo,-'''w''')};|~|@code{x=$(foo,-6)px};|x=12.3&nbsp;&nbsp;px|
|~@code(${foo,-'''w'''});|~|@code(y=${foo,-3}mm);|y=12.3mm|
|~@code{$(foo,'''w'''.'''d''')};|変数の値を数値として扱い、小数部の幅を '''d''' とする。&br;小数部は指定した幅になるように 0 埋めや四捨五入が行われる。&br;それ以外の点は @code{$(foo,'''w''')}; や @code{$(foo,-'''w''')}; と同じ。&br;変数の値を数値として扱えない場合は .'''d''' を無視する。|@code{x=$(foo,7.2)px};|x=&nbsp;&nbsp;12.30px|
|~@code(${foo,'''w'''.'''d'''});|~|@code(y=${foo,0.0}mm);|y=12mm|
|~@code{$(foo,-'''w'''.'''d''')};|~|@code{x=$(foo,-7.2)px};|x=12.30&nbsp;&nbsp;px|
|~@code(${foo,-'''w'''.'''d'''});|~|@code(y=${foo,-0.3}mm);|y=12.300mm|
|~@code{$(foo,'''w''','''p''')};|余白を半角スペースではなく文字 '''p''' で埋める。&br;それ以外の点は @code{$(foo,'''w''')}; や @code{$(foo,-'''w''')}; と同じ。&br;'''p''' には全角文字も指定可能。|@code{x=$(foo,6,0)px};|x=0012.3px|
|~@code(${foo,'''w''','''p'''});|~|@code(y=${foo,3,x}mm);|y=12.3mm|
|~@code{$(foo,-'''w''','''p''')};|~|@code{x=$(foo,-6,*)px};|x=12.3**px|
|~@code(${foo,-'''w''','''p'''});|~|@code(y=${foo,-3,x}mm);|y=12.3mm|
|~@code{$(foo,'''w'''.'''d''','''p''')};|余白を半角スペースではなく文字 '''p''' で埋める。&br;それ以外の点は @code{$(foo,'''w'''.'''d''')}; や @code{$(foo,-'''w'''.'''d''')}; と同じ。&br;'''p''' には全角文字も指定可能。|@code{x=$(foo,7.2,@)px};|x=@@12.30px|
|~@code(${foo,'''w'''.'''d''','''p'''});|~|@code(y=${foo,0.0,x}mm);|y=12mm|
|~@code{$(foo,-'''w'''.'''d''','''p''')};|~|@code{x=$(foo,-7.2,あ)px};|x=12.30ああpx|
|~@code(${foo,-'''w'''.'''d''','''p'''});|~|@code(y=${foo,-0.3,x}mm);|y=12.300mm|

なお、定義されていない変数名が用いられた場合、空の文字列を変数値として処理します。~
@code{$}; の後に英数字が続くような文字列そのものを表示したい場合、[[エンティティ書式>#format-entity]]を用いる必要があります。

***ネスト [#format-variable-nest]

変数のネストが有効である場合、表示文字列内の変数は最大10回まで繰り返し展開されます。

例えば次のような変数が定義されているとします。

|~変数名|~変数値（文字列値）|h
|LEFT:||c
|~@code{abc};|@code{あいうえお};|
|~@code{xyz};|@code{abc};|
|~@code{foo};|@code{$abc$x};|
|~@code{width};|@code{6};|

この時、次のような記述をすることができます。

|~記述例|~展開(1回目)|~展開(2回目)|~最終表示文字列|h
|LEFT:||||c
|~@code{$$xyz};|@code{$abc};|@code{あいうえお};|あいうえお|
|~@code{$(foo)yz};|@code{$abc$xyz};|@code{あいうえおabc};|あいうえおabc|
|~@code{$(xyz,$width,X)};|@code{$(xyz,6,X)};|@code{XXXabc};|XXXabc|

ネスト展開を10回行っても完了しなかった場合、ネストを無効化して処理されます。

**タグ書式 [#format-tag]

HTML風の記述で1つのテキスト内に複数のスタイル設定や表示速度設定を混在させることができます。

***構文 [#format-tag-syntax]

タグの構文は次の通りです。~
@code{[}; と @code{]}; で囲まれた部分は省略可能です。

:開始タグ|タグによるスタイル適用の開始を表します。&br;タグ名と、それに続く0個以上の属性で記述します。
#pre(soft){{
<'''tag'''[ '''attr'''="'''value'''"[ '''attr'''="'''value'''"[...]]]>
}};
:終端タグ|開始タグとセットで用いることでタグ設定適用範囲の終端を表します。
#pre(soft){{
</'''tag'''>
}};
:独立タグ|単体で効果を発揮する属性や特殊タグで用いる書式です。&br;開始タグの直後に対応する終端タグを書くことと同じです。
#pre(soft){{
<'''tag'''[ '''attr'''="'''value'''"[ '''attr'''="'''value'''"[...]]]/>
}};

@code{'''tag'''}; をタグ名、 @code{'''attr'''}; を属性名、 @code{'''value'''}; を属性値と呼びます。~
また、属性名と属性値をイコールで結んだ @code{'''attr'''="'''value'''}; をまとめて属性と呼びます。

タグ名 @code{'''tag'''}; には半角の英数字および @code{_ - . : ! @}; を使うことが可能です。~
[[スタイルタグ>#property-tag]]で定義したタグを用いる場合、タグ名の項目で設定した文字列をここに記述します。~
定義されていないタグ名を記述することも可能です。

属性名 @code{'''attr'''}; には半角の英数字および @code{_ - . :}; を使うことが可能です。~
定義されていない属性名を記述することも可能ですが、特に表示上の意味はありません。

属性値 @code{'''value'''}; は基本的にダブルクォートで囲んで記述しますが、空白文字を含まない場合はダブルクォート無しで記述することも可能です。~
とはいえ、基本的に属性値はダブルクォートで囲むものと考えておいた方が良いでしょう。~
属性名と属性値の内容がマッチしない場合、その属性は無視されます。

***タグの適用範囲

タグは開始タグから終端タグの間にある文字列に対して適用されます。~
開始タグに対応する終端タグが存在しない場合は表示文字列の末尾まで適用されます。

#pre{{
範囲外<b>b の適用範囲</b>範囲外<span fill.color="red">span の適用範囲(文末まで)
}}

独立タグの場合は記述した位置に対して適用されます。

タグをネストすることも可能です。~
ネストされた表示文字列には両方のタグが適用されます。

#pre{{
<b>b の適用範囲<span fill.color="red">b と span の適用範囲</span>b の適用範囲</b>
}}

また、適用範囲の一部だけを重ねることも可能です。~
例えば次のような記述が行えます。

#pre{{
適用なし<u>下線適用<font color="#0000FF">両方適用</u>青字適用</font>適用なし
}}

これは次のように表示されます。

#ref(example_tag_duplex.png,nolink,適用なし下線適用両方適用青字適用適用なし);

あるタグで囲まれた表示文字列に適用される[[スタイル>#property-style]]および[[表示速度>#property-speak]]は次のように定まります。

+そのタグ自体や属性によって明示的に指定されているスタイルおよび表示速度についてはそれを適用する。
+そのタグでは指定されていないが、更に外側を囲むタグで指定されているスタイルおよび表示速度についてはそれを適用する。
+いずれのタグでも指定されていないスタイルおよび表示速度については[[テキスト>#property-text]]ごとのベーススタイル設定およびベース表示速度設定を用いる。

***記述例 [#format-tag-example]

|~内容|~記述例|~表示例&note{:見やすさのために行間等を調整しています。};|h
|LEFT:|||c
|~[[標準属性>#format-tag-attr]]|@code{<span fill.color="red">塗り潰したり</span>、&br;<span dot="3px blue">傍点を付けたり</span>します。};|&ref(example_tag_attr.png,nolink,塗り潰したり、傍点を付けたりします。);|
|~[[標準タグ>#format-tag-std]]|@code{<b>太字にしたり</b>、&br;<big>大きくしたり</big>します。};|&ref(example_tag_std.png,nolink,太字にしたり、大きくしたりします。);|
|~[[特殊属性>#format-tag-special]]|@code{<font color="RGB(0,128,0)" style="italic">緑字斜体にしたり</font>、&br;表示を<wwww/>1秒待ったりします。};|&ref(example_tag_special.png,nolink,緑字斜体にしたり、表示を1秒待ったりします。);|

***標準属性 [#format-tag-attr]

あらゆるタグにおいて指定可能な属性の一覧です。~
[[スタイル>#property-style]]指定および一部の[[表示速度>#property-speak]]指定を行うことができます。

-あらゆる属性値には @code{auto}; および @code{inherit}; を指定可能です。いずれも何も行わないことを表します。
--複数の属性値記述が必要な場合に用いることで、特定の属性値だけ指定しないようにすることができます。
-属性値内容において「一括」となっているものについては、対応スタイルや対応表示速度に書かれているものを一括で指定できることを表します。
--備考に特記されていない限り、すべての値は順不同で、任意の値だけを選んで記述可能です。
--複数種類の属性値として認識されうる値を記述した場合、対応スタイルや対応表示速度に書かれているもののうち先頭から順に決定されます。
---例えば @code{font="normal"}; と記述すると、フォントのスタイルが太さよりも前にあるため、 @code{font.style="normal"}; として解釈されます。
-属性値内容において「○○指定」となっているものについては[[属性値指定>#format-tag-attr-value]]の項で説明します。
-属性値内容において「×2」や「×3」などのようになっているものは、空白を挟んでその数だけ値を記述することを表します。
--例えば「サイズ指定×3」ならば @code{1px auto 3mm}; のように記述します。

:[[スタイル>#property-style]]タイプ|
|~属性名|~属性値内容|>|>|>|~対応スタイル|~備考|h
|~|~|>|>|~項目|~対応値&note{target-value:何も書かれていない場合は属性値そのものが対応値を表します。};|~|h
|LEFT:|||||||c
|~@code{valign};|@code{top};|文字配置|>|行内位置|上端||
|~|@code{middle};|~|>|~|中央||
|~|@code{baseline};|~|>|~|ベースライン||
|~|@code{bottom};|~|>|~|下端||
|~@code{scale.x};|割合指定|~|スケール|横|||
|~@code{scale.y};|割合指定|~|~|縦|||
|~@code{scale};|割合指定|~|~|横縦||横と縦に同一値を適用する。|
|~|割合指定×2|~|~|横,縦|||
|~@code{margin.top};|サイズ指定|~|マージン|上|||
|~@code{margin.bottom};|サイズ指定|~|~|下|||
|~@code{margin.left};|サイズ指定|~|~|左|||
|~@code{margin.right};|サイズ指定|~|~|右|||
|~@code{margin};|サイズ指定|~|~|上下左右||全方向に同一値を適用する。|
|~|サイズ指定×2|~|~|上下,左右||上下と左右に同一値を適用する。|
|~|サイズ指定×3|~|~|上,左右,下||左右には同一値を適用する。|
|~|サイズ指定×4|~|~|上,右,下,左|||
|~@code{font.family};|フォント名|フォント|>|ファミリ|||
|~@code{font.size};|サイズ指定|~|>|サイズ|||
|~@code{font.weight};|normal|~|>|太さ|通常||
|~|regular|~|>|~|~||
|~|medium|~|>|~|~||
|~|bold|~|>|~|太字||
|~|heavy|~|>|~|~||
|~@code{font.style};|normal|~|>|スタイル|通常||
|~|italic|~|>|~|イタリック体||
|~|oblique|~|>|~|斜体||
|~@code{font};|一括|~|>|スタイル,太さ,サイズ,ファミリ||ファミリは末尾で指定する。|
|~@code{fill.color};|色指定|>|>|塗り色|||
|~@code{fill};|色指定|>|>|~||@code{fill.color}; と同じ。|
|~@code{edge.color};|色指定|縁|>|色|||
|~@code{edge.width};|サイズ指定|~|>|幅|||
|~@code{edge.type};|normal|~|>|形状|鋭角||
|~|miter|~|>|~|~||
|~|bevel|~|>|~|面取り||
|~|round|~|>|~|丸角||
|~@code{edge};|一括|~|>|形状,幅,色||色は末尾で指定する。|
|~@code{underline.color};|色指定|下線|>|色|||
|~@code{underline.width};|サイズ指定|~|>|幅|||
|~@code{underline.cap};|normal|~|>|端形状|なし||
|~|none|~|>|~|~||
|~|flat|~|>|~|~||
|~|square|~|>|~|四角||
|~|tri|~|>|~|三角||
|~|triangle|~|>|~|~||
|~|circle|~|>|~|半円||
|~|round|~|>|~|~||
|~@code{underline.pattern};|数値×1以上|~|>|破線パターン|||
|~@code{underline.offset};|割合指定|~|>|オフセット|||
|~@code{underline.z};|数値|~|>|Z位置|||
|~@code{underline};|一括|~|>|端形状,幅,色||色は末尾で指定する。|
|~@code{strike.color};|色指定|取り消し線|>|色|||
|~@code{strike.width};|サイズ指定|~|>|幅|||
|~@code{strike.cap};|normal|~|>|端形状|なし||
|~|none|~|>|~|~||
|~|flat|~|>|~|~||
|~|square|~|>|~|四角||
|~|tri|~|>|~|三角||
|~|triangle|~|>|~|~||
|~|circle|~|>|~|半円||
|~|round|~|>|~|~||
|~@code{strike.pattern};|数値×1以上|~|>|破線パターン|||
|~@code{strike.offset};|割合指定|~|>|オフセット|||
|~@code{strike.z};|数値|~|>|Z位置|||
|~@code{strike};|一括|~|>|端形状,幅,色||色は末尾で指定する。|
|~@code{dot.color};|色指定|傍点|>|色|||
|~@code{dot.width};|サイズ指定|~|>|幅|||
|~@code{dot.offset};|割合指定|~|>|オフセット|||
|~@code{dot.z};|数値|~|>|Z位置|||
|~@code{dot};|一括|~|>|幅,色||色は末尾で指定する。|
|~@code{shadow.color};|色指定|影|>|色|||
|~@code{shadow.dir};|数値|~|>|方向|||
|~@code{shadow.depth};|サイズ指定|~|>|距離|||
|~@code{shadow.blur};|サイズ指定|~|>|ぼかし幅||大きくし過ぎないこと。|
|~@code{shadow.quality};|normal|~|>|品質|通常||
|~|performance|~|>|~|~||
|~|high|~|>|~|高品質||
|~|quality|~|>|~|~||
|~@code{shadow};|一括|~|>|品質,方向,距離,色||色は末尾で指定する。|
:[[表示速度>#property-speak]]タイプ|
|~属性名|~属性値内容|>|~対応表示速度|~備考|h
|~|~|~項目|~対応値&note{target-value};|~|h
|LEFT:|||||c
|~@code{speak.letter};|時間指定|文字間隔|||
|~@code{speak.row};|時間指定|改行間隔|||
|~@code{speak.fadein};|時間指定|フェードイン|||
|~@code{speak.wait};|時間指定|>|（対応なし）|指定時間だけ停止する。&br;独立タグに対して指定しなければ効果なし。|

***属性値指定 [#format-tag-attr-value]

末尾に単位を付けたり特殊な記述をしたりする属性値指定の一覧です。

@code{'''N'''}; のようなイタリック体の英字は任意の数値を表します。~
指定可能な数値の範囲は指定方法や対象属性により異なります。

|~指定方法|~記述|~記述例|~適用される値&note{:何も書かれていない場合はそのままの値が適用されます。};|~備考|h
|LEFT:|||||c
|~割合指定|@code{'''N'''};|@code{1.5};|100倍値|割合|
|~|@code{'''N'''em};|@code{2em};|~|~|
|~|@code{'''N'''%};|@code{80%};||パーセント|
|~|@code{'''N'''％};|@code{123.4％};|~|~|
|~サイズ指定|@code{'''N'''};|@code{20.4};||ピクセル|
|~|@code{'''N'''px};|@code{10px};|~|~|
|~|@code{'''N'''pixel};|@code{12.3pixel};|~|~|
|~|@code{'''N'''pt};|@code{12pt};|96/72.0倍値|ポイント|
|~|@code{'''N'''point};|@code{9.8point};|~|~|
|~|@code{'''N'''mm};|@code{50mm};|96/25.4倍値|ミリメートル|
|~|@code{'''N'''pc};|@code{1.2pc};|96/6.0倍値|パイカ&note{:1パイカ ＝ 12ポイント};|
|~|@code{'''N'''pica};|@code{2pica};|~|~|
|~|@code{'''N'''cm};|@code{3cm};|96/2.54倍値|センチメートル|
|~|@code{'''N'''in};|@code{0.3in};|96倍値|インチ|
|~|@code{'''N'''inch};|@code{0.25inch};|~|~|
|~色指定&note{:現在の実装では色指定でグラデーション色を指定することはできません。グラデーション色を用いたい場合は独自の[[タグ>#property-tag]]を定義してください。};|@code{#'''RGB'''};|@code{#0E7};|@code{'''R''', '''G''', '''B'''}; 各々の17倍値&br;不透明度は255固定|各値はそれぞれ @code{0}; 〜 @code{F}; の16進数値。&br;大文字・小文字は問わない。|
|~|@code{0x'''RGB'''};|@code{0xFfF};|~|~|
|~|@code{#'''ARGB'''};|@code{#F66A};|@code{'''A''', '''R''', '''G''', '''B'''}; 各々の17倍値|~|
|~|@code{0x'''ARGB'''};|@code{0xe07a};|~|~|
|~|@code{#'''RRGGBB'''};|@code{#FF0080};|@code{'''RR''', '''GG''', '''BB'''};&br;不透明度は255固定|各値はそれぞれ @code{00}; 〜 @code{FF}; の16進数値。&br;大文字・小文字は問わない。|
|~|@code{0x'''RRGGBB'''};|@code{0x00ff00};|~|~|
|~|@code{#'''AARRGGBB'''};|@code{#80aabbcc};|@code{'''AA''', '''RR''', '''GG''', '''BB'''};|~|
|~|@code{0x'''AARRGGBB'''};|@code{0xFF5090C0};|~|~|
|~|@code{RGB('''R''','''G''','''B''')};|@code{RGB(255,128,0)};|@code{'''R''', '''G''', '''B'''};&br;不透明度は255固定|各値はそれぞれ @code{0}; 〜 @code{255}; の10進数値。|
|~|@code{RGBA('''R''','''G''','''B''','''A''')};|@code{RGBA(192,96,96,0)};|@code{'''A''', '''R''', '''G''', '''B'''};|~|
|~|@code{ARGB('''A''','''R''','''G''','''B''')};|@code{RGBA(192,0,0,255)};|~|~|
|~|色名|@code{red};|赤|HTMLで定義されている色名が使える。&br;&br;参考：[[原色大辞典>http://www.colordic.org/]]|
|~|~|@code{blue};|青|~|
|~|~|@code{black};|黒|~|
|~|~|...|...|~|
|~時間指定|@code{'''N'''};|@code{200};||ミリ秒|
|~|@code{'''N'''ms};|@code{10.5ms};|~|~|
|~|@code{'''N'''msec};|@code{500msec};|~|~|
|~|@code{'''N'''s};|@code{1s};|1000倍値|秒|
|~|@code{'''N'''sec};|@code{0.7sec};|~|~|
|~|@code{'''N'''m};|@code{0.05m};|60000倍値|分|
|~|@code{'''N'''min};|@code{0.1min};|~|~|

***標準タグ [#format-tag-std]

予めいくつかの[[スタイル>#property-style]]が定義済みであるタグの一覧です。~
[[スタイルタグ>#property-tag]]設定によって他のスタイルを追加したり、定義済みのスタイルを上書きすることも可能です。

|~タグ名|>|>|>|~定義済みスタイル|~同等の属性指定|h
|~|>|>|~スタイル|~値|~|h
|LEFT:||||||c
|~@code{b};|フォント|>|太さ|太字|@code{font.weight="bold"};|
|~@code{big};|文字配置|スケール|横|@code{125};|@code{scale="125%"};|
|~|~|~|縦|@code{125};|~|
|~@code{del};|取り消し線|>|色|黒|@code{strike="1px black" strike.pattern="2,1"};|
|~|~|>|幅|@code{1};|~|
|~|~|>|破線パターン|@code{2,1};|~|
|~@code{em};|フォント|>|スタイル|斜体|@code{font.style="oblique"};|
|~@code{i};|フォント|>|スタイル|イタリック体|@code{font.style="italic"};|
|~@code{ins};|下線|>|色|黒|@code{underline="1px black" underline.pattern="2,1"};|
|~|~|>|幅|@code{1};|~|
|~|~|>|破線パターン|@code{2,1};|~|
|~@code{q};|下線|>|色|黒|@code{underline="1px black" underline.pattern="1,1"};|
|~|~|>|幅|@code{1};|~|
|~|~|>|破線パターン|@code{1,1};|~|
|~@code{small};|文字配置|スケール|横|@code{75};|@code{scale="75%"};|
|~|~|~|縦|@code{75};|~|
|~@code{strong};|フォント|>|太さ|太字|@code{font="bold oblique"};|
|~|~|>|スタイル|斜体|~|
|~@code{sub};|文字配置|>|行内位置|下端|@code{valign="bottom" scale="50%"};|
|~|~|スケール|横|@code{50};|~|
|~|~|~|縦|@code{50};|~|
|~@code{sup};|文字配置|>|行内位置|上端|@code{valign="top" scale="50%"};|
|~|~|スケール|横|@code{50};|~|
|~|~|~|縦|@code{50};|~|
|~@code{tt};|フォント|>|ファミリ|ＭＳ ゴシック|@code{font.family="ＭＳ ゴシック"};|
//|~@code{};|||||@code{};|
//|~@code{};|||||@code{};|
//|~@code{};|||||@code{};|

***特殊タグ＆属性 [#format-tag-special]

特殊属性を指定できたり一般のタグとは異なる挙動をしたりするタグと、それに対応する特殊属性の一覧です。

一部を除き、基本的には[[標準属性>#format-tag-attr]]よりも少ない文字数で記述できることが利点です。~
例えば、次の2行は同じ表示結果となります。

#pre{{
<span fill.color="black" font.size="20">あいうえお</span>
<font color="black" size="20">あいうえお</font>
}}

|~特殊タグ名|~特殊属性名|~対応する標準属性名|~備考|h
|LEFT:||||c
|~@code{scale};|@code{x};|@code{scale.x};||
|~|@code{y};|@code{scale.y};||
|~@code{margin};|@code{top};|@code{margin.top};||
|~|@code{bottom};|@code{margin.bottom};||
|~|@code{left};|@code{margin.left};||
|~|@code{right};|@code{margin.right};||
|~@code{font};|@code{color};|@code{fill.color};|他と違い、 @code{font.color}; 属性は存在しない。|
|~|@code{family};|@code{font.family};||
|~|@code{size};|@code{font.size};||
|~|@code{weight};|@code{font.weight};||
|~|@code{style};|@code{font.style};||
|~@code{fill};|@code{color};|@code{fill.color};||
|~@code{edge};|@code{color};|@code{edge.color};||
|~|@code{width};|@code{edge.width};||
|~|@code{type};|@code{edge.type};||
|~@code{u};|@code{color};|@code{underline.color};||
|~|@code{width};|@code{underline.width};|指定されなければ @code{1}; が指定されたものとみなす。|
|~|@code{cap};|@code{underline.cap};||
|~|@code{pattern};|@code{underline.pattern};||
|~|@code{offset};|@code{underline.offset};||
|~|@code{z};|@code{underline.z};||
|~@code{underline};|>|>|@code{u}; と同じであるため割愛。|
|~@code{s};|@code{color};|@code{strike.color};||
|~|@code{width};|@code{strike.width};|指定されなければ @code{1}; が指定されたものとみなす。|
|~|@code{cap};|@code{strike.cap};||
|~|@code{pattern};|@code{strike.pattern};||
|~|@code{offset};|@code{strike.offset};||
|~|@code{z};|@code{strike.z};||
|~@code{strike};|>|>|@code{s}; と同じであるため割愛。|
|~@code{dot};|@code{color};|@code{dot.color};||
|~|@code{width};|@code{dot.width};|指定されなければ @code{1}; が指定されたものとみなす。|
|~|@code{offset};|@code{dot.offset};||
|~|@code{z};|@code{dot.z};||
|~@code{shadow};|@code{color};|@code{shadow.color};||
|~|@code{dir};|@code{shadow.dir};||
|~|@code{depth};|@code{shadow.depth};||
|~|@code{blur};|@code{shadow.blur};||
|~|@code{quality};|@code{shadow.quality};||
|~@code{speak};|@code{letter};|@code{speak.letter};||
|~|@code{row};|@code{speak.row};||
|~|@code{fadein};|@code{speak.fadein};||
|~|@code{wait};|@code{speak.wait};|独立タグに対して指定しなければ効果なし。|
|~@code{w};|>|なし|w の数×250ミリ秒だけ停止する。&br;独立タグとして用いなければ効果なし。&br;&br;例：@code{<www/>};|
|~@code{ww};|>|~|~|
|~@code{www};|>|~|~|
|~@code{wwww};|>|~|~|
|~@code{wwwww};|>|~|~|
|~@code{wwwwww};|>|~|~|
|~@code{wwwwwww};|>|~|~|
|~@code{wwwwwwww};|>|~|~|
//|~|@code{};|@code{.};||
//|~|@code{};|@code{.};||
//|~|@code{};|@code{.};||

**エンティティ書式 [#format-entity]

[[変数書式>#format-variable]]、[[タグ書式>#format-tag]]で用いる文字（@code{$ < >};）や、通常では入力しづらい文字を表示できます。

***構文 [#format-entity-syntax]

エンティティの構文は次の通りです。

#pre(soft){{
&'''name''';
}}
#pre(soft){{
&#'''dec''';
}}
#pre(soft){{
&#x'''hex''';
&#X'''hex''';
}}

@code{'''name'''}; は定義済みの名前です。~
HTMLエンティティで定義されている名前を用いることができます。

-参考：[[HTML ISO-8859-1 Reference - w3school.com>http://www.w3schools.com/tags/ref_entities.asp]]

@code{'''dec'''}; はUnicode文字コードを表す10進数値、 @code{hex}; はUnicode文字コードを表す16進数値です。~
いずれも指定したUnicode文字コードに対応する文字を表示できます。~
名前が定義されている必要はありません。~
なお、数値の頭には任意個数の @code{0}; を付けても構いません。

***記述例 [#format-entity-example]

代表的なエンティティ文字の一覧です。

|~文字|>|>|~記述|~備考|h
|~|~名前|~10進数|~16進数|~|h
|~@code_big{&#x24;};|@code{&amp;dollar;};|@code{&amp;#36;};|@code{&amp;#x24;};|$100 のような変数書式と被る文字列そのものを表示したい場合に用いる。&br;なお、 @code{dollar}; という名前はHTMLエンティティには定義されていない。|
|~@code_big{&#x3c;};|@code{&amp;lt;};|@code{&amp;#60;};|@code{&amp;#x3c;};|<abc> のようなタグ書式と被る文字列そのものを表示したい場合に用いる。|
|~@code_big{&#x3e;};|@code{&amp;gt;};|@code{&amp;#62;};|@code{&amp;#x3e;};|~|
|~@code_big{&#x26;};|@code{&amp;amp;};|@code{&amp;#38;};|@code{&amp;#x26;};|&amp;lt; のようなエンティティ書式と被る文字列そのものを表示したい場合に用いる。|
|~@code_big{&#x22;};|@code{&amp;quot;};|@code{&amp;#34;};|@code{&amp;#x22;};||
|~@code_big{&#x27;};|@code{&amp;apos;};|@code{&amp;#39;};|@code{&amp;#x27;};||
|~@code_big{&#xa9;};|@code{&amp;copy;};|@code{&amp;#169;};|@code{&amp;#xa9;};|著作権表記|
|~@code_big{&#xae;};|@code{&amp;reg;};|@code{&amp;#174;};|@code{&amp;#xae;};|商標表記|
|~@code_big{&#xb2;};|@code{&amp;sup2;};|@code{&amp;#178;};|@code{&amp;#xb2;};|2乗|
|~@code_big{&#xb3;};|@code{&amp;sup3;};|@code{&amp;#179;};|@code{&amp;#xb3;};|3乗|
|~@code_big{&#xbc;};|@code{&amp;frac14;};|@code{&amp;#188;};|@code{&amp;#xbc;};|1/4|
|~@code_big{&#xbd;};|@code{&amp;frac12;};|@code{&amp;#189;};|@code{&amp;#xbd;};|1/2|
|~@code_big{&#xbe;};|@code{&amp;frac34;};|@code{&amp;#190;};|@code{&amp;#xbe;};|3/4|
|~@code_big{&#x2660;};|@code{&amp;spades;};|@code{&amp;#9824;};|@code{&amp;#x2660;};|スペード|
|~@code_big{&#x2663;};|@code{&amp;clubs;};|@code{&amp;#9827;};|@code{&amp;#x2663;};|クラブ|
|~@code_big{&#x2665;};|@code{&amp;hearts;};|@code{&amp;#9829;};|@code{&amp;#x2665;};|ハート|
|~@code_big{&#x2666;};|@code{&amp;diams;};|@code{&amp;#9830;};|@code{&amp;#x2666;};|ダイヤ|

*エクスプレッション対応 [#expression]

エクスプレッションで用いることのできる当プラグイン独自クラスの簡単な説明です。

C#言語およびエクスプレッションの知識があることが前提となります。~
C#言語はわかるけどエクスプレッションをよく知らないという方には次のサイトが大変参考になります。

-[[NiVE2のエクスプレッションについて - 金の髭のNiVE(NicoVisualEffects)まとめメモ>http://www.geocities.jp/goldenhige/NiVE/NiVE2/nive2expression.html]]

**前準備 [#expression-config]

当プラグインをエクスプレッションで用いるにあたり推奨される設定は次の通りです。~
以降、この設定がされているものとして解説します。

|~設定項目|~設定値|h
|LEFT:||c
|~参照|@code{Plugins/ruche.nive2.effects.dll};&br;@code{Plugins/ruche.nive2.effects.wpf.dll};&br;@code{C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0\WindowsBase.dll};&br;@code{C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0\PresentationCore.dll};&br;@code{C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.0\PresentationFramework.dll};|
|~名前空間|@code{ruche.nive2.effects};&br;@code{ruche.nive2.effects.wpf};&br;@code{System.Windows};&br;@code{System.Windows.Media};&br;@code{System.Windows.Shapes};|

なお、参照の設定における @code{C:\Program Files}; の部分は標準のプログラムフォルダに適宜置き換えてください。~
例えばWindowsをDドライブにインストールした場合は @code{D:\Program Files}; となります。

その他、基本的なことについてはNiVE2のマニュアルや添付のreadme_expression.txtを参照してください。

**デリゲート隠しプロパティ [#expression-delegate]

デリゲート隠しプロパティは、 @code{ruche.nive2.effects.wpf.TextEffectDelegateProperty}; クラス型のNiVE2プロパティです。~
このプロパティの各メンバに対して適切なデリゲートを設定することで、通常の設定では行えない高度な表示制御が可能となります。

このプロパティは[[ルート項目>#property-root]]および各[[テキスト>#property-text]]が保持しています。~
ルート項目のものはすべてのテキストに対して適用され、各テキストのものは各々に対してのみ適用されます。~
両方に対してデリゲートを設定した場合、ルート項目→テキストの順に呼び出されます。

エフェクトのエクスプレッションでデリゲート隠しプロパティを取得および設定するコードは次の通りです。

:ルート項目|
#code(csharp,nomenu,nonumber,nooutline,noliteral,nocomment){{
// 取得
TextEffectDelegateProperty propRoot =
    (TextEffectDelegateProperty)property.GetProperty(thisItem, "delegate");

// 設定
property.SetProperty(thisItem, propRoot);
}}
:各テキスト|
#code(csharp,nomenu,nonumber,nooutline,noliteral,nocomment){{
// 0 番目のテキストから取得する例
AddablePropertyBase texts =
    (AddablePropertyBase)property.GetProperty(thisItem, "texts");
FormattedTextPropertySet ps =
    (FormattedTextPropertySet)texts.Properties[0]; // 0 番目
TextEffectDelegateProperty propText =
    (TextEffectDelegateProperty)ps["delegate"];

// 設定(テキスト可変長プロパティを設定することでデリゲートも上書きされる)
property.SetProperty(thisItem, texts);
}}

このプロパティの主要なメンバ、およびそのデリゲート型は次の通りです。~
各デリゲート型は @code{ruche.nive2.effects.wpf.TextEffectDelegateProperty}; クラスの内部型として定義されています。

:変数デリゲート|NiVE2上で設定されている変数リストを受け取り、それを操作したり新たな変数を追加したりできます。
#code(csharp,nomenu,nonumber,nooutline,noliteral,nocomment){{
/// <summary>
/// 変数リストに対する処理を行うデリゲート。
/// </summary>
/// <param name="variables">変数リスト。</param>
public delegate void VariableDelegate(
    Dictionary<string, object> variables);

/// <summary>
/// 変数リストデリゲートを取得または設定する。
/// </summary>
public VariableDelegate Variable { get; set; }
}}
:表示文字列デリゲート|NiVE2上で設定されている表示文字列とその文字列が表示開始されてからの経過秒数を受け取り、表示文字列を変更して返すことができます。
#code(csharp,nomenu,nonumber,nooutline,noliteral,nocomment){{
/// <summary>
/// テキストに対する処理を行い、最終的なテキストを返すデリゲート。
/// </summary>
/// <param name="text">テキスト。</param>
/// <param name="elapsedTime">
/// テキストが表示されてからの経過秒数。
/// </param>
/// <returns>最終的に使われるテキスト。</returns>
public delegate string TextDelegate(
    string text,
    double elapsedTime);

/// <summary>
/// テキストデリゲートを取得または設定する。
/// </summary>
public TextDelegate Text { get; set; }
}}
:描画情報デリゲート|最終的な描画処理に用いられる情報と対象の表示文字列が表示開始されてからの経過秒数を受け取り、座標等の情報を直接修正することができます。
#code(csharp,nomenu,nonumber,nooutline,noliteral,nocomment){{
/// <summary>
/// テキスト描画情報に対する処理を行うデリゲート。
/// </summary>
/// <param name="info">テキスト描画情報。</param>
/// <param name="elapsedTime">
/// テキストが表示されてからの経過秒数。
/// </param>
public delegate void RenderingInfoDelegate(
    ruche.nive2.effects.wpf.TextRenderingInfo info,
    double elapsedTime);

/// <summary>
/// テキスト描画情報デリゲートを取得または設定する。
/// </summary>
public RenderingInfoDelegate RenderingInfo { get; set; }
}}

描画情報デリゲートの引数 @code{info}; の型である @code{ruche.nive2.effects.wpf.TextRenderingInfo}; の詳細については別配布のクラスリファレンスを参照してください。~
具体的なコーディング例は[[次節>#expression-example]]を参照してください。

**コーディング例 [#expression-example]

簡単なコーディング例をいくつか示します。~
ここでは[[ルート項目>#property-root]]のデリゲート隠しプロパティに対してデリゲートを設定していますが、各[[テキスト>#property-text]]に対しても同様のことが行えます。

:レイヤーのローカル時間 @code{time}; を変数に追加する。|
#code(csharp){{
// プロパティ取得
TextEffectDelegateProperty propRoot =
    (TextEffectDelegateProperty)property.GetProperty(thisItem, "delegate");

// 変数デリゲート設定
propRoot.Variable = delegate(Dictionary<string, object> variables)
{
    // レイヤーのローカル時間を変数 $time に設定
    variables["time"] = time;
};

// プロパティ設定
property.SetProperty(thisItem, propRoot);
}}
:文字列が表示されてからの経過秒数（小数点以下切り捨て）を元文字列の末尾に追加する。|
#code(csharp){{
// プロパティ取得
TextEffectDelegateProperty propRoot =
    (TextEffectDelegateProperty)property.GetProperty(thisItem, "delegate");

// 表示文字列デリゲート設定
propRoot.Text = delegate(string text, double elapsedTime)
{
    // 経過秒数(小数点以下切り捨て)を表示文字列の末尾に追加して返す
    return (text + (int)elapsedTime);
};

// プロパティ設定
property.SetProperty(thisItem, propRoot);
}}
:各文字がフェードイン時に上から落ちてくるような表示にする。|予めNiVE2上で[[表示速度>#property-speak]]の設定を行っておいてください。
#code(csharp){{
// プロパティ取得
TextEffectDelegateProperty propRoot =
    (TextEffectDelegateProperty)property.GetProperty(thisItem, "delegate");

// 描画情報デリゲート設定
propRoot.RenderingInfo = delegate(TextRenderingInfo info, double elapsedTime)
{
    // 行ごとに処理
    foreach (TextRowRenderingInfo ri in info.RowInfos)
    {
        // 文字ごとに処理
        foreach (LetterRenderingInfo li in ri.LetterInfos)
        {
            // 現在のフェードイン割合を取得(0.0〜1.0)
            double rate = li.CalcOpacity(elapsedTime);

            // 次のように平行移動させる
            // rate==0.0 -> 文字の高さ分だけ本来の位置より上
            // rate==1.0 -> 本来の位置
            Point2D pos = li.Position;
            pos.Y -= li.CalcHeight() * (1.0 - rate);
            li.Position = pos;
        }
    }
};

// プロパティ設定
property.SetProperty(thisItem, propRoot);
}}

*FAQ [#faq]

ありがちな（ありそうな）疑問点とそれに対する答えをまとめています。

:変数書式やタグ書式が有効な状態で @code{$}; や @code{<}; といった文字を表示したい。|
[[エンティティ書式>#format-entity]]を用いてください。~
@code{$}; は @code{&amp;dollar;}; 、 @code{<}; は @code{&amp;lt;}; 、 @code{>}; は @code{&amp;gt;}; と記述することで表示できます。
:長い行を特定の幅で折り返し表示したい。|
[[テキスト>#property-text]]の「行配置/最大サイズ」の幅を折り返したい幅に設定してください。
:フォント指定がメイリオの場合に行間が空きすぎてしまう。|
行間が空くのはメイリオフォントの仕様です。~
[[テキスト>#property-text]]の「行配置/行間」を @code{75}; 程度にするとちょうどいい具合になります。
:下線や取り消し線の位置が微妙にずれる。|
下線および取り消し線はアンチエイリアス処理によってぼやけることを防ぐためにピクセル位置を調整しています。~
この調整処理は、線が水平である場合はY方向について、線が垂直である場合はX方向について行われ、それ以外の場合は行われません。~
また、この調整によって0.5ピクセル以上ずれることはありません。

*更新履歴 [#history]

:2011-07-30|
--初版。

 

Now place: 文書/NiVE2 マルチテキスト

PukiWiki 1.5.0 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji.
Skin "GS2" is designed by yiza.
Powered by PHP 5.6.40. HTML convert time: 0.015 sec.