次の方法で共有

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

この記事では、Visual Studio Code (VS Code) を使用して Office アドインを開発する方法について説明します。

前提条件

VS Code を使用してアドインを開発する

プロジェクトを操作するには、VS Code を使用してプロジェクトのルート フォルダーを開きます。

どちらのツールも、機能が制限された基本的なアドインを作成します。 VS Code でマニフェスト、HTML、JavaScript または TypeScript、および CSS ファイルを編集することにより、アドインをカスタマイズできます。 Yeoman ジェネレーターが作成するアドイン プロジェクトのプロジェクト構造とファイルの概要については、作成したアドインの種類に対応する 5 分間のクイック スタート内の Yeoman ジェネレーターのガイダンスを参照してください。

アドインのテストとデバッグ

Office アドインのテスト、デバッグ、トラブルシューティングの方法は、プラットフォームと、プロジェクトの作成に使用されるツールによって異なります。 詳細については、「 Office アドインのテストとデバッグ」および 「 Microsoft 365 Agents Toolkit を使用した Office アドイン プロジェクトの作成」を参照してください。

アドインを発行する

Office アドインには、マニフェスト ファイルと独自の Web アプリケーションという 2 つの基本的なコンポーネントが含まれています。 マニフェストはユーザーのアドインを Office クライアントと統合する方法など、さまざまな設定を定義します。 Web アプリケーションは、アドインの機能と UI を提供する HTML、JavaScript、およびその他のファイルを提供します。

アドインの開発中に、ローカル Web サーバーでアドインを実行できます (localhost)。ただし、他のユーザーがアクセスできるように公開する準備ができたら、Web サーバーまたは Web ホスティング サービス (Microsoft Azure など) に Web アプリケーションを展開し、マニフェストを更新して展開されたアプリケーションの URL を指定する必要があります。

アドインが希望どおりに機能し、他のユーザーがアクセスできるように公開する準備ができたら、次の手順を実行します。

  1. コマンド ラインから、アドイン プロジェクトのルート ディレクトリで、次のコマンドを実行して、運用展開用のすべてのファイルを準備します。

    npm run build

    ビルドが完了すると、アドイン プロジェクトのルート ディレクトリにある dist フォルダーに、以降の手順で展開するファイルが含まれます。

  2. dist フォルダーの内容を、アドインをホストする Web サーバーにアップロードします。 任意の種類の Web サーバーまたは Web ホスティング サービスを使用して、アドインをホストできます。

  3. VS Code で、プロジェクトのルート ディレクトリにあるアドインのマニフェスト ファイルを開きます。 https://localhost:3000 のすべての出現回数を、前の手順で Web サーバーに展開した Web アプリケーションの URL に置き換えます。

  4. Office アドインの展開に使用する方法を選択し、指示に従ってアドインを発行します。

関連項目

  • Last updated on