PowerPoint プレゼンテーションで図形をバインドおよび更新する

外部データ ソースからの数値の更新など、後でアドインで同じ図形を検索して更新する必要がある場合は、図形バインドを使用します。

バインドにより、図形の安定した識別子が作成されます。 アドインでは、その識別子を使用して図形を再度取得し、更新し、図形が削除されたケースを処理できます。

バインドには、次の 2 つの主な利点があります。

• アドインとドキュメント内の図形の間にリレーションシップを確立します。 ドキュメントはバインドを保持するため、後でアクセスできます。
• ユーザーが図形を選択する必要なく、読み取りまたは更新のために図形プロパティにアクセスできます。

次の図は、アドインがスライド上の 2 つの図形にバインドする方法を示しています。 各図形には、アドインによって作成されたバインド ID ( star と pie) があります。 バインド ID を使用すると、アドインは目的の図形にアクセスしてそのプロパティを更新できます。

シナリオ: 図形をデータ ソースと同期する

一般的なシナリオは、プレゼンテーション ビジュアルをデータ ソースから最新の状態に保つことです。 アドインは、手動でイメージを置き換える代わりに、最新のデータを取得し、Base64 でエンコードされたイメージに変換し、バインド ID を使用して正しい図形を更新できます。

一般的な実装では、PowerPointで図形をバインドし、データ ソースの新しいイメージで更新するための 2 つのコンポーネントを検討してください。

1. データ ソース。 これは、Microsoft SharePoint や Microsoft OneDrive などのデータまたは資産ライブラリのソースです。
2. PowerPoint アドイン。 アドインは、ユーザーが必要とする内容に基づいてデータ ソースからデータを取得します。 データを Base64 でエンコードされたイメージに変換します。 これは、バインドされた図形が受け入れられる唯一の塗りつぶしの種類です。 ユーザーの要求に図形を挿入し、一意の識別子でバインドします。 次に、元のデータ ソースに基づいて Base64 イメージで図形を塗りつぶします。 図形はユーザーの要求に応じて更新され、アドインはバインド識別子を使用して図形を検索し、最後に保存した Base64 イメージでイメージを更新します。

PowerPointでバインドされた図形を作成する

BindingCollection.add を使用して、特定の図形を参照するバインドを作成します。

次の例は、最初に選択したスライドに図形を作成する方法を示しています。

await PowerPoint.run(async (context) => {
    const slides = context.presentation.getSelectedSlides();

    // Insert new shape on first selected slide.
    const myShape = slides
        .getItemAt(0)
        .shapes.addGeometricShape(PowerPoint.GeometricShapeType.rectangle, {
            top: 100,
            left: 30,
            width: 200,
            height: 200
        });

    // Fill shape with a Base64-encoded image.
    // Note: The image is typically created from a data source request.
    const productsImage = "...Base64 image data...";
    myShape.fill.setImage(productsImage);

    await context.sync();
});

BindingCollection.add を呼び出して、PowerPoint バインド コレクションに図形を追加します。 次の例は、前のサンプルから続き、 myShapeの新しいバインドを追加します。

// Create a binding ID to track the shape for later updates.
const bindingId = "productChart";
// Create a binding by adding the shape to the bindings collection.
context.presentation.bindings.add(myShape, PowerPoint.BindingType.shape, bindingId);

更新されたデータを使用してバインドされた図形を更新する

イメージ データの更新が完了したら、バインド識別子を使用して図形イメージを検索して、図形イメージを更新します。 次のコード サンプルは、識別子を持つバインドされた図形を見つけて、更新されたイメージで埋める方法を示しています。 イメージは、データ ソース要求に基づいてアドインによって更新されるか、データ ソースによって直接提供されます。

async function updateBinding(bindingId, image) {
    await PowerPoint.run(async (context) => {
        try {
            // Get the shape based on binding ID.
            const myShape = context.presentation.bindings
                .getItem(bindingId)
                .getShape();

            // Update the shape to latest image.
            myShape.fill.setImage(image);
            await context.sync();

        } catch (err) {
            console.error(err);
        }
    });
}

バインドを削除する

次の例では、バインドコレクションからバインドを削除してバインドを削除する方法を示します。

async function deleteBinding(bindingId) {
    await PowerPoint.run(async (context) => {
        context.presentation.bindings.getItem(bindingId).delete();
        await context.sync();
    });
}

バインドの読み込み

ユーザーがプレゼンテーションを開き、アドインが最初に読み込まれたら、すべてのバインドを読み込んで作業を続けることができます。 次のコードは、プレゼンテーション内のすべてのバインドを読み込み、コンソールに表示する方法を示しています。

async function loadBindings() {
    await PowerPoint.run(async (context) => {
        try {
            const myBindings = context.presentation.bindings;
            myBindings.load("items");
            await context.sync();

            // Log all binding IDs to console.
            if (myBindings.items.length > 0) {
                myBindings.items.forEach((binding) => {
                    console.log(binding.id);
                });
            }
        } catch (err) {
            console.error(err);
        }
    });
}

バインドまたは図形が削除されたときのエラー処理

図形を削除すると、PowerPointバインド コレクションから関連付けられているバインドも削除されます。 メソッドまたはアクセス プロパティを呼び出すと、そのバインドまたは図形への参照が失敗する可能性があります。 アドインに Binding または Shape オブジェクトが格納されている場合は、これらのエラー シナリオを処理します。

次のコードは、バインド オブジェクトが削除されたバインドを参照する場合のエラー処理に対する 1 つのアプローチを示しています。 try/catch ステートメントを使用し、エラーが発生したときに関数を呼び出して、すべてのバインディング参照とシェイプ参照を再読み込みします。

async function getShapeFromBindingID(id) {
    await PowerPoint.run(async (context) => {
        try {
            const binding = context.presentation.bindings.getItem(id);
            const shape = binding.getShape();

            await context.sync();
            return shape;
        } catch (err) {
            console.log(err);
            return undefined;
        }
    });
}

関連項目

視覚的な鮮度を維持する場合は、Shape.zOrderPosition を使用して図形レイヤーをチェックすることもできます。

• PowerPoint アドインで図形を作成して書式設定する
• Office アドインでの JavaScript オブジェクト モデルのPowerPoint
• 最初の PowerPoint 作業ウィンドウ アドインをビルドする
• チュートリアル: PowerPoint 作業ウィンドウ アドインを作成する
• ドキュメントまたはスプレッドシート内の領域へのバインド
• PowerPoint JavaScript API リファレンス