Office アドイン開発キット for Visual Studio Code を使用して Office アドイン プロジェクトを作成する (プレビュー)
Office アドイン開発キットは、環境のセットアップ、Office アドインの作成、およびコードの効率的なデバッグに役立ちます。
重要
Office アドイン開発キット拡張機能は現在プレビュー段階です。 アドイン のみのマニフェストを使用するアドインの作成のみがサポートされます。 また、現時点では Excel、PowerPoint、Wordアドインのみが作成されます。 Outlook のサポートは、追加のサンプルやその他の機能強化と同様に開発中です。 ツールに関するフィードバックをお待ちしております。 問題と機能の要求は、 拡張機能のリポジトリの GitHub の問題を通じて送信する必要があります。
前提条件
- Visual Studio Code をダウンロードしてインストールします。
- Node.js (最新 LTS バージョン)。
Node.js サイトにアクセスして、オペレーティング システムに適したバージョンをダウンロードしてインストールします。 これらのツールが既にインストールされているかどうかを確認するには、コマンド
node -vを実行しnpm -v、ターミナルでを実行します。 - Office は Microsoft 365 サブスクリプションに接続されています。 Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションの対象となる場合があります。詳細については、「FAQ」を参照してください。 または、 1 か月間の無料試用版にサインアップ するか、 Microsoft 365 プランを購入することもできます。
開発キットをインストールする
Visual Studio Code で 拡張機能 を使用して Office アドイン開発キットをインストールするか、Visual Studio Code Marketplace からインストールできます。
- Visual Studio Code を起動します。
- [拡張機能の表示]> または [Ctrl + Shift + X] を選択します。 Visual Studio Code アクティビティ バーの [拡張機能] タブを選択して、 拡張機能 を開くこともできます。
- 検索ボックス に「Office アドイン開発キット 」と入力します。
- [ Office アドイン開発キット] を選択します。 [メイン] ウィンドウに表示される [Office アドイン開発キット] 拡張機能ページで、[インストール] を選択します。 正常にインストールされると、Office アドイン開発キット アイコンが Visual Studio Code アクティビティ バーに表示されます。
アドイン プロジェクトの作成
Office アドイン開発キットには、テンプレートとサンプルという 2 つの方法で新しいプロジェクトを開始できます。 テンプレートを使用すると、Office アプリケーション、プログラミング言語、および開始機能を選択できます。 サンプルは、現実的なシナリオを示すより完全なプロジェクトです。
テンプレートからアドインを作成する
テンプレートは、アドインの基本的な出発点を提供します。 既存のコードの大部分を変更せずに作業を開始できるように、最小限の機能が追加されます。 次の手順では、開発キットを使用してテンプレートから新しいプロジェクトを作成する方法について説明します。
- Visual Studio Code を開き、 アクティビティ バーの [Office アドイン開発キット] アイコンを選択します。
- 拡張機能作業ウィンドウ で [Create a New Add-in]\(新しいアドインの作成 \) を選択します。
- アクティブになったクイック 選択メニューで、アドインの Office アプリケーションを選択します。
- 使用可能なテンプレートの一覧からアドイン テンプレートを選択します。
- プログラミング言語として [JavaScript] または [TypeScript] を選択します。
- 開いた [ワークスペース フォルダー ] ダイアログで、プロジェクトを作成するフォルダーを選択します。
- プロンプトが表示されたら、プロジェクトに名前を付けます (スペースなし)。 Office アドイン開発キットは、基本的なファイルとスキャフォールディングを使用してプロジェクトを作成します。 次に、 2 番目 の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを自由に閉じることができます。
サンプルからアドインを作成する
サンプルは、エンド ツー エンドのシナリオを解決する動作するアドインを示しています。 サンプルは、Office アドイン フレームワークの機能がどのように連携するかを理解するための学習ツールとして最も便利です。 また、特定のニーズに合わせてサンプルを拡張することもできます。
- Visual Studio Code を開き、 アクティビティ バーの [Office アドイン開発キット] アイコンを選択します。
- [ サンプルの表示] を選択します。
- 表示するサンプルを選択します。
- 開いているサンプル readme の上にある [ 作成 ] ボタンを選択します。
- 開いた [ワークスペース フォルダー ] ダイアログで、プロジェクトを作成するフォルダーを選択します。 拡張機能は、サンプルのバージョンをそのフォルダーにコピーします。 次に、 2 番目 の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを自由に閉じることができます。
アドインをテストする
Office アプリケーションでのアドインの動作を理解するには、Office アドイン開発キットを使用して、ローカル開発環境で Office アドインを実行してデバッグします。
注:
これらの手順は、新しいプロジェクトを作成するときに拡張機能によって Visual Studio Code に記載されているものと同じです。
- アクティビティ バーの [Office アドイン開発キット] アイコンを選択して拡張機能を開きます。
- [プレビュー] [Office アドインのプレビュー] (F5) を選択します
- [クイック 選択] メニューで、オプション {Office Host} Desktop (Edge Chromium) を選択します。 これにより、アドインが起動し、コードがデバッグされます。
開発キットは、デバッグを開始する前に前提条件が満たされていることを確認します。 お使いの環境に問題がある場合は、ターミナルで詳細情報を確認してください。 このプロセスの後、Office デスクトップ アプリケーションが起動し、アドインをサイドロードします。 プロジェクトを初めて実行するときは、依存関係のインストールに数分かかる場合があることに注意してください。 メッセージが表示されたら、証明書をインストールする必要があります。
Office アドインのテストを停止する
アドインのテストとデバッグが完了したら、次の手順に従ってアドインを閉じます。
- アクティビティ バーの [Office アドイン開発キット] アイコンを選択して拡張機能を開きます。
- [ Office アドインのプレビューの停止] を選択します。 これにより、Web サーバーが閉じられ、レジストリとキャッシュからアドインが削除されます。
- 必要に応じて Office アプリケーション ウィンドウを閉じます。
トラブルシューティング
アドインの実行に問題がある場合は、次の手順を実行します。
- Office の開いているインスタンスをすべて閉じます。
- Office アドインのプレビューを停止する Office アドイン開発キット拡張機能オプション を使用して 、アドイン用に開始した前の Web サーバーを閉じます。
Office アドインの開発エラーのトラブルシューティングに関する記事には、一般的な問題の解決策が含まれています。 それでも問題が解決しない場合は、 GitHub の問題を作成 してください。
Office on the webでアドインを実行する方法については、「Office アドインをOffice on the webにサイドロードする」を参照してください。
古いバージョンの Office でのデバッグの詳細については、「Microsoft Edge 従来版の開発者ツールを使用したアドインのデバッグ」を参照してください。
Office Add-ins