PptxGenJSで編集可能なPowerPointを作る

PowerPointで資料を開いたとき、文字を直そうとしても画像全体しか選べない。そんな違いを知るには、文字や図形を「PowerPointの部品」として作る方法が役立ちます。この記事ではJavaScriptのライブラリ`PptxGenJS`で、編集できる1枚を自作します。

画像で作るスライドと、図形で作るスライドは違う

PNGやJPEGを1枚貼ったスライドは、見た目が整っていても画像の中の文字は通常そのまま編集できません。一方、PowerPointのテキストボックスや図形を使って作れば、それぞれを別のオブジェクトとして選択できます。

PptxGenJSはJavaScriptで`.pptx`ファイルを生成するライブラリです。今回はHTMLを自動変換せず、`addText`と`addShape`で最初からPowerPoint用の部品を作ります。

方式	編集できるもの	注意点
画像1枚を配置	画像全体の拡大・移動など	画像中の文字は通常選んで直せない
`addText`で文字を配置	テキストボックスの文字	位置やフォントの調整が必要
`addShape`で図形を配置	四角形・線などの図形	元のWeb画面を自動で再現するわけではない

手順1：Node.jsとPptxGenJSを準備する

パソコンにNode.jsとnpmを入れておきます。ターミナル（コマンドを入力する画面）で、練習用フォルダを作って次を実行してください。既存の仕事用フォルダではなく、空の練習用フォルダで進めます。

mkdir pptx-practice
cd pptx-practice
npm init -y
npm install pptxgenjs

`npm install`はJavaScriptライブラリを入れるためのコマンドです。実行に失敗したら、`node –version`と`npm –version`でインストール状況を確かめてください。

（ライブラリのインストールと入門については『PptxGenJS公式リポジトリ』をご参照ください）

手順2：文字と図形を別々に配置する

`create-editable-slide.cjs`を作成し、以下のコードを保存してください。架空の「買い物メモ」アプリの画面構成を、入力フォームとメモ一覧の2つの枠で示します。

const pptxgen = require('pptxgenjs');
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_WIDE';
pptx.author = '学習用サンプル';
pptx.subject = 'PowerPointの文字と図形の編集練習';

const slide = pptx.addSlide();
slide.background = { color: 'FFFFFF' };
slide.addText('買い物メモの画面構成', {
  x: 0.7, y: 0.55, w: 11.9, h: 0.6,
  fontSize: 28, bold: true, color: '23364A',
  fontFace: 'Arial', margin: 0
});

slide.addShape(pptx.ShapeType.roundRect, {
  x: 0.9, y: 1.9, w: 4.8, h: 2.6,
  rectRadius: 0.16,
  line: { color: 'A8C5D3', width: 1 },
  fill: { color: 'EAF4F7' }
});
slide.addText('入力フォーム', {
  x: 1.2, y: 2.3, w: 3.9, h: 0.55,
  fontSize: 22, bold: true, color: '23364A', margin: 0
});
slide.addText('品名と個数を入力する', {
  x: 1.2, y: 3.15, w: 3.9, h: 0.5,
  fontSize: 16, color: '23364A', margin: 0
});

slide.addShape(pptx.ShapeType.line, {
  x: 5.9, y: 3.2, w: 1.3, h: 0,
  line: { color: '557A96', width: 2 }
});
slide.addShape(pptx.ShapeType.roundRect, {
  x: 7.4, y: 1.9, w: 4.8, h: 2.6,
  rectRadius: 0.16,
  line: { color: 'A8C5D3', width: 1 },
  fill: { color: 'EDF3FF' }
});
slide.addText('メモ一覧', {
  x: 7.7, y: 2.3, w: 3.9, h: 0.55,
  fontSize: 22, bold: true, color: '23364A', margin: 0
});
slide.addText('追加した項目を表示する', {
  x: 7.7, y: 3.15, w: 3.9, h: 0.5,
  fontSize: 16, color: '23364A', margin: 0
});

pptx.writeFile({ fileName: 'editable-shopping-note.pptx' });

ここでは`roundRect`で四角い枠、`line`で2つの枠を結ぶ線、`addText`で文字を置いています。`x`と`y`は位置、`w`と`h`は大きさで、主にインチ単位です。`LAYOUT_WIDE`は横長スライドのレイアウト指定です。

この例は図形とテキストを個別の部品として書き出す仕組みを練習するためのものです。実際に動く買い物メモアプリを生成するコードではありません。

手順3：PPTXを生成し、部品を確かめる

作成したファイルのあるフォルダで次のコマンドを実行します。

node create-editable-slide.cjs

成功すると`editable-shopping-note.pptx`が生成されます。PowerPointなどの対応アプリで開き、「入力フォーム」という見出しと背景の四角形を別々に選べるか確認してください。文字を変更したり、四角形の位置を動かしたりできれば、編集可能な部品として扱えています。

「入力フォーム」を選択し、別の文字に変更できるか。
薄い水色の枠だけを選択して移動できるか。
中央の線だけを選択できるか。
保存し直して開いたときに文字が見切れていないか。

生成処理が成功しても、使用するフォントやPowerPointのバージョンによって見た目に差が出る場合があります。日本語の文字が欠ける場合は、利用できるフォントを指定し直し、実際の閲覧環境で再確認してください。

よくあるエラーの切り分け

現象	確認すること
`Cannot find module`と表示される	作業フォルダで`npm install pptxgenjs`を実行したか
PPTXが見当たらない	ターミナルのカレントフォルダと`fileName`を確認
文字が枠からはみ出す	`x, y, w, h`と文字サイズを見直す
文字と図形を別々に選べない	画像貼り付けではなく`addText`と`addShape`を使っているか