こんにちは！今回は、BubbleでおすすめのPDF作成プラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」の実装方法をご紹介します。
請求書、イベントの予約確認、ユーザーへの各種書類など、BubbleでPDFを作成したいシーンはたくさんありますよね。
そんなシーンで役立つ2つのプラグインを通常WorkflowとBackend Workflowで実装する方法をご紹介する記事です。
- おすすめプラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」
- 目標
- PDF Conjurer実装手順【通常のWorkflow】
- PDF Conjurer実装手順【Backend Workflow】
- PDF Conjurerおまけ：改ページ制御
- Google Doc to PDF | Unlimited実装手順
- Google Doc to PDF | Unlimitedおまけ：Backend Workflow実装
- まとめ
- 参考
おすすめプラグイン「PDF Conjurer」と「Google Doc to PDF | Unlimited」
PDFを作成するプラグインは、表示されたページをそのままPDF化するタイプと、フォーマットに動的データを挿入してPDF化するタイプが代表的です。今回の記事では、後者のタイプでおすすめのプラグインを２つご紹介します。
1. PDF Conjurer
インストールアプリ数が最も多いPDF作成プラグインです。外部サービスやAPIを使わないのでデータをBubble外部に送信することなくPDFを作成でき、セキュリティ上安心です。Backend Workflowでの実行も含めて完全無料で使うことができます。
2. Google Doc to PDF | Unlimited
2022年1月に公開されたばかりのPDF作成プラグインです。Google Documentで作成したテンプレートを使用してPDFを作成します。ユーザーがアップロードするオリジナルのテンプレートでPDFを作成することもできます。Backend workflowでの実行も可能ですが、一ヶ月10ドルのサブスクリプション加入とGoogle Workspaceアカウント（有料）が必要になります。
上記2つのプラグインをざっくり比較すると以下のようになります。
特に注意すべき点はセキュリティ面です。PDF Conjurerについてはセキュリティ上の懸念点はありませんが、Google Doc to PDF | Unlimitedでは、開発者のGoogle Drive（Google Workspaceアカウント）に作成されたPDFが保存されることになります。これはGoogle Doc to PDF | Unlimitedの仕組み上避けることができず、連携したGoogle Workspaceアカウントの所有者及び管理者権限を持つ全ての人がPDFを閲覧出来る状態になってしまいます。
機密情報を含むPDFの作成を検討している場合はGoogle Doc to PDF | Unlimited以外のプラグインを使用するのがおすすめです。
- 【補足】Google Doc to PDF | Unlimitedの仕組み
Google Doc to PDF | Unlimitedは、Bubbleアプリと連携した開発者のGoogle Driveに保存されたテンプレートを指定のGoogle Drive共有フォルダにコピーし、コピーされたファイルに動的データを挿入する方法でPDFを作成します。そのためGoogle Driveへの保存はどうしても避けることができません。
PDFの保存先共有ドライブの設定でファイルへのアクセス権限を制限することはできますが、少なくとも開発者（Google workspaceアカウントの持ち主）及び管理者権限を持つアカウントは、ファイルを削除するまでの期間ファイルを閲覧出来る状態になってしまいます。
次の段落からは、PDF ConjurerとGoogle Doc to PDF | Unlimitedの実装手順をご紹介します。
目標
今回の記事では、以下の機能をプラグインを使って実装することを目標とします。
通常のWorkflowでの請求書PDFの作成とBubbleDBへの保存
Backend Workflowでの請求書PDFの作成とBubbleDBへの保存
請求書には、既にDBにあるデータを元に請求書件名、会社情報、請求内容の表（日付・品名・金額を表記）、ヘッダー（請求書件名）、フッター（ページ番号）を記載します。
PDF Conjurer実装手順【通常のWorkflow】
まずはPDF Conjurerの実装手順をご紹介します。
(1) PDF Conjurer実装準備
Bubbleアプリを作成したら、Pluginsタブで「PDF Conjurer」をインストールします。
PDF作成処理を行いたいページで、「Visual Element」から「PDF Model」を適当な位置に配置します。
(2) 請求データ作成
事前に、請求書に表示したいデータを準備しておきます。
「Invoice Data」という名前で以下のFieldを持つTypeを作成します。
実際のデータには以下のように20件作成しました（表の途中で改ページが入った場合の表示も確認したいので多めにデータを作成しています）。
(3) ページ作成
請求書作成処理を実行するページを作成します。今回は既にあるデータから請求書を作成するので、請求書件名からデータをPDF作成Workflowで呼び出せるようにします。
Search BoxエレメントとButtonエレメントを適当な位置に配置します。
Search Boxエレメントの検索対象は(2)で作成した請求書件名にしたいので、「Choice Style」を「Dynamic choices」にし、「Define list of options」をクリックしてTypeで「Invoice data」を選択し、「Field to search」を「invoice title」に設定します。
(4) PDF化Workflow作成
「請求書PDFを作成する」Buttonをクリックし、新規でWorkflowを作成します。
(4-1) ポイント
「PDF Conjurer」は、「Element Actions」>「PDF Model」から選択できる「Create text on a PDF Model」や「Create table on a PDF Model」などのActionを用いて文章や表、画像を挿入していきます。
上記のActionがWorkflowに挿入された順にPDFに挿入されるので、PDFに挿入したい順にWorkflowを構成する必要があります。
今回は最終的に以下のようなWorkflowになります。各Actionの詳細は以降の段落で解説します。
(4-2) Workflow開始とPDF化（Step1・14）
PDF ConjurerでPDFを作成するWorkflowでは、先頭に「Start PDFModel A（PDF Conjurerエレメント名）」を、最後に「Conjurer PDFModel A（PDF Conjurerエレメント名）」を設定します。それぞれ以下を参考に設定してください。
- 【Step1】Start PDFModel A … PDF ModelのActionのなかでも最初に実行しなければならないAction。サイズやページの向きを設定します。
| 項目 | 設定内容 |
|---|---|
| Page size | PDFのサイズ。今回はA4にします。 |
| Page orientation | ページの向き。今回はPortrait（縦方向）に設定します。 |
| Custom margin | PDF全体のマージン設定。デフォルト設定できれいにできるようになっているので、今回は「Set custom margins?」をチェックせずデフォルトのままにしておきます。まずはデフォルト設定で作成されたPDFを確認してからマージンを調整するのがおすすめです。 |
- 【Step14】Conjurer PDFModel A … Workflowの最後でPDFを作成するAction。ファイル名やダウンロードについて設定します。
| 項目 | 設定内容 |
|---|---|
| File name | 作成するPDFの名前。今回は、「PDFConjurer_作成日時」に設定します。 |
| ★Save to database? | 作成したPDFをBubble DBに保存したい場合は「yes」を選択。DBへの保存は別のWorkflowで設定しますが、そのWorkflowのトリガーとなるCustom event（PDFModel A finished uploading and is available in element state）を使えるようにするにはこの項目を「yes」にする必要があります。 |
| ★Attach PDF to | ファイルのアクセス権を制限します。今回は作成者のみがファイルのURLにアクセスできるようにしたいので、「Current User」に設定します。 |
| ★Disable browser down | 作成したPDFをユーザーのブラウザでダウンロードしない場合は「yes」にします。今回は確認しやすいように「no」にします。 |
※作成したPDFをBubble DBに保存しない場合は、★がついている項目を空欄のままにしておきます。
(4-3) フォントのダウンロード・ヘッダーとフッターの有効化（Step2～4）
次に、Workflowの冒頭で実行する必要があるActionを解説します。
それぞれ明確にどの順番で実行すべきかは決められていませんが、全て「Define new style...」や「Create...」などのActionよりも前に実行する必要があるので「Start PDFModel」の直後に実行するのがおすすめされています。
- 【Step2】Load font PDFModel A … フォントを読み込むAction。デフォルトフォントの「Robot」は日本語未対応のため、日本語で表記する場合は日本語対応しているフォントをファイルをWorkflow中で読み込む必要があります。
まずはフォントファイルをBubble DBにアップロードします。今回は、Google Fontsで日本語対応しているフォントから「Shippor Mincho B1」を選択しました。
ページ右上の「Download family」ボタンからファイルをダウンロードします。
※注意…フォントファイルには「True Type」と「Open Type」がありますが、PDF Conjurerは「True Type」にのみ対応しています。「Open Type」のファイルはロードできないので、Google Fontからダウンロードしたフォントファイルが「True Type」であるか確認するようにしてください。
「Load font...」でフォントファイルを読み込むために、ダウンロードしたフォントファイルをBubble DBに保存します。以下を参考にData Typeを作成してください。
作成したDBにデータを保存します。4種類のファイルがあれば十分です。
「Load font...」Actionで読み込むフォントファイルを設定します。以下を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| Name | フォントを識別するための名前。後の「Define new style for...」で使用します。今回はフォント名の通り「ShipporiMinchoB1」とします。 |
| Regular / Bold / Italics / Bolditalics | フォントファイルの保存先URL。4つの項目を全て埋める必要がありますが、同じファイルでも問題ありません。日本語の場合イタリックは使わないことが多いので、今回はItalicsでは「Medium」タイプを、Bolditalicsでは「ExtraBold」を読み込みます。 |
- 【Step3・4】Activate header / footer PDFModel A … ヘッダー/フッターを有効化するAction。ヘッダー/フッターを挿入したい場合に必要です。
[Activate header]
| 項目 | 設定内容 |
|---|---|
| Hide header elements on specific pages? | 特定のページでヘッダーを非表示にしたい場合チェックをオンにします。今回は、1ページ目ではヘッダーを表示したくないのでチェックをオンにします。 |
| Hide elements on | ヘッダーを非表示にしたいページ数を設定します。今回は上記の通り、「1」とします。 |
[Activate footer]
| 項目 | 設定内容 |
|---|---|
| Show page number?(counter) | ページ番号を表示したい場合、チェックをオンにします。 |
| Counter alignment | ページ番号の整列位置を選択します。今回は「right」に設定します。 |
| Right margin | フッターの右マージン。右寄せにするので、右マージンを「20」に設定します。 |
(4-4) スタイルの定義（Step5～9）
次に、PDFに挿入するテキストや表、ヘッダー・フッターのスタイルを定義します。ここで定義したスタイルをこの後の「Create text...」等で指定するので、「Create text...」よりも前で実行する必要があります。
- 【Step5～9】Define new style for PDFModel A … テキストのフォント・サイズ・カラー・整列位置を設定するAction。
| 項目 | 設定内容 |
|---|---|
| Style name | スタイルの名前。それぞれスタイルの適用先を含むと間違いにくくなります。 |
| Font size | フォントサイズ。一度適当にサイズを設定して、作成したPDFを確認してサイズを修正するのがおすすめです。 |
| Bold / Italic | 太字・イタリック体にしたい場合にチェックをオンにします。※Boldをオンにした場合、「Load font...」で「Bold」として読み込んだフォントファイルが適用されます。Italicも同様です。 |
| Alignment | 整列位置。 |
| Text color | カラー。 |
| Font name | 適用するフォントの名前。「Load font...」で設定した名前を設定します。今回は「ShipporiMinchoB1」です。 |
(4-5) テキスト・表の挿入（Step10～13）
ここでは、PDFに挿入するテキストや図の文言やデータを設定します。
- 【Step10～12】Create text on PDFModel A … PDFに挿入するテキストの文言やスタイルを設定するAction。
| 項目 | 設定内容 |
|---|---|
| Text | 挿入する文言。静的データはもちろん動的データも設定できます。 |
| Style | 適用するスタイルの名前。Step5～9で定義したスタイル名をそれぞれ入力します。 |
| Use text custom margins? | カスタムマージンを設定する場合はチェックをオンにします。 |
| Margin | 上下左右のマージン。見やすくなるようにそれぞれTopとLeftのマージンを設定します。 |
| Is this element being put into the header? | このテキストをヘッダー部分に挿入する場合はチェックをオンにします。「Activate header」だけではヘッダーが空欄のままなので注意！ |
- 【Step13】Create table on PDFModelA … PDFに挿入する表の文言やデータ、ヘッダー等を設定するAction。
| 項目 | 設定内容 |
|---|---|
| Body Text Style | 表の本文部に適用するスタイルの名前。今回は、Step9で定義したスタイル「table body」を適用します。 |
| Table Column Width | 表の幅の設定。「Fit available space」（マージンを除いたページいっぱいに表を表示）、「Fit content」（表の中身に幅を合わせる）から選択できます。今回は「Fit available space」を選択します。 |
| Create header row in this table? | 列名を表示する行（テーブルヘッダー）を作成する場合はチェックをオンにします。今回は分かりやすい表を作成したいのでチェックをオンにします。 |
| Header Text Style | 表のヘッダー部に適用するスタイルの名前。今回は、Step8に定義した「table header」を適用します。 |
| Table Layout | 表のレイアウト。「Standard」「No Borders」「Header Line Only」「Light Horizontal Lines」「Strong Outer Borders」「Zebra」から選択できます（レイアウトの例は以下）。今回は、「Strong Outer Borders」を選択します。 |
| ★Column Header | 列名（テーブルヘッダー）。今回は、日付・品名・金額を「First」「Second」「Third」それぞれに設定します。 |
| ★Column Body | 列の本文に表示したい内容。今回は、請求書件名から取り出した請求データを日付昇順で表示したいので、「Do a search for Invoice data」で上記画像のように設定します。 |
※★の項目について、1列目以降を追加する場合は「Another Column」のなかで1列ずつ設定していきます。
(5) PDF保存Workflow作成
次に、(4)で作成したPDFを保存するWorkflowを作成します。
PDF Conjurerで作成したPDFの保存には、トリガーイベント「A PDF Model finished uploading and is available in element state」で始まるWorkflowを新たに作成する必要があります。
※Bubble DBに保存したくない、かつFile managerでも確認できないようにしたい場合は、Action「Conjure PDFModelA」の「Save to database?」を「no」に設定してください。
まずは、作成したPDFを保存するData Typeを作成します。以下を参考に作成してください。
次に、「Workflow」タブに移動し、新規でWorkflowを作成します。
「Click here to add an event...」をクリックし、「Elements」 > 「A PDF Model finished uploading and is available in element state」を選択します。Step1に「Data（Things）」 > 「Create a new thing」を追加します。Actionの詳細は以下を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| Type | 先程作成した「Invoice PDF」を選択します。 |
| file | 「This PDFModel's Saved PDF」を設定します。PDF Conjurerは、PDFModelエレメントのElement State「Saved PDF」に、Action「PDF Conjure」で作成されたPDFが保持されるよう設定されています。ここではこの情報を用いてPDFをBubbleのTypeに保存します。 |
| file name | 「This PDFModel's Saved PDF's file name」を設定します。これは、PDF作成Workflowの「Conjure PDFModelA」で設定した「file name」です。 |
PDFの作成・保存の全てのWorkflowの設定が完了しました。
(6) 動作確認
PDF Conjurerエレメントを配置したページをプレビューで開き、(2)で作成した請求データの請求書件名をSearchboxで入力し、「請求書PDFを作成する」ボタンをクリックしてみましょう！
ブラウザでPDFのダウンロードが実行されます。「Data」タブからPDFが保存されているか確認してみます。
問題なく保存されていますね。File managerから分かるようにファイルのアクセス権（Attach to）も正しく設定されています。
PDF Conjurer実装手順【Backend Workflow】
ここからは、Backend WorkflowでPDF Conjurerを使ったPDF作成・保存の実装手順をご紹介します。
請求内容のデータは通常のWorkflow実装手順で作成したものを使用します。なお、Backend Workfowで実行する場合PDF Conjurerエレメントをページに配置する必要はありませんので、早速Workflowを作成していきましょう！
(1) PDF化Workflow作成
(1-1) ポイント
通常のWorkflowではAcitonを「Element Actions」から選択しましたが、Backend Workflowでは「Plugins」から選択します。
テキストや表の挿入などのActionの基本的な設定はElement Actionsとほとんど同じなので解説は省略します。
(1-2) Workflow開始とPDF化（Step1・14）
「click here to add a backend workflow」 > 「New API workflow」から新規でWorkflowを作成し、以下を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| Expose as a public API workflow | チェックをオンにします。※2022/8/1追記 |
| This workflow can be run without authentication | 今回は認証を省略したいのでチェックをオンにします。 |
| Parameters | PDFに表示したい値をパラメータに設定します。請求書件名を「title」、請求内容の日付・品名・金額をそれぞれ「date」「name」「price」とします。請求内容は表にするので、「Is a list / array」をチェックします。 |
※2022/8/1追記
作成したPDFをDBに保存したい場合、「Expose as a public workflow」のチェックを必ずオンにしてください。チェックがオフの場合、PDFが保存できないことが確認できています。
- 【Step1】Initialize PDF document … Backend WorkflowでPDFを作成するとき、Step1に設定する必要があるAction。Element Actionsの「Start PDFModelA」と同じ位置づけ。ページのサイズや方向を設定します。
- 【Step14】Conjure PDF … 設定した内容からPDFを作成するAction。ファイル名を設定します。
こちらの設定はStep10までの設定後に行うのがおすすめです。また、Step2以降で、Backend Workflow特有の設定項目が追加されます。以下を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| Previous step result | 直前のStepのActionの結果を設定します。必須項目です。「Result of step X (........)'s configurations」の形式になります。「Conjure PDF」の前に実行する他のActionを全て追加してから埋めるのがおすすめです。 |
| file name | 作成するPDFのファイル名。今回は、Backend Workflow作成分と分かるよう「PDFConjurer_BW_作成日時」とします。 |
(1-3) フォント・ヘッダー/フッターの有効化（Step2～4）
【Step2～3】Activate header / footer on PDF … ヘッダー・フッターを有効化するAction。
【Step4】Load font to PDF … フォントを読み込むAction。
| 項目 | 設定内容 |
|---|---|
| Previous step result | 直前のStepのActionの結果を設定します。必須項目です。「Result of step X (........)'s configurations」の形式になります。 |
(1-4) スタイルの定義（Step5～9）
- 【Step5～9】Define new style to PDF … テキストのフォント・サイズ・カラー・整列位置を設定するAction。
(1-5) テキスト・表の挿入（Step10～13）
- 【Step10～12】Add text on PDF … PDFに挿入するテキストの文言やスタイルを設定するAction。
| 項目 | 設定内容 |
|---|---|
| Previous step result | 直前のStepのActionの結果を設定します。必須項目です。「Result of step X (........)'s configurations」の形式になります。 |
| Text | ヘッダーと請求書件名には、Backend WorkflowのKeyに設定した「title」を設定します。 |
- 【Step13】Add table on PDF … PDFに挿入する表の文言やデータ、ヘッダー等を設定するAction。
| 項目 | 設定内容 |
|---|---|
| Previous step result | 直前のStepのActionの結果を設定します。必須項目です。「Result of step X (........)'s configurations」の形式になります。 |
| Column body | 1列目、2列目、3列目にそれぞれBackend workflowのKeyに設定した「date」「name」「price」を設定します。 |
(1-6) PDFの保存（Step15～16）
ここまでは通常のWorkflowでの実装手順とほぼ同じでしたが、このゾーンではBackend Workflow特有のAction追加と、別のWorkflow作成が必要になります。
通常のWorkflowとBackend workflowでのPDFの保存方法を比較してみます。通常のWorkflowでは「Conjure PDF」を含むPDF作成Workflowと、BubbleのDBに保存するためのWorkflowが必要でした。
Backend WorkflowでもWorkflowが2つ必要になります。「Conjure PDF」を含むPDF作成Workflow（Backend Workflow: conjurer_pdf）と、作成したPDFをBubbleのサーバーに保存するWorkflow（Backend Workflow: upload_pdf）です。
Backend WorkflowのAction「Conjure PDF」では、作成したPDFファイルのファイル名とbase64形式のデータが返されます。それをBubbleのサーバーに保存するBackend workflow「upload_pdf」を呼び出すActionが「Upload PDF（Step15）」です。
- Backend Workflow「upload_pdf」
まずはPDFをアップロードするBackend Workflowを作成します。
「click here to add a backend workflow」 > 「New API workflow」から新規でWorkflowを作成し、Step1に「Data」>「Return data from API」を追加します。
■Workflow
| 項目 | 設定内容 |
|---|---|
| API workflow name | 今回は「upload_pdf」に設定します。 |
| This workflow can be run without authentication | Workflow「pdf_conjurer」と同様、チェックをオンにします。 |
| Parameters | 作成したPDFが入るKey…「file」、Type…「file」を設定します。 |
■【Step1】「Return data from API」
| 項目 | 設定内容 |
|---|---|
| Key 1 | ファイル名。 |
| Key 2 | アップロード先URL。 |
- 【Step15】Upload PDF … 「Conjure PDF」で作成したPDFをBubbleサーバーにアップロードします。
Workflow「pdf_conjurer」に戻って、Step15「Upload PDF」を以下を参考に設定します。
| 項目 | 設定内容 |
|---|---|
| Upload file URL | Workflow「upload_pdf」のURLです。「Settings」>「API」タブの「Workflow API root URL」を参考に設定します。今回はhttps://YOUR_DOMAIN/version-test/api/1.1/wf/upload_pdfになります。 |
| File input name | Workflow「upload_pdf」で設定したファイルタイプのパラメータの名前。今回は「file」です。 |
| File name | PDFのファイル名。Step14「Conjure PDF」で設定した「File name」になります。 |
| Content | PDFの中身。Step14「Conjure PDF」の結果になります。 |
| Make this file private? | PDFのプライベート設定。今回は「no」にします。 |
- 【Step16】Create a new Invoice PDF … 作成したPDFをData Type「Invoice PDF」に保存します。
確認用として、通常Workflowの実装手順で作成したData Type「Invoice PDF」に、base64形式のファイルコンテンツを保存するField「base64」を新たに作成しました。確認しない場合は 作成不要です。
| 項目 | 設定内容 |
|---|---|
| base64 / file name | どちらもStep14「Conjure PDF」の結果です。 |
| file | Step15「Upload PDF」後PDFファイル化されるので、Step15の結果が入ります。 |
これでBackend Workflowの全ての設定が完了しました。
(2) ページ作成
動作確認のため、ButtonエレメントクリックでBackend Workflowを実行できるようにします。
通常Workflowの実装で作成したページに新たにButtonエレメントを配置し、ButtonエレメントクリックをトリガーにBackend Workflowを呼び出すWorkflowを設定します。
Step1に「Custom Events」>「Schedule API Workflow」を追加し、以下を参考に設定してください。
| 項目 | 設定内容 |
|---|---|
| API Workflow | PDFを作成するBackend Workflow。今回は「pdf_conjurer」とします。 |
| Scheduled date | 動作確認用でボタンクリック時に実行したいので、「Current date/time」にします。 |
| title | 「pdf_conjurer」で設定した請求書件名のパラメータ。SearcBoxの入力結果を設定します。 |
| date | 「pdf_conjurer」で設定した請求内容の日付のパラメータ。titleから該当データを参照します。 |
| name | 「pdf_conjurer」で設定した請求内容の名前のパラメータ。titleから該当データを参照します。 |
| price | 「pdf_conjurer」で設定した請求内容の金額のパラメータ。titleから該当データを参照します。 |
(3) 動作確認
(2)で作成したページをプレビューで開き、SearcBoxに請求書件名を入力して追加したボタンをクリックします。
Data TypeとFile managerを確認して、以下のようにPDFが保存されていれば成功です。
PDF Conjurerおまけ：改ページ制御
PDF Conjurerでは、各挿入要素の「Page break」で改ページの設定もできます。
| 値 | 改ページ |
|---|---|
| Unspecified | 指定しない。 |
| Before | この要素の前で改ページする。 |
| After | この要素の後で改ページする。 |
今回作成した請求書PDFの「Create a table」の改ページ設定を比較すると以下のようになります。
なお、PDFConjurerでは表の途中で改ページが入っても行の中途半端なところで切れたりしないうえ、新しいページのトップに表のヘッダーが自動で表記されます。
表を含むPDF作成を検討している場合に特に便利な機能ですね！
Google Doc to PDF | Unlimited実装手順
ここからは、プラグイン「Google Doc to PDF | Unlimited」でPDF作成機能を実装する手順をご紹介します。各自プラグインのインストール、Google Workspace・Google Cloudアカウント作成など必要な準備を行ってください。
(1) Google Cloud設定
Google Cloud Platformにログインし、「プロジェクトの選択」から適当な名前をつけて新規プロジェクトを作成します。
次に、プラグインの実行に必要なGoogle APIのアクセス権限を付与します。プロジェクトダッシュボードの画面左上のナビゲーションメニューから「APIとサービス」>「ライブラリ」を開き、「Google Doc API」を有効化します。
サービスアカウントを作成します。画面左上のナビゲーションメニューから「IAMと管理」>「サービスアカウント」を開き、必要な情報を入力してサービスアカウントを新規作成します。作成後、サービスアカウントの「メール」と「一意のID」をコピーしておきます。
JSONキーを作成します。サービスアカウント一覧から今作成したサービスアカウントを開き、上部のタブ「キー」をクリックして「鍵を追加」をクリックします。JSONキーファイルは作成後PCにダウンロードされるので、ダウンロードされたファイルをwordで開いて保存しておきます。
(2) Google Workspace設定
Google Workspaceアカウントを作成後、Google Workspace Consoleにログインします（管理コンソールログインには管理者権限が必要です）。
管理コンソールにログインしたら、サービスアカウントにGoogle Workspaceアカウントへのアクセスを許可します。
画面左上のナビゲーションメニューから「セキュリティ」>「アクセスとデータ管理」>「APIの制御」を開き、「ドメイン全体の委任を管理」から作成したサービスアカウントとスコープを追加します。
クライアントID欄にはサービスアカウントの「一意のID」を、スコープ欄にはhttps://www.googleapis.com/auth/documents, https://www.googleapis.com/auth/driveを入力します。
(3) テンプレート作成
Google Doc to PDF | Unlimitedでは、Google Workspaceの共有ドライブに保存したテンプレートにデータを挿入してPDFを作成します。データを挿入したい箇所にはプレースホルダーという要素を用います。現時点で挿入できるデータは、テキスト・イメージ・表のみのようです。
※プレースホルダー例
| 挿入データ | プレースホルダー |
|---|---|
| テキスト | {{txt-PLACEHOLDER NAME}} |
| イメージ | {{img-PLACEHOLDER NAME}} |
| 表 | {{tbl-PLACEHOLDER NAME}} 表にヘッダーがある場合、プレースホルダーを表のヘッダー部に挿入する必要があります。 |
※PLACEHOLDER NAME部分に使えるのはa-z、0-9、半角スペースです。
テンプレートを作成してみましょう。Google Workspaceアカウントにログインし、Google Driveを開いて「共有ドライブ」に新規でGoogle Docsファイルを作成します。カラーや文字サイズなどもここで編集します。また、冒頭でも紹介しましたがGoogle Doc to PDF | Unlimitedではヘッダー・フッターにデータを挿入できないのでご注意ください。
今回は「TemplateA」というファイル名で以下のようなテンプレートを作成しました。
作成したら、「共有ドライブ」（またはテンプレートを保存した共有ドライブ）を右クリックし「共有ドライブの設定」を開き、全てのチェックをオンにします。
(4) アクセストークンWorkflow作成
Google Doc to PDF | Unlimitedの実行時にはGoogleから付与されるアクセストークンが必要になります。
(4-1)Data Type作成
Data Type「Google Doc to PDF Credential」（アクセストークンを保存・更新）
Data Type「Google Doc to PDF JSON key」（JSON keyを保存）
(4-2) JSON key保存
発行したJSON keyを「Google Doc to PDF JSON key」に保存します。
(1)でwordで開いて保存したJSONファイルを開き、wordの置換機能を使って"private_key"に含まれる\nを全て削除します（\nは改行を意味します）。
\nを全て削除した"private_key"の値をコピーします。このとき、冒頭の-----BEGIN PRIVATE KEY-----と末尾の-----END PRIVATE KEY-----も含めてコピーします。
コピーした値を、新規で作成する「Google Doc to PDF JSON key」のkey Fieldに貼り付けます。貼り付けたら最後に改行して保存します。
(4-3) Workflow作成
アクセストークンを作成・更新するWorkflowはBackend Workflowで作成します。
(5) ファイル削除Workflow
PDF化したファイル（Google Document）がGoogle Driveに保存されるので、PDF作成後に呼び出すファイル削除WorkflowをBackend Workflowで作成します。
(6) PDF化Workflow作成
(6-1) Data Type Field追加
挿入データをJSON形式で送信する必要があります。今回は、データをJSON形式で保存するFieldも追加します。
JSON形式のFieldには以下のような形式でデータを保存します（JSON形式のデータ送信方法は(6-2)でご紹介しています）。
(6-2) Workflow作成
PDF Conjurerと同様に、請求書件名を選択しButtonエレメントクリックでPDF作成Workflowを実行できるページを作ります。Workflow、JSON形式のデータ送信方法は以下を参考に作成してください。
- JSON形式のデータ送信例
Text
[
{
"placeholder":"{{txt-multiline text}}",
"content":"COMPANY NAME$nl東京都○○区△△1-2-3$nl123-456-789$nl代表者名",
"bulletPreset":"none"
}
]
※複数行テキストの改行は$nlを挿入
Table
[
{
"placeholder":"{{tbl-data}}",
"data":[
["dateA", "nameA", "priceA"],
["dateB", "nameB", "priceB"],
["dateC", "nameC", "priceC"]
],
"withHeader": false
}
]
Image
[
{
"placeholder": "{{img-placeholder name}}",
"uri": "https://imageurl.png",
"height": 100,
"width": 100
}
]
(7) 動作確認
PDF作成ページで請求書件名を選択後、ボタンクリックで
・PDFがブラウザでダウンロード
・PDFがGoogle Driveの指定の共有ドライブに保存された後削除
・PDFがData Type「Invoice PDF」に保存
されれば成功です。
ちなみに、作成されたPDFの改ページは以下のようになります。PDF conjurerでは表の途中で改ページされた場合新しいページの表の先頭にヘッダーが表示されましたが、Google Doc to PDF | Unlimitedではありません。
Google Doc to PDF | Unlimitedおまけ：Backend Workflow実装
Google Doc to PDF | UnlimitedをBackend Workflowで実装する場合は、以下またはプラグイン開発者が公開しているデモアプリエディターをご参考ください。デモアプリではユーザーがアップロードしたテンプレートでPDFを作成するWorkflowも紹介されています。
まとめ
今回は使い勝手の良いPDF作成プラグインの実装方法をご紹介しました。本記事では請求書を例にしましたが、PDF作成は請求書以外にも色々なシーンで必要になりそうな機能ですよね。ぜひプラグインを使いこなしてくださいね！
参考
PDF Conjurer
Forumスレッド
Backend Workflow実装ドキュメント
デモアプリ
Google Doc to PDF | Unlimited
Forumスレッド
開発者ドキュメント
デモアプリ
