JavaScript を使用してプレゼンテーションで箇条書きと番号付きリストを管理する

このページの概要

Aspose.Slides for Node.js via Java を使用して、PowerPoint および OpenDocument プレゼンテーションで箇条書き、画像箇条書き、階層リスト、番号付きリストを作成および書式設定する方法を学びます。

概要

Aspose.Slides for Node.js via Java は、PowerPoint および OpenDocument プレゼンテーションで箇条書きおよび番号付きリストを作成および書式設定できるようにします。リスト項目は、段落の書式で制御される箇条書き設定を持つ段落です。

Paragraph クラスを使用して段落レベルのリスト設定にアクセスします。主要なエントリポイントは Paragraph.getParagraphFormat().getBullet() で、BulletFormat オブジェクトを返します。このオブジェクトを使用して、箇条書きの種類、記号、画像、色、サイズ、番号付スタイル、開始番号を設定できます。

本記事では、以下を行う方法を示します。

カスタム記号を使用した箇条書きリストを作成する
画像の箇条書き (ピクチャーバレット) を作成する
段落の深さを設定して階層リストを作成する
番号付きリストを作成する
既存のプレゼンテーションでリストの書式を検査および変更する
段落テキストと共に実際のリストマーカーと番号を取得する

箇条書きリストの作成

箇条書きリストを作成するには、Paragraph オブジェクトを TextFrame に追加し、BulletFormat.setType を BulletType.Symbol に設定します。その後、BulletFormat.setChar、BulletFormat.getColor、BulletFormat.setHeight を設定して箇条書きの外観を制御できます。

以下の JavaScript コードは、スライドで箇条書きリストを作成する方法を示しています。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");

function createParagraph(text, bulletColor) {
    const paragraph = new aspose.slides.Paragraph();
    const paragraphFormat = paragraph.getParagraphFormat();
    const bulletFormat = paragraphFormat.getBullet();

    bulletFormat.setType(java.newByte(aspose.slides.BulletType.Symbol));
    bulletFormat.setChar(java.newChar("*"));
    paragraphFormat.setIndent(15);
    bulletFormat.setBulletHardColor(java.newByte(aspose.slides.NullableBool.True));
    bulletFormat.getColor().setColor(bulletColor);
    bulletFormat.setHeight(100);
    paragraph.setText(text);

    return paragraph;
}

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 20, 20, 200, 50);

    const textFrame = autoShape.getTextFrame();
    textFrame.getParagraphs().clear();

    const bulletColor = java.newInstanceSync("java.awt.Color", 205, 92, 92);

    const paragraph1 = createParagraph("The first paragraph", bulletColor);
    textFrame.getParagraphs().add(paragraph1);

    const paragraph2 = createParagraph("The second paragraph", bulletColor);
    textFrame.getParagraphs().add(paragraph2);

    presentation.save("symbol_bullets.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

結果：

シンボルの箇条書き

番号付きリストの作成

項目の順序が重要な場合は、番号付きリストを使用します。BulletFormat.setType を BulletType.Numbered に設定します。また、BulletFormat.setNumberedBulletStyle で番号付スタイルを選択したり、BulletFormat.setNumberedBulletStartWith でリストの開始番号を 1 以外に設定できます。

以下の JavaScript コードは、スライドで番号付きリストを作成する方法を示しています。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 20, 20, 90, 80);

    const textFrame = autoShape.getTextFrame();
    textFrame.getParagraphs().clear();

    const paragraph1 = new aspose.slides.Paragraph();
    paragraph1.getParagraphFormat().getBullet().setType(java.newByte(aspose.slides.BulletType.Numbered));
    paragraph1.setText("Apple");
    textFrame.getParagraphs().add(paragraph1);

    const paragraph2 = new aspose.slides.Paragraph();
    paragraph2.getParagraphFormat().getBullet().setType(java.newByte(aspose.slides.BulletType.Numbered));
    paragraph2.setText("Orange");
    textFrame.getParagraphs().add(paragraph2);

    const paragraph3 = new aspose.slides.Paragraph();
    paragraph3.getParagraphFormat().getBullet().setType(java.newByte(aspose.slides.BulletType.Numbered));
    paragraph3.setText("Banana");
    textFrame.getParagraphs().add(paragraph3);

    presentation.save("numbered_bullets.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

結果：

番号付き箇条書き

画像箇条書きの作成

Aspose.Slides を使用すると、通常の箇条書き記号を画像に置き換えることができます。画像箇条書きは、アイコンや小さな透過 PNG ファイルなど、サイズが小さくても可読性を保てるシンプルな画像で最適に機能します。

Note

理想的には、通常の箇条書き記号を画像に置き換える場合、透明な背景を持つシンプルなグラフィックを選択するのが最適です。そのような画像はカスタム箇条書き記号としてうまく機能します。

画像は非常に小さなサイズに縮小されるため、リストの箇条書きとして使用したときに鮮明で視覚的に効果的な画像を選択することを強く推奨します。

画像箇条書きを作成するには、Presentation.getImages().addImage で画像を Presentation に追加し、返された PPImage オブジェクトを BulletFormat.getPicture().setImage に割り当てます。画像を割り当てる前に、BulletFormat.setType を BulletType.Picture に設定してください。

たとえば、“image.png” があるとします：

箇条書き用の画像

以下の JavaScript コードは、スライドで画像箇条書きを作成する方法を示しています。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");

function createParagraph(text, image) {
    const paragraph = new aspose.slides.Paragraph();
    const paragraphFormat = paragraph.getParagraphFormat();
    const bulletFormat = paragraphFormat.getBullet();

    bulletFormat.setType(java.newByte(aspose.slides.BulletType.Picture));
    bulletFormat.getPicture().setImage(image);
    paragraphFormat.setIndent(15);
    bulletFormat.setHeight(100);
    paragraph.setText(text);

    return paragraph;
}

const presentation = new aspose.slides.Presentation();
let image = null;
try {
    const slide = presentation.getSlides().get_Item(0);

    const autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 20, 20, 200, 50);

    const textFrame = autoShape.getTextFrame();
    textFrame.getParagraphs().clear();

    image = aspose.slides.Images.fromFile("image.png");
    const bulletImage = presentation.getImages().addImage(image);

    const paragraph1 = createParagraph("The first paragraph", bulletImage);
    textFrame.getParagraphs().add(paragraph1);

    const paragraph2 = createParagraph("The second paragraph", bulletImage);
    textFrame.getParagraphs().add(paragraph2);

    presentation.save("picture_bullets.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (image !== null) {
        image.dispose();
    }
    presentation.dispose();
}

結果：

画像の箇条書き

階層リストの作成

ParagraphFormat.setDepth を使用して、リスト項目を異なるレベルに配置します。レベル 0 が最上位、レベル 1 がその下位にネストされる、といった具合です。

以下の JavaScript コードは、階層化された箇条書きリストを作成する方法を示しています。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);

    const autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 20, 20, 260, 110);

    const textFrame = autoShape.getTextFrame();
    textFrame.getParagraphs().clear();

    const paragraph1 = new aspose.slides.Paragraph();
    paragraph1.getParagraphFormat().setDepth(java.newShort(0));
    paragraph1.setText("My text - Depth 0");
    textFrame.getParagraphs().add(paragraph1);

    const paragraph2 = new aspose.slides.Paragraph();
    paragraph2.getParagraphFormat().setDepth(java.newShort(1));
    paragraph2.setText("My text - Depth 1");
    textFrame.getParagraphs().add(paragraph2);

    const paragraph3 = new aspose.slides.Paragraph();
    paragraph3.getParagraphFormat().setDepth(java.newShort(2));
    paragraph3.setText("My text - Depth 2");
    textFrame.getParagraphs().add(paragraph3);

    const paragraph4 = new aspose.slides.Paragraph();
    paragraph4.getParagraphFormat().setDepth(java.newShort(3));
    paragraph4.setText("My text - Depth 3");
    textFrame.getParagraphs().add(paragraph4);

    presentation.save("multilevel_bullets.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

結果：

階層リスト

既存リストの変更

既存のプレゼンテーションでリスト書式を変更するには、対象の段落にアクセスし、ParagraphFormat.getBullet 設定を更新します。リスト作成時に使用した同じプロパティを使用して、PPT、PPTX、または ODP ファイルからロードしたリストを検査または変更できます。

以下の JavaScript コードは、テキストフレーム内の最初の段落を番号付きリストスタイルに変更します。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");

const presentation = new aspose.slides.Presentation("input.pptx");
try {
    const slide = presentation.getSlides().get_Item(0);

    const autoShape = slide.getShapes().get_Item(0);

    const paragraph = autoShape.getTextFrame().getParagraphs().get_Item(0);

    const paragraphFormat = paragraph.getParagraphFormat();
    const bulletFormat = paragraphFormat.getBullet();

    bulletFormat.setType(java.newByte(aspose.slides.BulletType.Numbered));
    bulletFormat.setNumberedBulletStyle(java.newByte(aspose.slides.NumberedBulletStyle.BulletRomanUCPeriod));
    bulletFormat.setNumberedBulletStartWith(java.newShort(1));
    paragraphFormat.setMarginLeft(30);
    paragraphFormat.setIndent(-20);

    presentation.save("updated_list.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

実際の箇条書き値の取得

プレゼンテーションコンテンツを抽出する際は、段落テキストと共にリストマーカーを保持してください。ParagraphFormat.getEffective を呼び出し、IParagraphFormatEffectiveData.getBullet にアクセスして有効な箇条書き書式を取得します。取得したオブジェクトの getType を確認した上で、getActualBulletValue を呼び出します。

番号付きリストの場合、次の 3 つの値を区別します。

getNumberedBulletStyle は、アラビア数字にピリオドを付ける形式や小文字アルファベットにピリオドを付ける形式など、フォーマットを決定します。
getNumberedBulletStartWith は、番号付き段落のグループの開始番号を指定します。
getActualBulletValue は、特定の段落に対してフォーマットされたマーカーを返します。たとえば、5 から開始するリストの 2 番目の項目は 6. を返します。

各段落のネストレベルを保持するために、getDepth を保持してください。実際のマーカーは完全な階層をエンコードしません。入れ子の項目は c. のように返すことがあり、6.c. のような結合ラベルにはなりません。

以下の自己完結型サンプルはリストを作成し、プレゼンテーションに保存し、プレゼンテーションを再読み込みして各段落のテキスト、深さ、箇条書きタイプ、および実際の値をレポートします。小さな青色の画像マーカーはインライン SVG から作成されます。

var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const black = java.newInstanceSync("java.awt.Color", 0, 0, 0);

const presentation = new aspose.slides.Presentation();
try {
    presentation.getSlideSize().setSize(720, 440, aspose.slides.SlideSizeScaleType.DoNotScale);
    const slide = presentation.getSlides().get_Item(0);

    const shape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 30, 20, 660, 400);
    shape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    shape.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));

    const textFrame = shape.getTextFrame();
    textFrame.getParagraphs().clear();

    // 外部画像ファイルを使用せずに画像マーカーを作成します。
    const svg = new aspose.slides.SvgImage("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect width='16' height='16' rx='4' fill='#0078D4'/></svg>");
    const bulletImage = presentation.getImages().addImage(svg);

    function addParagraph(text, depth, type, start, style) {
        const paragraph = new aspose.slides.Paragraph();
        paragraph.setText(text);

        const format = paragraph.getParagraphFormat();
        format.setDepth(java.newShort(depth));
        format.setMarginLeft(30 + depth * 40);
        format.setIndent(-28);
        format.setSpaceAfter(8);
        format.getDefaultPortionFormat().setFontHeight(22);
        format.getDefaultPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
        format.getDefaultPortionFormat().getFillFormat().getSolidFillColor().setColor(black);
        format.getBullet().setType(java.newByte(type));
        format.getBullet().setBulletHardColor(java.newByte(aspose.slides.NullableBool.True));
        format.getBullet().getColor().setColor(black);
        if (type === aspose.slides.BulletType.Numbered) {
            format.getBullet().setNumberedBulletStyle(java.newByte(style));
            format.getBullet().setNumberedBulletStartWith(java.newShort(start));
        } else if (type === aspose.slides.BulletType.Symbol) {
            format.getBullet().setChar(java.newChar(0x2022));
        } else if (type === aspose.slides.BulletType.Picture) {
            format.getBullet().getPicture().setImage(bulletImage);
        }

        textFrame.getParagraphs().add(paragraph);
    }

    addParagraph("First item", 0, aspose.slides.BulletType.Numbered, 5, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    addParagraph("Second item", 0, aspose.slides.BulletType.Numbered, 5, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    addParagraph("Nested item", 1, aspose.slides.BulletType.Numbered, 3, aspose.slides.NumberedBulletStyle.BulletAlphaLCPeriod);
    addParagraph("Next nested item", 1, aspose.slides.BulletType.Numbered, 3, aspose.slides.NumberedBulletStyle.BulletAlphaLCPeriod);
    addParagraph("Deep item", 2, aspose.slides.BulletType.Numbered, 4, aspose.slides.NumberedBulletStyle.BulletRomanLCPeriod);
    addParagraph("Back to top level", 0, aspose.slides.BulletType.Numbered, 5, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    addParagraph("Symbol marker", 0, aspose.slides.BulletType.Symbol, 1, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    addParagraph("No bullet", 0, aspose.slides.BulletType.None, 1, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    addParagraph("Picture marker", 0, aspose.slides.BulletType.Picture, 1, aspose.slides.NumberedBulletStyle.BulletArabicPeriod);
    presentation.save("actual_bullet_values.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

const loadedPresentation = new aspose.slides.Presentation("actual_bullet_values.pptx");
try {
    const loadedShape = loadedPresentation.getSlides().get_Item(0).getShapes().get_Item(0);
    console.log("Text | Depth | Type | Actual value");
    const paragraphs = loadedShape.getTextFrame().getParagraphs();
    for (let i = 0; i < paragraphs.getCount(); i++) {
        const paragraph = paragraphs.get_Item(i);
        const bullet = paragraph.getParagraphFormat().getEffective().getBullet();
        let marker;
        switch (bullet.getType()) {
            case aspose.slides.BulletType.Numbered:
            case aspose.slides.BulletType.Symbol:
                marker = bullet.getActualBulletValue();
                break;
            case aspose.slides.BulletType.None:
                marker = bullet.getActualBulletValue() + " (no bullet)";
                break;
            case aspose.slides.BulletType.Picture:
                marker = bullet.getActualBulletValue() + " (image required)";
                break;
            default:
                marker = "unsupported bullet type";
                break;
        }
        const typeName = Object.keys(aspose.slides.BulletType).find(name => aspose.slides.BulletType[name] === bullet.getType());
        console.log(paragraph.getText() + " | " + paragraph.getParagraphFormat().getDepth() + " | " + typeName + " | " + marker);
    }
} finally {
    loadedPresentation.dispose();
}

ソースリストは以下に示します。

5から開始するリスト、入れ子の文字およびローマ数字項目、シンボルマーカー、箇条書きなしの段落、青い画像マーカー

レポートは PowerPoint に表示されるマーカーと一致します：

Text | Depth | Type | Actual value
First item | 0 | Numbered | 5.
Second item | 0 | Numbered | 6.
Nested item | 1 | Numbered | c.
Next nested item | 1 | Numbered | d.
Deep item | 2 | Numbered | iv.
Back to top level | 0 | Numbered | 7.
Symbol marker | 0 | Symbol | •
No bullet | 0 | None | null (no bullet)
Picture marker | 0 | Picture | null (image required)

BulletType.None and BulletType.Picture の場合、getActualBulletValue は null を返し、空文字列は返しません。これらのタイプは別々に処理してください。前者はマーカーがなく、後者は箇条書き画像を別途取得する必要があります。画像箇条書きはテキストマーカーのみを抽出して再現することはできません。

よくある質問

箇条書きおよび番号付きリストは PDF や画像にエクスポートできますか？

はい。Aspose.Slides は、対象フォーマットが対応するテキストレイアウトと箇条書き機能をサポートしている場合、リスト書式を保持します。

既存のプレゼンテーションでリストを編集できますか？

はい。プレゼンテーションをロードし、対象の段落にアクセスして ParagraphFormat.getBullet 設定を検査または更新し、プレゼンテーションを保存します。

リストにラテン文字以外のテキストを含めることはできますか？

はい。リスト項目のテキストは Unicode 文字を含めることができるため、マルチリンガルなプレゼンテーションでリストを作成できます。使用するフォントが必要な文字をサポートしていることを確認してください。

プレゼンテーションビューア JavaScript でプレゼンテーションプロパティを管理する