Reflex iText

A.概要

  • Reflex iTextは、「開発・連携・出力」できる リソース志向のPDF生成用アプリケーションエンジンです。
    • レイアウトを定義するテンプレートHTMLと表示したいデータを格納したエンティティ(データ)を与えることによってPDFファイルを作成します。
      • エンティティはXMLまたはJSONを使用することができます。テンプレートに項目名を指定することによってデータを動的に出力できます。
  • HTMLを作成するような感覚で簡単にテンプレートを開発できます。
  • テンプレート作成のための特別なソフトをインストールする必要がありません。

B.基本サンプル

B1.Hello World

  • テンプレート (helloworld.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:A4; orientation:portrait;">    <!-- 用紙サイズをA4、ページ向きを縦にしています -->
    <table>
        <tr>
            <td>
                <p id="greeting" />    <!-- 表示させたいentityの項目名を定義します -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (helloworld.json) 
    
{"helloWorld" : {"greeting" : "Hello World"}}
  • 表示結果
    HelloWorld実行結果

B2.スタイルシートの適用

  • テンプレート (helloworld2.html) 
    
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>

<!-- linkタグにスタイルシートを指定できます -->
<link rel="stylesheet" href="helloworld2.css" media="all" type="text/css"></link>

</head>
<body>

<div class="_page" style="pagesize:A4; orientation:portrait;">
    <table>
        <tr>
            <td>
                <span id="greeting" class="set1" />    <!-- class属性にスタイルシートの定義を指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <span id="set2">    <!-- id属性にスタイルシートの定義を指定 -->
                   Hello World 2
                </span>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • スタイルシート (helloworld2.css) 
    
.set1 {
    size:16;
    color:#FF0000;
}

#set2 {
    size:20;
    color:#0000FF;
}
  • JSON (helloworld.json) 
    
{"helloWorld" : {"greeting" : "Hello World"}}
  • 表示結果
    HelloWorld実行結

T.テンプレート

T1.テンプレート例

helloworld2.html
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>

<!-- linkタグにスタイルシートを指定できます -->
<link rel="stylesheet" href="jp/reflexworks/test/template/helloworld2.css" media="all" type="text/css"></link>

</head>
<body>

<div class="_page" style="pagesize:A4; orientation:portrait;">
    <table>
        <tr>
            <td>
                <span id="greeting" class="set1" />    <!-- class属性にスタイルシートの定義を指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <span id="set2">    <!-- id属性にスタイルシートの定義を指定 -->
                   Hello World 2
                </span>
            </td>
        </tr>
    </table>
</div>

</body>
</html>

T2.テンプレートの構成

  1. xmlファイルの定義
  2. <html> タグ
  3. <head> タグ ・・・ スタイルシートを定義する場合、このタグ内に指定します。
  4. <body> タグ ・・・ ページ構造を定義します。

P.ページ構造

P1.基底要素

<div class="_page">

P2.第一レベル要素

<table> <tr> <td>

<div class="_rectangle">

<div class="_line">

<img>

など。

第一レベル要素はすべて左下点を基準とする絶対座標で指定することができます。

P3.第二レベル要素

<span>

<div>

<p>

<a>

<ul>

<ol>

<img>

など。

第二レベル要素は第一レベル要素からの相対位置座標となります。

注意点

tableタグの子要素にtableタグを指定することはできません。

S.ページ設定

<div class="_page">タグ（以下、pageタグとします）には、以下のような定義を行います。

S1.ページに関する定義

  1. ページの大きさ (pagesize)
  2. ページの向き (orientation)
  3. 余白サイズ (left, right, top, bottom)
  4. ページ全体のフォント、文字色、文字サイズ (font, color, fontsize)
  5. ページ全体の罫線色 (linecolor)
  6. ページ番号、偶数ページ・奇数ページ、最終ページ (id)
  7. ページ番号を出力するかどうか (footer)

S2.PDF文書全体に関する定義

  1. PDF文書のプロパティ情報 (title, author, subject, keywords)
  2. PDF文書の暗号化 (encryption)
  3. デジタル署名 (certificate)

    PDF文書全体に関する定義は、pageタグに指定がある場合に適用されます。複数ページに指定がある場合は上書きされるため、最後に定義したページの内容が適用されます。

C.ページ制御

  • エンティティがListの場合はListの要素数分ページを出力します。
  • もしくはエンティティの項目がList1個しかなく、Listの項目名がエンティティの名称と前方一致している場合も同様に、Listの要素数分ページを出力します。
  • ただし、エンティティが空の場合またはListが0件の場合は、1ページのみ出力します。

    例） ページ分割するパターン

    以下の例では、「page」の要素数分ページを出力します。

    • JSON 
      {"pageList" :
    {"page" :
        [・・・・・,
         ・・・・・
        ]
    }
}

    例） ページ分割しないパターン

    以下の例では、１ページのみ出力されます。

    • JSON 
      {"pageList" :
    {"pageInfo" :
        [・・・・・,
         ・・・・・
        ]
    }
}

    このとき、どのpageタグの内容を出力するかというのを Listのインデックスとオフセット（後述）、pageタグのid属性で判断します。

    id属性に指定できる内容は以下の通りです。_page-xxxのxxxに様々なバリエーションを指定できます。

    1. ページ番号

      例） _page-1, _page-2

    2. 偶数・奇数ページ

      _page-even（偶数）, _page-odd（奇数）

    3. 最終ページ

      _page-last

    4. デフォルトページ

      指定なし （id属性を省略します）

    5. 固有名 ・・・ ページを構成する一部（後述）

      例） _page-header, _page-sign

C1.ページの判定

  • ページカウンタ = Listのインデックス + オフセット

    オフセットとは、1から始まるページ調整数です。

    算出されたページカウンタは、以下の順番でテンプレートの条件にマッチするかどうかを判定します。

    1. データが最後の場合、最終ページ
    2. ページ番号
    3. 偶数・奇数ページ
    4. デフォルトページ

C2.nodata

例えば裏面印刷を行いたい場合など、ページカウンタはカウントさせながら、データをスキップさせたい場合があります。 カレントのデータで次のページを印刷したい場合は、pageタグにnodata属性を指定します。

この属性を指定すると、ページカウンタはカウントされますが、 Listのインデックスはそのままでオフセットが加算され、次のページの処理においてカレントデータが適用されます。

C3.ページ番号

pageタグにfooter="true"属性を定義すると、ページ下部にページ番号を表示します。

ページ番号表示では、footer="true"が定義されているページのみカウントされますので注意してください。

C4.ページ制御サンプル

  • テンプレート (pagesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" id="_page-1" style="pagesize:A5; orientation:landscape; nodata; footer:true; fontsize:18;">
    <table>
        <tr>
            <td>
                <span>
                    会社だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-2" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <table>
        <tr>
            <td>
                <span>
                    会社だより　裏面
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span>
                    コラム
                </span>
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-3" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <table>
        <tr>
            <td>
                <span>
                    部署だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-4" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <table>
        <tr>
            <td>
                <span>
                    課だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-last" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <table>
        <tr>
            <td>
                <span>
                    編集後記
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (pagelist.json) 
    {"pageList" :
    {"page" :
        [{"word" : "社長からの言葉"},
         {"word" : "部長からの言葉"},
         {"word" : "編集者からのひとこと"}
        ]
    }
}
  • 表示結果
    PageSample実行結果
  • 解説
    1. エンティティのListから1件目（インデックス(0)）を取り出します。

      インデックス(0) + オフセット(1) = ページカウンタ(1) なので、id="_page-1"のページを採用します。

      nodataが指定されているので、インデックスはそのままで、オフセットを+1します。

    2. エンティティのListから1件目（インデックス(0)）を取り出します。

      インデックス(0) + オフセット(2) = ページカウンタ(2) なので、id="_page-2"のページを採用します。

      インデックスを+1します。

    3. エンティティのListから2件目（インデックス(1)）を取り出します。

      インデックス(1) + オフセット(2) = ページカウンタ(3) なので、id="_page-3"のページを採用します。

      インデックスを+1します。

    4. エンティティのListから3件目（インデックス(2)）を取り出します。

      Listの最後のデータなので、id="_page-last"のページを採用します。

I.ページの再利用 （includeマクロ）

pageタグでページの一部分を定義したものを、includeマクロを使って本体のページに取り込むことができます。

id属性に名前を固定値で定義し、includeマクロ（<div class="_include">）のvalue属性に名前を指定します。

  • 注意点

    ページの一部分は、取り込む本体のページより前の行で定義しておく必要があります。 ページ制御のバリエーションで使用した名前(_page-xxx)以外を指定してください。

I1.includeマクロサンプル

  • テンプレート (includesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" id="_page-logo">    <!-- 繰り返し使用する部分を定義(ページのidは「logo」になることに注意) -->
    <table cols="2">
        <tr>
            <td>
                <img src="jp/reflexworks/test/image/vteclogo.jpg" width="100.0" height="45.0" />
            </td>
            <td>
                <span style="size:20;">
                  【 社報 】
                </span>
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-1" style="pagesize:A5; orientation:landscape; nodata; footer:true; fontsize:18;">
    <div class="_include" value="logo" />    <!-- id="_page-logo"の部分を再利用します -->
    <table>
        <tr>
            <td>
                <span>
                    会社だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-2" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <div class="_include" value="logo" />    <!-- id="_page-logo"の部分を再利用します -->
    <table>
        <tr>
            <td>
                <span>
                    会社だより　裏面
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span>
                    コラム
                </span>
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-3" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <div class="_include" value="logo" />    <!-- id="_page-logo"の部分を再利用します -->
    <table>
        <tr>
            <td>
                <span>
                    部署だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-4" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <div class="_include" value="logo" />    <!-- id="_page-logo"の部分を再利用します -->
    <table>
        <tr>
            <td>
                <span>
                    課だより
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

<div class="_page" id="_page-last" style="pagesize:A5; orientation:landscape; footer:true; fontsize:18;">
    <div class="_include" value="logo" />    <!-- id="_page-logo"の部分を再利用します -->
    <table>
        <tr>
            <td>
                <span>
                    編集後記
                </span>
            </td>
        </tr>
        <tr>
            <td>
                <span id="word" />
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • エンティティはpagelist.jsonを使用。
  • 表示結果
    IncludeSample実行結果

O.その他のマクロ

Reflex iTextではテンプレート作成のためのマクロとして、 前述のページ再利用（includeマクロ）のほかに、条件分岐（ifマクロ）、繰り返し処理（forマクロ）を用意しています。

O1.ifマクロによる条件分岐

エンティティ項目の値が、指定した値と等しい場合、ifマクロ（<div class="_if">）で囲まれた範囲を表示します。

式は、value属性に "項目名 = '値'" を指定します。

O2.ifマクロサンプル

  • テンプレート (ifmacrosample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:A5; orientation:landscape;">
    <table cellpadding="2" cellspacing="1">
        <tr>
            <td>
                <span style="size:18;">
                    セール情報　--　
                </span>
                <span id="season" />
                <span>
                    　--　
                </span>
                <br/>
                <br/>
            </td>
        </tr>

        <div class="_if" value="season='summer'">    <!-- ここから season='summer' のみ表示 -->
        <tr>
            <td>
                <span style="size:18;">
                    サマーバーゲン開催中
                </span>
                <br/>
            </td>
        </tr>
        </div>    <!-- ここまで -->

        <div class="_if" value="season='winter'">    <!-- ここから season='winter' のみ表示 -->
        <tr>
            <td>
                <span style="size:18;">
                    歳末バーゲン開催中
                </span>
            </td>
        </tr>
        </div>    <!-- ここまで -->

    </table>

    <table cols="2" border="2" frame="box" cellpadding="1" cellspacing="1">
        <tr>
            <th align="center" style="right:true; bottom:true;">商品</th>
            <th align="center" style="bottom:true;">価格</th>
        </tr>
        <tr>
            <td style="right:true; bottom:true;">カットソー</td>
            <td style="bottom:true;">1000円から</td>
        </tr>
        <tr>
            <td style="right:true; bottom:true;">パンツ</td>
            <td style="bottom:true;">1200円から</td>
        </tr>
        <tr>
            <td style="right:true; bottom:true;">スカート</td>
            <td style="bottom:true;">1500円から</td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (ifmacrolist.json) 
    {"ifMacroList" :
    {"ifMacro" :
        [{"season" : "spring"},
         {"season" : "summer"},
         {"season" : "autumn"},
         {"season" : "winter"}
        ]
    }
}
  • 表示結果
    IfMacroSample実行結果

O3.forマクロによる繰り返し処理

Listの件数分、もしくは指定した一定回数分を繰り返したい場合、forマクロ（<div class="_for">）を使用します。

forマクロで囲まれた範囲（<div class="_for">～</div>）が繰り返されます。

value属性にListの項目名、もしくは数字を指定します。

O4.forマクロサンプル

  • テンプレート (formacrosample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:A5; orientation:landscape;">
    <table cellpadding="2" cellspacing="1">
        <tr>
            <td>
                <span style="size:18;">
                    セール情報　--　
                </span>
                <span id="season" />
                <span>
                    　--　
                </span>
                <br/>
                <br/>
            </td>
        </tr>
    </table>

    <table cols="2" border="2" frame="box" cellpadding="1" cellspacing="1">
        <tr>
            <th align="center" style="right:true; bottom:true;">商品</th>
            <th align="center" style="bottom:true;">価格</th>
        </tr>

        <div class="_for" value="item">    <!-- 繰り返し処理　ここから -->
        <tr>
            <td style="right:true; bottom:true;">
                <span id="name-i" />    <!-- List内の項目 -->
            </td>
            <td style="right:true; bottom:true;">
                <span id="price-i" />    <!-- List内の項目 -->
            </td>
        </tr>
        </div>    <!-- ここまで -->

    </table>
</div>

</body>
</html>
  • JSON (formacrolist.json) 
    {"forMacroList" :
    {"forMacro" :
        [{"season" : "spring",
          "item" :
              [{"name" : "カットソー", "price" : "1200円から"},
               {"name" : "ブラウス","price" : "1200円から"},
               {"name" : "ワンピース","price" : "2500円から"}
              ]
         },
         {"season" : "summer",
          "item" :
              [{"name" : "Ｔシャツ","price" : "500円から"},
               {"name" : "パンツ","price" : "1500円から"},
               {"name" : "ワンピース","price" : "2000円から"},
               {"name" : "タンクトップ","price" : "500円から"}
              ]
         },
         {"season" : "autumn",
          "item" :
              [{"name" : "カットソー","price" : "1200円から"},
               {"name" : "カーディガン","price" : "2800円から"}
              ]
         },
         {"season" : "winter",
          "item" :
              [{"name" : "コート","price" : "15000円から"},
               {"name" : "セーター","price" : "2000円から"},
               {"name" : "カーディガン","price" : "2500円から"},
               {"name" : "マフラー","price" : "1500円から"}
              ]
         }]
    }
}
  • 表示結果
    ForMacroSample実行結果

O5.添え字（-i, -j）について

forマクロ内で、List内の項目を繰り返し表示したい場合、後ろに添え字を表す文字 "-i" を付加します。 二次元配列の場合、"-i-j"と付加します。

また、"-i-0"、"-i-1" など、"-i"の後に数を付加することでカラム列を指定できます。

O6.二次元配列データのforマクロサンプル

  • テンプレート (formacroarraysample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:A5; orientation:landscape;">
    <table cellpadding="2" cellspacing="1">
        <tr>
            <td>
                <span style="size:18;">
                    セール情報　--　
                </span>
                <span id="season" />
                <span>
                    　--　
                </span>
                <br/>
                <br/>
            </td>
        </tr>
    </table>

    <table cols="2" border="2" frame="box" cellpadding="1" cellspacing="1">
        <tr>
            <th align="center" style="right:true; bottom:true;">商品</th>
            <th align="center" style="bottom:true;">価格</th>
        </tr>

        <div class="_for" value="item">
        <tr>
            <td style="right:true; bottom:true;">
                <span id="item-i-0" />
            </td>
            <td style="right:true; bottom:true;">
                <span id="item-i-1" />
            </td>
        </tr>
        </div>

    </table>
</div>

</body>
</html>
  • JSON (formacroarraylist.json) 
    {"forMacroArrayList" :
    {"forMacro" :
        [{"season" : "spring",
          "item" :
              [["カットソー","1200円から"],
               ["ブラウス","1200円から"],
               ["ワンピース","2500円から"]]
         },
         {"season" : "summer",
          "item" :
              [["Ｔシャツ","500円から"],
               ["パンツ","1500円から"],
               ["ワンピース","2000円から"],
               ["タンクトップ","500円から"]]
         },
         {"season" : "autumn",
          "item" :
              [["カットソー","1200円から"],
               ["カーディガン","2800円から"]]
         },
         {"season" : "winter",
          "item" :
              [["コート","15000円から"],
               ["セーター","2000円から"],
               ["カーディガン","2500円から"],
               ["マフラー","1500円から"]]
         }]
    }
}
  • 表示結果
    ForMacroArraySample表示結果

PG.pageタグ

PDFドキュメントやページの属性についてpageタグを使って指定が可能です。pageタグは以下の属性を指定できます。

属性 style属性 内容 初期値 指定方法
id ページ制御 (なし) "_page-" に、ページ数、"even"、"odd"、"last"、固有名のいずれかを付加する。
style pagesize ページサイズ A4 A0～A10, B0～B5, HAGAKI, NOTE, LEGAL, ARCH_E, ARCH_D, ARCH_C, ARCH_B, ARCH_A, FLSA, FLSE, HALFLETTER, _11X17, LEDGER のいずれか。
style orientation ページの向き portrait portrait(縦長)かlandscape(横長)のいずれか。
style left, right, top, bottom 左、右、上、下の余白 36 数値
style nodata ページ制御の際、オフセットはカウントされるがエンティティのインデックスはカウントされない。 (なし) "nodata"のみ記述
style footer ページ数表示 false true/false
style font ページ全体のデフォルトフォント HeiseiKakuGo-W5 フォント名
style fontfile ページ全体のデフォルトフォントのファイル HeiseiKakuGo-W5 フォントファイル名
style fontencode ページ全体のデフォルトフォントのエンコード方法 UniJIS-UCS2-H フォントエンコード方法
style fontenbedded ページ全体のデフォルトフォントを埋め込むかどうか false true/false
style fontsize ページ全体のデフォルト文字サイズ。ただし、p、span、div、chunk、vchunk、paragraph、a、liタグに囲まれた文字のみ適用される。tdタグに記述された文字列には適用されない。 12 数値
style color ページ全体のデフォルト文字色。ただし、p、span、div、chunk、vchunk、paragraph、a、liタグに囲まれた文字のみ適用される。tdタグに記述された文字列には適用されない。 #000000 #xxxxxx
style linecolor ページ全体のデフォルト罫線色 #000000 #xxxxxx

H.HTML互換タグ

HTML互換のタグを使ってテンプレートを記述することができます。

HTML互換タグと属性はそのまま記述することができます。互換ではない独自の属性はstyle属性の中に記述します。

H1.table, tr, td

tableタグではHTMLのように、行をtr、列をtdもしくはthで表現します。

属性 style属性 内容 初期値 指定方法
cols 列数 1 数値
width 幅の縮尺 80% 固定の数値、またはパーセント指定
cellpadding 全体の縦の間隔 0 数値
cellspacing セル同士の間隔 0 数値
frame 罫線 void void,above,below,hsides,vsides,lhs,rhs,box,border のいずれか。外枠のみの指定であり、内側の線はtdタグの属性で指定。
border 枠線の幅 1 数値
bordercolor 枠線の色 ページで指定されたデフォルト罫線色 #xxxxxx
bgcolor 背景色 #FFFFFF #xxxxxx
align 表示位置 center center, left, right のいずれか
style widths 各列の幅（どれだけのカラムを割くか） (なし) 列数分、割合をカンマでつないで指定。例）width: 3,4,4;
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、テーブルの右上角の座標を指定。
style font テーブルのデフォルトフォント名 (なし) フォント名。"$" + エンティティの項目名を指定することで、エンティティの内容を適用できる。
style size テーブルのデフォルト文字サイズ (なし) 数値
style style テーブルのデフォルト文字スタイル (なし) bold（太字）,italic（斜体）,underline（下線）,strikethru（取消線） 複数指定の場合カンマでつなぐ。
style color テーブルのデフォルト文字色 (なし) #xxxxxx

属性 style属性 内容 初期値 指定方法
style font 行のデフォルトフォント名 (なし) フォント名。"$" + エンティティの項目名を指定することで、エンティティの内容を適用できる。
style size 行のデフォルト文字サイズ (なし) 数値
style style 行のデフォルト文字スタイル (なし) bold（太字）,italic（斜体）,underline（下線）,strikethru（取消線） 複数指定の場合カンマでつなぐ。
style color 行のデフォルト文字色 (なし) #xxxxxx

属性 style属性 内容 初期値 指定方法
align セル内データの横方向の配置 left left,center,right,justifyall（均等割付） のいずれか
valign セル内データの縦方向の配置 top top,middle,bottom,baseline のいずれか
colspan 結合する列数 1 数値
rowspan 結合する行数 1 数値
bordercolor セルの枠線の色 ページで指定されたデフォルト罫線色 #xxxxxx
bgcolor セルの背景色 #FFFFFF #xxxxxx
height セルの高さ。設定値が最低限保証され、文字の折り返しなどで超える場合はこれ以上の高さとなる。 (なし) 数値
style leading 文字の改行ピッチ 16 セル上枠と文字下部の距離を数値で指定。
style borderwidth セルの罫線の太さ 1 数値
style offsetx, offsety セル内の表示開始座標 (なし) セル左下を基点とし、表示内容の左下の座標を指定。
style space 表示文字列の文字間隔 0 数値
style roundrighttop, roundrightbottom, roundlefttop, roundleftbottom セルの右上、右下、左上、左下の角を丸める false true/false
style roundr セルの角を丸める際の曲率 1 数値
style lefttoprightbottom, righttopleftbottom セルの左上から右下、右上から左下へ斜線を引く false true/false
style linehscale, linevscale セルの罫線を横、縦方向に拡大・縮小 1 中心からの倍率を指定。拡大時は1より大きな数値、縮小時は0.x。
style doubleline セルの罫線を二重線にする false true/false
style left, right, top, bottom 左、右、上、下の枠線 false true/false
style nowrap 改行しない。セルに収まる分のみ表示される。 false true/false
style font セルのデフォルトフォント名 (なし) フォント名。"$" + エンティティの項目名を指定することで、エンティティの内容を適用できる。
style size セルのデフォルト文字サイズ (なし) 数値
style style セルのデフォルト文字スタイル (なし) bold（太字）,italic（斜体）,underline（下線）,strikethru（取消線） 複数指定の場合カンマでつなぐ。
style color セルのデフォルト文字色 (なし) #xxxxxx

H2.p, div, span, br

文字列を表示する場合、p, div, spanのいずれかのタグを使用します。 （上記タグで囲まなければ、デフォルトを含むレイアウト表示はされませんのでご注意ください。）

p, divタグの場合、文字列の後に改行が追加されます。spanタグの場合改行されません。

またp, div, spanタグには、id属性にエンティティの項目名を指定することで エンティティ項目の内容を表示できます。 配列の場合、項目名の後に "-添え字" を指定できます。二重配列の場合、さらに "-添え字" を指定できます。

属性 style属性 内容 初期値 指定方法
class スタイルシートのクラス名 (なし) スタイルシートに対応する名称。
id エンティティ名 (なし) "エンティティ名" + "-" + 添え字（二重配列は"-"でつなぐ）
style font フォント セル、行、テーブル、ページで指定されたデフォルトフォント フォント名。"$" + エンティティの項目名を指定することで、エンティティの内容を適用できる。
style size 文字サイズ セル、行、テーブル、ページで指定されたデフォルト文字サイズ 数値
style style 文字編集 セル、行、テーブルで指定された文字スタイル bold（太字）,italic（斜体）,underline（下線）,strikethru（取消線） 複数指定の場合カンマでつなぐ。vertical:trueの場合指定しないこと。
style color 文字の色 セル、行、テーブル、ページで指定されたデフォルト文字色 #xxxxxx
style nowrap 改行しない。セルを超えて表示される。 false true/false
style hscale 文字の横幅割合 1 1を基準とした割合。縮めるなら0.x、広げるなら1より大きな数字。
style vertical 縦書き false true/false
style offsetx, offsety セル内の文字列表示開始座標 (なし) セル左下を基点とし、表示内容の左下の座標を指定。
br

改行したい場合、brタグを使用します。<br/> と、必ず最後にスラッシュを入れてください。

page、table、td、p、div、spanサンプル
  • テンプレート (tabletdsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B4; orientation:portrait; font:HeiseiMin-W3; fontsize:16; color:#0000EE; linecolor:#FF0000;">
    <table cols="3" width="90%" cellpadding="3" cellspacing="3" frame="box" bgcolor="#FFEC8B" align="left" style="widths:1,1,1;">
        <tr>
            <th style="right:true; bottom:true;">
                <p>pタグ</p>
            </th>
            <th style="right:true; bottom:true;">
                <div>divタグ</div>
            </th>
            <th style="right:true; bottom:true;">
                <span>spanタグ</span>
            </th>
        </tr>
        <tr>
            <td style="space:1; right:true; bottom:true;" bordercolor="#551A8B">
                <p id="text1" />
                <p id="text2" style="font:HeiseiKakuGo-W5; size:13; color:#008B00; style:italic,underline;" />    <!-- 文字のフォント・サイズ・色を変更 -->
            </td>
            <td style="space:1; right:true; bottom:true;" bordercolor="#551A8B">
                <div id="text1" />
                <div id="text2" style="font:HeiseiKakuGo-W5; size:13; color:#008B00; style:italic,underline;" />    <!-- 文字のフォント・サイズ・色を変更 -->
            </td>
            <td style="space:1; right:true; bottom:true;" bordercolor="#551A8B">
                <span id="text1" />
                <span id="text2" style="font:HeiseiKakuGo-W5; size:13; color:#008B00; style:italic,underline;" />    <!-- 文字のフォント・サイズ・色を変更 -->
            </td>
        </tr>
        <tr>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <p id="text1" style="hscale:0.75"/>    <!-- 文字幅を縮小 -->
                <p id="text2" style="hscale:1.25" />    <!-- 文字幅を拡大 -->
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <div id="text1" style="hscale:0.75" />    <!-- 文字幅を縮小 -->
                <div id="text2" style="hscale:1.25" />    <!-- 文字幅を拡大 -->
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <span id="text1" style="hscale:0.75" />    <!-- 文字幅を縮小 -->
                <span id="text2" style="hscale:1.25" />    <!-- 文字幅を拡大 -->
            </td>
        </tr>
    </table>

    <table cols="3" width="90%" frame="box" align="left" style="widths:1,2,3;" bordercolor="#8B2252">    <!-- セルの幅の割合と、テーブルの罫線色を変えてみます -->
        <tr>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <p id="text1"/>
                <p id="text2"/>
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <div id="text1"/>
                <div id="text2"/>
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <span id="text1"/>
                <span id="text2"/>
            </td>
        </tr>
        <tr>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <p id="text1"/>
                <p id="text2"/>
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <div id="text1"/>
                <div id="text2"/>
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <span id="text1"/><br/>    <!-- 改行 -->
                <span id="text2"/>
            </td>
        </tr>
    </table>

    <table cols="6" width="90%" frame="box" align="left">
        <tr>
            <td style="leading:20; space:1; bottom:true;">
                <p id="text1" style="vertical:true;"/>    <!-- 縦書き -->
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <p id="text2" style="vertical:true; font:$font1;"/>    <!-- フォントをエンティティから指定 -->
            </td>
            <td style="leading:20; space:1; bottom:true;">
                <div id="text1" style="vertical:true;"/>    <!-- 縦書き -->
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <div id="text2" style="vertical:true; font:$font1;"/>    <!-- フォントをエンティティから指定 -->
            </td>
            <td style="leading:20; space:1; bottom:true;">
                <span id="text1" style="vertical:true;"/>    <!-- 縦書き -->
            </td>
            <td style="leading:20; space:1; right:true; bottom:true;">
                <span id="text2" style="vertical:true; font:$font1;"/>    <!-- フォントをエンティティから指定 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (tabletd.json) 
    {"tableTd" :
    {"text1" : "文字列1",
     "text2" : "文字列2",
     "font1" : "MS-PGothic"
    }
}
  • 表示結果
    TableTdSample表示結果
  • 注意点

    p, divタグには改行が入るため、レイアウト調整が難しくなります。文字列の表示にはspanタグをお勧めします。

H3.font

Reflex iTextであらかじめ用意されているフォントは、以下の通りです。（すべて参照型）

  • HeiseiKakuGo-W5
  • HeiseiMin-W3
  • KozMinPro-Regular

上記以外のフォントを指定する場合、fontタグでフォントを定義します。（div class="_font"）

属性 style属性 内容 初期値 指定方法
id フォント名。以降このフォントを使用する場合、ここで定義した名前を指定する。 (なし) 文字列
style src フォントファイル (なし) フォントファイルのパス
style encode フォントのエンコード方法 IDENTITY_H 文字列
style enbedded フォントを埋め込むかどうか false true/false

H4.a

リンクを指定したい場合、aタグを使用します。

aタグに囲む文字列は、span,div,pのいずれかで囲んでください。

属性 style属性 内容 初期値 指定方法
name 名前 (なし) 文字列
href リンク先 (なし) リンク先URLの文字列
aタグサンプル
  • テンプレート (anchorsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table>
        <tr>
            <td>
                <a href="http://reflex.sourceforge.jp/index.html">
                    <span size="18" style="style:underline; color:#0000FF;">Virtual Technology's site</span>
                </a>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • 表示結果
    AnchorSample表示結果

H5.ul, ol, li

リスト表示したい場合、ul, ol, liタグを使用します。

liタグに囲む文字列は、span,div,pのいずれかで囲んでレイアウトを編集してください。シンボルはulまたはolタグでレイアウト編集できます。

属性 style属性 内容 初期値 指定方法
type ulの場合固定文字。olの場合項目番号。 ulの場合 - 。olの場合 1 。 ulの場合任意の一文字。olの場合、1, A, a のいずれか。
start olの場合に使用。項目番号の開始文字。 1, A, a のいずれか type未指定もしくは1の場合数字。typeがA, a の場合開始したいアルファベット。
style symbolindent 数値(11.0ぐらいをデフォルトでセットしないと重なってしまう） (なし) true/false
style font シンボルのフォント ページで指定されたデフォルトフォント フォント名
style size シンボルのフォントサイズ ページで指定されたデフォルトフォントサイズ 数値
style style シンボルのスタイル (なし) bold（太字）,italic（斜体）,underline（下線）,strikethru（取消線） 複数指定の場合カンマでつなぐ。
style color シンボルの文字色 ページで指定されたデフォルト文字色 #xxxxxx

属性 style属性 内容 初期値 指定方法
style leading 文字の改行ピッチ 16 セル上枠と文字下部の距離を数値で指定。
ul, ol, li タグのサンプル
  • テンプレート (uolistsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <table width="150" align="left" cellpadding="2">
        <tr>
            <td style="left:true; right:true; top:true; bottom:true;">
                <span>ulサンプル</span>
            </td>
        </tr>
    </table>
    <table frame="box" align="left" cellpadding="2">
        <tr>
            <td>
                <ul style="symbolindent:11;">
                    <li><span id="uoarrayData-0"/></li>
                    <li><span id="uoarrayData-1"/></li>
                    <li><span id="uoarrayData-2"/></li>
                </ul>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <br/>
            </td>
        </tr>
    </table>
    <table width="150" align="left" cellpadding="2">
        <tr>
            <td style="left:true; right:true; top:true; bottom:true;">
                <span>olサンプル</span>
            </td>
        </tr>
    </table>
    <table frame="box" align="left">
        <tr>
            <td>
                <ol style="symbolindent:11;">
                    <li><span id="uoarrayData-0"/></li>
                    <li><span id="uoarrayData-1"/></li>
                    <li><span id="uoarrayData-2"/></li>
                </ol>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <br/>
            </td>
        </tr>
    </table>
    <table width="150" align="left" cellpadding="2">
        <tr>
            <td style="left:true; right:true; top:true; bottom:true;">
                <span>ulサンプル　属性指定</span>
            </td>
        </tr>
    </table>
    <table frame="box" align="left" cellpadding="2">
        <tr>
            <td>
                <ul type="●" style="symbolindent:11; size:9; color:#EE9A00;">
                    <li style="leading:20; indentationleft:0.5;"><span id="uoarrayData-0"/></li>
                    <li style="leading:20; indentationleft:0.5;"><span id="uoarrayData-1"/></li>
                    <li style="leading:20; indentationleft:0.5;"><span id="uoarrayData-2"/></li>
                </ul>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td>
                <br/>
            </td>
        </tr>
    </table>
    <table width="150" align="left" cellpadding="2">
        <tr>
            <td style="left:true; right:true; top:true; bottom:true;">
                <span>olサンプル　属性指定</span>
            </td>
        </tr>
    </table>
    <table frame="box" align="left">
        <tr>
            <td>
                <ol type="a" start="f" style="symbolindent:11; style:bold,italic;">
                    <li style="leading:20; indentationright:5;"><span id="uoarrayData-0"/></li>
                    <li style="leading:20; indentationright:5;"><span id="uoarrayData-1"/></li>
                    <li style="leading:20; indentationright:5;"><span id="uoarrayData-2"/></li>
                </ol>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (uoarraylist.json) 
    {"uoarrayList" :
    {"uoarrayData" :
        ["基本説明",
         "サンプル付機能説明",
         "応用説明"]
    }
}
  • 表示結果
    UOListSample表示結果

H6.img

画像を表示します。

属性 style属性 内容 初期値 指定方法
src 画像ファイルの配置場所 (なし。必須) url。http指定も可能。
width 画像の幅。plainwidthの方が優先される。 (なし) 数値
height 画像の高さ。plainheightの方が優先される。 (なし) 数値
style plainwidth 画像の幅。widthより優先される。 (なし) 数値
style plainheight 画像の高さ。heightより優先される。 (なし) 数値
style rotation 回転 0 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、画像の左下角の座標を指定。
imgタグのサンプル
  • テンプレート (imgsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <img src="jp/reflexworks/test/image/vteclogo.jpg" width="200.0" height="90.0"
        style="absolutex:0; absolutey:0; "/>    <!-- 絶対座標指定 -->
    <img src="jp/reflexworks/test/image/vteclogo.jpg" width="200.0" height="90.0"
        style="absolutex:100; absolutey:100; rotation:1;"/>    <!-- 回転 -->
</div>

</body>
</html>
  • 表示結果
ImgSample表示結果

E.拡張機能

Reflex iTextでは、図形、バーコード、グラフの作成ができます。

テンプレートには <div class="_xxx"> の形で指定します。

E1.図形

line

線を引きます。

属性 style属性 内容 初期値 指定方法
style linewidth 線の幅 1 数値
style color 線の色 #000000 #xxxxxx
style x1, y1 開始点の座標 (なし) 数値
style x2, y2 終了点の座標 (なし) 数値
style linedushon 描画する線を破線にする場合、表示部分の長さを設定 1 数値
style linedushoff 描画する線を破線にする場合、非表示部分の長さを設定 0 数値
lineタグのサンプル
  • テンプレート (linesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <div class="_line" style="x1:0; y1:500; x2:100; y2:400;" />
    <div class="_line" style="x1:0; y1:300; x2:100; y2:200; linewidth:3; color:#FF0000;" />
    <div class="_line" style="x1:400; y1:300; x2:500; y2:200; linewidth:3; color:#FF0000; linedushon:3; linedushoff:2;" />
</div>

</body>
</html>
  • 表示結果
LineSample表示結果
rectangle

四角形を描画します。

属性 style属性 内容 初期値 指定方法
style linewidth 線の幅 1 数値
style width 四角形の幅 0 数値
style height 四角形の高さ 0 数値
style color 四角形の線の色 #000000 #xxxxxx
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style linedushon 描画する線を破線にする場合、表示部分の長さを設定 1 数値
style linedushoff 描画する線を破線にする場合、非表示部分の長さを設定 0 数値
rectangleタグのサンプル
  • テンプレート (rectanglesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <div class="_rectangle" style="absolutex:100; absolutey:400; width:100; height:80;" />
    <div class="_rectangle" style="absolutex:100; absolutey:200; width:100; height:80; linewidth:3; color:#FF0000;" />
    <div class="_rectangle" style="absolutex:400; absolutey:200; width:100; height:80; linewidth:3; color:#FF0000; linedushon:3; linedushoff:2;" />
</div>

</body>
</html>
  • 表示結果
表示結果
roundrectangle

角を丸めた四角形を描画します。

属性 style属性 内容 初期値 指定方法
style linewidth 線の幅 1 数値
style width 四角形の幅 0 数値
style height 四角形の高さ 0 数値
style roundr 角の曲率 1 数値
style color 四角形の線の色 #000000 #xxxxxx
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style linedushon 描画する線を破線にする場合、表示部分の長さを設定 1 数値
style linedushoff 描画する線を破線にする場合、非表示部分の長さを設定 0 数値
roundrectangleタグのサンプル
  • テンプレート (roundrectanglesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <div class="_roundrectangle" style="absolutex:100; absolutey:400; width:100; height:80;" />
    <div class="_roundrectangle" style="absolutex:100; absolutey:200; width:100; height:80; roundr:8; linewidth:3; color:#FF0000;" />
    <div class="_roundrectangle" style="absolutex:400; absolutey:200; width:100; height:80; roundr:8; linewidth:3; color:#FF0000; linedushon:3; linedushoff:2;" />
</div>

</body>
</html>
  • 表示結果
    RoundrectangleSample実行結果
circle

円を描画します。

属性 style属性 内容 初期値 指定方法
style linewidth 線の幅 1 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、円の左下角の座標を指定。
style radius 円の半径 (なし) 数値
style linedushon 描画する線を破線にする場合、表示部分の長さを設定 1 数値
style linedushoff 描画する線を破線にする場合、非表示部分の長さを設定 0 数値
style color 円の線の色 #000000 #xxxxxx
circleタグのサンプル
  • テンプレート (circlesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <div class="_circle" style="absolutex:100; absolutey:400; radius:50;" />
    <div class="_circle" style="absolutex:100; absolutey:200; radius:50; linewidth:3; color:#FF0000;" />
    <div class="_circle" style="absolutex:400; absolutey:200; radius:50; linewidth:3; color:#FF0000; linedushon:3; linedushoff:2;" />
</div>

</body>
</html>
  • 表示結果
CircleSample実行結果

E2.バーコード

barcodeEAN

JAN(EAN、UPC)規格のバーコードを出力します。

属性 style属性 内容 初期値 指定方法
style value バーコードに表示する値 4512345678901 数字、もしくは"$" + エンティティの項目名
style height 高さ 30 数値
style size 文字のサイズ 10 数値
style width 幅 0.75 数値
style font フォント名 (なし) 文字を表示しない場合、"null"を指定する。
barcodeEANタグのサンプル
  • テンプレート (barcodeEANsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table cellpadding="3">
        <tr>
            <td>
                <div class="_barcodeEAN" style="value:4900000000000;" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeEAN" style="value:$barcodeValue;" />    <!-- エンティティの項目指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeEAN" style="value:4922222222222; height:40; size:12; width:2;" />    <!-- 属性指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeEAN" style="value:4933333333333; font:null" />    <!-- 文字表示なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeEAN" style="value:4933333333333; font:HeiseiMin-W3" />    <!-- フォント指定 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (barcodeEAN.json) 
    {"barcodeEAN" : {"barcodeValue" : "4911111111111"}}
  • 表示結果
BarcodeEANSample表示結果
barcodeNW7

NW-7（CODABAR）規格のバーコードを出力します。

属性 style属性 内容 初期値 指定方法
style value バーコードに表示する値 4512345678901 文字列、もしくは"$" + エンティティの項目名
style height 高さ 30 数値
style size 文字のサイズ 10 数値
style width 幅 0.75 数値
style startstop スタートストップ文字の有無 true true/false
style font フォント名 (なし) 文字を表示しない場合、"null"を指定する。
barcodeNW7タグのサンプル
  • テンプレート (BarcodeNW7sample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table cellpadding="3">
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:A000000A;" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:$barcodeValue;" />    <!-- エンティティの項目指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:C222222C; height:40; size:12; width:2;" />    <!-- 属性指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:D333333D; startstop:false" />    <!-- スタートストップ文字なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:A444444A; font:null;" />    <!-- 文字表示なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcodeNW7" style="value:A444444A; font:HeiseiMin-W3;" />    <!-- フォント指定 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (barcodeNW7.json) 
    {"barcodeNW7" : {"barcodeValue" : "B111111B"}}
  • 表示結果
    BarcodeNW7Sample表示結果
barcode39

code39規格のバーコードを出力します。

属性 style属性 内容 初期値 指定方法
style value バーコードに表示する値 4512345678901 文字列、もしくは"$" + エンティティの項目名
style height 高さ 30 数値
style size 文字のサイズ 10 数値
style width 幅 0.75 数値
style startstop スタートストップ文字の有無 true true/false
style extended 拡張 true true/false
style font フォント名 (なし) 文字を表示しない場合、"null"を指定する。
barcode39タグのサンプル
  • テンプレート (Barcode39sample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table cellpadding="3">
        <tr>
            <td>
                <div class="_barcode39" style="value:AAA000-0;" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:$barcodeValue;" />    <!-- エンティティの項目指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:CCC222-2; height:40; size:12; width:2;" />    <!-- 属性指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:DDD333-3; startstop:false;" />    <!-- スタートストップ文字なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:EEE444-4; extended:false;" />    <!-- 拡張しない -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:FFF555-5; font:null;" />    <!-- 文字表示なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode39" style="value:FFF555-5; font:HeiseiMin-W3;" />    <!-- フォント指定 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (barcode39.json) 
    {"barcode39" : {"barcodeValue" : "BBB111-1"}}
  • 表示結果
    Barcode39Sample表示結果
barcode128

code128規格のバーコードを出力します。

属性 style属性 内容 初期値 指定方法
style value バーコードに表示する値 4512345678901 文字列、もしくは"$" + エンティティの項目名
style height 高さ 30 数値
style size 文字のサイズ 10 数値
style width 幅 0.75 数値
style codetype コードタイプ (なし) "UCC"（CODE128_UCC規格）または"RAW"（CODE128_RAW規格）を指定。それ以外はCODE128規格。
style font フォント名 (なし) 文字を表示しない場合、"null"を指定する。
barcode128タグのサンプル
  • テンプレート (barcode128sample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table cellpadding="3">
        <tr>
            <td>
                <div class="_barcode128" style="value:1234567890ABCDEFG;" />
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:$barcodeValue;" />    <!-- エンティティの項目指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:3234567890ABCDEFG; height:40; size:12; width:2;" />    <!-- 属性指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:4234567890ABCDEFG; font:null;" />    <!-- 文字表示なし -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:4234567890ABCDEFG; font:HeiseiMin-W3;" />    <!-- フォント指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:1234567890ABCDEFG; codetype:UCC;" />    <!-- CODE128_UCC規格 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_barcode128" style="value:1234567890ABCDEFG; codetype:RAW;" />    <!-- CODE128_RAW規格 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (barcode128.json) 
    {"barcode128" : {"barcodeValue" : "2234567890ABCDEFJ"}}
  • 表示結果
    Barcode128Sample表示結果
qrcode

QRコードを出力します。

属性 style属性 内容 初期値 指定方法
style value バーコードに表示する値 4512345678901 文字列、もしくは"$" + エンティティの項目名
style height 高さ 30 数値
style width 幅 30 数値
style version 型番（シンボルの大きさ） 0 0～10を指定
style errorcorrectionlevel 誤り訂正レベル "H" "L"(コード語の約7%を復元可能), "M"(15%), "Q"(25%), "H"(30%)のいずれかを指定
style cellsize セルのサイズ(pixel) 1 1～4を指定
style margin 余白(pixel) 0 0～32を指定
qrcodeタグのサンプル
  • テンプレート (qrcodesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table cellpadding="3">
        <tr>
            <td>
                <div class="_qrcode" style="value:$qrCodeValue;" />    <!-- エンティティの項目指定 -->
            </td>
        </tr>
        <tr>
            <td>
                <div class="_qrcode" style="value:$qrCodeValue; width:100; height:100; version:10;
                errorcorrectionlevel:L; cellsize:4; margin:32; " />    <!-- 属性指定 -->
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • JSON (qrcode.json) 
    {"qrcode" : {"qrCodeValue" : "http://www.virtual-tech.net/index.html"}}
  • 表示結果
    QRCodeSample表示結果

E3.PNGファイル出力

Reflex iTextでは、グラフとQRコードをPNGファイルで出力できます。

PNGファイル出力方法
  • テンプレートには、xml定義と、グラフのタグまたはQRコードのタグ１個のみ記述します。 タグの定義方法は以下の２種類です。
    • <div class="_[タグ名]" style="[属性]:[値]; [属性]:[値]; ・・・">
    • <[タグ名] [属性]=[値] [属性]=[値] ・・・>
  • エンティティの定義は、PDFの場合と同じです。
グラフのPNGファイル出力サンプル
  • テンプレート (piechartpngsample.xml) 
    <?xml version="1.0" encoding="UTF-8" ?>
<piechart
    title="世界の人口（単位：億人）"
    legend="true"
    width="150"
    height="180"
    category="country"
    value="population" />
  • populationlist.jsonを使用。
  • 表示結果
    PiechartPngSample表示結果
QRコードのPNGファイル出力サンプル
  • テンプレート (qrcodepngsample.xml) 
    <?xml version="1.0" encoding="UTF-8" ?>
<qrcode
    value="$qrCodeValue"
    width="20"
    height="20"
    version="10"
    errorcorrectionlevel="L"
    cellsize="4"
    margin="32" />
  • エンティティはqrcode.jsonを使用。
  • 表示結果
    QRCodePngSample実行結果

E4.PDF合成

Reflex iTextでは、テンプレートとなるPDFファイルを指定することができます。

デザインをPDFファイルで作成し、変動するデータをエンティティで指定、データの配置をテンプレートで指定する といった使い方ができます。

PDF合成の注意点
  • テンプレートPDFと、テンプレートのHTMLファイルに指定する、「用紙サイズ」「用紙の向き」を同一にしてください。 異なる場合レイアウトが崩れます。
  • フッターを付加する場合、テンプレートPDF・テンプレートHTMLのどちらにもフッターを付加してください。 どちらかにフッターがあり、どちらかにフッターがない場合、レイアウトが崩れます。
  • テンプレートPDFに署名や暗号化している場合、それらの情報は無くなります。
  • テンプレートPDFにパスワードを指定していると、文書が開けないためエラーとなります。
  • 生成するPDFに署名をする場合、署名フィールドを指定するとエラーになります。 署名フィールドがない（不可視署名の）場合は問題ありません。
  • テンプレートHTMLにアンカーを指定した場合、無効となります。
PDF合成出力サンプル
  • テンプレート (helloworld_B5_landscape.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:landscape;">
    <table>
        <tr>
            <td>
                <a href="http://reflex.sourceforge.jp/index.html">
                    <span id="greeting" size="18" style="style:underline; color:#0000FF;" />
                </a>
            </td>
        </tr>
    </table>
</div>

</body>
</html>
  • エンティティは基本説明1 helloworld.jsonを使用。
  • テンプレートPDF (RectangleSample.pdf)
    テンプレートPDF
  • 表示結果
    PDF合成実行結果

G.グラフ

Reflex iTextでは、円グラフ(piechart)、棒グラフ(barchart)、折れ線グラフ(linechart)、 エリアグラフ(areachart)、時系列グラフ(timeserieschart)、ローソク足グラフ(candlestickchart)、 ガントチャート(ganttchart)を出力することができます。

G1.piechart

円グラフを出力します。

属性 style属性 内容 初期値 指定方法
style title 円グラフのタイトル Pie Chart 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style category 項目 (なし。必須) エンティティの項目名 注）内容は一意とする。
style value 値 (なし。必須) エンティティの項目名
piechartタグのサンプル
  • テンプレート (piechartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_piechart" style="title:世界の人口（単位：億人）;
        legend:true; width:150; height:180; absolutex:50; absolutey:500;
        category:country; value:population;" />
</div>

</body>
</html>
  • JSON (populationlist.json) 
    {"populationList" :
    {"populationInfo" :
        [{"country" : "中国", "population" : "13.3"},
         {"country" : "インド", "population" : "11.4"},
         {"country" : "アメリカ", "population" : "3"},
         {"country" : "インドネシア", "population" : "2.3"},
         {"country" : "ブラジル", "population" : "1.9"},
         {"country" : "パキスタン", "population" : "1.6"},
         {"country" : "バングラディシュ", "population" : "1.5"},
         {"country" : "ロシア", "population" : "1.4"},
         {"country" : "ナイジェリア", "population" : "1.4"},
         {"country" : "日本", "population" : "1.3"},
         {"country" : "その他", "population" : "28.0"}
        ]
    }
}
  • 表示結果
    PiechartSample表示結果

categoryとvalueについて、二次元配列の項目を指定することもできます。

piechart（二次元配列項目）のサンプル
  • テンプレート (piechartarraysample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_piechart" style="title:世界の人口 Array（単位：億人）;
        legend:true; width:150; height:180; absolutex:50; absolutey:500;
        category:populationText-i-0; value:populationText-i-1;" />
</div>

</body>
</html>
  • JSON (populationarray.json) 
    {"populationArray" :
    {"populationText" :
        [["中国","13.3"],
         ["インド","11.4"],
         ["アメリカ","3"],
         ["インドネシア","2.3"],
         ["ブラジル","1.9"],
         ["パキスタン","1.6"],
         ["バングラディシュ","1.5"],
         ["ロシア","1.4"],
         ["ナイジェリア","1.4"],
         ["日本","1.3"],
         ["その他","28.0"]
        ]
    }
}
  • 表示結果
    PiechartArraySample表示結果

G2.barchart

棒グラフを出力します。

属性 style属性 内容 初期値 指定方法
style title 棒グラフのタイトル Bar Chart 文字列
style categorylabel 横軸（カテゴリ）のタイトル category 文字列
style valuelabel 縦軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style value 値 (なし。必須) エンティティの項目名
style series 小項目 (なし。必須) エンティティの項目名 注）内容は大項目と小項目で一意とする。
style category 大項目 (なし。必須) エンティティの項目名 注）内容は大項目と小項目で一意とする
style valuelower 縦軸（値）の最低表示値 (なし) 数値
style valueupper 縦軸（値）の最大表示値 (なし) 数値
style valuepattern 縦軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunitcount 縦軸（値）目盛りの表示単位 (なし) 数値
barchartタグのサンプル
  • テンプレート (barchartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_barchart" style="title:世界の人口（単位：100万人）;
        legend:true; width:260; height:200; absolutex:50; absolutey:480;
        categorylabel:地域; valuelabel:人口; value:population; category:area; series:year;
        valuelower:50; valueupper:1000; valuepattern:####0; valueunitcount:50;" />
</div>

</body>
</html>
  • JSON (populationarealist.json) 
    {"populationAreaList" :
    {"populationInfo" :
        [{"area" : "世界","year" : "1960","population" : "3032"},
         {"area" : "アフリカ","year" : "1960","population" : "282"},
         {"area" : "ラテンアメリカ","year" : "1960","population" : "220"},
         {"area" : "北アメリカ","year" : "1960","population" : "204"},
         {"area" : "アジア","year" : "1960","population" : "1704"},
         {"area" : "ヨーロッパ","year" : "1960","population" : "605"},
         {"area" : "オセアニア","year" : "1960","population" : "16"},
         {"area" : "世界","year" : "1980","population" : "4451"},
         {"area" : "アフリカ","year" : "1980","population" : "480"},
         {"area" : "ラテンアメリカ","year" : "1980","population" : "364"},
         {"area" : "北アメリカ","year" : "1980","population" : "256"},
         {"area" : "アジア","year" : "1980","population" : "2636"},
         {"area" : "ヨーロッパ","year" : "1980","population" : "693"},
         {"area" : "オセアニア","year" : "1980","population" : "23"},
         {"area" : "世界","year" : "2000","population" : "6124"},
         {"area" : "アフリカ","year" : "2000","population" : "821"},
         {"area" : "ラテンアメリカ","year" : "2000","population" : "523"},
         {"area" : "北アメリカ","year" : "2000","population" : "316"},
         {"area" : "アジア","year" : "2000","population" : "3705"},
         {"area" : "ヨーロッパ","year" : "2000","population" : "729"},
         {"area" : "オセアニア","year" : "2000","population" : "31"}
        ]
    }
}
  • 表示結果
    BarchartSample表示結果

G3.linechart

折れ線グラフを出力します。

属性 style属性 内容 初期値 指定方法
style title 折れ線グラフのタイトル Line Chart 文字列
style categorylabel 横軸（カテゴリ）のタイトル category 文字列
style valuelabel 縦軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style value 値 (なし。必須) エンティティの項目名
style series 系列 (なし。必須) エンティティの項目名 注）内容は系列とカテゴリで一意とする
style category 横軸（カテゴリ） (なし。必須) エンティティの項目名 注）内容は系列とカテゴリで一意とする
style valuelower 縦軸（値）の最低表示値 (なし) 数値
style valueupper 縦軸（値）の最大表示値 (なし) 数値
style valuepattern 縦軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunitcount 縦軸（値）目盛りの表示単位 (なし) 数値
linechartタグのサンプル
  • テンプレート (linechartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_linechart" style="title:世界の人口推移（単位：100万人）;
        legend:true; width:260; height:200; absolutex:50; absolutey:480;
        categorylabel:人口; valuelabel:年; value:population; category:year; series:area;
        valueupper:1000; valuepattern:####0; valueunitcount:50;" />
</div>

</body>
</html>
  • JSON (populationarea2list.json) 
    {"populationArea2List" :
    {"populationInfo" :
        [{"area" : "アフリカ","year" : "1960","population" : "282"},
         {"area" : "ラテンアメリカ","year" : "1960","population" : "220"},
         {"area" : "北アメリカ","year" : "1960","population" : "204"},
         {"area" : "アジア","year" : "1960","population" : "1704"},
         {"area" : "ヨーロッパ","year" : "1960","population" : "605"},
         {"area" : "オセアニア","year" : "1960","population" : "16"},
         {"area" : "アフリカ","year" : "1970","population" : "364"},
         {"area" : "ラテンアメリカ","year" : "1970","population" : "288"},
         {"area" : "北アメリカ","year" : "1970","population" : "232"},
         {"area" : "アジア","year" : "1970","population" : "2139"},
         {"area" : "ヨーロッパ","year" : "1970","population" : "657"},
         {"area" : "オセアニア","year" : "1970","population" : "20"},
         {"area" : "アフリカ","year" : "1980","population" : "480"},
         {"area" : "ラテンアメリカ","year" : "1980","population" : "364"},
         {"area" : "北アメリカ","year" : "1980","population" : "256"},
         {"area" : "アジア","year" : "1980","population" : "2636"},
         {"area" : "ヨーロッパ","year" : "1980","population" : "693"},
         {"area" : "オセアニア","year" : "1980","population" : "23"},
         {"area" : "アフリカ","year" : "1990","population" : "637"},
         {"area" : "ラテンアメリカ","year" : "1990","population" : "444"},
         {"area" : "北アメリカ","year" : "1990","population" : "284"},
         {"area" : "アジア","year" : "1990","population" : "3181"},
         {"area" : "ヨーロッパ","year" : "1990","population" : "721"},
         {"area" : "オセアニア","year" : "1990","population" : "27"},
         {"area" : "アフリカ","year" : "2000","population" : "821"},
         {"area" : "ラテンアメリカ","year" : "2000","population" : "523"},
         {"area" : "北アメリカ","year" : "2000","population" : "316"},
         {"area" : "アジア","year" : "2000","population" : "3705"},
         {"area" : "ヨーロッパ","year" : "2000","population" : "729"},
         {"area" : "オセアニア","year" : "2000","population" : "31"}
        ]
    }
}
  • 表示結果
    LinechartSample表示結果

G4.areachart

エリアグラフを出力します。

属性 style属性 内容 初期値 指定方法
style title エリアグラフのタイトル Area Chart 文字列
style categorylabel 横軸（カテゴリ）のタイトル category 文字列
style valuelabel 縦軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style value 値 (なし。必須) エンティティの項目名
style series 系列 (なし。必須) エンティティの項目名 注）内容は系列とカテゴリで一意とする
style category 横軸（カテゴリ） (なし。必須) エンティティの項目名 注）内容は系列とカテゴリで一意とする
style valuelower 縦軸（値）の最低表示値 (なし) 数値
style valueupper 縦軸（値）の最大表示値 (なし) 数値
style valuepattern 縦軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunitcount 縦軸（値）目盛りの表示単位 (なし) 数値
areachartタグのサンプル
  • テンプレート (areachartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_areachart" style="title:日経平均株価;
        legend:false; width:260; height:200; absolutex:50; absolutey:480;
        categorylabel:円; valuelabel:月日; value:closingPrice; category:md; series:year;
        valuelower:10000; valueupper:13000; valuepattern:####0; valueunitcount:200;" />
</div>

</body>
</html>
  • JSON (stocklist.json) 
    {"stockList" :
    {"stockInfo" :
        [{"md" : "09-01","year" : 2008,"month" : 9,"date" : 1,"openingPrice" : 12936.81,"highPrice" : 12940.55,"lowPrice" : 12834.18,"closingPrice" : 12834.18,"periodLabel" : "2008年"},
         {"md" : "09-02","year" : 2008,"month" : 9,"date" : 2,"openingPrice" : 12779.89,"highPrice" : 12920.52,"lowPrice" : 12491.07,"closingPrice" : 12609.47,"periodLabel" : "2008年"},
         {"md" : "09-03","year" : 2008,"month" : 9,"date" : 3,"openingPrice" : 12703.36,"highPrice" : 12767.50,"lowPrice" : 12647.29,"closingPrice" : 12689.59,"periodLabel" : "2008年"},
         {"md" : "09-04","year" : 2008,"month" : 9,"date" : 4,"openingPrice" : 12627.64,"highPrice" : 12660.57,"lowPrice" : 12514.26,"closingPrice" : 12557.66,"periodLabel" : "2008年"},
         {"md" : "09-08","year" : 2008,"month" : 9,"date" : 8,"openingPrice" : 12359.93,"highPrice" : 12671.76,"lowPrice" : 12352.35,"closingPrice" : 12624.46,"periodLabel" : "2008年"},
         {"md" : "09-09","year" : 2008,"month" : 9,"date" : 9,"openingPrice" : 12529.96,"highPrice" : 12529.96,"lowPrice" : 12335.74,"closingPrice" : 12400.65,"periodLabel" : "2008年"},
         {"md" : "09-10","year" : 2008,"month" : 9,"date" : 10,"openingPrice" : 12249.14,"highPrice" : 12404.67,"lowPrice" : 12159.97,"closingPrice" : 12346.63,"periodLabel" : "2008年"},
         {"md" : "09-11","year" : 2008,"month" : 9,"date" : 11,"openingPrice" : 12237.52,"highPrice" : 12259.02,"lowPrice" : 12081.51,"closingPrice" : 12102.50,"periodLabel" : "2008年"},
         {"md" : "09-12","year" : 2008,"month" : 9,"date" : 12,"openingPrice" : 12256.78,"highPrice" : 12277.57,"lowPrice" : 12059.09,"closingPrice" : 12214.76,"periodLabel" : "2008年"},
         {"md" : "09-16","year" : 2008,"month" : 9,"date" : 16,"openingPrice" : 12028.45,"highPrice" : 12028.45,"lowPrice" : 11551.40,"closingPrice" : 11609.72,"periodLabel" : "2008年"},
         {"md" : "09-17","year" : 2008,"month" : 9,"date" : 17,"openingPrice" : 11737.62,"highPrice" : 11880.03,"lowPrice" : 11708.70,"closingPrice" : 11749.79,"periodLabel" : "2008年"}
        ]
    }
}
  • 表示結果
    AreachartSample表示結果

G5.timeserieschart

時系列グラフを出力します。

属性 style属性 内容 初期値 指定方法
style title 時系列グラフのタイトル Time Series Chart 文字列
style categorylabel 横軸（カテゴリ）のタイトル category 文字列
style valuelabel 縦軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style timeperiod 時間単位 (なし) Millisecond, Second, Minute, Hour, Day, Month, Quarter, Year のいずれか
style second 秒 システム時 エンティティの項目名 時間単位がSecondの場合必須
style minute 分 システム時 エンティティの項目名 時間単位がMinuteの場合必須
style hour 時 システム時 エンティティの項目名 時間単位がHourの場合必須
style day 日 システム時 エンティティの項目名 時間単位がDayの場合必須
style month 月 システム時 エンティティの項目名 時間単位がMonthの場合必須
style quarter 四半期 システム時 エンティティの項目名 時間単位がQuarterの場合必須
style year 年 システム時 エンティティの項目名 時間単位がYearの場合必須
style value 値 (なし。必須) エンティティの項目名
style series 系列 series エンティティの項目名
style categorypattern 横軸（値）目盛りの日付パターン (なし) java.text.SimpleDateFormat に設定するパターン
style categoryunit 横軸（値）目盛りの表示単位 (なし) millisecond, second, minute, hour, day, month, yearのいずれか
style categoryunitcount 横軸（値）目盛りの表示単位をいくつごとに表示するか (なし) 数値 categoryunit指定時のみ有効
style valuelower 縦軸（値）の最低表示値 (なし) 数値
style valueupper 縦軸（値）の最大表示値 (なし) 数値
style valuepattern 縦軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunitcount 縦軸（値）目盛りの表示単位 (なし) 数値
timeserieschartタグのサンプル
  • テンプレート (timeserieschartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_timeserieschart" style="title:日経平均株価;
        legend:true; width:260; height:200; absolutex:50; absolutey:480;
        categorylabel:円; valuelabel:日-月; timeperiod:Day; day:date; month:month; year:year; value:closingPrice; series:periodLabel;
        valuelower:11500; valueupper:13000; valuepattern:####0; valueunitcount:200;
        categorypattern:MM/dd; categoryunit:day; categoryunitcount:2;" />
</div>

</body>
</html>
  • エンティティは上記 stocklist.jsonを使用。
  • 表示結果
    TimeserieschartSample表示結果

G6.candlestickchart

ローソク足グラフを出力します。

属性 style属性 内容 初期値 指定方法
style title ローソク足グラフのタイトル Candle Stick Chart 文字列
style categorylabel 横軸（カテゴリ）のタイトル category 文字列
style valuelabel 縦軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style year 年 (なし。必須) エンティティの項目名
style month 月 (なし。必須) エンティティの項目名
style day 日 (なし。必須) エンティティの項目名
style high 高値 (なし。必須) エンティティの項目名
style low 安値 (なし。必須) エンティティの項目名
style open 始値 (なし。必須) エンティティの項目名
style close 終値 (なし。必須) エンティティの項目名
style volume ボリューム （設定したボリュームの最大値を100とし、最大値に対する割合で棒グラフが表示される。） 0 エンティティの項目名
style series 系列 series 固定値を指定。legend=trueの時、指定した値が表示される。
style categorypattern 横軸（値）目盛りの日付パターン (なし) java.text.SimpleDateFormat に設定するパターン
style categoryunit 横軸（値）目盛りの表示単位 (なし) millisecond, second, minute, hour, day, month, yearのいずれか
style categoryunitcount 横軸（値）目盛りの表示単位をいくつごとに表示するか (なし) 数値 categoryunit指定時のみ有効
style valuelower 縦軸（値）の最低表示値 (なし) 数値
style valueupper 縦軸（値）の最大表示値 (なし) 数値
style valuepattern 縦軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunitcount 縦軸（値）目盛りの表示単位 (なし) 数値
candlestickchartタグのサンプル
  • テンプレート (candlestickchartsample.xml) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_candlestickchart" style="title:日経平均株価;
        legend:false; width:260; height:200; absolutex:50; absolutey:480;
        categorylabel:円; valuelabel:年; year:year; month:month; day:date; high:highPrice; low:lowPrice; open:openingPrice; close:closingPrice;
        valuelower:11500; valueupper:13000; valuepattern:####0; valueunitcount:200;
        categorypattern:MM/dd; categoryunit:day; categoryunitcount:2;" />
</div>

</body>
</html>
  • エンティティは上記 stocklist.jsonを使用。
  • 表示結果
    CandlestickchartSample表示結果

G7.ganttchart

ガントチャートを出力します。

属性 style属性 内容 初期値 指定方法
style title ガントチャートのタイトル Gantt Chart 文字列
style categorylabel 縦軸（カテゴリ）のタイトル category 文字列
style valuelabel 横軸（値）のタイトル value 文字列
style legend 下部に項目名の説明を表示するかどうかを指定 true true/false
style width 幅 500 数値
style heigth 高さ 500 数値
style absolutex, absolutey ページ内の絶対座標 (なし) ページ左下を基点とし、四角形の左下角の座標を指定。
style series 系列 series エンティティの項目名
style category カテゴリ (なし) エンティティの項目名
style startyear 開始年 (なし) エンティティの項目名
style startmonth 開始月 (なし) エンティティの項目名
style startday 開始日 (なし) エンティティの項目名
style endyear 終了年 (なし) エンティティの項目名
style endmonth 終了月 (なし) エンティティの項目名
style endday 終了日 (なし) エンティティの項目名
style valuepattern 横軸（値）目盛りの数値パターン (なし) java.text.DecimalFormat に設定するパターン
style valueunit 横軸（値）目盛りの表示単位 (なし) millisecond, second, minute, hour, day, month, yearのいずれか
style valueunitcount 横軸（値）目盛りの表示単位をいくつごとに表示するか (なし) 数値 valueunit指定時のみ有効
ganttchartタグのサンプル
  • テンプレート (ganttchartsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:B5; orientation:portrait;">
    <div class="_ganttchart" style="title:プロジェクトスケジュール;
        legend:true; width:400; height:200; absolutex:50; absolutey:480;
        categorylabel:フェーズ; valuelabel:日付; series:series; category:phase;
        startyear:startYear; startmonth:startMonth; startday:startDate; endyear:endYear; endmonth:endMonth; endday:endDate;
        valuepattern:yyyy-MM; valueunit:month; " />
</div>

</body>
</html>
  • JSON (schedulelist.json) 
    {"scheduleList" :
    {"scheduleInfo" :
        [{"series" : "予定","phase" : "設計","startYear" : 2008,"startMonth" : 4,"startDate" : 1,"endYear" : 2008,"endMonth" : 4,"endDate" : 30},
         {"series" : "予定","phase" : "開発","startYear" : 2008,"startMonth" : 5,"startDate" : 1,"endYear" : 2008,"endMonth" : 7,"endDate" : 31},
         {"series" : "予定","phase" : "テスト","startYear" : 2008,"startMonth" : 8,"startDate" : 1,"endYear" : 2008,"endMonth" : 9,"endDate" : 30},
         {"series" : "実績","phase" : "設計","startYear" : 2008,"startMonth" : 4,"startDate" : 1,"endYear" : 2008,"endMonth" : 4,"endDate" : 20},
         {"series" : "実績","phase" : "開発","startYear" : 2008,"startMonth" : 4,"startDate" : 21,"endYear" : 2008,"endMonth" : 7,"endDate" : 31},
         {"series" : "実績","phase" : "テスト","startYear" : 2008,"startMonth" : 8,"startDate" : 1,"endYear" : 2008,"endMonth" : 9,"endDate" : 15}
        ]
    }
}
  • 表示結果
    GanttchartSample表示結果

X.暗号化と署名

Reflex iTextでは、PDF文書のプロパティ情報の設定や暗号化を行うことができます。

pageタグに暗号化の指定を行います。

属性 style属性 内容 初期値 指定方法
style title PDF文書のタイトル (なし) 文字列
style author PDF文書の作成者 (なし) 文字列
style subject PDF文書のサブタイトル (なし) 文字列
style keywords PDF文書のキーワード (なし) 文字列
style encryption 暗号化 (なし) 40：「40-bit RC4」で暗号化、128：「128-bit RC4」で暗号化 パスワードおよび文書に関する制限（allowで始まる属性）を指定した場合暗号化される。このとき本項目を指定していない場合は128。
style password 文書を開くパスワード（PDFファイルを開く(参照する)際に入力するパスワード。） (なし) 文字列または、"$"+エンティティの項目名
style ownerpassword 権限パスワード（PDFファイルのセキュリティ設定を変更する際に入力するパスワード。） (なし) 文字列または、"$"+エンティティの項目名
style allowprinting 印刷 true true：印刷可、false：印刷不可
style allowmodifycontents 文書の変更 true true：文書編集可、false：文書編集不可
style allowassembly 文書アセンブリ ページの挿入/削除/回転、しおりとサムネールの作成の可否。 false true：変更可、false：変更不可
style allowcopy 内容のコピーと抽出 true true：コピー可、false：コピー不可
style allowscreenreaders アクセシビリティのための内容の抽出 視覚に障碍を持つユーザに対して、スクリーンリーダ(読み上げ)の利用可否。 true true：可、false：不可
style allowmodifyannotations 注釈、フォームフィールドの入力および署名 false true：編集可、false：編集不可
style allowfillin フォームフィールドの入力および署名 false true：入力可、false：入力不可 注）文書パスワードを付けた場合のみ有効。allowmodifyannotationsが編集可（true）の場合、trueとなる。

X1.暗号化のサンプル

  • テンプレート (encryptionsample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:HAGAKI; orientation:portrait;
 title:暗号化サンプルPDF; author:バーチャルテクノロジー; subject:PDFサブタイトル; keywords:PDFキーワード;
 password:$userpass; ownerpassword:$ownerpass;
 allowprinting:false; allowmodifycontents:false; allowassembly:true; allowcopy:false;
 allowscreenreaders:true; allowmodifyannotations:false; allowfillin:false; allowdegradedprinting:false;"
 >
    <table cellpadding="3">
        <tr>
            <td>
                <span>暗号化サンプル文書</span>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
  • JSON (password.json) 
    {"password" :
    {"userpass" : "samplepass",
     "ownerpass" : "sampleownerpass"
    }
}
  • 表示結果
    EncryptionSample表示結果1
    EncryptionSample表示結果2
    EncryptionSample表示結果3
    EncryptionSample実行結果4
    EncryptionSample表示結果5

X2.署名

Reflex iTextでは、PDF文書に署名を設定することができます。

署名できるキーストアの名前は".keystore"です。

pageタグに署名の指定を行います。

属性 style属性 内容 初期値 指定方法
style certificate デジタル署名をするかどうか (なし) 属性名のみ記述
style keypass キーストアのパスワード (なし) 文字列または、"$"+エンティティの項目名
style alias キーストアのエイリアス (なし) 文字列または、"$"+エンティティの項目名
style aliaspass エイリアスのパスワード (なし) 文字列または、"$"+エンティティの項目名
style signed 証明元 self self：自己署名、verisign：ベリサイン、wincer：Windows Certificate Security のいずれか
style reason 署名理由 (なし) 文字列
style location 署名位置 (なし) 文字列
style visiblesignature 署名を表示するフィールド (なし) 文字列 指定なしの場合不可視署名となる。指定した場合、ページが追加されてフィールドが作成される。
style signabsolutex, signabsolutey 署名を表示するフィールドのページ内絶対座標 0 ページ左下を基点とし、左下角の座標を指定。
style signwidth 署名を表示するフィールドの幅 50 数値
style signheight 署名を表示するフィールドの高さ 50 数値

X3.署名のサンプル

  • テンプレート (certificatesample.html) 
    <?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
</head>
<body>

<div class="_page" style="pagesize:HAGAKI; orientation:portrait;
 title:署名サンプルPDF; author:バーチャルテクノロジー; subject:PDFサブタイトル; keywords:PDFキーワード;
 certificate; keypass:$keypassword; alias:$alias; aliaspass:$aliaspassword; signed:self;
 reason:PDFデジタル署名テスト; location:東京; visiblesignature:sigform;
 signabsolutex:20; signabsolutey:100; signwidth:50; signheight:60;"
 >
    <table cellpadding="3" style="absolutex:20; absolutey:380">
        <tr>
            <td>
                <span>署名サンプル文書</span>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
  • JSON (keystore.json) 
    {"keystore" :
    {"keypassword" : "keyreflex",
     "alias" : "areflex",
     "aliaspassword" : "aliasreflex"
    }
}
  • 表示結果
    CertificateSample表示結果1
    CertificateSample表示結果2
    CertificateSample表示結果3