チュートリアル

請求書のテンプレートを 1 つ作り、API で PDF を生成するところまでを通しで体験します。所要時間はおよそ 5 分です。

あらかじめアカウントを作成してログインしておいてください。手順 6 の PDF 生成にはサブスクリプションの登録も必要です（未登録のままだと 403 が返ります）。

このチュートリアルで作るもの

宛名・金額・支払期限の 3 つを差し替えられる請求書テンプレートを作り、最終的にはプログラムから PDF を生成できる状態にします。手順は次の 7 ステップです。

テンプレートを作る
HTML を書く
変数を定義する
保存してテンプレート ID を控える
API キーを発行する
PDF を生成する
生成履歴を確認する

スクリーンショットのオレンジの枠は、その手順でクリックする場所です。番号が付いているものは操作の順番を表します。画像はクリックすると拡大できます。

1. テンプレートを作る

ヘッダーの テンプレート を開き、右上の「テンプレート新規作成」をクリックします。

テンプレート一覧画面。右上に「テンプレート新規作成」ボタンがある — テンプレート一覧。作成済みのテンプレートもここに並ぶ

2. HTML を書く

エディタが開きます。左側が コード、右側が プレビュー です。コードを書き換えるとプレビューがすぐに追従します。

中央のテンプレート名（初期値は「無名のテンプレート」）をクリックすると名前を変更できます。ここでは請求書サンプル にしておきます。

差し替えたい箇所は {{ 変数名 }} と書きます。次の HTML をコードタブに貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        font-family: sans-serif;
        padding: 48px;
        color: #1f2937;
      }
      h1 {
        font-size: 24px;
        border-bottom: 2px solid #4f46e5;
        padding-bottom: 8px;
      }
      .to {
        margin-top: 32px;
      }
      .amount {
        margin-top: 24px;
        font-size: 32px;
        font-weight: bold;
        color: #4f46e5;
      }
    </style>
  </head>
  <body>
    <h1>請求書</h1>
    <p class="to">{{ customerName }} 様</p>
    <p>下記のとおりご請求申し上げます。</p>
    <p class="amount">¥{{ amount }}</p>
    <p>お支払期限: {{ dueDate }}</p>
  </body>
</html>

テンプレートエディタ。左にコード、右のプレビューに undefined variable のエラーが表示されている — 貼り付けた直後。変数をまだ定義していないので、プレビューはエラーになる

上のように undefined variable: customerName というエラーが出ますが、異常ではありません。プレビューは変数の初期値を使って描画するため、まだ変数を定義していないうちはエラーになります。次のステップで解消します。

3. 変数を定義する

変数タブに切り替えて「追加」を 3 回押し、次のように入力します。

変数名	種別	初期値
`customerName`	文字列	山田太郎
`amount`	文字列	10,000
`dueDate`	文字列	2026年9月30日

3 つ目を入力し終えるとプレビューのエラーが消え、請求書が表示されます。

変数タブで 3 つの変数を定義し、プレビューに請求書が表示されている状態 — 変数を定義するとプレビューが描画される

初期値 はプレビューと後述の生成画面で使われる値です。API から PDF を生成するときは、リクエストで渡した値が初期値の代わりに使われます。

明細行のように配列やオブジェクトを渡したい場合は、種別を JSON にします。詳しくはテンプレートを参照してください。

4. 保存してテンプレート ID を控える

右上の「保存」をクリックします。保存するたびに新しいバージョンが作られ、メインバージョンとして設定されたものが API から使われます。

テンプレート一覧に戻ると テンプレート ID が表示されます。これが API リクエストの templateId に指定する値です。左のアイコンでコピーできます。

テンプレート一覧の行。テンプレート ID とコピーボタン、PDF生成ボタンが並んでいる — テンプレート ID は一覧からコピーできる

5. API キーを発行する

ヘッダーの API キー を開き、「API キー発行」をクリックします。用途がわかる名前（たとえば「開発環境用」）を付けておくと、あとで無効化するときに迷いません。

API キーの発行ダイアログ。名前の入力欄に「開発環境用」と入力されている — 用途がわかる名前を付けて発行する

発行するとキーが表示されます。

発行された API キーが表示されているダイアログ — キーの全体が表示されるのは発行直後のこの画面だけ

キーの全体が表示されるのはこの画面だけです。一覧に戻ると先頭の数文字しか表示されません。いま必ずコピーして、環境変数ファイルなど安全な場所に保管してください。ソースコードに直接書いたり、公開リポジトリに含めたりしないでください。

PRINTGRAPH_TOKEN="pgh_..."

6. PDF を生成する

テンプレート一覧の「PDF生成」から生成画面を開きます。変数に値を入れて「この場で PDF をダウンロード」を押すと、コードを書かずに結果を確認できます。

PDF 生成画面。API キーの選択欄と、ダウンロードボタン・言語別のタブが並んでいる — 同じ画面に PHP / Node.js / curl のサンプルコードが用意されている

下部のタブには、いま開いているテンプレートの ID と選択中の API キーを埋め込んだサンプルコードが表示されます。そのままコピーして使えるので、まずはここから始めるのが確実です。

curl

curl -X POST https://api.printgraph.jp/v1/pdf/generate \
  -H "Authorization: Bearer $PRINTGRAPH_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "templateId": "あなたのテンプレートID",
    "params": {
      "customerName": "山田太郎",
      "amount": "10,000",
      "dueDate": "2026年9月30日"
    }
  }' \
  --output invoice.pdf

Node.js / TypeScript

import { Printgraph } from "@printgraph/js-sdk";
import fs from "node:fs";

const client = new Printgraph(process.env.PRINTGRAPH_TOKEN);

const buf: ArrayBuffer = await client.generatePDF({
  templateId: "あなたのテンプレートID",
  params: {
    customerName: "山田太郎",
    amount: "10,000",
    dueDate: "2026年9月30日",
  },
});

fs.writeFileSync("invoice.pdf", Buffer.from(buf));

リクエストが成功すると 200 OK と application/pdf が返り、PDF のバイナリがそのままレスポンスボディになります。詳しい仕様は PDF を生成するを参照してください。

7. 生成履歴を確認する

ダッシュボード を開くと、その月の生成件数と生成履歴を確認できます。履歴には日時・テンプレート・生成サイズ・ステータス・使用した API キーが並ぶので、どのキーからの生成が失敗しているかを追えます。

ダッシュボードの利用状況と生成履歴。2 件の生成が成功として記録されている — 生成件数と履歴はダッシュボードで確認できる

次のステップ

テンプレート — 繰り返しや条件分岐、JSON 変数、全テンプレートで共有する変数について
API リファレンス — 認証方法とエンドポイントの一覧
JavaScript SDK / PHP SDK — 公式 SDK を使った実装
API キー — キーのローテーションと運用上の注意