アドインを変換して、Microsoft 365 の統合マニフェストを使用する

  • [アーティクル]

XML マニフェストを使用するアドインに Teams 機能を追加する場合、またはアドインの将来の証拠を得るために、Microsoft 365 の統合マニフェストを使用するように変換する必要があります。

アドイン プロジェクトを XML マニフェストから統合マニフェストに変換するには、3 つの基本的なタスクがあります。

  • アドインを変換する準備ができていることを確認します。
  • XML マニフェスト自体を統合マニフェストの JSON 形式に変換します。
  • サイドローディングまたはデプロイのために、新しいマニフェストと 2 つのアイコン イメージ ファイルを zip ファイルにパッケージ化します。

注:

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

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

注:

  • 統合マニフェストを使用するアドインは、Office バージョン 2304 (ビルド 16320.20000) 以降でのみサイドロードできます。
  • Visual Studio で作成されたプロジェクトは、Visual Studio Code とは異なりますが、現時点では変換できません。
  • Teams Toolkit または Office Yeoman Generator の "統合マニフェスト" オプションを使用してプロジェクトを作成した場合は、統合マニフェストが既に使用されています。

アドインを変換する準備ができていることを確認する

次のセクションでは、マニフェストを変換する前に満たす必要がある条件について説明します。

2 つのイメージ ファイルがあることを確認する

プロジェクトにファイルを追加したら、Description> 要素のすぐ下<にある XML マニフェストに IconUrl> と HighResolutionIconUrl を (その順序で) 追加<します。>< 次に例を示します。

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="MailApp">
  <Id>01234567-89ab-cdef-0123-4567-89abcdef0123</Id>
  <Version>1.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-us</DefaultLocale>
  <DisplayName DefaultValue="Great Add-in"/>
  <Description DefaultValue="A great add-in."/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:300/assets/icon-128.png" />

  <!-- Other markup omitted -->

関数コマンド名が十分に短いようにする

マニフェストに FunctionName> 要素がある<場合は、その値の文字数が 65 文字未満であることを確認します。 この要素の値は、JavaScript または TypeScript ファイル内の関数の名前と完全に一致している必要があります。 マニフェストで変更する場合は、コード ファイルでも変更してください。

変換ツールとオプション

残りのタスクは、プロジェクトに使用する IDE やその他のツール、およびプロジェクトの作成に使用したツールに応じて、いくつかの方法で実行できます。

Teams Toolkit を使用してプロジェクトを変換する

変換する最も簡単な方法は、Teams Toolkit を使用することです。

前提条件

Teams Toolkit にアドイン プロジェクトをインポートする

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

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

  2. 新しいアプリCreate選択します。

  3. [ 新しいプロジェクト ] ドロップダウンで、[ Outlook アドイン] を選択します。

    [新しいプロジェクト] ドロップダウンの 4 つのオプション。4 番目のオプションは

  4. [ Outlook アドインを使用したアプリ機能 ] ドロップダウンで、[既存の Outlook アドインのインポート] を選択します。

    [Outlook アドインを使用したアプリ機能] ドロップダウンの 2 つのオプション。2 つ目のオプションは、

  5. [ 既存のアドイン プロジェクト フォルダー ] ドロップダウンで、アドイン プロジェクトのルート フォルダーを参照します。

  6. [ プロジェクト マニフェスト ファイルのインポートの選択 ] ドロップダウンで、XML マニフェスト ファイルを参照します。

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

  8. [ アプリケーション名 ] ダイアログで、プロジェクトに名前を付けます (スペースなし)。 Teams Toolkit は、ソース ファイルとスキャフォールディングを使用してプロジェクトを作成します。 次に、 2 番目の Visual Studio Code ウィンドウでプロジェクトを開きます。 元の Visual Studio Code ウィンドウを閉じます。

Visual Studio Code でアドインをサイドロードする

Teams Toolkit を使用するか、コマンド プロンプト、bash シェル、またはターミナルでアドインをサイドロードできます。

Teams Toolkit を使用したサイドロード
  1. まず、 Outlook デスクトップが閉じていることを確認します。
  2. Visual Studio Code で、Teams Toolkit を開きます。
  3. [ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
  4. [Visual Studio Code で実行の表示]を選択します | 。 [実行とデバッグ] ドロップダウン メニューで、[Outlook Desktop (Edge Chromium)] オプションを選択し、F5 キーを押します。 プロジェクトがビルドされ、Node dev-server ウィンドウが開きます。 このプロセスには数分かかる場合があり、Outlook デスクトップが開きます。
  5. これで、アドインを操作できるようになりました。 Microsoft 365 アカウント ID の受信トレイで作業していることを確認します。
システム プロンプト、bash シェル、またはターミナルを使用したサイドロード
  1. まず、 Outlook デスクトップが閉じていることを確認します。
  2. システム プロンプト、bash シェル、または Visual Studio Code TERMINAL を開き、プロジェクトのルートに移動します。
  3. コマンドnpm run start:desktopを実行します。 プロジェクトがビルドされ、Node dev-server ウィンドウが開きます。 このプロセスには数分かかる場合があり、Outlook デスクトップが開きます。
  4. これで、アドインを操作できるようになりました。

Office Yeoman ジェネレーターを使用して作成されたプロジェクト ("Yo Office" とも呼ばれます)

プロジェクトが Office Yeoman Generator で作成され、Teams Toolkit を使用したくない場合は、次の手順を使用して変換します。

  1. プロジェクトのルートで、コマンド プロンプトまたは bash シェルを開き、次のコマンドを実行します。 これにより、マニフェストが変換され、package.jsonが更新され、現在のツール パッケージが指定されます。 新しい統合マニフェストはプロジェクトのルートにあり、古い XML マニフェストは backup.zip ファイルにあります。 このコマンドの詳細については、「 Office-Addin-Project」を参照してください。

    npx office-addin-project convert -m <relative-path-to-XML-manifest>

  2. npm install を実行します。

  3. アドインをサイドロードするには、 を実行します npm run start:desktop。 このコマンドは、統合マニフェストと 2 つのイメージ ファイルを zip ファイルに配置し、Office アプリケーションにサイドロードします。 また、別の NodeJS ウィンドウでサーバーを起動し、localhost でアドイン ファイルをホストします。

Yeoman Generator で作成されていない NodeJS プロジェクトと npm プロジェクト

Teams Toolkit を使用したくない場合に、プロジェクトが Office Yeoman ジェネレーターで作成されていない場合は、office-addin-manifest-converter ツールを使用します。

プロジェクトのルートで、コマンド プロンプトまたは bash シェルを開き、次のコマンドを実行します。 このコマンドは、元の XML マニフェストのファイル名の幹と同じ名前のサブフォルダーに統合マニフェストを配置します。 たとえば、マニフェストが MyManifest.xml という名前の場合、統合マニフェストは .\MyManifest\MyManifest.json に作成されます。 このコマンドの詳細については、「 Office-Addin-Manifest-Converter」を参照してください。

npx office-addin-manifest-converter convert -m <relative-path-to-XML-manifest>

統合マニフェストを作成したら、zip ファイルを作成してサイドロードする 2 つの方法があります。 これらは、次の 2 つのサブセクションで説明されています。

Office-Addin-Debugging ツールを使用したサイドロード

  1. アドインをサイドロードするには、次のコマンドを実行します。 このコマンドは、統合マニフェストと 2 つの既定のアイコン イメージ ファイルを zip ファイルに配置し、Office アプリケーションにサイドロードします。 また、別の NodeJS ウィンドウでサーバーを起動し、localhost でアドイン ファイルをホストします。 前の手順で作成 した統合マニフェスト へのパスを渡すことに注意してください。 このコマンドの詳細については、「 Office-Addin-Debugging」を参照してください。

    npx office-addin-debugging start <relative-path-to-unified-manifest> desktop

  2. office-addin-debugging を使用してアドインを開始する場合は、 常に次のコマンドを使用してセッションを停止します。 サーバー ウィンドウを閉じてもサーバーが確実に停止せず、Office アプリケーションを閉じても、Office がアドインの取得を解除する可能性は確実にありません。

    npx office-addin-debugging stop <relative-path-to-unified-manifest>

Teams Toolkit CLI を使用したサイドロード (コマンド ライン インターフェイス)

  1. 次の手順を使用して、zip パッケージを手動で作成します。

    1. 統合マニフェストを開き、"icons" プロパティまでスクロールします。 2 つのイメージ ファイルの相対パスに注意してください。
    2. 任意の zip ユーティリティを使用して、統合マニフェストと 2 つのイメージ ファイルを含む zip ファイルを作成します。 イメージ ファイルは、プロジェクトと同じ相対パスを zip ファイルに含む必要があります。 たとえば、相対パスが "assets/icon-64.png" と "assets/icon-128.png" の場合は、zip パッケージに 2 つのファイルを含む "assets" フォルダーを含める必要があります。
    3. Office リボンで使用されているイメージ ファイルなど、フォルダーに他のファイルが含まれている場合は、zip パッケージから削除します。 "icons" プロパティで指定されている 2 つのイメージ ファイルのみが含まれている必要があります (zip パッケージのルートにあるマニフェストに加えて)。

  2. プロジェクトのルートで、コマンド プロンプトまたは bash シェルを開き、次のコマンドを実行します。

    npm install -g @microsoft/teamsfx-cli

teamsfx m365 sideloading --file-path <relative-path-to-zip-file>