0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ポスターの納品情報をJSONで管理し、未確認項目をJavaScriptで検出する

0
Posted at

画像生成を使う制作フローでは、見た目の確認と情報の確認を分けておくと、担当者が変わっても確認の基準を追いやすくなります。日付の正誤、掲載先のサイズ、リンク先の確認結果は、画像ファイルだけでは管理しにくい情報です。

この記事では、納品用のメタデータをJSONで残し、必須項目と未確認項目を検出する最小構成を紹介します。特定サービスのAPIは使用しません。架空のイベントを例にした設計案であり、画像生成の性能を測定した記事ではありません。

1. 制作上の自由度と固定情報を分ける

背景色やイラストの方向は、複数案を比較できます。一方、承認された日付、名称、会場、申込先は、自由に変更してよい値ではありません。固定情報をプロンプトの中だけに残さず、元データとして保持します。

ポスター案の生成や参考画像の編集に使えるCanva Craftのような画像ツールは、構図を検討する段階の選択肢になります。ただし、生成された文字や数字を正本にしないことが大切です。最終的な文字の正誤は、承認された原稿と照合します。

2. 納品レコードの例

{
  "version": "v03",
  "placement": "portrait-story",
  "width": 1080,
  "height": 1920,
  "copyApproved": false,
  "visualChecked": false,
  "destinationChecked": false
}

1080×1920はこのサンプルの指定値です。サービスの出力仕様や、すべての掲載先に適したサイズを表しているわけではありません。実際には受け取り側が指定した値を記録します。

確認項目は、falseを初期値にします。担当者が実際に確認した後にのみtrueへ更新します。未確認と確認済みを、空文字列の有無で推測しないようにします。

3. 未確認項目を配列で返す

function validateDelivery(record) {
  if (!record || typeof record !== "object" || Array.isArray(record)) {
    return ["record: object required"];
  }

  const issues = [];
  for (const key of ["version", "placement"]) {
    if (typeof record[key] !== "string" || !record[key].trim()) {
      issues.push(`${key}: required`);
    }
  }

  for (const key of ["width", "height"]) {
    if (!Number.isInteger(record[key]) || record[key] <= 0) {
      issues.push(`${key}: positive integer required`);
    }
  }

  for (const key of [
    "copyApproved",
    "visualChecked",
    "destinationChecked"
  ]) {
    if (record[key] !== true) issues.push(`${key}: not confirmed`);
  }
  return issues;
}

console.log(validateDelivery({
  version: "v03",
  placement: "portrait-story",
  width: 1080,
  height: 1920,
  copyApproved: true,
  visualChecked: false,
  destinationChecked: false
}));
// ["visualChecked: not confirmed", "destinationChecked: not confirmed"]

文字列の"true"は確認済みとして扱いません。幅や高さも、正の整数だけを受け付けます。外部から受け取るJSONでは、入力型の違いを黙って補正するより、問題として返した方が確認しやすい場面があります。

4. この関数が検証しないこと

配列が空でも、画像が正しいと証明できるわけではありません。この関数は入力レコードを検査するだけです。実画像のピクセル数の取得、OCR、日付の正誤判定、URLへの接続、QRコードの読み取りは実行しません。

実務では、最終ファイルを対象に別途確認します。

  • 名前、日付、金額を承認済み原稿と照合する。
  • 掲載時のサイズで文字が読めるか確認する。
  • QRコードを最終リサイズ後に読み取り、遷移先も確認する。
  • 印刷物なら受け取り側の寸法とファイル要件を確認する。

自動化できる入力チェックと、人が実施する内容確認を混ぜないことが、この構成の狙いです。未確認項目の検出に使い、実施していない検査の代わりにはしません。

5. ファイルと記録を同じ版で渡す

poster-v03.pngと納品レコードのversionを対応させて保存します。確認後に画像を更新した場合は、影響する確認項目を未確認に戻して、変更後のファイルで再確認します。

画像、承認原稿、検査記録の対応を残せば、受け取り側は何を基準に確認したのかを追えます。承認フローそのものを実装する場合は、担当者や確認日時、変更履歴も別途必要です。ここでは小さな入力検査だけに範囲を絞っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?