OutSystemsでの帳票出力を考える Stimulsoft EX（後編）

# １．はじめに
前回の[OutSystemsでの帳票出力を考える（前編）](https://qiita.com/REQWARE/items/67ed82d43c48c3779b5c)に続き、具体的なStimulsoftEXの利用方法について解説します。

# ２．前提
OutSystemsプラットフォーム
StimulsoftEX Forgeモジュール

# ３．モジュールのダウンロード
Outsystems社のForgeサイトから[StimulsoftEX](https://www.outsystems.com/forge/component-overview/12160/stimulsoftex)をインストールします。

[Forge画面]

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/28325586-da3c-e98b-cb36-f94f2ef212bd.png)](https://www.outsystems.com/forge/component-overview/12160/stimulsoftex)


# ４．コンポーネントの構成
帳票テンプレートを作成するための「デザイナー」コンポーネントとそれを表示する「ビューア」コンポーネントに大きく分かれます。また、便利な機能として、印刷ダイアログの直接出力やPDFダウンロード機能などがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/9f5d9152-71f5-5715-b823-470355310804.png)


# ５．アプリケーションを日本語へ変更し新規作成
アプリケーションを起動後、トップページのドロップダウンを日本語にします。
「レポート」リンクから「レポート一覧」画面へ遷移し、赤枠の「レポート登録」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/ad46ad6f-8b21-8341-8926-0466255ef12d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/b18ccfeb-6585-3c94-d901-eda288128f1d.png)

# ６．レポートテンプレートの新規登録作成
テンプレートの作成は、OutSystemsのScaffoldに似た、帳票の自動作成機能を使うと非常に便利です。しかも専用のデザインツールをパソコンにインストールする必要はなく、直ぐにブラウザから帳票テンプレートを作成することが出来ます。
これまで`OutSystemsの帳票レイアウト作成は、開発者が大きくかかわる必要があったのに対し、開発経験のない業務担当者でも緻密な帳票作成が可能になることは大きなメリット`になります。

#### ①　データソースの登録
帳票作成時に利用するデータソースを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/5af5cf9c-ebb4-7b98-5033-124eec3257a2.png)

#### ②　JSON登録
ひな形であるテンプレートのデータソースは実データである必要はありませんが、ビューアーで閲覧するときに流し込むデータの型と揃えておく必要があるためRest(Json)を準備します。今回は、製品付属のRestデータを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/3e1fc5a8-7692-27db-58e7-1fe7116b91cb.png)

#### ③　REST設定
導入ページにサンプルのREST APIがあるので、そのURLを貼り付けOKしデータを選択
※業務担当者向けに、ここまでのDB登録操作を保存し、ひな型として配布することも可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/717b7756-9b41-d2bb-1ed8-147186739fef.png" width="45%">　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/31cb7090-4fcf-11da-dacb-1e501415dd56.png" width="45%">

#### ④　データソースから帳票一覧を一気に自動生成
データソースが作成されているので、OutSystemsと似た操作で帳票ページへデータをドラッグ＆ドロップした後に、必要なカラムを選択すると一覧の情報が自動生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/71baff2f-24d7-c258-656e-5585faf749fe.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/bb63e8f1-8737-5721-245d-197f80955164.png)

#### ⑤　レイアウトの調整
自動生成されたレイアウトは、ドラッグ操作で項目をmm単位で調整できます。
また、メニューも見慣れたオフィスライクなツール郡が揃っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/411961ac-6eaf-26be-f822-54c46e5afc05.png)
罫線、上揃え、下揃え、左揃え、右揃え、スタイル設定などなど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/e0e90a6b-943f-0e3e-2cb8-26e646847b38.png)
部品（バーコード、画像・・）、図形、グラフ、ページヘッダ、グループヘッダ、表ヘッダなどなど
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/398d2e92-0d14-5818-15f6-20721d5ba6ce.png)


#### ⑥ レイアウトの確認
プレビューをクリックすれば、すぐに体裁を確認することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/e0e6f59a-19e0-d557-ee23-5741f38effa3.png)
期待したレイアウトでない場合、罫線内の文字拡張や高さなどはチェック設定で制御します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/e74913b4-f5b4-c946-9082-bb6d1a658bc3.png)


# ７．その他の機能

StimulsoftEXには、ビューアの表示なしにPDFをダウンロードしたり印刷ダイアログを直接表示する機能を実現するためのボタン部品があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/f1b39b1a-0b4c-d68a-7804-f89c3127a0e5.png)

### ダウンロードPDF
PDFファイルをダウンロードします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/aa2e42b1-f6b4-3879-33c2-0fa33af7200e.png" width="70%">

### ダイレクト印刷
ブラウザの印刷ダイアログを直接表示します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/7cd63230-aec9-0fd8-aab1-f0010be0d48c.png" width="50%">　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/87e0447f-8763-2c5a-2888-53e6c3c5e97e.png" width="43%">

注意点として「ダイレクト印刷」は、生成したHTMLデータをブラウザの印刷ダイアログに送るのに対して、「PDFダウンロード」はJavaScriptから直接PDFを生成しファイルとしてダウンロードします。つまり、「PDFダウンロード」のJavaScriptは、システムフォントを直接参照できないために、PDFにフォントを組み込むことができません。
これは、クライアント環境に対象のフォントがない場合に文字化けの原因となります。

これを回避するには、ネットワーク越しにフォントを参照できるように「EmbeddedFont File」という設定項目にフォントファイルを指定する必要があります。これによりPDFを生成するときにPDF内に自動でフォントを組み込むようになります。

**※フォントファイルは、TrueTypeアウトラインベースである必要があります。レスポンス等のパフォーマンス向上のためには、フォントエディターなどでファイル容量を軽量化することをおすすめします。**

このように、それぞれ一長一短があり
- **HTML生成の方法は、文字フォントに柔軟だがブラウザが微妙にレイアウト調整する可能性がある**
- **JavaScriptでPDF生成の方法は、デザインに沿って忠実にPDF生成するがフォント対応に工夫が必要**
ということになります。

なお`レイアウトの正確性`と`フォントの柔軟性`の両方を教授出来るようにStimulsoftEXでは、サーバーサイドでPDFを生成する機能も準備しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/3820987d-ed05-39e7-6461-b70531e4d3a4.png)

### メニューのカスタマイズ
管理画面のチェックをオンオフするだけで使いやすいメニューにカスタマイズすることが出来ます。

例）印刷ボタンを無くし、保存メニューを変更した例
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/19e9f44b-9236-93ac-8b27-a1c09de95a2f.png" width="70%">　　
[カスタマイズ例]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/09a1a2a7-b15c-a64d-631a-bebe7917ff2f.png" width="30%">　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/d4f7bae2-9a5c-23e0-d9aa-d372c0c9f382.png" width="30%">　

### 電子印の透かし
透過PNGを使った電子印の透かしも対応しています。（JavaScriptによるPDF生成では透過は非サポート）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/9bfb2da3-a471-a817-9cc6-a97d7dfbe8b3.png)


# ８．まとめ
[StimulsoftEX](https://www.reqware.jp/stimulsoft-reportmanager)のメリットを整理すると以下のようになります。有償製品だけあり機能は豊富なので、帳票開発検討時の候補のひとつとしておすすめします。

- **Forgeからダウンロードしてパブリッシュするだけなので導入コストを削減**
→導入時間はわずか数十秒

- **使い慣れたブラウザ操作だけで帳票レイアウト設計から印刷出力まで完結**
→JavaScriptをベースとしたモダンなWeb UI

- **ウィザード機能で一覧を自動生成するので帳票ひな形作成を加速**
→帳票デザインを開発者でなく業務担当者でも作成可能

- **パソコンからも携帯からも柔軟にプレビューが可能**
→モバイル対応しており、ピンチ操作などでA4ファイルの閲覧も快適

- **専用の帳票サーバーが不要**
→帳票にかかる処理は基本的にクライアントで動作するので、サーバーの負担を軽減

# 追記
### ■大規模な印刷業務に対応可能なように機能追加（2022年9月）
[リモート印刷機能をリリース！](https://qiita.com/REQWARE/items/a390014d32840aa8e296)