2024年12月16日 / 最終更新日時 : 2024年12月17日 officeの杜 AppSheet

AppSheetで申請書等のPDFを生成してみた

AppSheetは様々なビジネス用のアプリケーションを作成可能ですが、ワークフローや請求書などのアプリに付き物である「PDFの生成」もAutomationで実現可能です。

このPDF生成はGoogleドキュメントに仕掛けをしておき、そのテンプレートを元に差し込み印刷のようにPDFを生成する事が可能になっています。欠かせない機能であるため、ここで２パターンのPDF生成をしてみようと思います。今回はGoogle Apps Scriptを利用せずに実装しています。

今回利用するスプレッドシート等

申請書のようなシンプルな１テーブルだけで構成されたファイルの生成と、請求書のように親テーブルとそれにぶら下がる子テーブルの2つで構成されてる場合の2パターンについて、ボタンクリックでPDF生成をしてみようと思います。

ボタンクリックでAutomationを発火させる方法については以下のエントリーで扱っています。

AppSheetからGoogle Apps Scriptを叩く方法【GAS】

事前準備

テーブル側

今回のアプリは前述でも紹介してる「アクションボタンをクリックしてPDF出力を実行する」ものなので、以下のような準備が必要です。

  • 各基準となるスプシのシートに「更新フラグ」用の列を用意する
  • この列に対して後述のアクションにて値の書き込みにてUNIQUEID()で生成した値を入力し、Automationを発火させる
  • 請求書タイプの場合には明細シートには自身用のID列と連結するための親ID用の請求書ID列を用意する
  • Refを利用して親側のIDと子側の請求書IDを連結する

Refで請求明細側の請求書IDに対して親のテーブルを連結してるため、親テーブル側には「Related 請求明細s」というList側のフィールドが自動追加されて連結されます。

図：更新させて発火させる為の列の用意

図：明細側にリレーションを設定する

AppSheetでドロップダウンとリレーションシップを装備する

テンプレート側

申請書タイプ

申請書タイプは１レコードで完結するワークフローなど社内の各種申請で用いることが多いであろうテンプレートです。以下のような手順でGoogleドキュメントで体裁を作成します。

  1. Googleドキュメントである程度のフォーマットを作成する
  2. 差し込みたい項目の場所に、AppSheetの列の名前を元に「<<申請日>>」といった文字列を配置します。
  3. 表などを使ってレイアウト組をして順番に入力内容を配置するように構築しても良いでしょう。

思っているほど難しいものではないのですが、テーブルの列の名前で入れる必要があるため、少しでも誤りがあると挿入されませんので要注意です。

図：挿入文字列を配置していく

請求書タイプ

請求書タイプの場合、前述の申請書タイプに加えて親のレコードにぶら下がる明細レコードが複数存在しており、またその明細の数も不定であるため、前述の記法だけでは不十分です。親のレコード側にある内容は前述の通り入力すればオッケーです。こちらに公式ドキュメントがあります。

請求書の場合は以下のような手順で作成します。

  1. Googleドキュメントである程度のフォーマットを作成する
  2. 親レコードにある項目は前述と同様に該当箇所に「<<発行日>>」という形で挿入しておきます。
  3. また後述の「合計金額や税込金額計算」で用意した合計金額や税込金額などのVirtual Columnの項目も同様に「<<合計金額>>」といった列名で挿入が可能です。
  4. 問題の明細行ですが、1行分のみを用意しておきます。最初の列の品名がちょっと特殊で以下のような値を入れます

    startから始まり、Related 請求明細sの項目を指定してから品名を入れます。これでループで自動で行追加してくれます。
  5. 次の数量や単価は通常通りの指定方法で問題ありません。
  6. 最後の金額欄も品名同様に以下のような指定方法で閉じます。
  7. startからendまでの1行のループで必要な明細分だけ自動で行が拡張されて追加される変わった仕組みになっています。

ただし、これは表形式でなければ旨く動作しないので、例えば箇条書きを実現できるか？といったらPDF出力されませんでした。同一のセル内にStartとEndを一緒にすると１行の中に記述されてしまうので注意。擬似的に箇条書きにしたい場合には以下のように構築します。Endは改行してから配置します。

図：請求明細は1行のみだけ用意する

図：実際に出力すると複数行出てくる

実装方法

申請書タイプであれ請求書タイプであれ、アクションボタンからPDF生成までの流れは共通です。以下のような仕組みを構築して出力します。ここでは申請書のビューについて追加する手順として紹介します。同様に請求書側も装備してみましょう。

アクションボタンを追加

AppSheetの開発画面の左サイドバーからActionsという項目にてボタンを追加していきます。

  1. Add ActionをクリックしてCreate a new actionをクリックする
  2. Action Nameは適当にセットし、For a record of this tableは「申請書」テーブルを指定する
  3. Do thisは「Data: set the values of some columns in this row」を指定します。
  4. set these columnsにて、更新フラグ列にUNIQUEID()を入れる設定を記述します。
  5. PositionはProminentとして指定する

これでボタンをクリックすると申請書シートの更新フラグ列に値が毎回書き込まれ、それをトリガーにしてAutomationを発火させることが可能になります。

図：これで更新フラグに書き込まれる

図：ボタンクリックで発動します

Automationを設定する

イベントを作成する

前述まででボタンの設置まで用意できました。次に、この更新フラグの書き込みをトリガーにしてPDF発行用の処理を動かし、スプシの申請書シートにはファイルの出力先までのパスを書き込むようにします。

  1. AppSheetの開発画面の左サイドバーでAutomationをクリックする
  2. Create a new botのボタンをクリックする。
  3. ダイアログでCreate a new botをクリックする
  4. Confiture Eventをクリックする
  5. Create a new eventをクリックする
  6. 右サイドバーにてTableは「申請書」を指定する
  7. Data Change TypeはUpdateのみを選択するようにする
  8. Conditionでは以下のような数式を構築して更新フラグが変化していたら実行するように仕込む
  9. 右上のSAVEをクリックする

図：更新フラグを元に発火するように仕掛け

PDF生成ステップ

無事に更新フラグを元に発火できるようにしたら、いよいよGoogleドキュメントをテンプレにPDFを生成する仕掛けを作ります。前述のイベントの次より以下の手順でフローを追加します。

  1. Add a Stepをクリックする
  2. Run a taskのstepの右サイドバーに於いて、「Create a new file」を選択する
  3. HTTP Content TypeはPDFを選択する
  4. Templateのファイルアイコンをクリックして、ドライブから作成しておいた申請書雛形のGoogleドキュメントを指定する
  5. File Folder Pathは空でも問題ないですが、その場合「/appsheet/data/アプリ名/」以下に自動でファイルが作られますが、ここで「"雑多なファイル/pdffolder"」と指定すると、「/appsheet/data/アプリ名/雑多なファイル/pdffolder/」以下にファイルが作られるようになります。
  6. File Name Prefixは自動的につけるPDFのファイル名を指定します。ここでは関数でユニークなファイル名になるようにセットしてみます。
  7. Attachment Page OrientationはPDF出力方向（縦横）およびA4などの出力サイズを指定出来ます。
  8. 右上のSAVEをクリックする

これで、ドキュメントをテンプレとしてPDFを差し込み印刷的に出力してくれるようになります。

図：テンプレートファイルを指定する

図：ファイル名と出力形式を指定する

出力先パスを書き込む

このステップは特に無くても問題ないですが、出力先のGoogle Drive上のパスを申請書のPDFの場所列に対して書き込むことが可能です。以下のようなフローを構築します。

  1. Add a Stepをクリックする
  2. Run a data actionを選択する
  3. 右サイドバーでは「set row values」を選択する
  4. Set these column(s)では、「PDFの場所」という列名を選択し、関数には以下のような内容を記述する

    ※前述のフォルダのパスとファイル名を合体させたものを書き込ませます。
  5. 右上のSAVEをクリックする

図：出力先をスプシに書き込みする

出力した結果

実際にテンプレを元にPDF出力されたファイルを開いてみると以下の図のような形でファイルが生成されていました。色々と調整は必要ではあると思いますが、無事に差し込み印刷のようにPDFが作成されました。

請求書の場合にはあとは手動で電子署名をして相手にメールするといった形で仕事を終えることが可能です。

図：出力されたPDFの事例

図：出力先のパス

Googleドキュメントの電子署名機能を使ってみた

合計金額や税込金額計算

この項目は請求書タイプのPDFを生成する上で利用する「明細の合計金額」「消費税額」「税込み金額」の３つを計算する必要があります。今回は請求明細テーブルをRefで連結しているので、それを利用してこれらの値をVirtual Columnとして請求書シートに計算列として追加します。

この列名をGoogleドキュメントの差し込み項目として利用します。

  1. 請求書テーブルを開き、右上のAdd Virtual Columnをクリックする
  2. Column Nameを合計金額として、計算式は以下のようなものを入れます。
  3. 次に同じようにVirtual Columnを追加し、Column Nameは消費税額として計算式は以下のようなものを入れます。2.の列の値をそのまま利用します。
  4. 次に同じようにVirtual Columnを追加し、Column Nameは税込金額として計算式は以下のようなものを入れます。
  5. 右上のSAVEをクリックして保存する

これで、差し込みで合計欄3種類をそのまま差し込めるようになります。

図：Virtual Columnで計算させます

関連リンク

カテゴリー
AppSheet、Google、入門編
タグ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

AI

前の記事

Google Apps ScriptでGeminiを叩いてスライドを生成する【GAS】
2024年12月14日
Google

次の記事

TeamsからGoogle Chatへ移行するツールを検証してみた新着!!
2024年12月18日