次の方法で共有

Teams Toolkit を使用して Office アドイン プロジェクトを作成する

  • [アーティクル]

Teams アプリを開発するための主要なツールは、Teams Toolkit です。 Teams Toolkit を使用して Office アドインを作成できます。

Teams Toolkit で作成されたアドインでは、 Microsoft 365 の統合マニフェストが使用されます。

注:

Microsoft 365 の統合マニフェストは、運用環境の Outlook アドインで使用できます。Excel、PowerPoint、Word アドインのプレビューとしてのみ使用できます。

ヒント

アドイン専用マニフェストを使用する Office アドインを作成する別の Visual Studio Code 拡張機能があります。 「 Office アドイン開発キット for Visual Studio Code を使用して Office アドイン プロジェクトを作成する」を参照してください。

注:

Microsoft 365 の統合マニフェストを使用する Office アドインは、Office on the web、新しい Outlook on Windows、および Microsoft 365 サブスクリプションバージョン 2304 (ビルド 16320.00000) 以降に接続されている Office on Windows で直接サポートされます。

統合マニフェストを含むアプリ パッケージが AppSource または Microsoft 365 管理 センターにデプロイされると、アドインのみのマニフェストが統合マニフェストから生成され、格納されます。 このアドイン専用マニフェストを使用すると、Office on Mac、Office on mobile、2304 より前の Office on Windows のサブスクリプション バージョン (ビルド 16320.00000)、および永続的なバージョンの Office on Windows など、統合マニフェストを直接サポートしていないプラットフォームにアドインをインストールできます。

「Teams Toolkit のインストール」の説明に従って、最新バージョンの Teams Toolkit を Visual Studio Code にインストールします。

重要

最新リリースバージョンの Teams Toolkit を使用して Outlook アドインを作成できます。 Excel、PowerPoint、またはWord用のアドインを作成するには、「プレリリース バージョンのインストール」の説明に従ってプレリリース バージョンをインストールします。 ツールキットは、 Microsoft 365 の統合マニフェストを使用するプロジェクトを作成します。 Excel、PowerPoint、Wordでのこのマニフェストのサポートはプレビューのみです。

Office アドイン プロジェクトの作成

  1. Visual Studio Code を開き、 アクティビティ バーの [Teams ツールキット] アイコンを選択します。

    Teams ツールキット アイコン。

  2. [ 新しいアプリの作成] を選択します。

  3. [ 新しいプロジェクト ] ドロップダウン メニューが開きます。 一覧表示されるオプションは、Teams Toolkit のバージョンによって異なります。 [ Office アドイン] を選択します。

    [新しいプロジェクト] ドロップダウン メニューのオプション。最後のオプションは

  4. [ Office アドインを使用したアプリ機能 ] ドロップダウン メニューが開きます。 一覧表示されるオプションは、Teams Toolkit のバージョンによって異なります。 [作業ウィンドウ] を選択します。

    [Office アドインを使用したアプリ機能] ドロップダウン メニューのオプション。[作業ウィンドウ] オプションが選択されています。

  5. Outlook アドインを作成している場合は、ツールキットに [ プログラミング言語 ] ドロップダウン メニューが表示されます。 [TypeScript] または [JavaScript] を選択します。 (Excel、PowerPoint、Word アドインの場合、TypeScript プロジェクトは常に作成されます)。

  6. Outlook アドインを作成している場合は、ツールキットに [フレームワーク ] ドロップダウン メニューが表示されます。 [既定値] または [React] を選択します。 (Excel、PowerPoint、Word アドインの場合、既定のプロジェクトは常に作成されます)。

  7. 開いた [ワークスペース フォルダー] ダイアログで、プロジェクトを作成するフォルダーを選択します。

  8. プロンプトが表示されたら、プロジェクトに名前を付けます (スペースなし)。 Teams Toolkit は、基本的なファイルとスキャフォールディングを使用してプロジェクトを作成します。 次に、 2 番目の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを閉じます。

    注:

    生成されたプロジェクトは、Excel、Outlook、PowerPoint、Wordにインストールできるように構成されています。 必要に応じてマニフェストファイルとソース ファイルを編集して、サポートされている Office アプリケーションを変更できます。

  9. Visual Studio Code TERMINAL で、プロジェクトのルートに移動し、 npm installを実行します。

  10. インストールが完了したら、Visual Studio Code からアドインをサイドロードできることを確認します。 サイドロードする手順は、アドインをテストする Office アプリケーションによって異なります。

Excel、PowerPoint、または Word でのサイドロード

注:

このセクションは、 Windows コンピューターでアドインを開発している場合にのみ適用されます。 Mac で作業している場合は、Microsoft 365 管理者がアドインを統合アプリとして Microsoft 365 管理 センターに展開することで、アドインをテストできます。

  1. Visual Studio Code で [表示 | Run] を 選択します。 [ 実行とデバッグ ] ドロップダウン メニューで、次のいずれかのオプションを選択します。

    • Excel Desktop (Edge Chromium)
    • PowerPoint デスクトップ (Edge Chromium)
    • Word デスクトップ (Edge Chromium)

  2. F5 キーを押します。 プロジェクトがビルドされ、Node dev-server ウィンドウが開きます。 このプロセスには数分かかる場合があります。 最終的に、選択した Office アプリケーションのデスクトップ バージョンが開きます。

    注:

    コンピューターに Office アドインを初めてサイドロードした場合 (または 1 か月を超えて初めて) 場合は、古い証明書を削除したり、新しい証明書をインストールしたりするように求められる場合があります。 両方のプロンプトに同意します。

  3. [ホーム] リボンに 2 つのボタンがある Contoso アドイン タブが表示されます。 1 つのボタンを使用して、開いている Office ドキュメントでアクションを実行します。 もう 1 つを使用して、アドインの作業ウィンドウを開きます。

    注:

    選択したボタンに関係なく、 WebView Stop On Load プロンプトが表示されます。 [OK] を選択します。

  4. デバッグを停止してアドインをアンインストールするには、[Visual Studio Code で 実行 | Stop デバッグ ] を選択します。

Outlook でのサイドロード

  1. Microsoft 365 開発者テナントのアカウントが、デスクトップ Outlook のメール アカウントでもあることを確認します。 そうでない場合は、「 メール アカウントを Outlook に追加する」のガイダンスに従ってください。

  2. Outlook デスクトップを閉じます。

  3. Visual Studio Code で、Teams Toolkit を開きます。

  4. [ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。

  5. Visual Studio Code で [表示 | Run] を 選択します。 [実行とデバッグ] ドロップダウン メニューで、[Outlook Desktop (Edge Chromium)] オプションを選択し、F5 キーを押します。 プロジェクトがビルドされ、Node dev-server ウィンドウが開きます。 このプロセスには数分かかる場合があり、Outlook デスクトップが開きます。

    注:

    コンピューターに Office アドインを初めてサイドロードした場合 (または 1 か月を超えて初めて) 場合は、古い証明書を削除したり、新しい証明書をインストールしたりするように求められる場合があります。 両方のプロンプトに同意します。

  6. Microsoft 365 アカウント ID の受信トレイを開き、任意のメッセージを開きます。 2 つのボタンを含む Contoso アドイン タブが [ホーム ] リボン (またはメッセージ リボン (独自のウィンドウで メッセージ を開いている場合) に表示されます。

  7. [ タスクウィンドウの表示 ] ボタンをクリックすると、作業ウィンドウが開きます。 [ アクションの実行 ] ボタンをクリックすると、メッセージの上部近くに小さな通知が表示されます。

    注:

    選択したボタンに関係なく、 WebView Stop On Load プロンプトが表示されます。 [OK] を選択します。

  8. デバッグを停止してアドインをアンインストールするには、[Visual Studio Code で 実行 | Stop デバッグ ] を選択します。

プロジェクトの開発

これで、プロジェクトを変更して開発できます。 Office アドインドキュメントのガイダンスが、使用されているマニフェストの種類に応じて分岐する場所では、統合マニフェストのガイダンスに従ってください。