OutSystemsでの帳票出力を考える（前編）

# １．はじめに
ローコード開発のリーダーである、OutSystemsを利用したWebアプリケーションの開発で、帳票を出力する方法について整理します。

**OutSystemsの標準機能として帳票を作成する機能はありません** 。

しかしながら、[OutSystems Forge](https://www.outsystems.com/forge/)のなかに帳票作成を補完するためのモジュールが数多く存在しており、これらを利用することが可能です。なおOutSystems社は、今年に入り従来の「Taraditional Web」から、SPAの「Reactive Web application」への移行を明確に表明しているので、Reactive対応が可能なモジュールを前提として今回まとめてみます。

# ２．OutSystems帳票出力の代表的な方法
OutSystemsで帳票を作成する方法は、大きくは以下の３つに分けられます。
① Excelで作られた帳票フォームにデータを流し込む方法
② Web ScreenのHtmlをPDFに変換する方法
③ 有償の帳票ソリューションと連携する方法

## ① Excelで作られた帳票フォームにデータを流し込む方法

　　　<img width="50%" alt="エクセル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/a856c3b0-15f1-6b73-f97b-5d92cc131443.png">

印刷帳票としてExcelを利用している企業は多いのではないでしょうか。Excelで作成した帳票資産が多い場合には、この方法は有効です。

Web画面でボタン等をクリックした後に、あらかじめExcelで作られた帳票フォームをサーバーサイドに登録しておき、そこにデータを流しこみダウンロードする方法になります。

#### ■ デメリット
Excelを活用するので、割と複雑な帳票を再現することができますが、利用者の運用として帳票をダウンロードするまで、プレビュー等で事前に印刷物を確認することが出来ないなどのわずらわしさがあるのと開発の実装の手間（非常に長いフローのアクションを組み込む可能性）が懸念されます。

<img width="80%" alt="長いフロー" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/5b402327-c06b-91b6-cdd0-2cdb7c46d1ed.png">

★実際の例
<img width="50%" alt="実例" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/6cbdccb4-1603-57f3-1643-9b9394240da9.png">

#### ■ 利用の多いForgeモジュール
+ [Advanced Excel](https://www.outsystems.com/forge/component-overview/355/advanced-excel)
+ [OfficeUtils](https://www.outsystems.com/forge/component-overview/687/officeutils)


## ② Web ScreenのHtmlをPDFに変換する方法

　　　<img width="50%" alt="エクセル" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/97c96ce5-b78d-d28c-f7fa-faffc40b85c8.png">


A4などの用紙サイズに成形することが可能なCSSによりHtml画面を作成し、これをPDFに変換して印刷する方法になります。
OutSystemsのレイアウトができる開発者であれば、ドラッグ＆ドロップなどのWebのUIを作る手順で帳票を作成することが可能なので生産性高く開発できます。

#### ■ デメリット
ブラウザは、体裁よく見えるようにdivの大きさなどを通常は自動調節します。動的に文字の長さが大きく変わる時などの細かいレイアウト調整はCSSやJavaScriptで詳細を設定する必要もあるため自由度が高くなく、mm単位の制御は難しくなります。

<img width="80%" alt="PX単位の入力" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/f1df8a13-398e-a4d9-8132-94ef2ad59ed2.png">

また、ブラウザの機能以外でPDF化するときには、日本語の場合、特に環境依存による文字化けの懸念が残るので十分な確認が必要です。

#### ■ 利用の多いForgeモジュール
+ [Ultimate PDF](https://www.outsystems.com/forge/component-overview/5641/ultimate-pdf)
+ [Simple Reports](https://www.outsystems.com/forge/component-overview/9869/simple-reports-reactivel)
+ [HTML2PDF](https://www.outsystems.com/forge/component-overview/10546/html2pdf)


## ③ 有償の帳票ソリューションと連携する方法
　　　<img width="60%" alt="帳票ソリューション" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486327/2b3c5d59-97d3-7a3e-8e0c-77e3b124474d.png">
OutSystemsとは、別にコストが掛かってしまいますが、OutSystemsと市販の帳票ソリューションを組み合わせて印刷する方法になります。

①②の方法は、簡易的な印刷目的であれば特に問題ありませんが、複数ページの先頭ページだけにヘッダーを配置したい場合や、複雑なレイアウトのため、より効率よく帳票のひな形を作成したい、動的に罫線を引きたいなど、より帳票的ニーズが多いときには、こちらの方法がおすすめとなります。

【動的に罫線を引く例】動的にグループ化したものを囲む

<table>	
  <thead>
  <tr>
    <th>項目</th>
    <th>費用</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td rowspan="3">食費</td><td>1,000円</td>
  </tr>
  <tr>
    <td>800円</td>
  </tr>
  <tr>
    <td>900円</td>
  </tr>
  <tr>
    <td rowspan="2">交通費</td><td>300円</td>
  </tr>
  <tr>
    <td>600円</td>
  </tr>
  </tbody>
</table>

#### ■ デメリット
懸念としては、サードパーティー製品とOutSystemsとの連携に関わる実装が必要になってきます。特にReactive対応になってから、サードパーティー製品のUIなどと連携させるのに敷居があがったように思います。この件の詳細は割愛しますが、すでに連携済みのものを選択するとこの周辺の実装に悩まされなくなります。

#### ■ おすすめのForgeモジュール
+ [StimulsoftEX](https://www.outsystems.com/forge/component-overview/12160/stimulsoftex)


# ３．それぞれのメリット/デメリット
非常にざっくりですが、それぞれの方法によるメリット・デメリットになります。


| 項目 | 　　①　　 | 　　②　　 |　　③ 　　|
|:-----------|:-----------:|:------------:|:------------:|
| 利用にかかる費用が安い   | 〇<br>無料     | 〇<br>無料  | △or×<br>有料  |
| Excel資産を活用可能   | 〇       | ×         | △or×  |
| 帳票開発の容易性      | ×  <br>イ：開発者<br>ロ：**業務担当**<br>ハ：開発者| × <br>イ：開発者<br>ロ：開発者<br>ハ：開発者        | 〇<br>イ：開発者<br>ロ：**業務担当**<br>ハ：**業務担当**  |
|サポートがある    | ×       | ×        | 〇  |
|備考    | Excelがあれば雛形の作成は可能だが、ServiceStudioで長いロジックを書く必要があるので容易性を×にした      |    ServiceStudio上での雛型作成は単純な帳票であれば容易であるが、開発者しか操作できないため容易性を×にした     |  業務担当者でも操作可能な専用の帳票デザイナーがあるので開発生産性は高い |

帳票開発を、データ準備⇒ひな型作成⇒データ配置の手順で行うとした場合に、だれ（開発者or業務担当者）がこの作業を行なえるかという視点で整理しています。
イ）データ準備：帳票で利用されるデータの準備
ロ）ひな形作成：帳票デザインなどのひな形作成
ハ）データ配置：ひな形とデータを紐づける作業
※帳票開発全般を開発者が行うケースが多いと思いますが、開発容易性の目安として業務担当者でも作成可能なものは「業務担当」と記載しています。

# ４．まとめ

コスト優先であれば、①②の方法がおすすめです。ただし、基本的にドキュメント類の不足感は否めなく利用に関してのサポートもないので問題が生じた場合には、自力で解決する必要があります。
これに対して、③の方法は、有償だけあって機能も多く、メーカーによるサポートも期待できるので、日本人の好きな帳票を目指したい場合には、一番おすすめの方法となります。

[OutSystemsでの帳票出力を考える（後編）](https://qiita.com/REQWARE/items/c01a3e382629c85722ab)では、③で紹介した方法のひとつである、Forgeモジュールで公開されている[StimulsoftEX](https://www.outsystems.com/forge/component-overview/12160/stimulsoftex)の具体的な利用方法について解説します。