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 アドインのテストとデバッグ」を参照してください。

アドインを発行する

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 アドインを展開するために使用する方法を選択し、指示に従ってマニフェスト ファイルを公開します。

関連項目