最初の PowerPoint 作業ウィンドウ アドインをビルドする

この記事では、PowerPoint 作業ウィンドウ アドインをビルドするプロセスについて説明します。

アドインを作成する

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

前提条件

注意

Node.js または npm に慣れていない場合は、まず開発環境をセットアップする必要があります。

  • Node.js (最新 LTS バージョン)。

  • 最新バージョンの YeomanOffice アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

    npm install -g yo generator-office
    

    注意

    以前に Yeoman ジェネレーターをインストールしている場合でも、npm からパッケージを最新バージョンに更新することをお勧めします。

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

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドイン プロジェクトを作成します。

yo office

注意

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

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

  • Choose a project type: (プロジェクトの種類を選択) Office Add-in Task Pane project
  • Choose a script type: (スクリプトの種類を選択) Javascript
  • What would you want to name your add-in?: (アドインの名前を何にしますか) My Office Add-in
  • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) PowerPoint

コマンド ライン インターフェイスでの Yeoman ジェネレーターのプロンプトと回答を示すスクリーンショット。

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

ヒント

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

プロジェクトを確認する

Yeoman ジェネレーターで作成したアドイン プロジェクトには、基本的なアドインの作業ウィンドウが含まれています。 アドイン プロジェクトの構成要素を確認したい場合は、コード エディターでプロジェクトを開き、以下に一覧表示されているファイルを確認します。 アドインを試す準備ができたら、次のセクションに進みます。

  • プロジェクトのルート ディレクトリにある ./manifest.xml ファイルで、アドインの機能と設定を定義します。 manifest.xml ファイルの詳細については、「Office アドインの XML マニフェスト」を参照してください。
  • ./src/taskpane/taskpane.html ファイルには、作業ペイン用のHTMLマークアップが含まれています。
  • ./src/taskpane/taskpane.css ファイルには、作業ペインのコンテンツに適用されるCSSが含まれています。
  • ./src/taskpane/taskpane.js ファイルには、作業ウィンドウと Office クライアント アプリケーションの間のやり取りを容易にする Office JavaScript API コードが含まれています。

試してみる

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

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

    注意

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

    ヒント

    Mac でアドインをテストしている場合は、先に進む前に次のコマンドを実行してください。 このコマンドを実行すると、ローカル Web サーバーが起動します。

    npm run dev-server
    
    • PowerPoint でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 ローカル Web サーバーが (まだ実行されていない場合) 起動し、アドインが読み込まれた PowerPoint が開きます。

      npm start
      
    • ブラウザー上の PowerPoint でアドインをテストするには、プロジェクトのルート ディレクトリから次のコマンドを実行します。 このコマンドを実行すると、ローカル Web サーバーが起動します。 "{url}" を、アクセス許可を持っている OneDrive または SharePoint ライブラリ上の PowerPoint ドキュメントの URL に置き換えます。

      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 で、新しい空白のスライドを挿入して、[ホーム] タブを選択し、リボンにある [作業ウィンドウの表示] ボタンをクリックしてアドインの作業ウィンドウを開きます。

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

  4. 作業ウィンドウの下部にある [実行] リンクを選択して、現在のスライドに "Hello World" とテキストを挿入します。

    スライドに犬の画像とテキスト 'Hello World' が表示されている PowerPoint のスクリーンショット。

次の手順

これで完了です。PowerPoint 作業ウィンドウ アドインが正常に作成されました。 次に、PowerPoint アドインの機能の詳細説明と、より複雑なアドインを作成する方法について、「PowerPoint アドインのチュートリアル」をご覧ください。

関連項目