PowerPoint JavaScript API を使用して図形を操作する

  • [アーティクル]

この記事では、図形、線、テキスト ボックスを Shape API と ShapeCollection API と組み合わせて使用する方法について説明します。

図形を作成する

図形はを通じて作成され、スライドの図形コレクション (slide.shapes) に格納されます。 ShapeCollection には、この目的のためにいくつかの .add* 方法があります。 すべての図形の名前と ID は、コレクションに追加されたときに生成されます。 これらは name それぞれ プロパティと id プロパティです。 name は、アドインによって設定できます。

幾何学的図形

のオーバーロードの 1 つを使用して、幾何学的図形が ShapeCollection.addGeometricShape作成されます。 最初のパラメーターは、 GeometrShapeType 列挙型か、列挙型の値の 1 つに相当する文字列です。 図形の初期サイズとスライドの左上を基準とした位置をポイント単位で指定できる、 ShapeAddOptions 型の省略可能な 2 番目のパラメーターがあります。 または、図形の作成後にこれらのプロパティを設定することもできます。

次のコード サンプルでは、スライドの上端と左側から 100 ポイント配置される "Square" という名前の四角形を作成します。 メソッドは オブジェクトを Shape 返します。

// This sample creates a rectangle positioned 100 points from the top and left sides
// of the slide and is 150x150 points. The shape is put on the first slide.
await PowerPoint.run(async (context) => {
    const shapes = context.presentation.slides.getItemAt(0).shapes;
    const rectangle = shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle);
    rectangle.left = 100;
    rectangle.top = 100;
    rectangle.height = 150;
    rectangle.width = 150;
    rectangle.name = "Square";
    await context.sync();
});

Lines

のオーバーロードの 1 つを使用して行が ShapeCollection.addLine作成されます。 最初のパラメーターは、 ConnectorType 列挙型か、列挙型の値の 1 つに相当する文字列のいずれかであり、エンドポイント間での行の競合を指定します。 行の始点と終点を指定できる ShapeAddOptions 型の省略可能な 2 番目のパラメーターがあります。 または、図形の作成後にこれらのプロパティを設定することもできます。 メソッドは オブジェクトを Shape 返します。

注:

図形が線の場合、 オブジェクトと オブジェクトの Shape プロパティと ShapeAddOptionsleft プロパティは、topスライドの上端と左端を基準にして、線の始点を指定します。 プロパティと width プロパティはheight、始点を基準とした線の端点を指定します。 そのため、スライドの上端と左端を基準とした終点は、() によって (topwidth + heightleft + ) になります。 すべてのプロパティの測定単位はポイントであり、負の値を使用できます。

次のコード サンプルでは、スライドに直線を作成します。

// This sample creates a straight line on the first slide.
await PowerPoint.run(async (context) => {
    const shapes = context.presentation.slides.getItemAt(0).shapes;
    const line = shapes.addLine(PowerPoint.ConnectorType.straight, {left: 200, top: 50, height: 300, width: 150});
    line.name = "StraightLine";
    await context.sync();
});

テキスト ボックス

テキスト ボックスは addTextBox メソッドを使用して作成されます。 最初のパラメーターは、最初にボックスに表示されるテキストです。 テキスト ボックスの初期サイズと、スライドの左上を基準とした位置を指定できる 、ShapeAddOptions 型のオプションの 2 番目のパラメーターがあります。 または、図形の作成後にこれらのプロパティを設定することもできます。

次のコード サンプルは、最初のスライドにテキスト ボックスを作成する方法を示しています。

// This sample creates a text box with the text "Hello!" and sizes it appropriately.
await PowerPoint.run(async (context) => {
    const shapes = context.presentation.slides.getItemAt(0).shapes;
    const textbox = shapes.addTextBox("Hello!");
    textbox.left = 100;
    textbox.top = 100;
    textbox.height = 300;
    textbox.width = 450;
    textbox.name = "Textbox";
    await context.sync();
});

図形の移動とサイズ変更

図形はスライドの上に配置されます。 それらの配置は、 プロパティと top プロパティによって定義されますleft。 これらは、スライドのそれぞれの端からの余白として機能し、ポイント単位で left: 0 測定され top: 0 、左上隅になります。 図形サイズは、 プロパティと width プロパティでheight指定します。 コードは、これらのプロパティをリセットすることで図形を移動またはサイズ変更できます。 (図形が線の場合、これらのプロパティの意味は少し異なります。 「行」を参照してください)。

図形のテキスト

幾何学的図形にはテキストを含めることができます。 図形には TextFrametextFrame 型のプロパティがあります。 オブジェクトは TextFrame 、テキスト表示オプション (余白やテキスト オーバーフローなど) を管理します。 TextFrame.textRange は、テキストコンテンツとフォント設定を持つ TextRange オブジェクトです。

次のコード サンプルでは、 "中かっこ" という名前の幾何学的図形を テキスト "Shape text" で作成します。 また、図形とテキストの色も調整し、テキストの垂直方向の配置を中央に設定します。

// This sample creates a light blue rectangle with braces ("{}") on the left and right ends
// and adds the purple text "Shape text" to the center.
await PowerPoint.run(async (context) => {
    const shapes = context.presentation.slides.getItemAt(0).shapes;
    const braces = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair);
    braces.left = 100;
    braces.top = 400;
    braces.height = 50;
    braces.width = 150;
    braces.name = "Braces";
    braces.fill.setSolidColor("lightblue");
    braces.textFrame.textRange.text = "Shape text";
    braces.textFrame.textRange.font.color = "purple";
    braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
    await context.sync();
});

図形を削除する

オブジェクトのメソッドを使用して Shape 、スライドから図形が delete 削除されます。

次のコード サンプルは、図形を削除する方法を示しています。

await PowerPoint.run(async (context) => {
    // Delete all shapes from the first slide.
    const sheet = context.presentation.slides.getItemAt(0);
    const shapes = sheet.shapes;

    // Load all the shapes in the collection without loading their properties.
    shapes.load("items/$none");
    await context.sync();
        
    shapes.items.forEach(function (shape) {
        shape.delete();
    });
    await context.sync();
});