ForHosting KIT · 画像の編集・解析

ミーム文字レイアウト作成

ミーム文字レイアウト生成ツールは、画像の幅と高さ、上部字幕、下部字幕を受け取り、描画に使える具体的な配置情報へ変換します。両方に共通する読みやすい文字サイズを選び、それぞれを適切に改行し、画像の上端と下端に沿ったピクセル単位の境界枠を返します。計算は決定的であり、同じ入力からは常に同じ座標が得られます。Canvas、SVG、画像ライブラリ、レンダリングサービスと組み合わせれば、文字サイズを何度も試すことなく、統一されたミーム文字を作成できます。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

画像サイズと両方の字幕をご指定ください

画像の幅と高さをピクセル単位で入力し、続いて上部と下部に表示する文章をご指定ください。この機能は二つの文字領域を備えた完成形のミームを均衡よく配置するため、両方の字幕が必須です。計測前には先頭と末尾の空白を削除し、文章内で連続する空白を一つに整えます。そのため、空の字幕を指定すると、大きさがゼロの誤解を招く枠ではなく入力エラーが返されます。画像寸法には64から10,000までの整数を使用でき、各字幕は最大500文字です。この制限により、対話型ページでも自動処理でも予測可能な計算を行えます。余白は画像の短い辺を基準にするため、縦長、横長、正方形のいずれでも見た目の間隔がそろいます。描画前に画像を拡大縮小する場合は、改行と配置を正しく保つため、最終的な寸法で改めて計算してください。

文字の調整と改行の仕組み

計算では、上部と下部の字幕に共通する整数の文字サイズを一つ選びます。画像寸法から導いた大きさで開始し、両方の文字ブロックが収まるまで一段階ずつ小さくして確認します。各字幕が使用できる高さは有効領域の最大四十二パーセントであり、双方が複数行になっても中央に間隔が残ります。可能な限り単語は分割しません。ただし、一語だけで利用可能な幅を超える場合は、枠が画像外へ出ないように小さな部分へ分けます。幅の推定には、太く幅の狭いミーム向け書体を想定した安定した内部特性を使います。細い文字には狭い幅を、幅広い大文字には広い幅を割り当てます。これは解析的な推定であり、ブラウザーによる実フォントの計測ではありません。最も近い表示にはImpactに似た太いコンデンス書体を選び、返された行高を適用して各行を中央に配置してください。

返されたピクセル配置を描画します

結果には、選択された文字サイズ、行高、外側の余白に加え、上部と下部それぞれのオブジェクトが含まれます。各オブジェクトには改行済みの行と、ピクセル単位のx座標、y座標、幅、高さが入ります。上部の枠は計算済みの余白位置から始まります。下部の枠は下端から同じ余白を空けて終わるため、行数が変わっても安定した位置になります。枠のy座標から描画を始め、行高ずつ進めながら、各行を画像全体の水平方向中央に配置してください。使用するグラフィックスAPIが文字の上端ではなくベースラインで位置を決める場合は、選択した書体のアセンダーを加えてから描画します。縁取りの太さ、影、大文字化、色は見た目を変える要素であり、予約領域には影響しないため対象外です。自動生成では、配置値を元の字幕と一緒に保存すると、後から手作業で調整せずに同じ構成を再現できます。

活用例

ミーム生成機能を構築

利用者が選んだ画像テンプレートへ文字を描く前に、統一された字幕の配置を計算できます。

CanvasやSVGの命令を準備

二つの字幕を、フロントエンドの描画処理が直接利用できる行とピクセル枠へ変換します。

SNS画像の制作を自動化

複数の文字サイズを手作業で試さず、字幕付き画像の一括処理に再現可能な配置を作れます。

よくある質問

計算の料金はいくらですか？

APIリクエストごとに$0.002です。同じ決定的な計算をブラウザー内で実行することもできます。

なぜ両方の字幕に文字が必要ですか？

二つの字幕を均衡よく配置する機能だからです。上部または下部が空、あるいは空白だけの場合は無効な入力として扱われます。

結果によって画像そのものが変更されますか？

いいえ。返すのは書体と配置のデータだけです。お好みの画像処理、Canvas、SVGでご利用ください。

描画にはどの書体を使えばよいですか？

Impactに近い字幅を持つ太いコンデンス書体を使うと、内部の推定値に最も近い結果になります。

長い単語が画像からはみ出すことはありますか？

ありません。利用可能な幅より長い単語は分割され、すべての枠が左右の余白内に収まります。

上下の字幕が同じ文字サイズになるのはなぜですか？

共通の大きさにすると視覚的な重みがそろいます。どちらかに必要な小さい方のサイズを両方へ適用します。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/meme-text-layout

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/meme-text-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}'

const res = await fetch("https://api.kit.forhosting.com/image/meme-text-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 1200,
    "height": 800,
    "top_caption": "WHEN THE TESTS PASS",
    "bottom_caption": "ON THE FIRST TRY"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/meme-text-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 1200,
    "height": 800,
    "top_caption": "WHEN THE TESTS PASS",
    "bottom_caption": "ON THE FIRST TRY"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/meme-text-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":1200,"height":800,"top_caption":"WHEN THE TESTS PASS","bottom_caption":"ON THE FIRST TRY"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/meme-text-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "width": 1200,
  "height": 800,
  "top_caption": "WHEN THE TESTS PASS",
  "bottom_caption": "ON THE FIRST TRY"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.meme_text_layout",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_width`	10000
`max_height`	10000
`max_chars`	500

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →