チュートリアル: PowerPoint 作業ウィンドウアドインを作成する

[アーティクル]
12/11/2023

このチュートリアルでは、Visual Studio Code (VS Code)、Visual Studio、または任意のコードエディターを使用して、次の PowerPoint 作業ウィンドウアドインを作成します。

スライドに画像を追加する
スライドにテキストを追加する
スライドのメタデータを取得する
新しいスライドを追加する
スライド間を移動する

Office アドイン用の Yeoman ジェネレーターまたは Visual Studio を使用して Office アドインを作成することができます。 Yeoman ジェネレーターでは Visual Studio Code またはその他のエディターで管理できる Node.js プロジェクトを作成します。一方、Visual Studio では Visual Studio のソリューションを作成します。使用する方のタブを選択し、手順に従ってアドインを作成してローカルでテストします。

Yeoman ジェネレーター
Visual Studio

アドインを作成する

ヒント

Yeoman ジェネレーターを使用して最初の PowerPoint 作業ウィンドウアドインをビルドするクイックスタートを既に完了していて、このチュートリアルの出発点としてそのプロジェクトを使用する場合は、このチュートリアルを開始するには、直接 [ イメージの挿入 ] セクションに移動します。

このチュートリアルの完成したバージョンが必要な場合は、 GitHub の Office アドインサンプルリポジトリに進んでください。

前提条件

Node.js (最新 LTS バージョン)。 Node.js サイトにアクセスして、オペレーティングシステムに適したバージョンをダウンロードしてインストールします。
最新バージョンの Yeoman と Office アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンドプロンプトから次のコマンドを実行します。
```
npm install -g yo generator-office
```
注:

Yeomanのジェネレーターを過去に取付けている場合でも、npmからのパッケージを最新のバージョンにすることをお勧めします。
Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

注:

まだ Office をお持ちでない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

アドインプロジェクトの作成

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドインプロジェクトを作成します。プロジェクトを含むフォルダーが現在のディレクトリに追加されます。

yo office

注:

yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。提供された情報を使用して、必要に応じてプロンプトに応答します。

プロンプトが表示されたら、以下の情報を入力してアドインプロジェクトを作成します。

プロジェクトの種類を選択します。Office Add-in Task Pane project
スクリプトの種類を選択します。JavaScript
アドインに何の名前を付けたいですか?My Office Add-in
サポートする Office クライアントアプリケーションはどれですか?PowerPoint

コマンドラインインターフェイスでの Yeoman ジェネレーターのプロンプトと回答。

ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノードコンポーネントがインストールされます。

注:

バージョン 20.0.0 以降 Node.js 使用している場合は、ジェネレーターがインストールを実行するときに、サポートされていないエンジンがあることを示す警告が表示されることがあります。この問題の修正に取り組んでいます。その間、警告は生成するジェネレーターまたはプロジェクトに影響しないため、無視できます。

ヒント

アドインプロジェクトの作成後に Yeoman ジェネレーターが提供する次の手順ガイダンスは無視できます。この記事中の詳しい手順は、このチュートリアルを完了するために必要なすべてのガイダンスを提供します。

設定を完了する

プロジェクトのルートディレクトリに移動します。
```
cd "My Office Add-in"
```
VS Code またはお好みのコードエディターでプロジェクトを開きます。

ヒント

Windows では、コマンドラインからプロジェクトのルートディレクトリに移動し、code . を入力して VS Code でそのフォルダーを開くことができます。 Mac では、VS Code でプロジェクトフォルダーを開くためにそのコマンドを使用する前に、code コマンドをパスに追加する必要があります。

画像の挿入

次の手順を実行して、画像をスライドに挿入するコードを追加します。

コードエディターでプロジェクトを開きます。
プロジェクトのルートで、base64Image.js という新しいファイルを作成します。

ファイルbase64Image.js を開き、次のコードを追加して、イメージを表す Base64 でエンコードされた文字列を指定します。

export const base64Image =
    "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";

ファイル ./src/taskpane/taskpane.html を開きます。このファイルには、作業ウィンドウの HTML マークアップが含まれます。

<body> 要素を見つけます。これを次のマークアップに置き換え、ファイルを保存します。

<body class="ms-font-m ms-welcome ms-Fabric">
    <!-- TODO2: Update the header node. -->
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
        <h1 class="ms-font-su">Welcome</h1>
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl">Please <a target="_blank" href="https://learn.microsoft.com/office/dev/add-ins/testing/test-debug-office-add-ins#sideload-an-office-add-in-for-testing">sideload</a> your add-in to see app body.</h2>
    </section>
    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <div class="padding">
            <!-- TODO1: Create the insert-image button. -->
            <!-- TODO3: Create the insert-text button. -->
            <!-- TODO4: Create the get-slide-metadata button. -->
            <!-- TODO5: Create the add-slides and go-to-slide buttons. -->
        </div>
    </main>
    <section id="display-msg" class="ms-welcome__main">
        <div class="padding">
            <h3>Message</h3>
            <div id="message"></div>
        </div>
    </section>
</body>

taskpane.html ファイルで、を次のマークアップに置き換えますTODO1。このマークアップにより、アドインの作業ウィンドウ内に表示される [イメージの挿入] ボタンを定義します。
```
<button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>
```

ファイル ./src/taskpane/taskpane.js を開きます。このファイルには、作業ウィンドウと Office クライアントアプリケーションの間のやり取りを容易にする Office JavaScript API コードが含まれています。すべての内容を次のコードに置き換え、ファイルを保存します。

/*
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

/* global document, Office */

// TODO1: Import Base64-encoded string for image.
Office.onReady((info) => {
  if (info.host === Office.HostType.PowerPoint) {
    document.getElementById("sideload-msg").style.display = "none";
    document.getElementById("app-body").style.display = "flex";
    // TODO2: Assign event handler for insert-image button.
    // TODO4: Assign event handler for insert-text button.
    // TODO6: Assign event handler for get-slide-metadata button.
    // TODO8: Assign event handlers for add-slides and the four navigation buttons.
  }
});

// TODO3: Define the insertImage function.

// TODO5: Define the insertText function.

// TODO7: Define the getSlideMetadata function.

// TODO9: Define the addSlides and navigation functions.

async function clearMessage(callback) {
  document.getElementById("message").innerText = "";
  await callback();
}

function setMessage(message) {
  document.getElementById("message").innerText = message;
}

// Default helper for invoking an action and handling errors.
async function tryCatch(callback) {
  try {
    document.getElementById("message").innerText = "";
    await callback();
  } catch (error) {
    setMessage("Error: " + error.toString());
  }
}

ファイルの先頭付近の関数呼び出しのOffice.onReady上にある taskpane.js ファイルで、を次のコードに置き換えますTODO1。このコードは、ファイル ./base64Image.js で以前に定義した変数をインポートします。
```
import { base64Image } from "../../base64Image";
```
taskpane.js ファイルで、を次のコードに置き換えてTODO2、[イメージの挿入] ボタンのイベントハンドラーを割り当てます。
```
document.getElementById("insert-image").onclick = () => clearMessage(insertImage);
```
taskpane.js ファイルで、を次のコードに置き換えてTODO3関数を定義しますinsertImage。この関数は Office JavaScript API を使用してイメージをドキュメントに挿入します。注意:
- coercionType 要求の 2 番目のパラメーターとして指定されている setSelectedDataAsync オプションは、挿入されるデータの種類を示します。
- asyncResult オブジェクトは setSelectedDataAsync 要求が失敗した場合の状態やエラー情報など、その要求の結果をカプセル化します。
```
function insertImage() {
  // Call Office.js to insert the image into the document.
  Office.context.document.setSelectedDataAsync(
    base64Image,
    {
      coercionType: Office.CoercionType.Image
    },
    (asyncResult) => {
      if (asyncResult.status === Office.AsyncResultStatus.Failed) {
        setMessage("Error: " + asyncResult.error.message);
      }
    }
  );
}
```
すべての変更をプロジェクトに保存します。

アドインをテストする

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
以下の手順を実行し、ローカル Web サーバーを起動してアドインのサイドロードを行います。

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。
```
npm start
```
- ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、を {url} 単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、[ ホーム ] タブを選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。
作業ウィンドウで、[ イメージの挿入 ] ボタンを選択して、現在のスライドに画像を追加します。

ユーザーインターフェイス (UI) 要素をカスタマイズする

作業ウィンドウの UI をカスタマイズするマークアップを追加するには、次の手順を実行します。

taskpane.html ファイルで、と現在のヘッダーセクションを次のマークアップに置き換えてTODO2、作業ウィンドウのヘッダーセクションとタイトルを更新します。注意：
- ms- で始まるスタイルは、Office アドインの Fabric Core で定義されています。これは、Office のユーザーエクスペリエンスを構築するための JavaScript フロントエンドのフレームワークです。 taskpane.html ファイルには、Fabric Core スタイルシートへの参照が含まれています。
```
<header id="content-header">
    <div class="ms-Grid ms-bgColor-neutralPrimary">
        <div class="ms-Grid-row">
            <div class="padding ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12"> <div class="ms-font-xl ms-fontColor-white ms-fontWeight-semibold">My PowerPoint add-in</div></div>
        </div>
    </div>
</header>
```
すべての変更をプロジェクトに保存します。

アドインをテストする

ローカル Web サーバーがまだ実行されていない場合は、次の手順を実行してローカル Web サーバーを起動し、アドインをサイドロードします。

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。
```
npm start
```
- ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、を {url} 単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウに、更新されたヘッダーセクションとタイトルが含まれていることに注意してください。

テキストの挿入

次の手順を実行して、画像を含むタイトルスライドにテキストを挿入するコードを追加します。

taskpane.html ファイルで、を次のマークアップに置き換えますTODO3。このマークアップにより、アドインの作業ウィンドウ内に表示される [テキストの挿入] ボタンを定義します。
```
<button class="ms-Button" id="insert-text">Insert Text</button><br/><br/>
```
taskpane.js ファイルで、を次のコードに置き換えてTODO4、[テキストの挿入] ボタンのイベントハンドラーを割り当てます。
```
document.getElementById("insert-text").onclick = () => clearMessage(insertText);
```

taskpane.js ファイルで、を次のコードに置き換えてTODO5関数を定義しますinsertText。この関数は、現在のスライドにテキストを挿入します。

function insertText() {
  Office.context.document.setSelectedDataAsync("Hello World!", (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    }
  });
}

すべての変更をプロジェクトに保存します。

アドインをテストする

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
ローカル Web サーバーがまだ実行されていない場合は、次の手順を実行してローカル Web サーバーを起動し、アドインをサイドロードします。

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。
```
npm start
```
- ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、を {url} 単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで、[ イメージの挿入 ] ボタンを選択して現在のスライドに画像を追加し、タイトルのテキストボックスを含むスライドのデザインを選択します。
タイトルスライドのテキストボックスにカーソルを置き、作業ウィンドウで [テキストの挿入] ボタンをクリックしてテキストをスライドに追加します。

スライドのメタデータの取得

選択したスライドのメタデータを取得するコードを追加するには、次の手順を実行します。

taskpane.html ファイルで、を次のマークアップに置き換えますTODO4。このマークアップにより、アドインの作業ウィンドウ内に表示される [Get Slide Metadata] (スライドのメタデータの取得) ボタンを定義します。
```
<button class="ms-Button" id="get-slide-metadata">Get Slide Metadata</button><br/><br/>
```
taskpane.js ファイルでを次のコードに置き換えてTODO6、[スライドメタデータの取得] ボタンのイベントハンドラーを割り当てます。
```
document.getElementById("get-slide-metadata").onclick = () => clearMessage(getSlideMetadata);
```

taskpane.js ファイルで、を次のコードに置き換えてTODO7関数を定義しますgetSlideMetadata。この関数は、選択したスライドのメタデータを取得し、アドイン作業ウィンドウの [メッセージ] セクションに書き込みます。

function getSlideMetadata() {
  Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    } else {
      setMessage("Metadata for selected slides: " + JSON.stringify(asyncResult.value));
    }
  });
}

すべての変更をプロジェクトに保存します。

アドインをテストする

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
ローカル Web サーバーがまだ実行されていない場合は、次の手順を実行してローカル Web サーバーを起動し、アドインをサイドロードします。

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。
```
npm start
```
- ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、を {url} 単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで [Get Slide Metadata] (スライドのメタデータの取得) ボタンを選択し、選択したスライドのメタデータを取得します。スライドメタデータは、作業ウィンドウのボタンの下にある [メッセージ] セクションに書き込まれます。この例では、JSON メタデータ内の slides 配列に、選択したスライドの id、title、および index を指定するオブジェクトが 1 つ含まれます。スライドのメタデータを取得するときに複数のスライドが選択されている場合、JSON メタデータ内の slides 配列には、選択したスライドごとにオブジェクトが 1 つ含まれます。

スライド間の移動

ドキュメントのスライド間を移動するコードを追加するには、次の手順を実行します。

taskpane.html ファイルで、を次のマークアップに置き換えますTODO5。このマークアップにより、アドインの作業ウィンドウ内に表示される 4 つのナビゲーションボタンを定義します。

<button class="ms-Button" id="add-slides">Add Slides</button><br/><br/>
<button class="ms-Button" id="go-to-first-slide">Go to First Slide</button><br/><br/>
<button class="ms-Button" id="go-to-next-slide">Go to Next Slide</button><br/><br/>
<button class="ms-Button" id="go-to-previous-slide">Go to Previous Slide</button><br/><br/>
<button class="ms-Button" id="go-to-last-slide">Go to Last Slide</button><br/><br/>

taskpane.js ファイルで、を次のコードに置き換えてTODO8、[スライドの追加] と 4 つのナビゲーションボタンのイベントハンドラーを割り当てます。

document.getElementById("add-slides").onclick = () => tryCatch(addSlides);
document.getElementById("go-to-first-slide").onclick = () => clearMessage(goToFirstSlide);
document.getElementById("go-to-next-slide").onclick = () => clearMessage(goToNextSlide);
document.getElementById("go-to-previous-slide").onclick = () => clearMessage(goToPreviousSlide);
document.getElementById("go-to-last-slide").onclick = () => clearMessage(goToLastSlide);

taskpane.js ファイルで、を次のコードに置き換えてTODO9、およびナビゲーション関数をaddSlides定義します。これらの関数では goToByIdAsync 関数を使用して、ドキュメント内のその位置 (最初、最後、前、次) に基づいてスライドを選択します。

async function addSlides() {
  await PowerPoint.run(async function (context) {
    context.presentation.slides.add();
    context.presentation.slides.add();

    await context.sync();

    goToLastSlide();
    setMessage("Success: Slides added.");
  });
}

function goToFirstSlide() {
  Office.context.document.goToByIdAsync(Office.Index.First, Office.GoToType.Index, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    }
  });
}

function goToLastSlide() {
  Office.context.document.goToByIdAsync(Office.Index.Last, Office.GoToType.Index, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    }
  });
}

function goToPreviousSlide() {
  Office.context.document.goToByIdAsync(Office.Index.Previous, Office.GoToType.Index, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    }
  });
}

function goToNextSlide() {
  Office.context.document.goToByIdAsync(Office.Index.Next, Office.GoToType.Index, (asyncResult) => {
    if (asyncResult.status === Office.AsyncResultStatus.Failed) {
      setMessage("Error: " + asyncResult.error.message);
    }
  });
}

すべての変更をプロジェクトに保存します。

アドインをテストする

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
ローカル Web サーバーがまだ実行されていない場合は、次の手順を実行してローカル Web サーバーを起動し、アドインをサイドロードします。

注:

Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
ヒント

Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。このコマンドを実行すると、ローカル Web サーバーが起動します。
```
npm run dev-server
```
- PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。
```
npm start
```
- ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルートディレクトリから次のコマンドを実行します。このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。
  
  注:
  
  Mac で開発している場合は、を {url} 単一引用符で囲みます。 Windows ではこれを行 わないでください 。
```
npm run start:web -- --document {url}
```
  次に例を示します。
  - npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
  - npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
  - npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP
  ドキュメントにアドインがサイドロードされない場合は、「アドインを手動でサイドロードしてOffice on the webする」の手順に従って手動でサイドロードします。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで、[ スライドの追加 ] ボタンを選択します。 2 つの新しいスライドがドキュメントに追加され、ドキュメントの最後のスライドが選択されて表示されます。
作業ウィンドウで [最初のスライドに移動] ボタンをクリックします。ドキュメントの最初のスライドが選択され、表示されます。
作業ウィンドウで [次のスライドに移動] ボタンをクリックします。ドキュメントの次のスライドが選択され、表示されます。
作業ウィンドウで [前のスライドに移動] ボタンをクリックします。ドキュメントの前のスライドが選択され、表示されます。
作業ウィンドウで [最後のスライドに移動] ボタンをクリックします。ドキュメントの最後のスライドが選択され、表示されます。
Web サーバーが実行されている場合は、サーバーを停止するときに次のコマンドを実行します。
```
npm stop
```

コードサンプル

完了した PowerPoint アドインチュートリアル: このチュートリアルを完了した結果。

ヒント

このチュートリアルの完成したバージョンが必要な場合は、 GitHub の Office アドインサンプルリポジトリに進んでください。

前提条件

Office/SharePoint 開発ワークロードがインストールされている Visual Studio 2019 以降。

注:

既に Visual Studio がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。
Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

注:

まだ Office をお持ちでない場合は、Microsoft 365 開発者プログラムを通じた開発に使用するMicrosoft 365 E5開発者サブスクリプションの対象となる場合があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

アドインプロジェクトの作成

Visual Studio を使用して PowerPoint アドインプロジェクトを作成するには次の手順を実行します。

[新規プロジェクトの作成] を選択します。
検索ボックスを使用して、アドインと入力します。 [PowerPoint Web アドイン] を選択し、[次へ] を選択します。
プロジェクトに「HelloWorld」という名前を付けて、[作成] を選択します。
[Office アドインの作成] ダイアログウィンドウで、[新機能を PowerPoint に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。
ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューションエクスプローラーに表示されます。 Home.html ファイルが Visual Studio で開きます。
次の NuGet パッケージをインストールする必要があります。 Visual Studio の NuGet パッケージマネージャーを使用して、HelloWorldWeb プロジェクトにインストールします。手順については、Visual Studio のヘルプを参照してください。これらの 2 つ目は、最初のインストール時に自動的にインストールされる場合があります。
- Microsoft.AspNet.WebApi.WebHost
- Microsoft.AspNet.WebApi.Core
重要

NuGet パッケージマネージャーを使用してこれらのパッケージをインストールする場合は、推奨される更新プログラムを jQuery にインストールしないでください。 Visual Studio ソリューションと共にインストールされた jQuery バージョンは、ソリューションファイル内の jQuery 呼び出しと一致します。
NuGet パッケージマネージャーを使用して、Newtonsoft.Json パッケージをバージョン 13.0.3 以降に更新します。次に、helloWorld プロジェクトに追加された場合は、app.config ファイルを削除します。

Visual Studio ソリューションについて理解する

ウィザードの完了後、Visual Studio によって 2 つのプロジェクトを含むソリューションが作成されます。

プロジェクト	説明
アドインプロジェクト	アドインを記述するすべての設定を含む XML マニフェストファイルのみが含まれます。これらの設定は、Office アプリケーションがアドインのアクティブ化の時期とアドインの表示場所を特定するのに役立ちます。プロジェクトを実行してすぐにアドインを使用できるように、Visual Studio は、このファイルの内容を生成します。 XML ファイルを変更することで、これらの設定をいつでも変更できます。
Web アプリケーションプロジェクト	Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツページが含まれます。アドインを開発している間、Visual Studio は Web アプリケーションをローカル IIS サーバー上でホストします。アドインを発行する準備が整ったら、この Web アプリケーションプロジェクトを Web サーバーに展開する必要があります。

プロジェクト

説明

アドインプロジェクト

アドインを記述するすべての設定を含む XML マニフェストファイルのみが含まれます。これらの設定は、Office アプリケーションがアドインのアクティブ化の時期とアドインの表示場所を特定するのに役立ちます。プロジェクトを実行してすぐにアドインを使用できるように、Visual Studio は、このファイルの内容を生成します。 XML ファイルを変更することで、これらの設定をいつでも変更できます。

Web アプリケーションプロジェクト

Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツページが含まれます。アドインを開発している間、Visual Studio は Web アプリケーションをローカル IIS サーバー上でホストします。アドインを発行する準備が整ったら、この Web アプリケーションプロジェクトを Web サーバーに展開する必要があります。

コードを更新する

アドインコードを次のように編集し、このチュートリアルの後続の手順でアドイン機能を実装するために使用するフレームワークを作成します。

Home.html では、アドインの作業ウィンドウにレンダリングされる HTML を指定します。 Home.html において、で id="content-main" を検索し、div 全体を次のマークアップと置き換えてファイルを保存します。

<!-- TODO2: Create the content-header div. -->
<div id="content-main">
    <div class="padding">
        <!-- TODO1: Create the insert-image button. -->
        <!-- TODO3: Create the insert-text button. -->
        <!-- TODO4: Create the get-slide-metadata button. -->
        <!-- TODO5: Create the add-slides and go-to-slide buttons. -->
    </div>
</div>

Web アプリケーションプロジェクトのルートにあるファイル Home.js を開きます。このファイルは、アドイン用のスクリプトを指定します。すべての内容を次のコードに置き換え、ファイルを保存します。

(function () {
    "use strict";

    let messageBanner;

    Office.onReady(function () {
        $(document).ready(function () {
            // Initialize the FabricUI notification mechanism and hide it.
            const element = document.querySelector('.MessageBanner');
            messageBanner = new components.MessageBanner(element);
            messageBanner.hideBanner();

            // TODO1: Assign event handler for insert-image button.
            // TODO4: Assign event handler for insert-text button.
            // TODO6: Assign event handler for get-slide-metadata button.
            // TODO8: Assign event handlers for add-slides and the four navigation buttons.
        });
    });

    // TODO2: Define the insertImage function.

    // TODO3: Define the insertImageFromBase64String function.

    // TODO5: Define the insertText function.

    // TODO7: Define the getSlideMetadata function.

    // TODO9: Define the addSlides and navigation functions.

    // Helper function for displaying notifications.
    function showNotification(header, content) {
        $("#notification-header").text(header);
        $("#notification-body").text(content);
        messageBanner.showBanner();
        messageBanner.toggleExpansion();
    }
})();

画像の挿入

その日の Bing の写真取得し、その画像をスライドに挿入するコードを追加するには、次の手順を実行します。

ソリューションエクスプローラーを使用して、Controllers という名前の新しいフォルダーを HelloWorldWeb プロジェクトに追加します。
Controllers フォルダーを右クリックし、[新しいスキャフォールディングされた項目の追加>]を選択します。...
[スキャフォールディングを追加] ダイアログウィンドウで、「Web API 2 Controller - Empty」を選択し、[追加] ボタンを選択します。
[コントローラーの追加] ダイアログウィンドウでコントローラー名として「PhotoController」と入力し、[追加] ボタンを選択します。 Visual Studio によって PhotoController.cs ファイルが作成され、表示されます。

重要

バージョン 16.10.3 以降の一部のバージョンの Visual Studio では、スキャフォールディングプロセスが正しく完了しません。 Global.asax ファイルと ./App_Start/WebApiConfig.cs ファイルがある場合は、手順 6 に進みます。
HelloWorldWeb プロジェクトからスキャフォールディングファイルが見つからない場合は、次のように追加します。
1. ソリューションエクスプローラーを使用して、App_Start という名前の新しいフォルダーを HelloWorldWeb プロジェクトに追加します。
2. App_Start フォルダーを右クリックし、[クラスの追加]>を選択します。...
3. [ 新しい項目の追加 ] ダイアログで、ファイルに WebApiConfig.cs 名前を付 け、[追加 ] ボタンを選択します。
4. WebApiConfig.cs ファイルの内容全体を次のコードに置き換えます。
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

namespace HelloWorldWeb.App_Start
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}
```
5. ソリューションエクスプローラーで、HelloWorldWeb プロジェクトを右クリックし、[新しい項目の追加>]を選択します。
6. [ 新しい項目の追加 ] ダイアログで、[グローバル] を検索し、[ グローバルアプリケーションクラス] を選択し、[ 追加 ] ボタンを選択します。既定では、ファイルの名前は Global.asax です。
7. Global.asax.cs ファイルの内容全体を次のコードに置き換えます。
```
using HelloWorldWeb.App_Start;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Security;
using System.Web.SessionState;

namespace HelloWorldWeb
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            GlobalConfiguration.Configure(WebApiConfig.Register);
        }
    }
}
```
8. ソリューションエクスプローラーで、Global.asax ファイルを右クリックし、[マークアップの表示] を選択します。
9. Global.asax ファイルの内容全体を次のコードに置き換えます。
```
<%@ Application Codebehind="Global.asax.cs" Inherits="HelloWorldWeb.WebApiApplication" Language="C#" %>
```

PhotoController.cs ファイルの内容全体を、Bing サービスを呼び出して、その日の写真を Base64 でエンコードされた文字列として取得する次のコードに置き換えます。 Office JavaScript API を使用してドキュメントにイメージを挿入する場合は、イメージデータを Base64 でエンコードされた文字列として指定する必要があります。

using System;
using System.IO;
using System.Net;
using System.Text;
using System.Web.Http;
using System.Xml;

namespace HelloWorldWeb.Controllers
{
    public class PhotoController : ApiController
    {
        public string Get()
        {
            string url = "http://www.bing.com/HPImageArchive.aspx?format=xml&idx=0&n=1";

            // Create the request.
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            WebResponse response = request.GetResponse();

            using (Stream responseStream = response.GetResponseStream())
            {
                // Process the result.
                StreamReader reader = new StreamReader(responseStream, Encoding.UTF8);
                string result = reader.ReadToEnd();

                // Parse the XML response and get the URL.
                XmlDocument doc = new XmlDocument();
                doc.LoadXml(result);
                string photoURL = "http://bing.com" + doc.SelectSingleNode("/images/image/url").InnerText;

                // Fetch the photo and return it as a Base64-encoded string.
                return getPhotoFromURL(photoURL);
            }
        }

        private string getPhotoFromURL(string imageURL)
        {
            var webClient = new WebClient();
            byte[] imageBytes = webClient.DownloadData(imageURL);
            return Convert.ToBase64String(imageBytes);
        }
    }
}

Home.html ファイルで TODO1 を次のマークアップに置き換えます。このマークアップにより、アドインの作業ウィンドウ内に表示される [イメージの挿入] ボタンを定義します。

<button class="Button Button--primary" id="insert-image">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Insert Image</span>
    <span class="Button-description">Gets the photo of the day that shows on the Bing home page and adds it to the slide.</span>
</button>

Home.js ファイルで TODO1 を次のコードに置き換え、[イメージの挿入] ボタンのイベントハンドラーを割り当てます。
```
$('#insert-image').on("click", insertImage);
```

Home.js ファイルで TODO2 を次のコードに置き換え、insertImage 関数を定義します。この関数は Bing Web サービスからイメージをフェッチし、insertImageFromBase64String 関数を呼び出してそのイメージをドキュメントに挿入します。

function insertImage() {
    // Get image from web service (as a Base64-encoded string).
    $.ajax({
        url: "/api/photo/",
        dataType: "text",
        success: function (result) {
            insertImageFromBase64String(result);
        }, error: function (xhr, status, error) {
            showNotification("Error", "Oops, something went wrong.");
        }
    });
}

Home.js ファイルで TODO3 を次のコードに置き換え、insertImageFromBase64String 関数を定義します。この関数は Office JavaScript API を使用してイメージをドキュメントに挿入します。注意:
- coercionType 要求の 2 番目のパラメーターとして指定されている setSelectedDataAsync オプションは、挿入されるデータの種類を示します。
- asyncResult オブジェクトは setSelectedDataAsync 要求が失敗した場合の状態やエラー情報など、その要求の結果をカプセル化します。
```
function insertImageFromBase64String(image) {
    // Call Office.js to insert the image into the document.
    Office.context.document.setSelectedDataAsync(image, {
        coercionType: Office.CoercionType.Image
    },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                showNotification("Error", asyncResult.error.message);
            }
        });
}
```

アドインをテストする

Visual Studio を使用して、新しく作成された PowerPoint アドインをテストするには、 F5 キーを押すか 、[スタート ] ボタンを選択して PowerPoint を起動し、リボンに [タスクウィンドウ アドインの表示] ボタンを表示します。アドインは IIS 上でローカルにホストされます。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで、[イメージの挿入] ボタンを押してその日の Bing 写真を現在のスライドに追加します。
注:

"ファイルが見つかりませんでした [...] というエラーが表示された場合\bin\roslyn\csc.exe」をクリックし、次の操作を行います。
1. .\Web.config ファイルを開きます。
2. .csextensionの<コンパイラ> ノードを見つけて、属性とその値をtype削除します。
3. ファイルを保存します。
Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを停止します。アドインが停止すると、PowerPoint は自動的に閉じます。

ユーザーインターフェイス (UI) 要素をカスタマイズする

作業ウィンドウの UI をカスタマイズするマークアップを追加するには、次の手順を実行します。

Home.html ファイルで TODO2 を次のマークアップと置き換え、ヘッダーセクションとタイトルを作業ウィンドウに追加します。注意：
- ms- で始まるスタイルは、Office アドインの Fabric Core で定義されています。これは、Office のユーザーエクスペリエンスを構築するための JavaScript フロントエンドのフレームワークです。 Home.html ファイルには、Fabric Core スタイルシートへの参照が含まれています。
```
<div id="content-header">
    <div class="ms-Grid ms-bgColor-neutralPrimary">
        <div class="ms-Grid-row">
            <div class="padding ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12"> <div class="ms-font-xl ms-fontColor-white ms-fontWeight-semibold">My PowerPoint add-in</div></div>
        </div>
    </div>
</div>
```
Home.html ファイルにおいて、class="footer" で div を検索し、div 全体を削除して作業ウィンドウからフッターセクションを削除します。

アドインをテストする

Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択して PowerPoint を起動し、リボンに [タスクペイン アドインの表示] ボタンを表示して PowerPoint アドインをテストします。アドインは IIS 上でローカルにホストされます。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
このとき、作業ウィンドウにはヘッダーセクションとタイトルが含まれ、フッターセクションが含まれないことがわかります。
Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを停止します。アドインが停止すると、PowerPoint は自動的に閉じます。

テキストの挿入

その日の Bing の写真を含むタイトルスライドにテキストを挿入するコードを追加するには、次の手順を実行します。

Home.html ファイルで TODO3 を次のマークアップに置き換えます。このマークアップにより、アドインの作業ウィンドウ内に表示される [テキストの挿入] ボタンを定義します。

    <br /><br />
    <button class="Button Button--primary" id="insert-text">
        <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
        <span class="Button-label">Insert Text</span>
        <span class="Button-description">Inserts text into the slide.</span>
    </button>

Home.js ファイルで TODO4 を次のコードに置き換え、[テキストの挿入] ボタンのイベントハンドラーを割り当てます。
```
$('#insert-text').on("click", insertText);
```

Home.js ファイルで TODO5 を次のコードに置き換え、insertText 関数を定義します。この関数は、現在のスライドにテキストを挿入します。

function insertText() {
    Office.context.document.setSelectedDataAsync('Hello World!',
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                showNotification("Error", asyncResult.error.message);
            }
        });
}

アドインをテストする

Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択して PowerPoint を起動し、リボンに [タスクペイン アドインの表示] ボタンを表示してアドインをテストします。アドインは IIS 上でローカルにホストされます。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで [イメージの挿入] ボタンをクリックしてその日の Bing 写真を現在のスライドに追加し、そのタイトルにテキストボックスが含まれるデザインをそのスライドに選択します。
タイトルスライドのテキストボックスにカーソルを置き、作業ウィンドウで [テキストの挿入] ボタンをクリックしてテキストをスライドに追加します。
Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを停止します。アドインが停止すると、PowerPoint は自動的に閉じます。

スライドのメタデータの取得

選択したスライドのメタデータを取得するコードを追加するには、次の手順を実行します。

Home.html ファイルで TODO4 を次のマークアップに置き換えます。このマークアップにより、アドインの作業ウィンドウ内に表示される [Get Slide Metadata] (スライドのメタデータの取得) ボタンを定義します。

<br /><br />
<button class="Button Button--primary" id="get-slide-metadata">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Get Slide Metadata</span>
    <span class="Button-description">Gets metadata for the selected slide(s).</span>
</button>

Home.js ファイルで TODO6 を次のコードに置き換え、[Get Slide Metadata] (スライドのメタデータの取得) ボタンのイベントハンドラーを割り当てます。
```
$('#get-slide-metadata').on("click", getSlideMetadata);
```

Home.js ファイルで TODO7 を次のコードに置き換え、getSlideMetadata 関数を定義します。この関数は選択したスライドのメタデータを取得し、それをアドインの作業ウィンドウ内のポップアップダイアログウィンドウに書き込みます。

function getSlideMetadata() {
    Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed) {
                showNotification("Error", asyncResult.error.message);
            } else {
                showNotification("Metadata for selected slide(s):", JSON.stringify(asyncResult.value), null, 2);
            }
        }
    );
}

アドインをテストする

Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択して PowerPoint を起動し、リボンに [タスクペイン アドインの表示] ボタンを表示してアドインをテストします。アドインは IIS 上でローカルにホストされます。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで [Get Slide Metadata] (スライドのメタデータの取得) ボタンを選択し、選択したスライドのメタデータを取得します。スライドのメタデータは作業ウィンドウの下部にあるポップアップダイアログウィンドウに書き込まれます。この例では、JSON メタデータ内の slides 配列に、選択したスライドの id、title、および index を指定するオブジェクトが 1 つ含まれます。スライドのメタデータを取得するときに複数のスライドが選択されている場合、JSON メタデータ内の slides 配列には、選択したスライドごとにオブジェクトが 1 つ含まれます。
Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを停止します。アドインが停止すると、PowerPoint は自動的に閉じます。

スライド間の移動

ドキュメントのスライド間を移動するコードを追加するには、次の手順を実行します。

Home.html ファイルで TODO5 を次のマークアップに置き換えます。このマークアップにより、アドインの作業ウィンドウ内に表示される 4 つのナビゲーションボタンを定義します。

<br /><br />
<button class="Button Button--primary" id="add-slides">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Add Slides</span>
    <span class="Button-description">Adds 2 slides.</span>
</button>
<br /><br />
<button class="Button Button--primary" id="go-to-first-slide">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Go to First Slide</span>
    <span class="Button-description">Go to the first slide.</span>
</button>
<br /><br />
<button class="Button Button--primary" id="go-to-next-slide">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Go to Next Slide</span>
    <span class="Button-description">Go to the next slide.</span>
</button>
<br /><br />
<button class="Button Button--primary" id="go-to-previous-slide">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Go to Previous Slide</span>
    <span class="Button-description">Go to the previous slide.</span>
</button>
<br /><br />
<button class="Button Button--primary" id="go-to-last-slide">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Go to Last Slide</span>
    <span class="Button-description">Go to the last slide.</span>
</button>

Home.js ファイルで、を次のコードに置き換えてTODO8、[スライドの追加] と 4 つのナビゲーションボタンのイベントハンドラーを割り当てます。

$('#add-slides').on("click", addSlides);
$('#go-to-first-slide').on("click", goToFirstSlide);
$('#go-to-next-slide').on("click", goToNextSlide);
$('#go-to-previous-slide').on("click", goToPreviousSlide);
$('#go-to-last-slide').on("click", goToLastSlide);

Home.js ファイルで、を次のコードに置き換えてTODO9、およびナビゲーション関数をaddSlides定義します。これらの関数では goToByIdAsync 関数を使用して、ドキュメント内のその位置 (最初、最後、前、次) に基づいてスライドを選択します。

async function addSlides() {
    await PowerPoint.run(async function (context) {
        context.presentation.slides.add();
        context.presentation.slides.add();

        await context.sync();

        showNotification("Success", "Slides added.");
        goToLastSlide();
    });
}

function goToFirstSlide() {
    Office.context.document.goToByIdAsync(Office.Index.First, Office.GoToType.Index,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                showNotification("Error", asyncResult.error.message);
            }
        });
}

function goToLastSlide() {
    Office.context.document.goToByIdAsync(Office.Index.Last, Office.GoToType.Index,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                showNotification("Error", asyncResult.error.message);
            }
        });
}

function goToPreviousSlide() {
    Office.context.document.goToByIdAsync(Office.Index.Previous, Office.GoToType.Index,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                showNotification("Error", asyncResult.error.message);
            }
        });
}

function goToNextSlide() {
    Office.context.document.goToByIdAsync(Office.Index.Next, Office.GoToType.Index,
        function (asyncResult) {
            if (asyncResult.status == "failed") {
                showNotification("Error", asyncResult.error.message);
            }
        });
}

アドインをテストする

Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択して PowerPoint を起動し、リボンに [タスクペイン アドインの表示] ボタンを表示してアドインをテストします。アドインは IIS 上でローカルにホストされます。
PowerPoint でアドイン作業ウィンドウがまだ開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。
作業ウィンドウで、[ スライドの追加 ] ボタンを選択します。 2 つの新しいスライドがドキュメントに追加され、ドキュメントの最後のスライドが選択されて表示されます。
作業ウィンドウで [最初のスライドに移動] ボタンをクリックします。ドキュメントの最初のスライドが選択され、表示されます。
作業ウィンドウで [次のスライドに移動] ボタンをクリックします。ドキュメントの次のスライドが選択され、表示されます。
作業ウィンドウで [前のスライドに移動] ボタンをクリックします。ドキュメントの前のスライドが選択され、表示されます。
作業ウィンドウで [最後のスライドに移動] ボタンをクリックします。ドキュメントの最後のスライドが選択され、表示されます。
Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを停止します。アドインが停止すると、PowerPoint は自動的に閉じます。

コードサンプル

完了した PowerPoint アドインチュートリアル: このチュートリアルを完了した結果。

次の手順

このチュートリアルでは、画像の挿入、テキストの挿入、スライドのメタデータ取得、およびスライド間の移動のための PowerPoint アドインを作成しました。 PowerPoint アドインの構築に関する詳細については、次の記事にお進みください。

PowerPoint アドインの概要

チュートリアル: PowerPoint 作業ウィンドウアドインを作成する

アドインを作成する

前提条件

アドインプロジェクトの作成

設定を完了する

画像の挿入

アドインをテストする

ユーザーインターフェイス (UI) 要素をカスタマイズする

アドインをテストする

テキストの挿入

アドインをテストする

スライドのメタデータの取得

アドインをテストする

スライド間の移動

アドインをテストする

コードサンプル

前提条件

アドインプロジェクトの作成

Visual Studio ソリューションについて理解する

コードを更新する

画像の挿入

アドインをテストする

ユーザーインターフェイス (UI) 要素をカスタマイズする

アドインをテストする

テキストの挿入

アドインをテストする

スライドのメタデータの取得

アドインをテストする

スライド間の移動

アドインをテストする

コードサンプル

次の手順

関連項目

フィードバック

その他のリソース

チュートリアル: PowerPoint 作業ウィンドウ アドインを作成する

アドインを作成する

前提条件

アドイン プロジェクトの作成

設定を完了する

画像の挿入

アドインをテストする

ユーザー インターフェイス (UI) 要素をカスタマイズする

アドインをテストする

テキストの挿入

アドインをテストする

スライドのメタデータの取得

アドインをテストする

スライド間の移動

アドインをテストする

コード サンプル

次の手順

関連項目

フィードバック

その他のリソース

チュートリアル: PowerPoint 作業ウィンドウアドインを作成する

アドインプロジェクトの作成

ユーザーインターフェイス (UI) 要素をカスタマイズする

コードサンプル