クイックスタート

このガイドでは、API キーを作成し、名前を付けたテキストレイヤーが 1 つあるテンプレートを作って、リクエストから画像を生成します。所要時間は数分です。

Bannerify のアカウントが必要です。app.bannerify.co で登録してください。Personal プロジェクトは Free プランで、1 か月に 100 回、1 日に 10 回まで生成できます。ここで作る画像は 1 回として数えます。

1. API キーを作成する

1. ダッシュボードで API Keys ページを開きます。
2. New API key をクリックし、名前を入力して Create をクリックします。
3. 新しい行の Copy key をクリックし、キーを安全な場所に保管します。

キーはサーバー側で管理してください。キーの送り方と再発行の方法は、リクエストの認証で説明しています。

2. テンプレートを作成する

1. Templates ページを開き、New template、Blank template の順にクリックします。エディターが開きます。

   

2. 上部バーの Text をクリックし、キャンバスをクリックしてテキストレイヤーを追加します。

3. Layers リストでそのレイヤーをダブルクリックし、headline と入力して Enter キーを押します。

4. Save をクリックします。

5. Templates ページに戻り、テンプレートカードのメニューを開いて Copy Template ID をクリックします。

リクエストは、レイヤー名でレイヤーを見つけます。デザイン済みのテンプレートから始めるには、手順 1 で Start from a template の下にあるカードを選びます。エディターのほかの機能は、テンプレートのデザインで紹介しています。

3. 画像を生成する

テンプレート ID と、headline のテキストを設定する modification を 1 つ送ります。

curl --request POST \
  --url https://api.bannerify.co/v1/templates/createImage \
  --header 'Content-Type: application/json' \
  --output banner.png \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_xxx",
    "modifications": [
      { "name": "headline", "text": "Hello from the API" }
    ]
  }'

import { writeFile } from "node:fs/promises"
import { Bannerify } from "bannerify-js"

const bannerify = new Bannerify(process.env.BANNERIFY_API_KEY!)

const { result, error } = await bannerify.createImage("tpl_xxx", {
  modifications: [{ name: "headline", text: "Hello from the API" }],
})

if (error) throw new Error(error.message)

await writeFile("banner.png", Buffer.from(result))

banner.png を開いてください。テンプレートに、新しい見出しが入った画像です。リクエストが失敗すると、レスポンスは error オブジェクトを含む JSON になります。コードの一覧は、エラーの処理にあります。

次のステップ