digoal/blog - ブログ記事 → 縦型ポスター画像生成

blog - ブログ記事 → 縦型ポスター画像生成 は何をしますか？

ブログ記事、文章、ノート、または任意のソース素材を、1枚のカバーと複数の説明的なコンテンツスライドから成る縦型ポスター画像セットに変換します。HTML/CSSをヘッドレスChromeでレンダリングし、正確なサイズのPNGを出力します。ユーザーがカバーアート、解説図/配図、カルーセルスライド、表紙図、ポスターシリーズ、または記事/文章/素材/ファイルからの「コンテンツ画像」を必要とするときに使用してください。特に、ブログ、公众号、小红书、またはソーシャル投稿に適しています。デフォルト出力は、1080×1920のPNGで、1.png（カバー）、2.png、3.png… としてカレントディレクトリに書き込まれます。

概要

このスキルは、任意のテキストベースのコンテンツを、視覚的に一貫性のある縦型ポスター画像シリーズに変換します。主なユースケースは以下の通りです：

• ソーシャルメディア投稿のビジュアル化：ブログ記事、WeChat公式アカウント（公众号）の投稿、Xiaohongshu（小红书）のノートなどからの引用を画像化。
• プレゼンテーション資料の作成：会議や社内勉強会向けのスライドを、テキストから直接生成。
• 記事の要約・ビジュアル解説：複雑な概念や長文記事を、一連の説明的な画像に分解。

必要なもの

• ヘッドレスChrome：このスキルは、HTML/CSSをPNGにレンダリングするために、システムにchromeまたはchromiumの実行ファイルがインストールされていることを前提としています。
• Node.js：テンプレートの処理や画像生成のスクリプト実行に使用する場合があります。

設定

このスキルは、config.jsonファイルを使用して出力をカスタマイズします。

{
  "width": 1080,
  "height": 1920,
  "theme": {
    "primaryColor": "#1a1a2e",
    "secondaryColor": "#e94560",
    "backgroundColor": "#0f3460",
    "textColor": "#ffffff",
    "fontFamily": "'Noto Sans JP', sans-serif"
  },
  "layout": {
    "cover": {
      "titleFontSize": 64,
      "subtitleFontSize": 32,
      "padding": 60
    },
    "content": {
      "headingFontSize": 48,
      "bodyFontSize": 28,
      "padding": 80
    }
  }
}

使用方法

AIエージェントは、以下の手順でこのスキルを実行します：

1. ソーステキストの解析：ユーザーから提供されたブログ記事、ノート、またはファイルの内容を読み取ります。
2. 主要ポイントの抽出：ソースから主要なアイデアやセクションを特定し、各スライドに割り当てます。
3. テンプレートへの適用：TEMPLATE.md（スキルに同梱）に従って、Markdownテンプレートを生成します。
4. HTMLの生成：生成されたMarkdownとconfig.jsonのカスタマイズを組み合わせて、HTML構造を作成します。
5. 画像のレンダリング：ヘッドレスChromeを起動し、HTMLを指定された寸法（デフォルトは1080×1920）でPNGにレンダリングします。
6. ファイルの出力：結果のPNGファイルを、1.png（カバー）、2.png（最初のスライド）、3.png（2番目のスライド）… のようにカレントディレクトリに書き出します。

例

ユーザーからの依頼：「このブログ記事（URLまたはテキスト）を、カルーセル投稿用の5枚の画像にして。カバーと4枚のスライドで。」

AIエージェントは以下のように動作します：

1. ブログ記事の内容を解析し、導入、3つの主要ポイント、結論を抽出します。
2. 1枚のカバーと4枚のコンテンツスライドからなる画像シリーズを生成することを決定します。
3. これらのポイントをテンプレートに適用し、config.jsonからテーマ設定を適用してHTMLを生成します。
4. 5枚のPNG画像（1.png、2.png、3.png、4.png、5.png）を出力します。

テンプレート（TEMPLATE.md）

このスキルには、各画像のレイアウトを定義するTEMPLATE.mdファイルが含まれています。AIエージェントは、このテンプレートに従って、一貫性のある体裁のHTMLを作成します。テンプレートの内容は、必要に応じて修正できます。

注意事項

• 画像の品質と正確性は、ソーステキストの質とAIエージェントによる解析能力に依存します。
• 大量の画像を生成する場合、処理に時間がかかることがあります。
• フォント設定は、日本語テキストが適切にレンダリングされるように調整してください。
• システムにヘッドレスChromeがインストールされていることを確認してください。