チュートリアル: Visual Studio を使用してPowerPoint作業ウィンドウアドインを作成する

[アーティクル]
11/22/2024

このチュートリアルでは、次の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 つのプロジェクトを含むソリューションが作成されます。

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

Project

説明

アドインプロジェクト

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 フォルダーを右クリック (または選択して長押し) し、[追加>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#" %>
```

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

"ファイルが見つかりませんでした [...] というエラーが表示された場合\bin\roslyn\csc.exe」をクリックし、次の操作を行います。
1. .\Web.config ファイルを開きます。
2. .cs extensionの <compiler> ノードを見つけて、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 slides.</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 slides:", 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 アドインの概要

Visual Studio を使用して Office アドインを開発する

次の方法で共有

チュートリアル: Visual Studio を使用してPowerPoint作業ウィンドウアドインを作成する

前提条件

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

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

コードを更新する

画像の挿入

アドインをテストする

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

アドインをテストする

テキストの挿入

アドインをテストする

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

アドインをテストする

スライド間の移動

アドインをテストする

コードサンプル

次の手順

関連項目

その他のリソース

次の方法で共有

チュートリアル: Visual Studio を使用してPowerPoint作業ウィンドウ アドインを作成する

前提条件

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

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

コードを更新する

画像の挿入

アドインをテストする

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

アドインをテストする

テキストの挿入

アドインをテストする

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

アドインをテストする

スライド間の移動

アドインをテストする

コード サンプル

次の手順

関連項目

その他のリソース

チュートリアル: Visual Studio を使用してPowerPoint作業ウィンドウアドインを作成する

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

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

コードサンプル