@hirokisakabe/pom 0.1.7 → 0.1.8

package/README.md

@@ -17,6 +17,7 @@
 - [特徴](#特徴)
 - [ノード](#ノード)
 - [マスタースライド](#マスタースライド)
+- [サーバーレス環境での利用](#サーバーレス環境での利用)
 - [LLM 連携](#llm-連携)
 - [ライセンス](#ライセンス)
 
@@ -495,6 +496,36 @@ type MasterSlideOptions = {
 - **動的置換**: プレースホルダーはページごとに自動的に置換されます
 - **後方互換性**: master オプションは省略可能で、既存コードへの影響はありません
 
+## サーバーレス環境での利用
+
+pom はデフォルトで `canvas` パッケージを使用してテキストの幅を計測し、折り返し位置を決定しています。しかし、Vercel や AWS Lambda などのサーバーレス環境では日本語フォント（Noto Sans JP など）がインストールされていないため、テキストの折り返し位置がずれる場合があります。
+
+この問題に対処するため、`textMeasurement` オプションでテキスト計測の方法を指定できます。
+
+### textMeasurement オプション
+
+```typescript
+const pptx = await buildPptx(
+  [slide],
+  { w: 1280, h: 720 },
+  {
+    textMeasurement: "auto", // "canvas" | "fallback" | "auto"
+  },
+);
+```
+
+| 値           | 説明                                                                               |
+| ------------ | ---------------------------------------------------------------------------------- |
+| `"canvas"`   | 常に canvas を使用してテキスト幅を計測（フォントがインストールされている環境向け） |
+| `"fallback"` | 常にフォールバック計算を使用（CJK文字は1em、英数字は0.5emで推定）                  |
+| `"auto"`     | フォントの利用可否を自動検出し、利用できない場合はフォールバック（デフォルト）     |
+
+### 推奨設定
+
+- **ローカル開発環境・Docker**: デフォルト（`"auto"`）のままで問題ありません
+- **サーバーレス環境**: デフォルトの `"auto"` で自動的にフォールバックされます
+- **フォントがインストールされている環境**: `"canvas"` を明示的に指定するとより正確な計測が可能です
+
 ## LLM 連携
 
 pom は LLM（GPT-4o、Claude など）で生成した JSON からスライドを作成するユースケースに対応しています。

package/dist/buildPptx.d.ts

@@ -1,8 +1,11 @@
+import { TextMeasurementMode } from "./calcYogaLayout/measureText";
 import { POMNode, MasterSlideOptions } from "./types";
+export type { TextMeasurementMode };
 export declare function buildPptx(nodes: POMNode[], slideSize: {
     w: number;
     h: number;
 }, options?: {
     master?: MasterSlideOptions;
+    textMeasurement?: TextMeasurementMode;
 }): Promise<import("pptxgenjs").default>;
 //# sourceMappingURL=buildPptx.d.ts.map

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;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"}
+{"version":3,"file":"buildPptx.d.ts","sourceRoot":"","sources":["../src/buildPptx.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAkB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEtE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AA8FpC,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;IACR,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC,wCAsBF"}

package/dist/buildPptx.js

@@ -1,4 +1,5 @@
 import { calcYogaLayout } from "./calcYogaLayout/calcYogaLayout";
+import { setTextMeasurementMode, } from "./calcYogaLayout/measureText";
 import { renderPptx } from "./renderPptx/renderPptx";
 import { toPositioned } from "./toPositioned/toPositioned";
 function replacePlaceholders(node, pageNumber, totalPages, date) {
@@ -61,6 +62,13 @@ function composePage(content, master, pageNumber, totalPages) {
     };
 }
 export async function buildPptx(nodes, slideSize, options) {
+    // テキスト計測モードを設定（デフォルトは auto）
+    if (options?.textMeasurement) {
+        setTextMeasurementMode(options.textMeasurement);
+    }
+    else {
+        setTextMeasurementMode("auto");
+    }
     const positionedPages = [];
     const totalPages = nodes.length;
     for (let i = 0; i < nodes.length; i++) {

package/dist/calcYogaLayout/measureText.d.ts

@@ -4,6 +4,15 @@ type MeasureOptions = {
     fontWeight?: "normal" | "bold" | number;
     lineHeight?: number;
 };
+export type TextMeasurementMode = "canvas" | "fallback" | "auto";
+/**
+ * テキスト計測モードを設定する
+ */
+export declare function setTextMeasurementMode(mode: TextMeasurementMode): void;
+/**
+ * 現在のテキスト計測モードを取得する
+ */
+export declare function getTextMeasurementMode(): TextMeasurementMode;
 /**
  * テキストを折り返し付きでレイアウトし、そのサイズを測定する
  */

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

@@ -1 +1 @@
-{"version":3,"file":"measureText.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureText.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAKF;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,cAAc,GACnB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CA+CA"}
+{"version":3,"file":"measureText.d.ts","sourceRoot":"","sources":["../../src/calcYogaLayout/measureText.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AA0FjE;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,CAEtE;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,cAAc,GACnB;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAoBA"}

package/dist/calcYogaLayout/measureText.js

@@ -1,10 +1,122 @@
 import { createCanvas } from "canvas";
 const canvas = createCanvas(1, 1);
 const ctx = canvas.getContext("2d");
+// フォント利用可否のキャッシュ
+const fontAvailabilityCache = new Map();
+/**
+ * 指定されたフォントが利用可能かどうかをチェックする
+ * 既知のフォントと未知のフォントで同じ幅になるかチェックし、
+ * 同じなら「フォントが利用できない」と判定する
+ */
+function isFontAvailable(fontFamily, fontSizePx) {
+    const cacheKey = `${fontFamily}:${fontSizePx}`;
+    const cached = fontAvailabilityCache.get(cacheKey);
+    if (cached !== undefined) {
+        return cached;
+    }
+    // テスト文字列（日本語と英語を含む）
+    const testString = "あいうABC123";
+    // 存在しないフォント名でテスト
+    const nonExistentFont = "NonExistentFont_12345_XYZ";
+    ctx.font = `${fontSizePx}px "${fontFamily}"`;
+    const targetWidth = ctx.measureText(testString).width;
+    ctx.font = `${fontSizePx}px "${nonExistentFont}"`;
+    const fallbackWidth = ctx.measureText(testString).width;
+    // 幅が同じなら、フォントが利用できない（フォールバックされている）
+    const isAvailable = Math.abs(targetWidth - fallbackWidth) > 0.1;
+    fontAvailabilityCache.set(cacheKey, isAvailable);
+    return isAvailable;
+}
+/**
+ * 文字がCJK（日本語・中国語・韓国語）文字かどうかを判定する
+ */
+function isCJKChar(char) {
+    const code = char.codePointAt(0);
+    if (code === undefined)
+        return false;
+    // CJK統合漢字
+    if (code >= 0x4e00 && code <= 0x9fff)
+        return true;
+    // CJK統合漢字拡張A
+    if (code >= 0x3400 && code <= 0x4dbf)
+        return true;
+    // CJK統合漢字拡張B-F
+    if (code >= 0x20000 && code <= 0x2ebef)
+        return true;
+    // ひらがな
+    if (code >= 0x3040 && code <= 0x309f)
+        return true;
+    // カタカナ
+    if (code >= 0x30a0 && code <= 0x30ff)
+        return true;
+    // 全角英数字・記号
+    if (code >= 0xff00 && code <= 0xffef)
+        return true;
+    // CJK記号
+    if (code >= 0x3000 && code <= 0x303f)
+        return true;
+    return false;
+}
+/**
+ * フォールバック計算で文字の幅を推定する
+ * - CJK文字: 1em（= fontSizePx）
+ * - 英数字・半角記号: 0.5em
+ */
+function estimateCharWidth(char, fontSizePx) {
+    if (isCJKChar(char)) {
+        return fontSizePx; // 1em
+    }
+    return fontSizePx * 0.5; // 0.5em
+}
+/**
+ * フォールバック計算でテキスト幅を推定する
+ */
+function estimateTextWidth(text, fontSizePx) {
+    let width = 0;
+    for (const char of text) {
+        width += estimateCharWidth(char, fontSizePx);
+    }
+    return width;
+}
+// 現在のテキスト計測モード
+let currentMode = "auto";
+/**
+ * テキスト計測モードを設定する
+ */
+export function setTextMeasurementMode(mode) {
+    currentMode = mode;
+}
+/**
+ * 現在のテキスト計測モードを取得する
+ */
+export function getTextMeasurementMode() {
+    return currentMode;
+}
 /**
  * テキストを折り返し付きでレイアウトし、そのサイズを測定する
  */
 export function measureText(text, maxWidthPx, opts) {
+    const { fontFamily, fontSizePx } = opts;
+    // 計測方法を決定
+    const shouldUseFallback = (() => {
+        switch (currentMode) {
+            case "canvas":
+                return false;
+            case "fallback":
+                return true;
+            case "auto":
+                return !isFontAvailable(fontFamily, fontSizePx);
+        }
+    })();
+    if (shouldUseFallback) {
+        return measureTextFallback(text, maxWidthPx, opts);
+    }
+    return measureTextCanvas(text, maxWidthPx, opts);
+}
+/**
+ * canvas を使ったテキスト計測
+ */
+function measureTextCanvas(text, maxWidthPx, opts) {
     applyFontStyle(opts);
     // まず改行で段落に分割
     const paragraphs = text.split("\n");
@@ -44,6 +156,49 @@ export function measureText(text, maxWidthPx, opts) {
     // 端数切り上げ＋余裕分 10px を足す
     return { widthPx: widthPx + 10, heightPx };
 }
+/**
+ * フォールバック計算を使ったテキスト計測
+ */
+function measureTextFallback(text, maxWidthPx, opts) {
+    const { fontSizePx } = opts;
+    // まず改行で段落に分割
+    const paragraphs = text.split("\n");
+    const lines = [];
+    for (const paragraph of paragraphs) {
+        // 空の段落（連続した改行）も1行としてカウント
+        if (paragraph === "") {
+            lines.push({ widthPx: 0 });
+            continue;
+        }
+        const words = splitForWrap(paragraph);
+        let current = "";
+        let currentWidth = 0;
+        for (const word of words) {
+            const candidate = current ? current + word : word;
+            const w = estimateTextWidth(candidate, fontSizePx);
+            if (w <= maxWidthPx || !current) {
+                // まだ詰められる
+                current = candidate;
+                currentWidth = w;
+            }
+            else {
+                // 折り返す
+                lines.push({ widthPx: currentWidth });
+                current = word;
+                currentWidth = estimateTextWidth(word, fontSizePx);
+            }
+        }
+        if (current) {
+            lines.push({ widthPx: currentWidth });
+        }
+    }
+    const lineHeightRatio = opts.lineHeight ?? 1.3;
+    const lineHeightPx = fontSizePx * lineHeightRatio;
+    const widthPx = lines.length ? Math.max(...lines.map((l) => l.widthPx)) : 0;
+    const heightPx = lines.length * lineHeightPx;
+    // 端数切り上げ＋余裕分 10px を足す
+    return { widthPx: widthPx + 10, heightPx };
+}
 function applyFontStyle(opts) {
     const { fontFamily, fontSizePx, fontWeight = "normal" } = opts;
     ctx.font = `${fontWeight} ${fontSizePx}px "${fontFamily}"`;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./types";
 export * from "./inputSchema";
 export { buildPptx } from "./buildPptx";
+export type { TextMeasurementMode } from "./buildPptx";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hirokisakabe/pom",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "PowerPoint Object Model - A declarative TypeScript library for creating PowerPoint presentations",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,9 @@
     "vrt": "tsx vrt/runVrt.ts",
     "vrt:update": "tsx vrt/runVrt.ts --update",
     "vrt:docker": "docker compose run --rm vrt",
-    "vrt:docker:update": "docker compose run --rm vrt-update"
+    "vrt:docker:update": "docker compose run --rm vrt-update",
+    "preview": "tsx preview/lib/previewPptx.ts",
+    "preview:docker": "docker compose run --rm preview"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",