メインコンテンツまでスキップ

Makeを使用したHTMLテンプレートからの動的な請求書作成

5分読み取り
Sankalp Mishra
PDF4me Team

動的な文書を作成する必要性は、あらゆるビジネスにおいて不可欠な要素です。当社では、受信者ごとに動的なデータを用いてカスタマイズする必要のあるデジタル文書を数多く取り扱っています。見積書、契約書、請求書、レポートなど、共通のテンプレートを使用しながらも動的なデータを含む文書がこれに該当します。また、事業規模によっては、これらの文書を大量に一括して作成する必要もあります。

場合によっては、ブラウザで表示したりリンクとして共有したりできるHTML形式のドキュメントを生成する必要もあります。請求書や領収書などは、受信者のブラウザで素早く表示できるようにHTMLページとして生成されます。PDF4meでは、HTMLテンプレートとデータソースを使用して、このようなHTMLドキュメントを生成できます。 口ひげのレンダリングまたはメールマージ 必要に応じて、必要な数のドキュメントを生成できます。

PDF4me MakeのGenerate Documentアクション HTMLテンプレートを使用して、HTML形式の動的なドキュメントを生成するシナリオを作成できます。

HTMLテンプレートを使用した動的な請求書作成​

テンプレートと動的データが準備できていれば、生成プロセスを自動化できます。テンプレートはクラウドストレージに保存されるHTMLファイルである必要があります。データはスプレッドシート、CSV、JSON、XML、またはデータリストのいずれでも構いません。

それでは、Makeシナリオを使用して、以下のようなサンプル請求書を作成してみましょう。

このユースケースでは、サンプルHTMLテンプレートはDropboxの場所に保存されていることが想定されています。

ファイル監視トリガーを追加してシナリオを開始​

テンプレートの到着を監視するDropboxモジュールを作成します。新しいHTMLテンプレートファイルがフォルダに到着するとすぐに、シナリオがトリガーされます。

Dropboxのファイルモジュールに注目してください

Dropbox用のダウンロードファイルモジュールを追加する​

ソースフォルダ内でテンプレートファイルが検出されると、ダウンロードファイルアクションを持つDropboxモジュールが、ストレージからPDF4meアクションにファイルを渡します。ダウンロードファイルアクションを2つ追加する必要があります。1つはHTMLテンプレートをダウンロードするためのものです。

HTMLテンプレートをダウンロード

テンプレートに対応するJSONデータをダウンロードするための別の方法もあります。

JSONデータファイルをダウンロードする

ドキュメント生成アクションにPDF4meモジュールを追加する​

次に、PDF4meモジュールを「ドキュメント生成」アクションとともに追加する必要があります。ここでは、テンプレートタイプをHTML、出力タイプをHTML、そして入力データソースを設定する必要があります。入力データはフィールドに直接入力することも、今回のようにJSONファイルからデータを取得するように設定することもできます。

PDF4meでドキュメントを生成するアクション

ユースケースにおけるテンプレートの入力フィールドのデータは、以下のようになるはずです。

{
  "Documents": [
    {
      "header": {
        "docType": "Original Copy"
      },
      "body": {
        "Column1": "Quantity",
        "Column2": "Description",
        "Column3": "Unit Price",
        "Column4": "Total",
        "Invoice": {
          "number": 14957,
          "date": "25-02-2022",
          "instructions": "Instruction Invoice 1",
          "subTotal": 200150,
          "tax": "18%",
          "dueDate": "25-03-2022",
          "shipping": "200"
        },
        "Biller": {
          "phone": "989797",
          "fax": "998463",
          "email": "[email protected]",
          "web": "www.doc1.com",
          "address": {
            "company": "Organization 1",
            "street": "Street 1",
            "city": "City 1",
            "zip": "123456"
          }
        },
        "Recepient": {
          "name": "recepeint 1",
          "address": {
            "street": "testveien 3 ",
            "city": "City 1",
            "zipcode": "0555",
            "country": "Country 1"
          }
        },
        "Product": [
          {
            "quantity": 1,
            "description": "item 1",
            "unitPrice": 45,
            "totalPrice": 867
          },
          {
            "quantity": 2,
            "description": "item 2",
            "unitPrice": 123,
            "totalPrice": 3464
          },
          {
            "quantity": 3,
            "description": "item 3",
            "unitPrice": 323,
            "totalPrice": 6564
          }
        ]
      },
      "footer": {
        "phone": "phone123",
        "fax": "fax123",
        "email": "[email protected]",
        "web": "www.123.com"
      }
    }
  ]
}

複数の出力ファイルを処理するためのイテレータを追加します。​

明らかなように、PDF4meアクションはデータに基づいて複数のファイルを生成します。これを処理するには、各ファイルを次のアクションのために処理するMake Iteratorモジュールが必要です。

出力ファイルを処理するためのイテレータ

出力ファイルを保存するためにDropboxアップロードモジュールを追加します。​

Dropboxモジュールを作成し、「ファイルのアップロード」アクションを使用して、すべてのHTMLファイルを指定したフォルダに保存します。HTMLテンプレートは出力としてHTMLのみを生成します。出力としてPDFファイルを生成したい場合は、「PDFに変換」アクションを追加できます。

このシナリオの出力は、以下の文書と似たものになるはずです。