最初の Project の作業ウィンドウ アドインを作成する

この記事では、Project の作業ウィンドウ アドインを作成するプロセスを紹介します。

前提条件

• 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 プランを購入することもできます。

• Windows の Project 2016 またはそれ以降

アドインを作成する

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドイン プロジェクトを作成します。 プロジェクトを含むフォルダーが現在のディレクトリに追加されます。

yo office

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

• プロジェクトの種類を選択します。Office Add-in Task Pane project
• スクリプトの種類を選択します。JavaScript
• アドインに何の名前を付けたいですか?My Office Add-in
• サポートする Office クライアント アプリケーションはどれですか?Project

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

プロジェクトを確認する

Yeoman ジェネレーターで作成したアドイン プロジェクトには、基本的なアドインの作業ウィンドウのサンプル コードが含まれています。

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

試してみる

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 からこのアドインを開くことができない」を参照してください。

     

   • Yeoman ジェネレーターを初めて使用して Office アドインを開発すると、既定のブラウザーでウィンドウが開き、Microsoft 365 アカウントにサインインするように求められます。 サインイン ウィンドウが表示されない場合、サイドローディングまたはログイン タイムアウト エラーが発生した場合は、 atk auth login m365を実行します。

   • Project でアドインをテストするには、プロジェクトのルート ディレクトリで次のコマンドを実行します。 これにより、ローカル Web サーバーが起動し、アドインがサイドロードされます。

     npm start
     

   アドインが自動的にサイドロードされない場合は、「 Windows 上の Office アドインをサイドロードする」 の手順に従って、Project でアドインを手動でサイドロードします。

3. Project で、簡素なプロジェクト計画を作成します。

4. プロジェクト内の単一のタスクを選択します。

5. 作業ウィンドウの下部で Run リンクを選択して、 選択されたタスクの名前を変更し、そのタスクにメモを追加します。

   

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

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

     npm stop
     

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

トラブルシューティング

• 「開発環境のセットアップ」の手順に従って、環境が Office 開発の準備ができていることを確認 します。

• Yo Office が実行する自動 npm install ステップが失敗する可能性があります。 npm startを実行しようとしたときにエラーが表示された場合は、コマンド プロンプトで新しく作成したプロジェクト フォルダーに移動し、npm installを手動で実行します。 Yo Office の詳細については、「 Yeoman ジェネレーターを使用して Office アドイン プロジェクトを作成する」を参照してください。

• Yeoman ジェネレーターまたはプロジェクトの npm install を実行すると、警告が生成される場合があります。 ほとんどの場合、これらの警告は無視しても問題ありません。 依存関係が非推奨になり、プロジェクトが依存する他のパッケージで依存関係がサポートされない場合があります。 これらの警告を解決する場合は、 npm-check-updates ツールを使用します。

  • ルート プロジェクト ディレクトリ内のコマンド プロンプトで、 npm i -g npm-check-updatesを実行します。 これにより、ツールがグローバルにインストールされます。
  • ncu -u を実行します。 これにより、すべてのパッケージのレポートと、更新されるバージョンが表示されます。
  • npm installを実行して、すべてのパッケージを更新します。

  npm installを実行するときの警告の詳細については、「Node.js と npm の世界での警告と依存関係」を参照してください。

• リボンに [アドイン] ボタンが表示されない場合 ([作業ウィンドウの表示] など)、[ホーム] リボン タブから [アドイン] ボタンを選択し、テスト アドインを選択します。

次の手順

おめでとうございます。 Project の作業ウィンドウ アドインが正常に作成されました。 この後は、Project アドインの機能と一般的なシナリオについて調べます。

関連項目

• Office アドイン プラットフォームの概要
• Office アドインを開発する
• Office アドインの中心概念
• プロジェクト アドインのコード サンプル
• Visual Studio コードを使用して発行する