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

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

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

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

Yeoman ジェネレーター

アドインを作成する

ヒント

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

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

設定を完了する

1. プロジェクトのルート ディレクトリに移動します。

   cd "My Office Add-in"
   

2. VS Code またはお好みのコード エディターでプロジェクトを開きます。

   ヒント

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

画像の挿入

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

1. コード エディターでプロジェクトを開きます。

2. プロジェクトのルートで、base64Image.js という新しいファイルを作成します。

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

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

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

5. <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>
   

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

   <button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>
   

7. ファイル ./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());
     }
   }
   

8. ファイルの先頭付近にあるOffice.onReady関数呼び出しの上にあるtaskpane.jsファイルで、TODO1を次のコードに置き換えます。 このコードは、ファイル ./base64Image.js で以前に定義した変数をインポートします。

   import { base64Image } from "../../base64Image";
   

9. taskpane.js ファイルで、TODO2を次のコードに置き換えて、[イメージの挿入] ボタンのイベント ハンドラーを割り当てます。

   document.getElementById("insert-image").onclick = () => clearMessage(insertImage);
   

10. 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);
          }
        }
      );
    }
    

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

アドインをテストする

1. プロジェクトのルート フォルダーに移動します。

   cd "My Office Add-in"
   

2. 以下の手順を実行し、ローカル Web サーバーを起動してアドインのサイドロードを行います。

   注:

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

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   ヒント

   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する」の手順に従って手動でサイドロードします。

3. PowerPointでアドイン作業ウィンドウがまだ開いていない場合は、[ ホーム ] タブを選択し、リボンの [ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。

   

4. 作業ウィンドウで、[ イメージの挿入 ] ボタンを選択して、現在のスライドに画像を追加します。

   

5. ローカル Web サーバーを停止してアドインをアンインストールする場合は、該当する手順に従います。

   • サーバーを停止するには、次のコマンドを実行します。 npm startを使用した場合は、次のコマンドによってアドインもアンインストールされます。

     npm stop
     

   • アドインを手動でサイドロードした場合は、「 サイドロードされたアドインを削除する」を参照してください。

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

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

1. 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>
   

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

アドインをテストする

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

   注:

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

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   ヒント

   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する」の手順に従って手動でサイドロードします。

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. 作業ウィンドウに、更新されたヘッダー セクションとタイトルが含まれていることに注意してください。

   

テキストの挿入

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

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

   <button class="ms-Button" id="insert-text">Insert Text</button><br/><br/>
   

2. taskpane.js ファイルで、TODO4を次のコードに置き換えて、[テキストの挿入] ボタンのイベント ハンドラーを割り当てます。

   document.getElementById("insert-text").onclick = () => clearMessage(insertText);
   

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

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

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

アドインをテストする

1. プロジェクトのルート フォルダーに移動します。

   cd "My Office Add-in"
   

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

   注:

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

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   ヒント

   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する」の手順に従って手動でサイドロードします。

3. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

4. 作業ウィンドウで、[ イメージの挿入 ] ボタンを選択して現在のスライドに画像を追加し、タイトルのテキスト ボックスを含むスライドのデザインを選択します。

   

   

5. タイトル スライドのテキスト ボックスにカーソルを置き、作業ウィンドウで [テキストの挿入] ボタンをクリックしてテキストをスライドに追加します。

   

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

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

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

   <button class="ms-Button" id="get-slide-metadata">Get Slide Metadata</button><br/><br/>
   

2. taskpane.js ファイルで、TODO6を次のコードに置き換えて、[スライド メタデータの取得] ボタンのイベント ハンドラーを割り当てます。

   document.getElementById("get-slide-metadata").onclick = () => clearMessage(getSlideMetadata);
   

3. 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));
       }
     });
   }
   

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

アドインをテストする

1. プロジェクトのルート フォルダーに移動します。

   cd "My Office Add-in"
   

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

   注:

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

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   ヒント

   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する」の手順に従って手動でサイドロードします。

3. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

4. 作業ウィンドウで [Get Slide Metadata] (スライドのメタデータの取得) ボタンを選択し、選択したスライドのメタデータを取得します。 スライド メタデータは、作業ウィンドウのボタンの下にある [メッセージ] セクションに書き込まれます。 この例では、JSON メタデータ内の slides 配列に、選択したスライドの id、title、および index を指定するオブジェクトが 1 つ含まれます。 スライドのメタデータを取得するときに複数のスライドが選択されている場合、JSON メタデータ内の slides 配列には、選択したスライドごとにオブジェクトが 1 つ含まれます。

   

スライド間の移動

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

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/>
   

2. 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);
   

3. 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);
       }
     });
   }
   

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

アドインをテストする

1. プロジェクトのルート フォルダーに移動します。

   cd "My Office Add-in"
   

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

   注:

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

   • 初めてコンピューターで Office アドインを開発する場合は、コマンド ラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。 メッセージが表示されたら、「 Y 」と入力して除外を許可します。 除外を許可するには管理者特権が必要であることに注意してください。 許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。 詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。

     

   ヒント

   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する」の手順に従って手動でサイドロードします。

3. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

4. 作業ウィンドウで、[ スライドの追加 ] ボタンを選択します。 2 つの新しいスライドがドキュメントに追加され、ドキュメントの最後のスライドが選択されて表示されます。

   

5. 作業ウィンドウで [最初のスライドに移動] ボタンをクリックします。 ドキュメントの最初のスライドが選択され、表示されます。

   

6. 作業ウィンドウで [次のスライドに移動] ボタンをクリックします。 ドキュメントの次のスライドが選択され、表示されます。

   

7. 作業ウィンドウで [前のスライドに移動] ボタンをクリックします。 ドキュメントの前のスライドが選択され、表示されます。

   

8. 作業ウィンドウで [最後のスライドに移動] ボタンをクリックします。 ドキュメントの最後のスライドが選択され、表示されます。

   

9. Web サーバーが実行されている場合は、サーバーを停止するときに次のコマンドを実行します。

   npm stop
   

コード サンプル

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

Visual Studio

ヒント

このチュートリアルの完成したバージョンが必要な場合は、 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 アドイン プロジェクトを作成するには次の手順を実行します。

1. [新規プロジェクトの作成] を選択します。

2. 検索ボックスを使用して、アドインと入力します。 [PowerPoint Web アドイン] を選択し、[次へ] を選択します。

3. プロジェクトに「HelloWorld」という名前を付けて、[作成] を選択します。

4. [Office アドインの作成] ダイアログ ウィンドウで、[新機能を PowerPoint に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。

5. ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューション エクスプローラーに表示されます。 Home.html ファイルが Visual Studio で開きます。

   

6. 次の NuGet パッケージをインストールする必要があります。 Visual Studio の NuGet パッケージ マネージャーを使用して、HelloWorldWeb プロジェクトにインストールします。 手順については、Visual Studio のヘルプを参照してください。 これらの 2 つ目は、最初のインストール時に自動的にインストールされる場合があります。

   • Microsoft.AspNet.WebApi.WebHost
   • Microsoft.AspNet.WebApi.Core

   重要

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

7. NuGet パッケージ マネージャーを使用して、Newtonsoft.Json パッケージをバージョン 13.0.3 以降に更新します。 次に、helloWorld プロジェクトに追加された場合は、app.config ファイルを削除します。

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

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

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

コードを更新する

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

1. 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>
   

2. 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 の写真取得し、その画像をスライドに挿入するコードを追加するには、次の手順を実行します。

1. ソリューション エクスプローラーを使用して、Controllers という名前の新しいフォルダーを HelloWorldWeb プロジェクトに追加します。

   

2. Controllers フォルダーを右クリック (または選択して長押し) し、[追加>新しいスキャフォールディングされた項目.... を選択します。

3. [スキャフォールディングを追加] ダイアログ ウィンドウで、「Web API 2 Controller - Empty」を選択し、[追加] ボタンを選択します。

4. [コントローラーの追加] ダイアログ ウィンドウでコントローラー名として「PhotoController」と入力し、[追加] ボタンを選択します。 Visual Studio によって PhotoController.cs ファイルが作成され、表示されます。

   重要

   バージョン 16.10.3 以降の一部のバージョンの Visual Studio では、スキャフォールディング プロセスが正しく完了しません。 Global.asax ファイルと ./App_Start/WebApiConfig.cs ファイルがある場合は、手順 6 に進みます。

   

5. HelloWorldWeb プロジェクトからスキャフォールディング ファイルが見つからない場合は、次のように追加します。

   1. ソリューション エクスプローラーを使用して、App_Start という名前の新しいフォルダーを HelloWorldWeb プロジェクトに追加します。

   2. App_Start フォルダーを右クリック (または選択して長押し) し、[追加>Class.... を選択します。

   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#" %>
      

6. 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);
           }
       }
   }
   

7. 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>
   

8. Home.js ファイルで TODO1 を次のコードに置き換え、[イメージの挿入] ボタンのイベント ハンドラーを割り当てます。

   $('#insert-image').on("click", insertImage);
   

9. 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.");
           }
       });
   }
   

10. 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);
                }
            });
    }
    

アドインをテストする

1. Visual Studio を使用して、 F5 キーを押すか、[ スタート ] ボタンを選択して新しく作成したPowerPoint アドインをテストし、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態でPowerPointを起動します。 アドインは IIS 上でローカルにホストされます。

   

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. 作業ウィンドウで、[イメージの挿入] ボタンを押してその日の Bing 写真を現在のスライドに追加します。

   

   注:

   "ファイルが見つかりませんでした [...] というエラーが表示された場合\bin\roslyn\csc.exe」をクリックし、次の操作を行います。

   1. .\Web.config ファイルを開きます。
   2. .cs extensionの <compiler> ノードを見つけて、type属性とその値を削除します。
   3. ファイルを保存します。

4. Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを 停止 します。 アドインが停止すると、PowerPoint は自動的に閉じます。

   

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

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

1. 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>
   

2. Home.html ファイルにおいて、class="footer" で div を検索し、div 全体を削除して作業ウィンドウからフッター セクションを削除します。

アドインをテストする

1. Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択してPowerPoint アドインをテストし、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態でPowerPointを起動します。 アドインは IIS 上でローカルにホストされます。

   

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. このとき、作業ウィンドウにはヘッダー セクションとタイトルが含まれ、フッター セクションが含まれないことがわかります。

   

4. Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを 停止 します。 アドインが停止すると、PowerPoint は自動的に閉じます。

   

テキストの挿入

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

1. 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>
   

2. Home.js ファイルで TODO4 を次のコードに置き換え、[テキストの挿入] ボタンのイベント ハンドラーを割り当てます。

   $('#insert-text').on("click", insertText);
   

3. 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);
               }
           });
   }
   

アドインをテストする

1. Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択してアドインをテストし、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態でPowerPointを起動します。 アドインは IIS 上でローカルにホストされます。

   

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. 作業ウィンドウで [イメージの挿入] ボタンをクリックしてその日の Bing 写真を現在のスライドに追加し、そのタイトルにテキスト ボックスが含まれるデザインをそのスライドに選択します。

   

4. タイトル スライドのテキスト ボックスにカーソルを置き、作業ウィンドウで [テキストの挿入] ボタンをクリックしてテキストをスライドに追加します。

   

5. Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを 停止 します。 アドインが停止すると、PowerPoint は自動的に閉じます。

   

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

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

1. 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 slides.</span>
   </button>
   

2. Home.js ファイルで TODO6 を次のコードに置き換え、[Get Slide Metadata] (スライドのメタデータの取得) ボタンのイベント ハンドラーを割り当てます。

   $('#get-slide-metadata').on("click", getSlideMetadata);
   

3. 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 slides:", JSON.stringify(asyncResult.value), null, 2);
               }
           }
       );
   }
   

アドインをテストする

1. Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択してアドインをテストし、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態でPowerPointを起動します。 アドインは IIS 上でローカルにホストされます。

   

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. 作業ウィンドウで [Get Slide Metadata] (スライドのメタデータの取得) ボタンを選択し、選択したスライドのメタデータを取得します。 スライドのメタデータは作業ウィンドウの下部にあるポップアップ ダイアログ ウィンドウに書き込まれます。 この例では、JSON メタデータ内の slides 配列に、選択したスライドの id、title、および index を指定するオブジェクトが 1 つ含まれます。 スライドのメタデータを取得するときに複数のスライドが選択されている場合、JSON メタデータ内の slides 配列には、選択したスライドごとにオブジェクトが 1 つ含まれます。

   

4. Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを 停止 します。 アドインが停止すると、PowerPoint は自動的に閉じます。

   

スライド間の移動

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

1. 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>
   

2. 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);
   

3. 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);
               }
           });
   }
   

アドインをテストする

1. Visual Studio を使用して、 F5 キーを押すか 、[スタート ] ボタンを選択してアドインをテストし、リボンに [タスクウィンドウ アドインの表示] ボタンが表示された状態でPowerPointを起動します。 アドインは IIS 上でローカルにホストされます。

   

2. アドイン作業ウィンドウがまだPowerPointで開いていない場合は、リボンの [タスクウィンドウの表示 ] ボタンを選択して開きます。

   

3. 作業ウィンドウで、[ スライドの追加 ] ボタンを選択します。 2 つの新しいスライドがドキュメントに追加され、ドキュメントの最後のスライドが選択されて表示されます。

   

4. 作業ウィンドウで [最初のスライドに移動] ボタンをクリックします。 ドキュメントの最初のスライドが選択され、表示されます。

   

5. 作業ウィンドウで [次のスライドに移動] ボタンをクリックします。 ドキュメントの次のスライドが選択され、表示されます。

   

6. 作業ウィンドウで [前のスライドに移動] ボタンをクリックします。 ドキュメントの前のスライドが選択され、表示されます。

   

7. 作業ウィンドウで [最後のスライドに移動] ボタンをクリックします。 ドキュメントの最後のスライドが選択され、表示されます。

   

8. Visual Studio で、 Shift キーを押しながら F5 キーを押すか、[停止] ボタンを選択してアドインを 停止 します。 アドインが停止すると、PowerPoint は自動的に閉じます。

   

コード サンプル

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

次の手順

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

PowerPoint アドインの概要

関連項目

• Office アドイン プラットフォームの概要
• Office アドインを開発する