AppSheet実践編シリーズ⑱～（小ネタ）PDF報告書に画像を表示してみよう！～
はじめに
こんにちは。ソシオネットの髭晩酌です。
少し前の話になりますが、弊社は2024/2/20～22に東京ビッグサイトで開催されたリアルイベント「DX総合EXPO春展」に出展しておりました。
あいにくの天気の日も多かった中、弊社ブースまで足を運んでいただいた皆さま、ありがとうございました。
ブースにて多くのお客様とお話させていただく中で、「AppSheetのデータを元にして画像付きの報告書の様式でPDF出力できないか？」というニーズを頂いたので、今回はこのネタでブログを書いていこうと思います。
なお元ネタとして、以下のブログで作ったヒヤリハットアプリを改造し、データをPDF出力できるようにしていきます。
※元ネタのブログをまだ読んでいない方は、よかったら読んでみてください！
ちなみに、PDF出力処理の実装については以下のブログで詳しく触れています。PDF出力自体の細かい実装はこちらのブログも参考にしてくださいね。
ではさっそく始めましょう。
今回のブログでは、以下の順でPDF出力設定の説明をしていきます。「処理の流れ」と「実装の順序（説明の順序）」が逆になっていますのでご注意ください。
なお、本ブログの画面説明は「improved editor」モードにて説明していきます。
GoogleドキュメントでPDFのひな型を作ろう
PDFのひな型、、と聞くと難しそうに思われるかもしれませんが、以下のようなGoogleドキュメントを作って、このアプリのルートフォルダの直下に配置するだけです。
今回は何も考えず（？）に、全部の項目を表示してみることにしました。。
前述のブログにもある通り、AppSheetのデータを差し込み項目としてPDFに表示したい場合は、二重のタグ(<<>>)で該当の項目名を囲んであげるんでしたね。やり方を忘れている方はここで改めて復習しておきましょう！
ちなみに、Officeユーザの方はGoogleドキュメントを使い慣れていない方も多いと思います。かく言う私もその一人です。
その場合は、使い慣れたWordで上記の通りひな形を作成してGoogleドライブに配置し、画面上部にある「ファイル」メニューをクリックし、「Googleドキュメントとして保存」を選択してください。
さらにもっと言うと、ぶっちゃけWordのままでもPDF出力できますので、Googleドキュメントに変換する必要も実はないかもしれません・・・（Googleでそろえたほうがキレイとは思いますが）。
ということで、ここでは以下の2つのポイントを押さえておいていただければOKと思います！
・AppSheetのデータをPDFに表示したい場合は、二重のタグ(<<>>)を使う
・PDFのひな型は、GoogleドキュメントでもWordでもどっちでもOK
AutomationでPDF発行処理を作ろう
次に、AutomationによるPDF発行処理の実装です。
ここは今回のブログのテーマとは本質的にあまり関係がないので、設定だけささっと説明していきます。
※AutomationによるPDF発行処理に関する詳細や設定の意味などは前述のブログを参照ください。
Bot
左側のメニューから「Automation」を選択して上部の「＋」ボタン（Create a new bot）を押下し、さらに表示されるPOPUP画面で「Create a new bot」ボタンを押下します。
bot名は任意でOKですが、ここでは「ヒヤリハット報告bot」としました。
引き続いてEventの設定をしていくので「Configure event」を押下します。
Event
前述の通り「Configure event」を押下した後、「Create a custom event」を押下することにより新しいEventが作成できますので、右側の設定画面から設定していきましょう。
Event名は任意でOKですが、ここでは「ヒヤリハット報告event」としました。
またCondition欄には、以下の数式を設定してください。この数式は「報告発行回数が変わる、というEventをトリガにしてStepを起動する」という意味です。
[_THISROW_BEFORE].[報告発行回数]<>[_THISROW_AFTER].[報告発行回数]それ以外は以下の画像の通りに設定します。
なお設定するとエラーが出ますが、これは「ヒヤリハット」テーブルに「報告発行回数」という項目が存在しないためです。後で設定するのでここでは無視でOKです。
引き続いてStepの設定をしていくので「Add a step」を押下します。
Step、Task
前述の通り「Add a step」を押下した後、「Create a custom step」を押下することにより新しいStepが作成できます。
このStep名も任意ですが、ここでは「ヒヤリハット報告step」とし、タスクの種類はデフォルトの「Run a task」のままとしました。
では、右側の設定画面から細かい設定をしていきましょう。
ここでポイントとなるのはTemplate欄です。ここでは前に作成してアプリのルートフォルダに配置したGoogleドキュメントを選択しましょう。「DocId=1・・・・」となっていれば正しく設定できています。
それ以外の項目は画像を参考に適当に設定しちゃってください。
これで、StepとTaskの設定は完了です。
「報告発行回数」に1を加算するActionを作ろう
ここからはActionの設定です。また前の項目でエラーの原因となった「ヒヤリハット」テーブルに「報告発行回数」が存在しない件についてもここで対応していきます。
では早速、「ヒヤリハット」テーブルに「報告発行回数」を追加するところから始めましょう。
まずは以下の通り、データソースであるスプレッドシート内の「ヒヤリハット」シートの最後に「報告発行回数」列を追加してください。そして初期値として、既存の行には「0」をセットしておきましょう。
次に、Data設定画面からヒヤリハットテーブルのリジェネレートを行います。以下の通りRegenerate schemaを押下してください。
すると、「報告発行回数」がテーブルに追加されます。
この項目は数値なのでTypeは「Number」、初期値であるINITIAL VALUEは「0」を設定しています。またユーザに見せる必要がない項目であるため、SHOW?とREQUIRE?のチェックは外しました。
これで「ヒヤリハット」テーブルへの「報告発行回数」の追加は完了です。Automationのエラーも消えているはずです。
次に、Actionの設定をしていきます。
ここも今回のブログのテーマとは本質的にあまり関係がないので、設定だけささっと説明していきます。
左側のメニューから「Action」を選択して上部の「＋」ボタン（Add Action）を押下し、さらに表示されるPOPUP画面で「Create a new action」ボタンを押下します。
するとアクションの設定画面が表示されますので、以下の図の通りに設定していきましょう。この辺の詳細な設定の意味なども、前述のブログを参照くださいませ。
なお、Set there columns欄の右側に設定する数式は以下の通りです。
[報告発行回数]+1以上で、アクションの設定は完了です。
これで、「ひな形Googleドキュメント」「Automation」「Action」の設定が全て完了したので、早速動作確認をしていきます。
動作確認
ヒヤリハットの参照画面内にある「報告書出力」ボタンを押下してみます。
すると、報告書発行回数に1が加算され、それをトリガにルートフォルダ＞Filesフォルダ内にPDFが出力されました。そして画像もGoogleドキュメントに作った表のサイズに合わせて出力されました！
なお余談ですが、アプリ上で表現できていた発生場所のピン表示は、二重のタグ(<<>>)で項目名を囲むやり方ではPDF内に表示できないようです。。。
なので、今回のヒヤリハット報告書でいうなら、マップ画像や座標の表示はあまり意味がなさそうですね。。。
画像の位置やサイズを工夫してみよう！
ここまではほぼPDF出力ブログの復習（長かったですね・・）で、ここからがこのブログの本題です！
表のサイズに合わせて画像が表示される旨は前述しましたが、サイズや位置を変えたい場合はどうしたらよいでしょう？
これも、Googleドキュメントの表を工夫して対応します。
・画像のサイズを調節したい場合
表示したい画像のサイズに合わせて、Googleドキュメントの表のセルサイズを調整します。
・画像の位置を調節したい場合
位置、と言っても縦位置は改行で対応できると思うので、基本的には横位置をどうするか？という話だと思います。
横位置については、表示したい位置の左側に枠線を透明にしたセルを配置して、その右に画像を表示するセルを配置すればOKです。
それぞれGoogleドキュメントの設定例と実際の表示イメージを見ていきましょう。
このようにPDF報告書上の画像のサイズや位置も、ちょっとした工夫で調整できそうです。
終わりに
今回は、先日のイベント出展対応の中で得られたヒントを元に、AppSheetから出力するPDFに画像を表示する方法についてご紹介しました。
実際にお客さまと会話して出てきた「生きたニーズ」なので、同じようなポイントで悩まれたりしている方も多いかもしれません。このブログが多くの方のお役に立てれば幸いです。
ということで、今回のブログは以上となります。ではまた次回ブログでお会いしましょう！ルネッサーンス！！
AppSheet勉強会を開催しております
弊社主催のAppSheet勉強会を毎月開催しております。
→弊社都合のため、当面AppSheet勉強会の開催は中止とさせていただきます。大変申し訳ございません。
IT内製化支援、Salesforceの運用・導入、DX化推進に関するご相談をお待ちしております
弊社では、ノーコード開発ツールを用いたIT内製化支援、Salesforceの運用・導入、および、DX化推進に関するご相談を承っております。お気軽に弊社お問い合わせサイトよりご相談などをお寄せいただければと思います。
ソシオネットHP：http://www.socionet.co.jp/
対話型定額制アプリ開発サービス「DXデビュー」：https://socionet.co.jp/dxdebut/
IT内製化支援支援サービス「DXオープンラボ」：https://socionet.co.jp/insourcing-support-service/
IT運用とDX化のワンストップサポートサービス「DXサポーターズ」：https://socionet.co.jp/dx-supporters/
Salesforce最適化支援サービス：https://socionet.co.jp/salesforce-service/
お問い合わせ：https://socionet.co.jp/contact/
この記事が気に入ったらサポートをしてみませんか？