チュートリアル: PowerPoint 作業ウィンドウ アドインを作成するTutorial: Create a PowerPoint task pane add-in

このチュートリアルでは Visual Studio を使用して、以下を実行する PowerPoint 作業ウィンドウ アドインを作成します。In this tutorial, you'll use Visual Studio to create an PowerPoint task pane add-in that:

  • その日の Bing の写真をスライドに追加するAdds the Bing photo of the day to a slide
  • スライドにテキストを追加するAdds text to a slide
  • スライドのメタデータを取得するGets slide metadata
  • スライド間を移動するNavigates between slides

前提条件Prerequisites

  • Office/SharePoint 開発ワークロードがインストールされている Visual Studio 2019Visual Studio 2019 with the Office/SharePoint development workload installed

    Note

    既に Visual Studio 2019 がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。If you've previously installed Visual Studio 2019, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Office 2016 以降Office 2016 or later

    Note

    まだ Office を所有していない場合は、 office 365 開発者プログラムに参加して、開発中に使用する無料の90日間の更新可能な office 365 サブスクリプションを入手できます。If you don't already have Office, you can join the Office 365 Developer Program to get a free, 90-day renewable Office 365 subscription to use during development.

アドイン プロジェクトの作成Create your add-in project

Visual Studio を使用して PowerPoint アドイン プロジェクトを作成するには次の手順を実行します。Complete the following steps to create a PowerPoint add-in project using Visual Studio.

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

  2. 検索ボックスを使用して、アドインと入力します。Using the search box, enter add-in. [PowerPoint Web アドイン] を選択し、[次へ] を選択します。Choose PowerPoint Web Add-in, then select Next.

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

  4. [Office アドインの作成] ダイアログ ウィンドウで、[新機能を PowerPoint に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。In the Create Office Add-in dialog window, choose Add new functionalities to PowerPoint, and then choose Finish to create the project.

  5. Visual Studio によってソリューションとその 2 つのプロジェクトが作成され、ソリューション エクスプローラーに表示されます。Home.html ファイルが Visual Studio で開かれます。Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

    PowerPoint チュートリアル - HelloWorld ソリューションで 2 つのプロジェクトを表示する Visual Studio ソリューション エクスプローラー ウィンドウ

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

ウィザードの完了後、Visual Studio によって 2 つのプロジェクトを含むソリューションが作成されます。When you've completed the wizard, Visual Studio creates a solution that contains two projects.

プロジェクトProject 説明Description
アドイン プロジェクトAdd-in project アドインを記述するすべての設定を含む XML マニフェスト ファイルのみが含まれます。これらの設定は、Office ホストがアドインをアクティブ化するタイミングと、アドインの表示場所を決定するのに役立ちます。すぐにプロジェクトを実行し、アドインを使用できるように、Visual Studio によってこのファイルのコンテンツが生成されます。これらの設定は、XML ファイルを変更することによっていつでも変更できます。Contains only an XML manifest file, which contains all the settings that describe your add-in. These settings help the Office host determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. You change these settings any time by modifying the XML file.
Web アプリケーション プロジェクトWeb application project Office 対応の HTML および JavaScript ページを開発するために必要なすべてのファイルとファイル参照を含むアドインのコンテンツ ページが含まれます。アドインを開発している間、Visual Studio は Web アプリケーションをローカル IIS サーバー上でホストします。アドインを発行する準備が整ったら、この Web アプリケーション プロジェクトを Web サーバーに展開する必要があります。Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

コードを更新するUpdate code

アドイン コードを次のように編集し、このチュートリアルの後続の手順でアドイン機能を実装するために使用するフレームワークを作成します。Edit the add-in code as follows to create the framework that you'll use to implement add-in functionality in subsequent steps of this tutorial.

  1. Home.html では、アドインの作業ウィンドウにレンダリングされる HTML を指定します。 Home.html において、**** で id="content-main" を検索し、div 全体を次のマークアップと置き換えてファイルを保存します。Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, find the div with id="content-main", replace that entire div with the following markup, and save the file.

    <!-- 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 go-to-slide buttons. -->
        </div>
    </div>
    
  2. Web アプリケーション プロジェクトのルートにあるファイル Home.js を開きます。 このファイルは、アドイン用のスクリプトを指定します。 すべての内容を次のコードに置き換え、ファイルを保存します。Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

    (function () {
        "use strict";
    
        var messageBanner;
    
        Office.onReady(function () {
            $(document).ready(function () {
                // Initialize the FabricUI notification mechanism and hide it
                var 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 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 navigation functions.
    
        // Helper function for displaying notifications
        function showNotification(header, content) {
            $("#notification-header").text(header);
            $("#notification-body").text(content);
            messageBanner.showBanner();
            messageBanner.toggleExpansion();
        }
    })();
    

画像の挿入Insert an image

その日の Bing の写真取得し、その画像をスライドに挿入するコードを追加するには、次の手順を実行します。Complete the following steps to add code that retrieves the Bing photo of the day and inserts that image into a slide.

  1. ソリューション エクスプローラーを使用して、Controllers という名前の新しいフォルダーを HelloWorldWeb プロジェクトに追加します。Using Solution Explorer, add a new folder named Controllers to the HelloWorldWeb project.

    PowerPoint のチュートリアル - HelloWorldWeb プロジェクトの Controllers フォルダーを強調表示する Visual Studio ソリューション エクスプローラー ウィンドウ

  2. Controllers フォルダーを右クリックし、[追加] > [新規スキャフォールディング アイテム...] を選択します。Right-click the Controllers folder and select Add > New Scaffolded Item....

  3. [スキャフォールディングを追加] ダイアログ ウィンドウで、「Web API 2 Controller - Empty」を選択し、[追加] ボタンを選択します。In the Add Scaffold dialog window, select Web API 2 Controller - Empty and choose the Add button.

  4. [コントローラーの追加] ダイアログ ウィンドウでコントローラー名として「PhotoController」と入力し、[追加] ボタンを選択します。 Visual Studio によって PhotoController.cs ファイルが作成され、表示されます。In the Add Controller dialog window, enter PhotoController as the controller name and choose the Add button. Visual Studio creates and opens the PhotoController.cs file.

  5. PhotoController.cs ファイルの内容全体を、Bing サービスを呼び出す次のコードに置き換え、その日の写真を Base64 でエンコードされた文字列として取得します。 Office JavaScript API を使用してイメージをドキュメントに挿入する場合は、イメージ データを Base64 でエンコードされた文字列として指定する必要があります。Replace the entire contents of the PhotoController.cs file with the following code that calls the Bing service to retrieve the photo of the day as a Base64 encoded string. When you use the Office JavaScript API to insert an image into a document, the image data must be specified as a Base64 encoded string.

    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 to 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);
            }
        }
    }
    
  6. Home.html ファイルで TODO1 を次のマークアップに置き換えます。 このマークアップにより、アドインの作業ウィンドウ内に表示される [イメージの挿入] ボタンを定義します。In the Home.html file, replace TODO1 with the following markup. This markup defines the Insert Image button that will appear within the add-in's task pane.

    <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>
    
  7. Home.js ファイルで TODO1 を次のコードに置き換え、[イメージの挿入] ボタンのイベント ハンドラーを割り当てます。In the Home.js file, replace TODO1 with the following code to assign the event handler for the Insert Image button.

    $('#insert-image').click(insertImage);
    
  8. Home.js ファイルで TODO2 を次のコードに置き換え、insertImageinsertImageinsertImageFromBase64String 関数を定義します。 この関数は Bing Web サービスからイメージをフェッチし、 関数を呼び出してそのイメージをドキュメントに挿入します。In the Home.js file, replace TODO2 with the following code to define the insertImage function. This function fetches the image from the Bing web service and then calls the insertImageFromBase64String function to insert that image into the document.

    function insertImage() {
        // Get image from from web service (as a Base64 encoded string).
        $.ajax({
            url: "/api/Photo/", success: function (result) {
                insertImageFromBase64String(result);
            }, error: function (xhr, status, error) {
                showNotification("Error", "Oops, something went wrong.");
            }
        });
    }
    
  9. Home.js ファイルで TODO3 を次のコードに置き換え、insertImageFromBase64String 関数を定義します。 この関数は Office JavaScript API を使用してイメージをドキュメントに挿入します。 注意:In the Home.js file, replace TODO3 with the following code to define the insertImageFromBase64String function. This function uses the Office JavaScript API to insert the image into the document. Note:

    • setSelectedDataAsyc 要求の 2 番目のパラメーターとして指定されている coercionType オプションは、挿入されるデータの種類を示します。The coercionType option that's specified as the second parameter of the setSelectedDataAsyc request indicates the type of data being inserted.

    • asyncResult オブジェクトは setSelectedDataAsync 要求が失敗した場合の状態やエラー情報など、その要求の結果をカプセル化します。The asyncResult object encapsulates the result of the setSelectedDataAsync request, including status and error information if the request failed.

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

アドインをテストするTest the add-in

  1. Visual Studio を使用して、新しく作成した PowerPoint アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された PowerPoint を起動します。アドインは IIS 上でローカルにホストされます。Using Visual Studio, test the newly created PowerPoint add-in by pressing F5 or choosing the Start button to launch PowerPoint with the Show Taskpane add-in button displayed in the ribbon. The add-in will be hosted locally on IIS.

    [開始] ボタンが強調表示されている Visual Studio のスクリーンショット

  2. PowerPoint でリボンの [作業ウィンドウの表示] ボタンをクリックし、アドインの作業ウィンドウを開きます。In PowerPoint, select the Show Taskpane button in the ribbon to open the add-in task pane.

    [ホーム] リボンで [作業ウィンドウの表示] ボタンが強調表示されている Visual Studio のスクリーンショット

  3. 作業ウィンドウで、[イメージの挿入] ボタンを押してその日の Bing 写真を現在のスライドに追加します。In the task pane, choose the Insert Image button to add the Bing photo of the day to the current slide.

    [画像の挿入] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  4. Visual Studio で Shift + F5 を押すか [停止] ボタンを選択してアドインを停止します。In Visual Studio, stop the add-in by pressing Shift + F5 or choosing the Stop button. アドインが停止すると、PowerPoint は自動的に閉じます。PowerPoint will automatically close when the add-in is stopped.

    [停止] ボタンが強調表示されている Visual Studio のスクリーンショット

ユーザー インターフェイス (UI) 要素のカスタマイズCustomize User Interface (UI) elements

作業ウィンドウの UI をカスタマイズするマークアップを追加するには、次の手順を実行します。Complete the following steps to add markup that customizes the task pane UI.

  1. Home.html ファイルで TODO2 を次のマークアップと置き換え、ヘッダー セクションとタイトルを作業ウィンドウに追加します。 注意:In the Home.html file, replace TODO2 with the following markup to add a header section and title to the task pane. Note:

    • ms- で始まるスタイルは、Office UI Fabric で定義されています。これは、Office と Office 365 のユーザー エクスペリエンスを構築するための JavaScript フロント エンドのフレームワークです。 Home.html ファイルには、Fabric スタイル シートへの参照が含まれています。The styles that begin with ms- are defined by Office UI Fabric, a JavaScript front-end framework for building user experiences for Office and Office 365. The Home.html file includes a reference to the Fabric stylesheet.
    <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 全体を削除して作業ウィンドウからフッター セクションを削除します。In the Home.html file, find the div with class="footer" and delete that entire div to remove the footer section from the task pane.

アドインをテストするTest the add-in

  1. Visual Studio を使用して、PowerPoint アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された PowerPoint を起動します。Using Visual Studio, test the PowerPoint add-in by pressing F5 or choosing the Start button to launch PowerPoint with the Show Taskpane add-in button displayed in the ribbon. アドインは IIS 上でローカルにホストされます。The add-in will be hosted locally on IIS.

    [開始] ボタンが強調表示されている Visual Studio のスクリーンショット

  2. PowerPoint でリボンの [作業ウィンドウの表示] ボタンをクリックし、アドインの作業ウィンドウを開きます。In PowerPoint, select the Show Taskpane button in the ribbon to open the add-in task pane.

    [ホーム] リボンで [作業ウィンドウの表示] ボタンが強調表示されている Visual Studio のスクリーンショット

  3. このとき、作業ウィンドウにはヘッダー セクションとタイトルが含まれ、フッター セクションが含まれないことがわかります。Notice that the task pane now contains a header section and title, and no longer contains a footer section.

    [画像の挿入] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  4. Visual Studio で Shift + F5 を押すか [停止] ボタンを選択してアドインを停止します。In Visual Studio, stop the add-in by pressing Shift + F5 or choosing the Stop button. アドインが停止すると、PowerPoint は自動的に閉じます。PowerPoint will automatically close when the add-in is stopped.

    [停止] ボタンが強調表示されている Visual Studio のスクリーンショット

テキストの挿入Insert text

その日の Bing の写真を含むタイトル スライドにテキストを挿入するコードを追加するには、次の手順を実行します。Complete the following steps to add code that inserts text into the title slide which contains the Bing photo of the day.

  1. Home.html ファイルで TODO3 を次のマークアップに置き換えます。 このマークアップにより、アドインの作業ウィンドウ内に表示される [テキストの挿入] ボタンを定義します。In the Home.html file, replace TODO3 with the following markup. This markup defines the Insert Text button that will appear within the add-in's task pane.

        <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 を次のコードに置き換え、[テキストの挿入] ボタンのイベント ハンドラーを割り当てます。In the Home.js file, replace TODO4 with the following code to assign the event handler for the Insert Text button.

    $('#insert-text').click(insertText);
    
  3. Home.js ファイルで TODO5 を次のコードに置き換え、insertText 関数を定義します。 この関数は、現在のスライドにテキストを挿入します。In the Home.js file, replace TODO5 with the following code to define the insertText function. This function inserts text into the current slide.

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

アドインをテストするTest the add-in

  1. Visual Studio を使用して、アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された PowerPoint を起動します。Using Visual Studio, test the add-in by pressing F5 or choosing the Start button to launch PowerPoint with the Show Taskpane add-in button displayed in the ribbon. アドインは IIS 上でローカルにホストされます。The add-in will be hosted locally on IIS.

    [開始] ボタンが強調表示されている Visual Studio のスクリーンショット

  2. PowerPoint でリボンの [作業ウィンドウの表示] ボタンをクリックし、アドインの作業ウィンドウを開きます。In PowerPoint, select the Show Taskpane button in the ribbon to open the add-in task pane.

    [ホーム] リボンで [作業ウィンドウの表示] ボタンが強調表示されている Visual Studio のスクリーンショット

  3. 作業ウィンドウで [イメージの挿入] ボタンをクリックしてその日の Bing 写真を現在のスライドに追加し、そのタイトルにテキスト ボックスが含まれるデザインをそのスライドに選択します。In the task pane, choose the Insert Image button to add the Bing photo of the day to the current slide and choose a design for the slide that contains a text box for the title.

    [イメージの挿入] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  4. タイトル スライドのテキスト ボックスにカーソルを置き、作業ウィンドウで [テキストの挿入] ボタンをクリックしてテキストをスライドに追加します。Put your cursor in the text box on the title slide and then in the task pane, choose the Insert Text button to add text to the slide.

    [テキストの挿入] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  5. Visual Studio で Shift + F5 を押すか [停止] ボタンを選択してアドインを停止します。In Visual Studio, stop the add-in by pressing Shift + F5 or choosing the Stop button. アドインが停止すると、PowerPoint は自動的に閉じます。PowerPoint will automatically close when the add-in is stopped.

    [停止] ボタンが強調表示されている Visual Studio のスクリーンショット

スライドのメタデータの取得Get slide metadata

選択したスライドのメタデータを取得するコードを追加するには、次の手順を実行します。Complete the following steps to add code that retrieves metadata for the selected slide.

  1. Home.html ファイルで TODO4 を次のマークアップに置き換えます。 このマークアップにより、アドインの作業ウィンドウ内に表示される [Get Slide Metadata] (スライドのメタデータの取得) ボタンを定義します。In the Home.html file, replace TODO4 with the following markup. This markup defines the Get Slide Metadata button that will appear within the add-in's task pane.

    <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>
    
  2. Home.js ファイルで TODO6 を次のコードに置き換え、[Get Slide Metadata] (スライドのメタデータの取得) ボタンのイベント ハンドラーを割り当てます。In the Home.js file, replace TODO6 with the following code to assign the event handler for the Get Slide Metadata button.

    $('#get-slide-metadata').click(getSlideMetadata);
    
  3. Home.js ファイルで TODO7 を次のコードに置き換え、getSlideMetadatagetSlideMetadata 関数を定義します。 この関数は選択したスライドのメタデータを取得し、それをアドインの作業ウィンドウ内のポップアップ ダイアログ ウィンドウに書き込みます。In the Home.js file, replace TODO7 with the following code to define the getSlideMetadata function. This function retrieves metadata for the selected slide(s) and writes it to a popup dialog window within the add-in task pane.

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

アドインをテストするTest the add-in

  1. Visual Studio を使用して、アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された PowerPoint を起動します。Using Visual Studio, test the add-in by pressing F5 or choosing the Start button to launch PowerPoint with the Show Taskpane add-in button displayed in the ribbon. アドインは IIS 上でローカルにホストされます。The add-in will be hosted locally on IIS.

    [開始] ボタンが強調表示されている Visual Studio のスクリーンショット

  2. PowerPoint でリボンの [作業ウィンドウの表示] ボタンをクリックし、アドインの作業ウィンドウを開きます。In PowerPoint, select the Show Taskpane button in the ribbon to open the add-in task pane.

    [ホーム] リボンで [作業ウィンドウの表示] ボタンが強調表示されている Visual Studio のスクリーンショット

  3. 作業ウィンドウで [Get Slide Metadata] (スライドのメタデータの取得) ボタンを選択し、選択したスライドのメタデータを取得します。 スライドのメタデータは作業ウィンドウの下部にあるポップアップ ダイアログ ウィンドウに書き込まれます。 この例では、JSON メタデータ内の slides 配列に、選択したスライドの idtitle、および index を指定するオブジェクトが 1 つ含まれます。 スライドのメタデータを取得するときに複数のスライドが選択されている場合、JSON メタデータ内の slides 配列には、選択したスライドごとにオブジェクトが 1 つ含まれます。In the task pane, choose the Get Slide Metadata button to get the metadata for the selected slide. The slide metadata is written to the popup dialog window at the bottom of the task pane. In this case, the slides array within the JSON metadata contains one object that specifies the id, title, and index of the selected slide. If multiple slides had been selected when you retrieved slide metadata, the slides array within the JSON metadata would contain one object for each selected slide.

    [Get Slide Metadata] (スライドのメタデータの取得) ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  4. Visual Studio で Shift + F5 を押すか [停止] ボタンを選択してアドインを停止します。In Visual Studio, stop the add-in by pressing Shift + F5 or choosing the Stop button. アドインが停止すると、PowerPoint は自動的に閉じます。PowerPoint will automatically close when the add-in is stopped.

    [停止] ボタンが強調表示されている Visual Studio のスクリーンショット

ドキュメントのスライド間を移動するコードを追加するには、次の手順を実行します。Complete the following steps to add code that navigates between the slides of a document.

  1. Home.html ファイルで TODO5 を次のマークアップに置き換えます。 このマークアップにより、アドインの作業ウィンドウ内に表示される 4 つのナビゲーション ボタンを定義します。In the Home.html file, replace TODO5 with the following markup. This markup defines the four navigation buttons that will appear within the add-in's task pane.

    <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 つのナビゲーション ボタンのイベント ハンドラーを割り当てます。In the Home.js file, replace TODO8 with the following code to assign the event handlers for the four navigation buttons.

    $('#go-to-first-slide').click(goToFirstSlide);
    $('#go-to-next-slide').click(goToNextSlide);
    $('#go-to-previous-slide').click(goToPreviousSlide);
    $('#go-to-last-slide').click(goToLastSlide);
    
  3. Home.js ファイルで TODO9 を次のコードに置き換え、ナビゲーション関数を定義します。In the Home.js file, replace TODO9 with the following code to define the navigation functions. これらの関数では goToByIdAsync 関数を使用して、ドキュメント内のその位置 (最初、最後、前、次) に基づいてスライドを選択します。Each of these functions uses the goToByIdAsync function to select a slide based upon its position in the document (first, last, previous, and next).

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

アドインをテストするTest the add-in

  1. Visual Studio を使用して、アドインをテストします。そのために、F5 キーを押すか [開始] ボタンをクリックして、リボンに [作業ウィンドウの表示] アドイン ボタンが表示された PowerPoint を起動します。Using Visual Studio, test the add-in by pressing F5 or choosing the Start button to launch PowerPoint with the Show Taskpane add-in button displayed in the ribbon. アドインは IIS 上でローカルにホストされます。The add-in will be hosted locally on IIS.

    [開始] ボタンが強調表示されている Visual Studio のスクリーンショット

  2. PowerPoint でリボンの [作業ウィンドウの表示] ボタンをクリックし、アドインの作業ウィンドウを開きます。In PowerPoint, select the Show Taskpane button in the ribbon to open the add-in task pane.

    [ホーム] リボンで [作業ウィンドウの表示] ボタンが強調表示されている Visual Studio のスクリーンショット

  3. [ホーム] タブの [新しいスライド] ボタンを使用して、2 つの新しいスライドをドキュメントに追加します。Use the New Slide button in the ribbon of the Home tab to add two new slides to the document.

  4. 作業ウィンドウで [最初のスライドに移動] ボタンをクリックします。 ドキュメントの最初のスライドが選択され、表示されます。In the task pane, choose the Go to First Slide button. The first slide in the document is selected and displayed.

    [最初のスライドに移動] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  5. 作業ウィンドウで [次のスライドに移動] ボタンをクリックします。 ドキュメントの次のスライドが選択され、表示されます。In the task pane, choose the Go to Next Slide button. The next slide in the document is selected and displayed.

    [次のスライドに移動] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  6. 作業ウィンドウで [前のスライドに移動] ボタンをクリックします。 ドキュメントの前のスライドが選択され、表示されます。In the task pane, choose the Go to Previous Slide button. The previous slide in the document is selected and displayed.

    [前のスライドに移動] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  7. 作業ウィンドウで [最後のスライドに移動] ボタンをクリックします。 ドキュメントの最後のスライドが選択され、表示されます。In the task pane, choose the Go to Last Slide button. The last slide in the document is selected and displayed.

    [最後のスライドに移動] ボタンが強調表示されている PowerPoint アドインのスクリーンショット

  8. Visual Studio で Shift + F5 を押すか [停止] ボタンを選択してアドインを停止します。In Visual Studio, stop the add-in by pressing Shift + F5 or choosing the Stop button. アドインが停止すると、PowerPoint は自動的に閉じます。PowerPoint will automatically close when the add-in is stopped.

    [停止] ボタンが強調表示されている Visual Studio のスクリーンショット

次の手順Next steps

このチュートリアルでは、画像の挿入、テキストの挿入、スライドのメタデータ取得、およびスライド間の移動のための PowerPoint アドインを作成しました。In this tutorial, you've created a PowerPoint add-in that inserts an image, inserts text, gets slide metadata, and navigates between slides. PowerPoint アドインの構築に関する詳細については、次の記事にお進みください。To learn more about building PowerPoint add-ins, continue to the following article:

関連項目See also