次の方法で共有

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

  • [アーティクル]

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

注:

Visual Studio を使用して Office アドインを作成する方法については、「Visual Studio を使用して Office アドインを作成する」を参照してください。

前提条件

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

Yeoman ジェネレーターを使用してアドイン プロジェクトを作成する

統合開発環境 (IDE) として VS Code を使用している場合、Office アドイン用の Yeoman ジェネレーターで Office アドイン プロジェクトを作成する必要があります。Yeoman ジェネレーターは、VS Code またはその他のエディターで管理できる Node.js プロジェクトを作成します。

Yeoman ジェネレーターを使用して Office アドインを作成するには、作成するアドインの種類に対応する 5 分間のクイック スタートの指示に従います。

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

Yeoman ジェネレーターがアドイン プロジェクトの作成を完了したら、VS Code でプロジェクトのルート フォルダーを開きます。

ヒント

Windows では、コマンド ラインからプロジェクトのルート ディレクトリに移動し、code . を入力して VS Code でそのフォルダーを開くことができます。 Mac では、VS Code でプロジェクト フォルダーを開くためにそのコマンドを使用する前に、code コマンドをパスに追加する必要があります。

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

Office アドイン開発キット (プレビュー) を使用してアドイン プロジェクトを作成する

Office アドイン開発キットは、VS Code から直接新しいプロジェクトを作成できる Visual Studio Code 拡張機能です。 拡張機能のインストールとテンプレートとサンプルからのプロジェクトの作成については、「 Office アドイン開発キット for Visual Studio Code を使用して Office アドイン プロジェクトを作成する」を参照してください。

重要

Office アドイン開発キット拡張機能では、アドイン のみのマニフェストを使用するアドインの作成のみがサポートされます。 また、現時点では Excel、PowerPoint、Wordアドインのみが作成されます。 Outlook のサポートは、追加のサンプルやその他の機能強化と同様に開発中です。 ツールに関するフィードバックをお待ちしております。 問題と機能の要求は、 拡張機能のリポジトリの GitHub の問題を通じて送信する必要があります。

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

Office アドインのテスト、デバッグ、およびトラブルシューティングの方法は、プラットフォームによって異なります。 詳細については、「Office アドインのテストとデバッグ」を参照してください。

アドインを発行する

Office アドインは、Web アプリケーションとマニフェスト ファイルで構成されています。 Web アプリケーションはアドインのユーザー インターフェイスと機能を定義し、マニフェストは Web アプリケーションの場所を指定し、アドインの設定と機能を定義します。

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

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

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

    npm run build

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

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

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

  4. Office アドインを展開するために使用する方法を選択し、指示に従ってマニフェスト ファイルを公開します。

関連項目