AppSheetからPDFを自動で作成してみよう！

# はじめに

こんにちは、京セラコミュニケーションシステム　西田（@kccs_hiromi-nishida）です。

AppSheetは以前連載記事を書いていたのですが、AppSheetで作成したアプリから入力したデータをファイルに出力すると便利かな？と思い、試してみました。

たとえば注文データを入力さえすれば、注文書をPDFで自動作成、なんてこともできます。
今回は以前の連載時に作成した日報アプリを使って、報告用のPDFを出力する手順を紹介します。

:::note warn
本記事は2024年7月ごろに作成しております。よって、引用している文章などはこの時点での最新となります。ご了承ください。
:::


## この記事の対象者

* AppSheetからのファイル出力に興味のある方
* AppSheetでできることをより知りたい方

## 前提

以下のAppSheet連載記事で作成したアプリを使います。
ですのでこの記事ではアプリ作成には触れません。ご了承ください。

[AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？](https://qiita.com/kccs_hiromi-nishida/items/2f060675dbe59cab51be "AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？")
[AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！](https://qiita.com/kccs_hiromi-nishida/items/159830c9a1289708e08a "AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！")
[AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）](https://qiita.com/kccs_hiromi-nishida/items/47326eef894558362481 "AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編）")
[AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）](https://qiita.com/kccs_hiromi-nishida/items/b077c980662753fcc6dc "AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編）")
[AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）](https://qiita.com/kccs_hiromi-nishida/items/d94b7c400edf2f28acb1 "AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編）")

## テンプレートファイルを準備する

まずは出力先となるテンプレートファイルを用意します。
Googleドキュメントで以下のようなテンプレートを作成してみました。

<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/aec091fd-cb28-11e3-eabc-2df7aa7e70fe.png">

<font color="DarkGray">_Google ドキュメント_</font>

AppSheetでGoogleドキュメントに列の値を差し込む時に使用されるのが、`タグ` です。
`<<[テーブルの項目名]>>`という形式で記載すると、対象の項目データが出力されます。

<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/bcfd70ab-8012-7023-3cf9-02926e97de52.png">

<font color="DarkGray">_AppSheet_</font>

今回はこの日報テーブルの各データをGoogleドキュメントにタグを用いて定義しました。

### 作成したテンプレートファイルを配置

作成したテンプレートファイルはAppSheetのデータが保存されている場所の直下に配置しておきましょう。（作業日報というファイルが配置したファイルです）

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/476731e4-afad-463b-b398-7d577ce6c8b0.png">

<font color="DarkGray">_Google ドライブ_</font>

デフォルトではGoogle Driveのマイドライブ→appsheet→data→アプリのフォルダー名というパスに保存されているはずですが、もしアプリの保存場所が上記と違う場合は、以下の方法で保存場所を調べてください。

アプリを開く→左バーの歯車マーク→Information→Defauld app folder

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/4bb9284f-0139-f326-98f9-ce497f489ac0.png">

<font color="DarkGray">_AppSheet_</font>

## Automationでファイル出力を定義する

テンプレートの配置も終わりましたので、いよいよファイル出力の設定を行います。
今回は日報テーブルにデータが追加された時、その内容をPDFファイルに出力するという自動処理を定義します。

:::note warn
特別な記載のない限り、画像はGoogle AppSheet画面をキャプチャしたものとなります。
:::

### イベントの作成

まずは`日報テーブルにデータが追加された時`というイベントを定義します。

画面左側のロボットアイコン→＋マーク→Create a new botの順で選択。
<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/a7c833cb-b74a-dc4b-ceac-e32ed144fbc6.png">

`Configure event`を選択。
<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/b514c5bf-fbd2-85e4-9ad3-e242ffdb3479.png">

`Create a custom event`を選択。
<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/995a8109-7f1b-9eca-183e-6dc621339067.png">

`Event name`にわかりやすい名前を付け、`Data change type`は`Adds`のみに選択しなおしてください。
<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/a83d330f-2c06-4fd7-4d8f-070e289465de.png">

これでイベントの作成は完了です。

### 処理の作成

次にイベント後に発生する処理、すなわちファイルを出力するという処理を定義します。

`Add a step`を選択。
<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/c2078c02-e5dd-0d13-d704-d81f760bb58e.png">

`Create a custom step`を選択。
<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/2ae9a69e-822b-5cd7-c170-75e784bdb790.png">

`Create a new file`を選択し、`HTTP Content Type`は`PDF`を選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/615a671e-ce17-3e83-0576-b76f159706bf.png">

次にあらかじめ作成しておいたテンプレートファイルの場所を指定します。

Template項目の書類アイコンを選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/e1a4b656-7115-8adc-be8a-410c23827be9.png">

`Google Drive Files`を選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/4bfdf8fd-1e96-a1e4-bea2-302b29ff1927.png">

テンプレートファイルの保存場所まで移動し、テンプレートファイルを選択し、`Select`を選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/26e607ef-377a-b598-e34f-b26f8fd45d6c.png">

次にファイル名の先頭に出力する文字列を変更します。
デフォルトではAppSheetDocとなっていますがわかりにくいので。

赤枠部分を選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/698f9e57-3aff-b799-6a36-c905be7c4c24.png">

入力エリアにファイル名の先頭に出力したい文字列を入力し、`Save`を選択。
<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/e534834e-3cb1-675d-4f98-9b1d31b46aa4.png">

これで自動化処理の定義は終了です。
画面上部の`SAVE`ボタンを選択してください。

<img width="600" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/1e5d56a5-2331-a945-1412-a43fad272c27.png">


## 動かしてみよう

では、実際に日報を作成したらPDFファイルが出力されるか確認してみましょう。

画面右側のプレビュー画面から`＋`ボタンを選択。
<img width="400" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/b66276d6-ac52-6b29-8d02-0ed0f361d4b6.png">

内容を入力して、保存を選択。
<img width="300" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/f56f88a5-3b51-a3e1-0d22-1ccf0ef7e52f.png">

しばらくすると出力フォルダーにファイルが出力されます。
出力フォルダーはアプリフォルダー内に`data`というフォルダーが自動的に作成され、dataフォルダー内にファイルが出力されます。

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/bfb9567e-7b14-68e9-c7ee-d2d7cd69ed41.png">

<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/a98a137c-2a88-5544-f059-eba5114c5bf5.png">

<font color="DarkGray">_Google ドライブ_</font>

このようにアプリで入力した内容がテンプレートファイルに反映され出力されます。
<img width="500" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752159/6f7bf824-2597-4b56-085f-af319d6ad08f.png">

# おわりに

今回AppSheetで作成したデータをPDFに自動出力する処理を追加してみましたが、思った以上に簡単だなという印象を持ちました！
結構色々な用途に使えそうな気がしますので、皆さんも試してみてくださいね。

# おしらせ

弊社X（旧：Twitter）では、Qiita投稿に関する情報や各種セミナー情報をお届けしております。情報収集や学びの場を求める皆さん！ぜひフォローしていただき、最新情報を手に入れてください:grinning:

https://x.com/kccs_digital