@hirokisakabe/pom 0.1.5 → 0.1.7

package/README.md

@@ -1,11 +1,68 @@
 # pom
 
-**pom (PowerPoint Object Model)** は、PowerPoint プレゼンテーション（pptx）を TypeScript で宣言的に記述するためのライブラリです。
+**pom (PowerPoint Object Model)** は、PowerPoint プレゼンテーション（pptx）を TypeScript で宣言的に記述するためのライブラリです。生成 AI に出力させた POM 形式の JSON を、PowerPoint ファイルに変換するユースケースを想定しています。
+
+## 動作環境
+
+- Node.js 18 以上
+
+> [!NOTE]
+> pom は Node.js 環境でのみ動作します。ブラウザ環境では動作しません。
+
+## 目次
+
+- [動作環境](#動作環境)
+- [インストール](#インストール)
+- [クイックスタート](#クイックスタート)
+- [特徴](#特徴)
+- [ノード](#ノード)
+- [マスタースライド](#マスタースライド)
+- [LLM 連携](#llm-連携)
+- [ライセンス](#ライセンス)
+
+## インストール
+
+```bash
+npm install @hirokisakabe/pom
+```
+
+## クイックスタート
+
+```typescript
+import { buildPptx, POMNode } from "@hirokisakabe/pom";
+
+const slide: POMNode = {
+  type: "vstack",
+  w: "100%",
+  h: "max",
+  padding: 48,
+  gap: 24,
+  alignItems: "start",
+  children: [
+    {
+      type: "text",
+      text: "プレゼンテーションタイトル",
+      fontPx: 48,
+      bold: true,
+    },
+    {
+      type: "text",
+      text: "サブタイトル",
+      fontPx: 24,
+      color: "666666",
+    },
+  ],
+};
+
+const pptx = await buildPptx([slide], { w: 1280, h: 720 });
+await pptx.writeFile({ fileName: "presentation.pptx" });
+```
 
 ## 特徴
 
 - **型安全**: TypeScript による厳密な型定義
 - **宣言的**: JSON ライクなオブジェクトでスライドを記述
+- **PowerPoint ファースト**: Shape 機能をネイティブサポート
 - **柔軟なレイアウト**: VStack/HStack/Box による自動レイアウト
 - **ピクセル単位**: 直感的なピクセル単位での指定（内部でインチに変換）
 - **マスタースライド**: 全ページ共通のヘッダー・フッター・ページ番号を自動挿入
@@ -54,6 +111,7 @@
   bold?: boolean;
   fontFamily?: string;
   lineSpacingMultiple?: number;
+  bullet?: boolean | BulletOptions;
 
   // 共通プロパティ
   w?: number | "max" | `${number}%`;
@@ -66,6 +124,54 @@
 - `bold` で太字を指定できます。
 - `fontFamily` でフォントファミリーを指定できます（デフォルト: `"Noto Sans JP"`）。
 - `lineSpacingMultiple` で行間倍率を指定できます（デフォルト: `1.3`）。
+- `bullet` で箇条書きを指定できます。`true` を指定するとデフォルトの箇条書き、オブジェクトで詳細設定が可能です。
+
+**BulletOptions:**
+
+```typescript
+{
+  type?: "bullet" | "number";  // "bullet": 記号、"number": 番号付き
+  indent?: number;             // インデントレベル
+  numberType?: "alphaLcParenBoth" | "alphaLcParenR" | "alphaLcPeriod" |
+               "alphaUcParenBoth" | "alphaUcParenR" | "alphaUcPeriod" |
+               "arabicParenBoth" | "arabicParenR" | "arabicPeriod" | "arabicPlain" |
+               "romanLcParenBoth" | "romanLcParenR" | "romanLcPeriod" |
+               "romanUcParenBoth" | "romanUcParenR" | "romanUcPeriod";
+  numberStartAt?: number;      // 番号の開始値
+}
+```
+
+**使用例:**
+
+```typescript
+// シンプルな箇条書き
+{
+  type: "text",
+  text: "項目1\n項目2\n項目3",
+  bullet: true,
+}
+
+// 番号付きリスト
+{
+  type: "text",
+  text: "ステップ1\nステップ2\nステップ3",
+  bullet: { type: "number" },
+}
+
+// アルファベット小文字（a. b. c.）
+{
+  type: "text",
+  text: "項目A\n項目B\n項目C",
+  bullet: { type: "number", numberType: "alphaLcPeriod" },
+}
+
+// 5から始まる番号リスト
+{
+  type: "text",
+  text: "5番目\n6番目\n7番目",
+  bullet: { type: "number", numberStartAt: 5 },
+}
+```
 
 #### 2. Image
 
@@ -93,7 +199,7 @@
 ```typescript
 {
   type: "table";
-  columns: { width: number }[];
+  columns: { width?: number }[];
   rows: {
     height?: number;
     cells: {
@@ -114,11 +220,59 @@
 }
 ```
 
+- `columns[].width` を省略すると、テーブル全体の幅から均等分割されます。
 - `columns` の合計がテーブルの自然幅になります（必要であれば `w` で上書きできます）。
 - `rows` の `height` を省略すると `defaultRowHeight`（未指定なら32px）が適用されます。
 - セル背景やフォント装飾を `cells` の各要素で個別に指定できます。
 
-#### 4. Box
+#### 4. Shape
+
+図形を描画するノード。テキスト付き/なしで異なる表現が可能で、複雑なビジュアル効果をサポートしています。
+
+```typescript
+{
+  type: "shape";
+  shapeType: PptxGenJS.SHAPE_NAME;  // 例: "roundRect", "ellipse", "cloud", "star5" など
+  text?: string;                     // 図形内に表示するテキスト（オプション）
+  fill?: {
+    color?: string;
+    transparency?: number;
+  };
+  line?: {
+    color?: string;
+    width?: number;
+    dashType?: "solid" | "dash" | "dashDot" | "lgDash" | "lgDashDot" | "lgDashDotDot" | "sysDash" | "sysDot";
+  };
+  shadow?: {
+    type: "outer" | "inner";
+    opacity?: number;
+    blur?: number;
+    angle?: number;
+    offset?: number;
+    color?: string;
+  };
+  fontPx?: number;
+  color?: string;
+  alignText?: "left" | "center" | "right";
+
+  // 共通プロパティ
+  w?: number | "max" | `${number}%`;
+  h?: number | "max" | `${number}%`;
+  ...
+}
+```
+
+**主な図形タイプの例:**
+
+- `roundRect`: 角丸長方形（タイトルボックス、カテゴリ表示）
+- `ellipse`: 楕円/円（ステップ番号、バッジ）
+- `cloud`: 雲型（コメント、重要ポイント）
+- `wedgeRectCallout`: 矢印付き吹き出し（注記）
+- `cloudCallout`: 雲吹き出し（コメント）
+- `star5`: 5つ星（強調、デコレーション）
+- `downArrow`: 下矢印（フロー図）
+
+#### 5. Box
 
 単一の子要素をラップする汎用コンテナ。
 
@@ -137,7 +291,7 @@
 }
 ```
 
-#### 5. VStack
+#### 6. VStack
 
 子要素を **縦方向** に並べる。
 
@@ -156,7 +310,7 @@
 }
 ```
 
-#### 6. HStack
+#### 7. HStack
 
 子要素を **横方向** に並べる。
 
@@ -175,35 +329,23 @@
 }
 ```
 
-#### 7. Shape
+#### 8. Chart
 
-図形を描画するノード。テキスト付き/なしで異なる表現が可能で、複雑なビジュアル効果をサポートしています。
+グラフを描画するノード。棒グラフ、折れ線グラフ、円グラフをサポート。
 
 ```typescript
 {
-  type: "shape";
-  shapeType: PptxGenJS.SHAPE_NAME;  // 例: "roundRect", "ellipse", "cloud", "star5" など
-  text?: string;                     // 図形内に表示するテキスト（オプション）
-  fill?: {
-    color?: string;
-    transparency?: number;
-  };
-  line?: {
-    color?: string;
-    width?: number;
-    dashType?: "solid" | "dash" | "dashDot" | "lgDash" | "lgDashDot" | "lgDashDotDot" | "sysDash" | "sysDot";
-  };
-  shadow?: {
-    type: "outer" | "inner";
-    opacity?: number;
-    blur?: number;
-    angle?: number;
-    offset?: number;
-    color?: string;
-  };
-  fontPx?: number;
-  fontColor?: string;
-  alignText?: "left" | "center" | "right";
+  type: "chart";
+  chartType: "bar" | "line" | "pie";
+  data: {
+    name?: string;           // 系列名
+    labels: string[];        // カテゴリラベル
+    values: number[];        // 値
+  }[];
+  showLegend?: boolean;      // 凡例表示（デフォルト: false）
+  showTitle?: boolean;       // タイトル表示（デフォルト: false）
+  title?: string;            // タイトル文字列
+  chartColors?: string[];    // データカラー配列（16進カラーコード）
 
   // 共通プロパティ
   w?: number | "max" | `${number}%`;
@@ -212,15 +354,50 @@
 }
 ```
 
-**主な図形タイプの例:**
+**使用例:**
 
-- `roundRect`: 角丸長方形（タイトルボックス、カテゴリ表示）
-- `ellipse`: 楕円/円（ステップ番号、バッジ）
-- `cloud`: 雲型（コメント、重要ポイント）
-- `wedgeRectCallout`: 矢印付き吹き出し（注記）
-- `cloudCallout`: 雲吹き出し（コメント）
-- `star5`: 5つ星（強調、デコレーション）
-- `downArrow`: 下矢印（フロー図）
+```typescript
+// 棒グラフ
+{
+  type: "chart",
+  chartType: "bar",
+  w: 600,
+  h: 400,
+  data: [
+    {
+      name: "売上",
+      labels: ["1月", "2月", "3月", "4月"],
+      values: [100, 200, 150, 300],
+    },
+    {
+      name: "利益",
+      labels: ["1月", "2月", "3月", "4月"],
+      values: [30, 60, 45, 90],
+    },
+  ],
+  showLegend: true,
+  showTitle: true,
+  title: "月別売上・利益",
+  chartColors: ["0088CC", "00AA00"],
+}
+
+// 円グラフ
+{
+  type: "chart",
+  chartType: "pie",
+  w: 400,
+  h: 300,
+  data: [
+    {
+      name: "市場シェア",
+      labels: ["製品A", "製品B", "製品C", "その他"],
+      values: [40, 30, 20, 10],
+    },
+  ],
+  showLegend: true,
+  chartColors: ["0088CC", "00AA00", "FF6600", "888888"],
+}
+```
 
 ## マスタースライド
 
@@ -322,6 +499,17 @@ type MasterSlideOptions = {
 
 pom は LLM（GPT-4o、Claude など）で生成した JSON からスライドを作成するユースケースに対応しています。
 
+### LLM 向け仕様ガイド
+
+[`llm-guide.md`](./llm-guide.md) は、LLM に pom 形式の JSON を生成させるためのコンパクトな仕様書です。システムプロンプトに含めて使用してください。
+
+**含まれる内容:**
+
+- ノード一覧と主要プロパティ
+- 標準設定（スライドサイズ、padding、gap、フォントサイズ目安）
+- パターン例（基本構造、2 カラム、テーブル、図形、グラフなど）
+- よくある間違いと正しい書き方
+
 ### 入力用スキーマ
 
 `inputPomNodeSchema` を使って、LLM が生成した JSON を検証できます。
@@ -353,39 +541,6 @@ if (result.success) {
 }
 ```
 
-### OpenAI Structured Outputs との連携
-
-OpenAI SDK の `zodResponseFormat` を使用して、LLM に直接スキーマ準拠の JSON を生成させることができます。
-
-```typescript
-import { inputPomNodeSchema, buildPptx } from "@hirokisakabe/pom";
-import OpenAI from "openai";
-import { zodResponseFormat } from "openai/helpers/zod";
-
-const openai = new OpenAI();
-
-const response = await openai.chat.completions.create({
-  model: "gpt-4o",
-  messages: [
-    {
-      role: "system",
-      content:
-        "あなたはプレゼンテーション作成アシスタントです。指定されたスキーマに従ってスライドのJSONを生成してください。",
-    },
-    {
-      role: "user",
-      content:
-        "売上報告のスライドを作成して。タイトルと3つの箇条書きを含めて。",
-    },
-  ],
-  response_format: zodResponseFormat(inputPomNodeSchema, "slide"),
-});
-
-const slideData = JSON.parse(response.choices[0].message.content!);
-const pptx = await buildPptx([slideData], { w: 1280, h: 720 });
-await pptx.writeFile({ fileName: "sales-report.pptx" });
-```
-
 ### 利用可能な入力用スキーマ
 
 | スキーマ                        | 説明                                           |
@@ -395,7 +550,12 @@ await pptx.writeFile({ fileName: "sales-report.pptx" });
 | `inputImageNodeSchema`          | 画像ノード用                                   |
 | `inputTableNodeSchema`          | テーブルノード用                               |
 | `inputShapeNodeSchema`          | 図形ノード用                                   |
+| `inputChartNodeSchema`          | チャートノード用                               |
 | `inputBoxNodeSchema`            | Boxノード用                                    |
 | `inputVStackNodeSchema`         | VStackノード用                                 |
 | `inputHStackNodeSchema`         | HStackノード用                                 |
 | `inputMasterSlideOptionsSchema` | マスタースライド設定用                         |
+
+## ライセンス
+
+MIT

package/dist/buildPptx.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAiGtE,wBAAsB,SAAS,CAC7B,KAAK,EAAE,OAAO,EAAE,EAChB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAE,wCAgB1C"}
+{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA8FtE,wBAAsB,SAAS,CAC7B,KAAK,EAAE,OAAO,EAAE,EAChB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAE,wCAgB1C"}

package/dist/buildPptx.js

@@ -29,9 +29,7 @@ function composePage(content, master, pageNumber, totalPages) {
     if (!master) {
         return content;
     }
-    const date = master.date?.format === "locale"
-        ? new Date().toLocaleDateString()
-        : new Date().toISOString().split("T")[0].replace(/-/g, "/");
+    const date = master.date?.value ?? "";
     const children = [];
     // ヘッダーを追加
     if (master.header) {

package/dist/calcYogaLayout/calcYogaLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calcYogaLayout.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/calcYogaLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAOxC;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,iBAcpC"}
+{"version":3,"file":"calcYogaLayout.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/calcYogaLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAOxC;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,OAAO,EACb,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,iBAiBpC"}

package/dist/calcYogaLayout/calcYogaLayout.js

@@ -1,6 +1,6 @@
 import { loadYoga } from "yoga-layout/load";
 import { measureText } from "./measureText";
-import { measureImage } from "./measureImage";
+import { measureImage, prefetchImageSize } from "./measureImage";
 import { calcTableIntrinsicSize } from "../table/utils";
 /**
  * POMNode ツリーを Yoga でレイアウト計算する
@@ -11,6 +11,8 @@ import { calcTableIntrinsicSize } from "../table/utils";
  */
 export async function calcYogaLayout(root, slideSize) {
     const Yoga = await getYoga();
+    // 事前に全画像のサイズを取得（HTTPS対応のため）
+    await prefetchAllImageSizes(root);
     const rootYoga = Yoga.Node.create();
     root.yogaNode = rootYoga;
     await buildPomWithYogaTree(root, rootYoga);
@@ -19,6 +21,34 @@ export async function calcYogaLayout(root, slideSize) {
     rootYoga.setHeight(slideSize.h);
     rootYoga.calculateLayout(slideSize.w, slideSize.h, Yoga.DIRECTION_LTR);
 }
+/**
+ * POMNode ツリー内のすべての画像のサイズを事前取得する
+ */
+async function prefetchAllImageSizes(node) {
+    const imageSources = collectImageSources(node);
+    await Promise.all(imageSources.map((src) => prefetchImageSize(src)));
+}
+/**
+ * POMNode ツリー内のすべての画像のsrcを収集する
+ */
+function collectImageSources(node) {
+    const sources = [];
+    function traverse(n) {
+        if (n.type === "image") {
+            sources.push(n.src);
+        }
+        else if (n.type === "box") {
+            traverse(n.children);
+        }
+        else if (n.type === "vstack" || n.type === "hstack") {
+            for (const child of n.children) {
+                traverse(child);
+            }
+        }
+    }
+    traverse(node);
+    return sources;
+}
 /**
  * Yogaシングルトン
  */
@@ -31,21 +61,26 @@ async function getYoga() {
 /**
  * POMNode ツリーを再帰的に走査し、YogaNode ツリーを構築する
  */
-async function buildPomWithYogaTree(node, parentYoga) {
+async function buildPomWithYogaTree(node, parentYoga, parentNode) {
     const yoga = await getYoga();
     const yn = yoga.Node.create();
     node.yogaNode = yn; // 対応する YogaNode をセット
     await applyStyleToYogaNode(node, yn);
+    // HStack の子要素で幅が指定されていない場合、デフォルトで均等分割
+    if (parentNode?.type === "hstack" && node.w === undefined) {
+        yn.setFlexGrow(1);
+        yn.setFlexBasis(0);
+    }
     parentYoga.insertChild(yn, parentYoga.getChildCount());
     switch (node.type) {
         case "box": {
-            await buildPomWithYogaTree(node.children, yn);
+            await buildPomWithYogaTree(node.children, yn, node);
             break;
         }
         case "vstack":
         case "hstack": {
             for (const child of node.children) {
-                await buildPomWithYogaTree(child, yn);
+                await buildPomWithYogaTree(child, yn, node);
             }
             break;
         }
@@ -227,7 +262,7 @@ async function applyStyleToYogaNode(node, yn) {
                 const text = node.text;
                 const fontSizePx = node.fontPx ?? 24;
                 const fontFamily = "Noto Sans JP";
-                const fontWeight = "normal";
+                const fontWeight = node.bold ? "bold" : "normal";
                 const lineHeight = 1.3;
                 yn.setMeasureFunc((width, widthMode) => {
                     const maxWidthPx = (() => {
@@ -283,7 +318,7 @@ async function applyStyleToYogaNode(node, yn) {
                     const text = node.text;
                     const fontSizePx = node.fontPx ?? 24;
                     const fontFamily = "Noto Sans JP";
-                    const fontWeight = "normal";
+                    const fontWeight = node.bold ? "bold" : "normal";
                     const lineHeight = 1.3;
                     yn.setMeasureFunc((width, widthMode) => {
                         const maxWidthPx = (() => {

package/dist/calcYogaLayout/measureImage.d.ts

@@ -1,6 +1,17 @@
 /**
- * 画像ファイルのサイズを取得する
- * @param src 画像のパス（ローカルパス、またはbase64データ）
+ * 画像サイズを事前取得してキャッシュする（非同期）
+ * HTTPS URLの画像を処理する際に使用
+ * @param src 画像のパス（ローカルパス、base64データ、またはHTTPS URL）
+ * @returns 画像の幅と高さ（px）
+ */
+export declare function prefetchImageSize(src: string): Promise<{
+    widthPx: number;
+    heightPx: number;
+}>;
+/**
+ * 画像ファイルのサイズを取得する（同期）
+ * 事前にprefetchImageSizeでキャッシュしておくこと
+ * @param src 画像のパス（ローカルパス、base64データ、またはHTTPS URL）
  * @returns 画像の幅と高さ（px）
  */
 export declare function measureImage(src: string): {

package/dist/calcYogaLayout/measureImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"measureImage.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureImage.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CA+BA"}
+{"version":3,"file":"measureImage.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureImage.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,wBAAsB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAqDD;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAqDA"}

package/dist/calcYogaLayout/measureImage.js

@@ -1,11 +1,76 @@
 import imageSize from "image-size";
 import * as fs from "fs";
 /**
- * 画像ファイルのサイズを取得する
- * @param src 画像のパス（ローカルパス、またはbase64データ）
+ * 画像サイズのキャッシュ（事前取得した画像サイズを保持）
+ */
+const imageSizeCache = new Map();
+/**
+ * 画像サイズを事前取得してキャッシュする（非同期）
+ * HTTPS URLの画像を処理する際に使用
+ * @param src 画像のパス（ローカルパス、base64データ、またはHTTPS URL）
+ * @returns 画像の幅と高さ（px）
+ */
+export async function prefetchImageSize(src) {
+    // キャッシュにあればそれを返す
+    const cached = imageSizeCache.get(src);
+    if (cached) {
+        return cached;
+    }
+    try {
+        let buffer;
+        // base64データの場合
+        if (src.startsWith("data:")) {
+            const base64Data = src.split(",")[1];
+            buffer = new Uint8Array(Buffer.from(base64Data, "base64"));
+        }
+        // HTTPS/HTTP URLの場合
+        else if (src.startsWith("https://") || src.startsWith("http://")) {
+            const response = await fetch(src);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch image: ${response.status}`);
+            }
+            const arrayBuffer = await response.arrayBuffer();
+            buffer = new Uint8Array(arrayBuffer);
+        }
+        // ローカルファイルパスの場合
+        else {
+            buffer = new Uint8Array(fs.readFileSync(src));
+        }
+        const dimensions = imageSize(buffer);
+        const width = dimensions.width ?? 100; // デフォルト100px
+        const height = dimensions.height ?? 100; // デフォルト100px
+        const result = {
+            widthPx: width,
+            heightPx: height,
+        };
+        // キャッシュに保存
+        imageSizeCache.set(src, result);
+        return result;
+    }
+    catch (error) {
+        // エラーが発生した場合はデフォルトサイズを返す
+        console.warn(`Failed to measure image size for ${src}:`, error);
+        const result = {
+            widthPx: 100,
+            heightPx: 100,
+        };
+        imageSizeCache.set(src, result);
+        return result;
+    }
+}
+/**
+ * 画像ファイルのサイズを取得する（同期）
+ * 事前にprefetchImageSizeでキャッシュしておくこと
+ * @param src 画像のパス（ローカルパス、base64データ、またはHTTPS URL）
  * @returns 画像の幅と高さ（px）
  */
 export function measureImage(src) {
+    // キャッシュにあればそれを返す
+    const cached = imageSizeCache.get(src);
+    if (cached) {
+        return cached;
+    }
+    // キャッシュにない場合（ローカルファイルやbase64のみ同期処理可能）
     try {
         let buffer;
         // base64データの場合
@@ -13,6 +78,14 @@ export function measureImage(src) {
             const base64Data = src.split(",")[1];
             buffer = new Uint8Array(Buffer.from(base64Data, "base64"));
         }
+        // HTTPS/HTTP URLの場合はキャッシュがないとデフォルト値を返す
+        else if (src.startsWith("https://") || src.startsWith("http://")) {
+            console.warn(`Image size for URL ${src} was not prefetched. Using default size.`);
+            return {
+                widthPx: 100,
+                heightPx: 100,
+            };
+        }
         // ローカルファイルパスの場合
         else {
             buffer = new Uint8Array(fs.readFileSync(src));
@@ -20,10 +93,13 @@ export function measureImage(src) {
         const dimensions = imageSize(buffer);
         const width = dimensions.width ?? 100; // デフォルト100px
         const height = dimensions.height ?? 100; // デフォルト100px
-        return {
+        const result = {
             widthPx: width,
             heightPx: height,
         };
+        // キャッシュに保存
+        imageSizeCache.set(src, result);
+        return result;
     }
     catch (error) {
         // エラーが発生した場合はデフォルトサイズを返す