【OutSystems】UltimatePDFでPDFデータを生成する①

# 0. INDEX
- 背景
- 目的
- UltimatePDFでPDFデータを生成する
- あとがき


# 1. 背景
OutSystemsを使ったPDF出力という要件が結構多く、執筆次点（2022/05/14）では、Ultimate PDFというForgeを使用するのがいいぞという話をチームメンバーから聞いていた。
以前は、HTML2PDFだったらしいが。

ただ、このUltimatePDF。Demoを確認するもバイナリデータの生成方法が見つけられなかったが、サーバアクションの出力にバイナリデータが含まれているので、この辺を検証してみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/4fa85857-c46c-831a-a924-0053ce28c778.png)


# 2. 目的
- プレビュー表示とダウンロードをする
    - 普通の使い方（この記事の内容）
- サーバアクション経由でバイナリデータを生成する
    - 今回の最終目標（次の記事で触れます）

# 3. UltimatePDFでPDFデータを生成する
例によってプロジェクトファイルはGitHubに置いている。
[PDFOutput.oml - GitHub](https://github.com/mahny-b/OutSystemsExample/blob/master/PDFOutput.oml)

デモページは、OutSystemsのPersonalクラウドスペースに置いている（長期間放置でスリープされてたら諦めてくだし…）
https://personal-ppneswkx.outsystemscloud.com/PDFOutput/Home


## 3.1. 準備

### 3.1.1. Forgeより`Ultimate PDF`を導入する
`Install from Forge`ボタンを押下する

`Browse Forge`という画面が開くので、`Ultimate PDF`で検索し、アイコンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/106f1736-cac9-8a77-e992-2e8f938bf806.png)

`Ultimate PDF`の画面に来たら、右側にある`Install`というボタンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/60d61fd5-e3e2-e380-87fe-37b394cf55a5.png)

`Service Studio`に戻って、`Development`を開いた時、`Ultimate PDF`が追加されていればOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/0f658fc7-a77e-d914-9bdc-ff4262dc3864.png)


### 3.1.2. Reactive Web Appで作成する
`New Application＞From scratch＞Reactive Web App`と進める

任意のアプリ名を入力して `CREATE APP`ボタンを押下する

`Modules`の画面に切り替わったら、`ADD MODULE`ボタンを押下し、名前は任意に、`Choose module type`は`Reactive Web App`をして`CREATE MODULE`ボタンを押下する


### 3.1.3. アプリの依存関係にUltimate PDFを追加する
電気プラグのようなボタンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/5260378a-0ca2-70a2-d284-c0fb9dd6d701.png)

`Manage Dependencies`ウインドウが開くので、`UltimatePDF`を探し、チェックを付けたら`APPLY`ボタンを押下する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/db295d7c-1e04-391e-2a63-5028683b19c0.png)
- 右上の`Logic`タブに切り替えた時、`UltimatePDF`が追加されていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/4abfa10c-df2b-dba9-3ba3-d49ae02adc8b.png)

### 3.1.4. Ultimate PDFの初期化処理を追加する
右上の`Logic`タブを開き、`Client Actions`に`OnApplicationReady`という名前でアクションを作る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/e8dbf914-f42e-42ee-f825-7d895332153b.png)

ちなみに、`OnApplicationReady`はホームモジュール読み込み時に一度だけ実行する特別なアクションなのだそうだ。

https://success.outsystems.com/ja-jp/Documentation/11/Reference/OutSystems_Language/Platform_Utilities/System_Events/Mobile/On_Application_Ready

ともかくこれでやっと準備完了である。


## 3.2. プレビュー表示とダウンロードをする

### 3.2.1. PDF用のScreenを作る
PDFはPDF用のScreenを追加する事で生成する。ここでは`Blank PDF`を追加する。
余談だが、メールもScreenから作るのでこの辺はOutSystemsの独特な考え方なのですかね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/53bbab2e-723d-b38b-17b7-be7ea3958a5d.png)

追加した所。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/e713da82-e7d5-b1f2-2077-39e31cdce6f4.png)

ちなみに、追加した画面に書かれた内容は、[3.1.4.](3.1.4.+Ultimate+PDF%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E5%87%A6%E7%90%86%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B) でやっているので、`Widget Tree`に切り替えてツリーから`layout-print-documentation`を消してしまっていい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/0a9fb7bf-6431-a26d-8e68-35b010746251.png)


続けて適当にPDFの中身を作る。ここでは単に`Expression`を使って現在時刻を出力するようにした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/0cdcbd9e-c1b6-83ad-f586-476d4e9d7707.png)

### 3.2.2. Home画面を作り、PDFのプレビュー表示とダウンロードをする
Homeは`Empty`というScreenから追加した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/429f60e3-c978-047a-5f18-9058ed137133.png)

追加した画面、プレビューとダウンロード用のボタンを用意する（リンクなどでもいい）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/f5892830-f790-8053-af74-bb96a506c4d2.png)

プレビューボタンのクリックイベントには、先に作成したPDF用Screenを指定し、引数の`Preview`に`True`を設定すればいい。ここは簡単ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/b1d0c9e9-59c6-4d73-2062-9331f127c456.png)

ダウンロードもプレビューとほぼ同じで簡単。ダウンロードボタンのクリックイベントにPDF用Screenを指定するだけでいい。Previewを指定する場合は`False`とする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/bcc68eed-8a24-2251-db07-39dd797476e6.png)

最後に確認。パブリッシュした後、ブラウザで開いてみる。

プレビュー表示。いいね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/53f1126b-093c-7d6e-71fb-3814248457b9.png)

ダウンロードしてみる。これもいいね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92447/fd79f4b7-731e-b954-3008-cba9ab4d8f1e.png)


# 4. あとがき
記事が長くなってしまったので2部構成にした。
この記事では、Ultimate PDFの普通の使い方（？）について書いたが蛇足だったかもω
眠気がもすぬごい

以上