次の方法で共有

初めてのPowerPoint コンテンツ アドインを構築する

  • [アーティクル]

この記事では、Visual Studio を使用してPowerPoint コンテンツ アドイン を構築するプロセスについて説明します。

アドインを作成する

前提条件

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

    注:

    既に Visual Studio がインストールされている場合は、Visual Studio インストーラーを使用して、Office/SharePoint 開発ワークロードがインストールされていることを確認してください。

  • Microsoft 365 サブスクリプションに接続されている Office (Office for the web を含む)。

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

  1. Visual Studio で、[新しいプロジェクトの作成] を選択します。

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

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

  4. [ Office アドインの作成 ] ダイアログ ウィンドウで、[ PowerPointスライドにコンテンツを挿入する] を選択し、[完了] を選択してプロジェクトを作成 します 。

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

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で、"この例では現在の文書の選択範囲を読み取ります" というテキストを含む <p> 要素と、idが "get-data-from-selection" である<button>要素を見つけます。 これらの要素全体を次のマークアップに置き換え、ファイルを保存します。

    <p class="ms-font-m-plus">This example will get some details about the current slide.</p>

<button class="Button Button--primary" id="get-data-from-selection">
    <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
    <span class="Button-label">Get slide details</span>
    <span class="Button-description">Gets and displays the current slide's details.</span>
</button>

  2. Web アプリケーション プロジェクトのルートにあるファイル Home.js を開きます。 このファイルは、アドイン用のスクリプトを指定します。 getDataFromSelection関数を見つけて、関数全体を次のコードに置き換えてから、ファイルを保存します。

    // Gets some details about the current slide and displays them in a notification.
function getDataFromSelection() {
    if (Office.context.document.getSelectedDataAsync) {
        Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    showNotification('Some slide details are:', '"' + JSON.stringify(result.value) + '"');
                } else {
                    showNotification('Error:', result.error.message);
                }
            }
        );
    } else {
        app.showNotification('Error:', 'Reading selection data is not supported by this host application.');
    }
}

マニフェストを更新する

  1. アドイン プロジェクトでアドインのみのマニフェスト ファイルを開きます。 このファイルは、アドインの設定と機能を定義します。

  2. ProviderName 要素にはプレースホルダー値が含まれています。 それを自分の名前に置き換えます。

  3. DisplayName 要素の DefaultValue 属性にはプレースホルダー値が含まれています。 これは、My Office Add-in に置き換えてください。

  4. Description 要素の DefaultValue 属性にはプレースホルダー値が含まれています。 PowerPoint 用のコンテンツ アドインに置き換えます。

  5. ファイルを保存します。 更新された行は、次のコード サンプルのようになります。

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A content add-in for PowerPoint."/>
...

試してみる

  1. Visual Studio を使用して、新しく作成したPowerPoint アドインをテストするには、 F5 キーを押すか 、[スタート ] ボタンを選択して、スライド上にコンテンツ アドインが表示された状態でPowerPointを起動します。

  2. PowerPointで、コンテンツ アドインの [ スライドの詳細の取得 ] ボタンを選択して、現在のスライドの詳細を取得します。

    アドイン コンテンツがPowerPointで開きます。

注:

console.log の出力を表示するには、JavaScript コンソール用の開発者ツール セットを別途用意する必要があります。 F12 ツールと Microsoft Edge DevTools の詳細については、「Internet Explorer 用の開発者ツールを使用してアドインをデバッグする」を参照するか、「Edge Legacy 用の開発者ツールを使用してアドインをデバッグする」、または「Microsoft Edge(Chromiumベース)の開発者ツールを使用してアドインをデバッグする」を参照してください。

次の手順

これで、PowerPoint コンテンツ アドインが正常に作成されました。 次に、「Visual Studio を使用して Office アドインを開発する」を参照してください。

関連項目