ナビゲーション

連携

Zapier を接続する

Bannerify アプリを使って、Zap の中で画像と PDF を生成する方法を説明します。

Zapier の Bannerify アプリは、Zap のデータでテンプレートを描画し、ファイルのリンクを返します。コードを書かずに、スプレッドシートの新しい行やフォームの回答ごとに、画像や PDF を作成できます。

アクション

アクション 出力 フィールド
Create Image PNG、JPEG、WebP ファイル Template、Format、Modifications JSON、各テキストレイヤーと画像レイヤーのフィールド
Create PDF PDF ファイル Template、Modifications JSON、各テキストレイヤーと画像レイヤーのフィールド

どちらのアクションも、url フィールドを含むオブジェクトを返します。Bannerify はファイルを CDN に保存し、実行 1 回につき 1 回の生成として数えられます。

前提条件

  • Zapier アカウント。
  • Bannerify の API キー。
  • 名前付きのレイヤーがあるテンプレート。名前が重要な理由は、Modificationsで説明しています。

アクションを追加する

  1. Zap にステップを追加し、Bannerify アプリを選びます。
  2. Create Image または Create PDF を選びます。
  3. アカウントを接続し、Project API Key フィールドに API キーを貼り付けます。
  4. Template で、テンプレートを選びます。Zapier は、キーを持つワークスペースのテンプレートを読み込みます。
  5. Create Image では、Format(png、jpeg、webp)を選びます。初期値は png です。
  6. 後述のとおり、レイヤーのフィールドを入力します。
  7. Test step をクリックします。結果には url フィールドが含まれます。リンクを開いて、ファイルを確認します。

レイヤーを入力する

テンプレートを選ぶと、Zapier は、各テキストレイヤーと各画像レイヤーのフィールドを追加します。ラベルには、headline (text) や photo (src) のように、レイヤー名と、変更するフィールドが表示されます。前のステップの値を、フィールドにマップしてください。空のままにしたフィールドは、テンプレートの値のままです。

QR コードや表など、ほかの種類のレイヤーには、Modifications JSON を使います。キーがレイヤー名のオブジェクト、または API が使う配列を受け付けます。

{
  "qr": { "qrcode": "https://example.com/orders/1042" },
  "total": "$29.00"
}

各レイヤーの種類が読み取るフィールドは、Modificationsにまとめています。

レシピ: スプレッドシートの行を Drive のファイルにする

  1. Google Sheets のトリガーを追加し、New Spreadsheet Row を選びます。
  2. Bannerify のアクション Create Image を追加します。各列をレイヤーのフィールドにマップします。たとえば、Headline 列を headline (text) にマップします。
  3. Google Drive のアクションを追加し、Upload File を選びます。Bannerify のステップの url を、ファイルとして使います。
  4. url をチャンネルに投稿したい場合は、Slack のアクションを追加し、Send Channel Message を選びます。

トラブルシューティング

問題 対処
Template のリストが空 API キーが、テンプレートを持つワークスペースのものか確認します
レイヤーが変わらない エディターでレイヤー名を確認します。名前は大文字小文字を区別し、存在しない名前は API に無視されます
ステップが使用量の上限のメッセージで失敗する ワークスペースが日次または月間の上限に達しました。クォータと制限を参照してください
ステップが TOO_MANY_REQUESTS で失敗する キーが 10 秒間に多すぎるリクエストを送信しました。メッセージにウィンドウがリセットされる時刻が示されるので、その時刻の後にステップをもう一度実行します

ステップが失敗すると、Zapier は API が返したメッセージを表示します。コードは、エラーの処理にまとめています。