Zeroqode プラグイン「Bubble Page to PDF Converter」の使い方ガイド

みなさん、こんにちは！

今回は Zeroqode の有料プラグイン「Bubble Page to PDF Converter」についてです。Bubble で PDF を作成する方法は過去の記事でもいくつか取り上げていますが、今回のプラグインは、ページをそのまま PDF化できるため、例えば複雑なレイアウトやスタイルをそのまま保持しつつ、ドキュメントやレポートを作成するのに非常に役立ちます。また、このプラグインでは、生成された PDF を独自の S3 バケットに保存することも可能です。

この記事では「Bubble Page to PDF Converter」の基本的な使い方と、独自の S3 バケットへの保存方法までをご紹介しています。PDF 生成における作業効率の向上に、ぜひお役立てくださいね！

bubble.io

なお、プラグインのバージョンについては、執筆時点で最新バージョン v1.135.0 のものとなっています。

1. 概要
2. Bubble アプリの作成
3. 独自 S3 バケットへアップロード
8. まとめ
参考リンク

1. 概要

基本的な使い方は、PDF化を実行したいページに、プラグインのエレメントである「Converter To PDF」を配置して、ワークフローを設定するのみとなっています。

ただし、本プラグインの特徴として、ページの PDF 化については非常に簡単に実行することができますが、プラグインの仕様上、内部的には一時的に Zeroqode 社が所有するプライベートバケットに作成した PDF がアップロードされます。この仕様は、ユーザーの AWS にファイルをアップロードする為に必要な処理で、Zeroqode 社によると、これらのファイルやURLは5分後に自動的に削除されるとのこと。

もし、クライアントとの契約上などの問題などで、Bubble 外部、もしくは独自バケット以外へのファイルアップロードが一時的にでも NG の場合は、別プラグインの使用をおすすめします。また、今回ご紹介するプラグインは、あくまでユーザーが表示しているページを PDF 化するものであるため、Backend workflow を使った処理は実装できません。

Bubble アプリ内での処理や Backend workflow での PDF 化をお考えの方は、PDF Conjure というプラグインで実装することが可能です。PDF Conjure については、以下の記事でご紹介していますので、併せてご参考くださいね。

blog.nocodelab.jp

「Bubble Page to PDF Converter」プラグインに含まれている機能は、以下の通りです。

項目	名称	説明
Elements	Converter To PDF	プラグインが提供する基本エレメント。
Events	A Converter To PDF Uploading To AWS Is Finished	PDF が AWS にアップロードされるプロセスが完了したときにトリガーされるイベント。
	A Converter To PDF Converting Is Finished	PDF 変換プロセスが完了したときにトリガーされるイベント。
	A Converter To PDF Presigned URL	PDF が生成され、プリサインド URL が利用可能になったときにトリガーされるイベント。
Actions	Generate PDF A Converter To PDF	ページまたは特定の要素を PDF に変換するアクション。必要な設定を行った上で実行します。
	Reset PDF States A Converter To PDF	PDF の変換状態をリセットするアクション。再度 PDF を生成する前に使用します。
	Save In S3 Bucket	生成された PDF を独自 S3 バケットに保存するアクション。保存先のバケット名やパスを設定します。

2. Bubble アプリの作成

では、早速プラグインをインストールしてアプリを作成していきましょう。プラグインタブで「Bubble Page to PDF Converter」を検索してインストールします（※本プラグインは有料です）。

また、本プラグインでは PDF の中に含めたくないエレメントがある場合は、そのエレメントを除外させることができます。その場合は、HTML の ID が使えるように Settings > General > Advanced options にある「Expose the option to add an ID attribute to HTML elements」のチェックをオンに設定しておいてください。今回の例では使用しますのでオンにしています。

ページ作成

今回のサンプルでは、下図のようなページを準備しました。ページ上部に、プラグインの Converter To PDF エレメントを配置して、PDF で出力しない Group のエレメントの HTML ID を「nonexport」と設定しています。

Converter To PDF エレメントでは、Max file size (MB)（ファイルの最大サイズ）の設定と、File uploads enabled（File manager で表示される Bubble アプリ内のファイルストレージへのアップロード可否）を設定します。

ここでは、ファイルの最大サイズを 50MB に、ファイルストレージへのアップロードを yes（有効）に設定しています。なお、Bubble アプリ内のファイルストレージではなく、独自バケットへのアップロードのみの場合、この File uploads enabled の設定は無視されます。

Converter To PDF エレメントを配置したら、PDF 化したい内容をデザインしてページを作成します。

ワークフロー作成

次にワークフローを作成していきます。今回はシンプルに「PDF 作成」というボタンがクリックされた場合に、PDF の作成を行います。設定するアクションは「Generate PDF a Converter to PDF」です。

設定項目の詳細は以下の通りです。

#	名称	説明
1	Element	プラグインがアクションを実行するエレメント。
2	Convert target	ページ全体をエクスポートするか、特定のIDを持つエレメントをエクスポートするかを選択します。
3	Element ID	Convert target が単一のエレメントに設定されている場合、そのエレメントのIDを入力します。
4	Orientation	PDFページの向きを定義します（横向きまたは縦向き）。
5	Format	生成されるページサイズ。標準フォーマットや「カスタムフォーマット」を設定できます。
6	Units	PDFページの寸法に使用される単位を指定します（カスタムフォーマットを使用する場合に有効）。
7	Custom Format	「カスタムフォーマット」を選択した場合に使用されるフィールドで、幅と高さをカンマで区切って設定します。
8	Calculate scale from "Custom Format"	「カスタムフォーマット」に基づいてエレメントのサイズを変換するための計算を行います。
9	Ignored elements ID	PDFを生成する際に無視するエレメントのIDを指定します。
10	Pagebreak IDs	異なるページに印刷されるエレメントのIDを指定します。
11	Page Break Inside Avoid	印刷中に2ページに分割されるのを避けたいエレメントのIDを設定します。
12	Direction of text	テキストの方向を指定します。例えば、右から左（ヘブライ語、アラビア語など）、左から右（英語、日本語など）。
13	Styles for Print	画面とプリンタで異なるスタイルを設定できます。
14	Top / Bottom / Left / Right Padding	それぞれのフィールドに指定された余白を設定します。
15	Height Header	ヘッダーの高さを設定します。
16	Header Template	印刷ヘッダー用のHTMLテンプレートを設定します。標準クラスを使用して、ページ番号やタイトル、総ページ数を表示します。
17	Height footer	フッターの高さを設定します。
18	Footer Template	印刷フッター用のHTMLテンプレートを設定します。ヘッダーと同様に、カスタムクラスを使用できます。
19	Output file name	PDFファイル名を設定します。/ は - に置き換えられます。
20	Upload File to AWS	チェックボックスがオンの場合、ファイルはBubbleのファイルマネージャに保存されます。Converter To PDF エレメントの File uploads enabled 項目とセットで使用されます。
21	Attach To Type	アタッチする Data type を指定します。ここで指定した Data type のプライバシールール（View attached files）の設定と紐づきます。
22	Attach To Type	アタッチするデータを指定します。
23	Auto Save PDF	チェックボックスがオンの場合、PDFファイルは自動的にユーザーのPCにダウンロードされます。

今回の例では Ignored elements ID にHTML ID の「nonexport」を設定、Output file name を「test」、Upload File to AWS と Auto Save PDF のチェックを「オン」に設定しました。

動作確認

では、一旦ここまでで PDF 作成ができるか Preview して動作確認してみましょう。Bubble アプリ内の File manager にアップロードされ、端末にファイルがダウンロードできていれば成功です。

3. 独自 S3 バケットへアップロード

次に AWS の独自バケットに作成した PDFファイルをアップロードする方法について、ご紹介します。

AWS S3 の準備

AWS S3 のバケットの設定については、以前にご紹介した記事でご紹介していますので、そちらをご参考ください。

blog.nocodelab.jp

なお、今回のサンプルではバケットポリシーで、IAM ユーザーが、バケットに対して PutObject アクションを実行する権限を付与する必要がありましたので、上記記事の内容に一部ポリシーを追加しました。今回使用したポリシーは以下のような内容となっています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::【バケット名】/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "https://【Bubbleアプリ名】.bubbleapps.io/*"
                }
            }
        },
        {
            "Sid": "AllowPutObjectForSpecificUser",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::【IAMユーザー情報】"
            },
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::【バケット名】*"
        }
    ]
}

バケットポリシーについては、アプリで必要な要件を検討して設定するようにしてください。以下は参考ドキュメントとなっていますので、併せてご参考くださいね。

docs.aws.amazon.com