Teams アプリに Outlook アドインを追加する

[アーティクル]
05/02/2024

概要

Outlook アドインは、Outlook の機能を拡張する Web アプリです。 Outlook アドインを使用すると、次のことができます。

メールメッセージを読み書きし、会議出席依頼、返信、キャンセル、予定に参加します。
ユーザーのメールボックスのプロパティを読み取る。
メールの送信など、イベントに自動的に応答します。
CRM やプロジェクト管理ツールを含む外部サービスと統合します。
カスタムリボンボタンまたはメニュー項目を追加して、特定のタスクを実行します。

Outlook アドインと Teams アプリケーションを統合すると、どちらも個別に実現できないシナリオが可能になります。営業担当者が顧客に電子メールでカスタマイズされた割引を挿入し、バックエンドデータベースにオファーを記録できるシナリオを考えてみましょう。セールスマネージャーは、[Teams] タブで提供されているすべての割引に関するデータを表示することもできます。詳細については、「割引プランのサンプル」を参照してください。

Outlook アドインの概要には、Outlook アドインの機能、それらの構成方法、Outlook を拡張する以前の方法での改善方法、アドインを実行できるプラットフォーム (Windows、Mac、モバイル、Web)、および作成を開始する方法について説明します。

この記事では、Outlook アドインを Teams アプリに追加し、テストしてから Azure にデプロイする手順について説明します。

前提条件

開始する前に、次の要件を満たしていることを確認してください。

アプリケーションをテストするための Teams を含む Microsoft 365 アカウント。または、Microsoft 365 と Teams の両方に個別のサブスクリプションを作成することもできます。たとえば、 Microsoft 365 開発者プログラムを通じて *.onmicrosoft.com を持つテストアカウントなどです。
Microsoft 365 アカウントは、デスクトップ Outlook のアカウントとして追加されます。詳細については、「 Outlook にメールアカウントを追加する」を参照してください。
Teams アプリを Azure にデプロイするためのアクティブなサブスクリプションを持つ Azure アカウント。お持ちでない場合は、無料の Azure アカウントを作成できます。
最新バージョンの Teams Toolkit を使用して作成された Teams アプリ。

Teams アプリに Outlook アドインを追加する

Teams アプリに Outlook アドインを追加するには:

Teams アプリプロジェクトを準備します。
最初は Teams アプリプロジェクトとは別の Office アドインプロジェクトを作成します。
Outlook アドインプロジェクトから Microsoft 365 の統合マニフェストにマニフェストをマージします。
Outlook アドインファイルを Teams アプリプロジェクトにコピーします。
ツール構成ファイルを編集します。
アプリとアドインを同時にローカルで実行する
アプリケーションを Azure に移動します。

Teams アプリプロジェクトを準備する

まず、タブ (またはボット) のソースコードを独自のサブフォルダーに分離します。これらの手順では、プロジェクトが最初に次の構造を持っていることを前提としています。この構造の Teams アプリプロジェクトを作成するには、最新の Teams Toolkit バージョンを使用します。

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- node_modules/
|-- src/
|-- .gitignore
|-- .localConfigs
|-- .webappignore
|-- package-lock.json
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml
|-- tsconfig.json
|-- web.config

注:

新しい Teams タブプロジェクトを使用している場合、node_modules フォルダーとpackage-lock.json ファイルは存在しません。 node_modulesは、プロジェクトのルートで実行 npm install するときに、後の手順で作成されます。ビルドフォルダーは、プロジェクトでビルドスクリプトを実行するまで存在しません。

タブまたはボットのソースコードを分離するには、次の手順を実行します。

ルートの名前付きタブ (または ボット) の下にフォルダーを作成します。

注:

わかりやすくするために、この記事の残りの部分では、既存の Teams アプリがタブであることを前提としています。ボットを使い始めた場合は、さまざまなファイルに追加または編集するコンテンツを含め、これらすべての手順で "tab" を "bot" に置き換えます。
infra フォルダーを新しいサブフォルダーにコピーし、新しいタブ>infra フォルダーからファイルを削除azure.parameters.jsonします。
node_modulesフォルダーと src フォルダーを新しいサブフォルダーに移動します。

、package-lock.json、、tsconfig.jsonpackage.jsonおよびファイルを.webappignoreweb.config新しいサブフォルダーに移動します。

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- teamsapp.local.yml
|-- teamsapp.yml

package.jsonタブフォルダーに移動したばかりので、オブジェクトからという名前dev:teamsfxのスクリプトをscripts削除します。このスクリプトは、次の手順で新しい package.json スクリプトに追加されます。

プロジェクトのルートにという名前 package.json の新しいファイルを作成し、次の内容を追加します。

{
    "name": "CombinedTabAndAddin",
    "version": "0.0.1",
    "author": "Contoso",
    "scripts": {
        "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start:tab",
        "build:tab": "cd tab && npm run build",
        "install:tab": "cd tab && npm install",
        "start:tab": "cd tab && npm run start",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@microsoft/teamsfx-cli": "2.0.2-alpha.4f379e6ab.0",
        "@microsoft/teamsfx-run-utils": "alpha",
        "env-cmd": "^10.1.0",
        "office-addin-dev-settings": "^2.0.3",
        "ncp": "^2.0.0"
    }
}

必要にnameversion応じて、、、および author プロパティを変更します。
プロジェクトの teamsapp.yml ルートでファイルを開き、行 ignoreFile: .webappignoreを見つけてに ignoreFile: ./tab/.webappignore変更します。
プロジェクトの teamsapp.local.yml ルートでファイルを開き、行 args: install --no-auditを見つけて、これをに args: run install:tab --no-audit変更します。
Visual Studio Code で TERMINAL を 開きます。プロジェクトのルートに移動し、を実行します npm install。新しい node_modules フォルダーと新 package.lock.json しいファイルがプロジェクトルートに作成されます。
次にを実行 npm run install:tabします。新しい node_modules フォルダーと新 package.lock.json しいファイルがまだ存在しない場合は、タブフォルダーに作成されます。
次の手順でタブをサイドロードできることを確認します。
1. Teams Toolkit を開きます。
2. [ ACCOUNTS ] セクションで、Microsoft 365 アカウントにサインインしていることを確認します。
3. [Visual Studio Code で実行の表示]を選択します>。
4. [ 実行とデバッグ ] ドロップダウンメニューで、[ Teams (Edge)] で [デバッグ ] を選択し、F5 キーを押します。
  
  プロジェクトがビルドされ、実行されます。このプロセスには数分かかることがあります。完了すると、Teams はブラウザーで開き、タブアプリを追加するように求められます。
  
  注:
  
  このコンピューターで Teams アプリを初めてデバッグする場合は、SSL 証明書をインストールするように求められます。 [ インストール ] を選択し、2 番目のプロンプトに 対して [はい ] を選択します。メッセージが表示されたら、Microsoft 365 アカウントにログインします。
5. [追加] を選択します。
6. デバッグを停止してアプリをアンインストールするには、Visual Studio Code で [デバッグの停止の実行>] を選択します。

Outlook アドインプロジェクトを作成する

Visual Studio Code の 2 番目のインスタンスを開きます。
アクティビティバーから [Teams Toolkit] を選択します。
[ 新しいアプリの作成] を選択します。
[ オプションの選択 ] ドロップダウンメニューで、[ Outlook アドイン>タスクウィンドウ] を選択します。
アドインを作成するフォルダーを選択します。
プロンプトが表示されたら、プロジェクトに名前 (スペースなし) を指定します。

Teams Toolkit は、基本的なファイルとスキャフォールディングを使用してプロジェクトを作成し、新しい Visual Studio Code ウィンドウで開きます。このプロジェクトは、Teams プロジェクトに追加するファイルとマークアップのソースとして使用します。
このプロジェクトは開発しませんが、続行する前に、次の手順を実行して、Visual Studio Code からサイドロードできることを確認します。
1. Outlook デスクトップが閉じられていることを確認します。
2. Visual Studio Code を開きます。
3. アクティビティバーから [Teams Toolkit] を選択します。
4. [ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
5. [Visual Studio Code で実行の表示]を選択します>。
6. [ 実行とデバッグ ] ドロップダウンメニューで、[ Outlook Desktop (Edge Chromium)] を選択し、F5 キーを押します。
  
  プロジェクトがビルドされ、Webpack 開発サーバーウィンドウが開きます。このプロセスには数分かかる場合があり、Outlook デスクトップウィンドウが開きます。
7. Outlook に移動します。
8. Microsoft 365 アカウント ID の 受信トレイ を開きます。
9. メッセージを開きます。
  
  2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
10. [ タスクウィンドウの表示 ] ボタンを選択します。作業ウィンドウが開きます。
11. [アクションの実行] ボタンを選択します。メッセージの上部近くに小さな通知が表示されます。
12. デバッグを停止し、アドインをアンインストールするには、Visual Studio Code で [デバッグの停止の実行>] を選択します。 Webpack 開発サーバーウィンドウが閉じられない場合は、プロジェクトのルートで Visual Studio Code TERMINAL を 開き、を実行 npm stopします。

マニフェストをマージする

Teams アプリのマニフェストは、Teams プロジェクトの \appPackage フォルダー内のファイルからmanifest.jsonデバッグとサイドロード時 (またはビルド時) に生成されます。このファイルはマニフェストの テンプレート です。この記事では、 テンプレート または マニフェストテンプレートと呼ばれます。ほとんどのマークアップはテンプレートにハードコーディングされますが、最終的に生成されたマニフェストに追加されるデータを含む構成ファイルもあります。この手順では、次のタスクを実行します。

アドインのマニフェストから Teams アプリのマニフェストテンプレートにマークアップをコピーします。
構成ファイルを編集します。

特に指定しない限り、変更するファイルはです \appPackage\manifest.json。

アドインのマニフェストから、"$schema" プロパティと "manifestVersion" プロパティ値を Teams アプリのマニフェストテンプレートファイルの対応するプロパティにコピーします。
必要に応じて、"name.full"、"description.short"、および "description.full" プロパティの値を変更して、Outlook アドインがアプリの一部であるという事実を反映します。
"name.short" 値にも同じ操作を行います。

は、名前の末尾に保持 ${{TEAMSFX_ENV}} することをお勧めします。この変数は、localhost でデバッグする場合は "local" という文字列に置き換えられ、リモートドメインまたは運用モードからデバッグする場合は "dev" に置き換えられます。

注:

これまで、Office アドインの開発者向けドキュメントでは、"dev" または "dev mode" という用語を使用して、localhost でのアドインの実行を参照しています。 "prod" または "運用モード" という用語を使用して、ステージングまたは運用のためにリモートホストでアドインを実行することを参照します。 Teams 開発者向けドキュメントでは、"local" という用語を使用して localhost でのアドインの実行を参照し、"dev" という用語はリモートデバッグ用のリモートホストでのアドインの実行を指します。これは通常は "ステージング" と呼ばれます。用語の整合性を確保することに取り組んでいます。

次の JSON は例です。
```
"short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
```
注:

"name.short" の値は、Teams タブ機能と Outlook アドインの両方に表示されます。いくつかの例を示します。
- これは、[Teams] タブの起動ボタンの下にあるラベルです。
- これは、アドインの作業ウィンドウのタイトルバーの内容です。
"name.short" の値を既定値 (プロジェクトの名前と変数) から変更した場合、プロジェクト ${{TEAMSFX_ENV}} のルートにある次の 2 つのファイルにプロジェクト名が表示されるすべての場所でまったく同じ変更を行います:teamsapp.ymlとteamsapp.local.yml。
Teams マニフェストテンプレートに "authorization.permissions.resourceSpecific" 配列がない場合は、アドインマニフェストから最上位のプロパティとしてコピーします。 Teams テンプレートにオブジェクトが既にある場合は、アドインマニフェストの配列から Teams テンプレートの配列にオブジェクトをコピーします。次の JSON は例です。
```
"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},
```
ファイルでenv/.env.local、変数と TAB_ENDPOINT 変数に値を割り当てる行をTAB_DOMAIN見つけます。そのすぐ下に次の行を追加します。
```
ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000
```
ファイルで env/.env.dev 、..の下に次の行を TAB_ENDPOINT= 追加します。線：
```
ADDIN_ENDPOINT=
```
Teams マニフェストテンプレートで、プレースホルダー "${{ADDIN_DOMAIN}}", を配列の上部に "validDomains" 追加します。ローカルで開発する場合、Teams Toolkit はこれを localhost ドメインに置き換えます。「アプリケーションを Azure に移動する」の説明に従って、完成した複合アプリをステージングまたは運用環境にデプロイすると、Teams Toolkit によってプレースホルダーがステージング/運用 URI に置き換えられます。次の JSON は例です。
```
"validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],
```
アドインのマニフェストの "拡張機能" プロパティ全体を、最上位のプロパティとして Teams アプリマニフェストテンプレートにコピーします。

Outlook アドインファイルを Teams アプリプロジェクトにコピーする

Teams アプリプロジェクト でアドイン と呼ばれる最上位のフォルダーを作成します。
次のファイルとフォルダーをアドインプロジェクトから Teams アプリプロジェクトの アドイン フォルダーにコピーします。
- /appPackage
- /赤外線
- /src
- .eslintrc.json
- babel.config.json
- package-lock.json
- package.json
- tsconfig.json
- webpack.config.js

コピーが完了したら、/add-in/appPackage フォルダー内のファイルを削除manifest.jsonします。

フォルダー構造は、次の例のようになります。

|-- .vscode/
|-- add-in/
|-- |-- appPackage/assets/
|-- |-- infra/
|-- |-- src/
|-- |-- .eslintrc.json
|-- |-- babel.config.json
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- webpack.config.js
|-- appPackage/
|-- build\appPackage/
|-- env/
|-- infra/
|-- node_modules/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml

ツール構成ファイルを編集する

プロジェクトの package.json ルートでファイルを開きます。

"scripts" オブジェクトに次のスクリプトを追加します。

"install:add-in": "cd add-in && npm install",
"postinstall": "npm run install:add-in && npm run install:tab",
"build:add-in": "cd add-in && npm run build",
"build:add-in:dev": "cd add-in && npm run build:dev",
"build": "npm run build:tab && npm run build:add-in",

package.jsonアドイン フォルダー内のファイルを開きます (タブフォルダーやプロジェクトのルートではありません)。
オブジェクト内の 3 つのスクリプト scripts には、 manifest.json 次の例のようにパラメーターがあります。
```
"start": "office-addin-debugging start appPackage/manifest.json",
"stop": "office-addin-debugging stop appPackage/manifest.json",
"validate": "office-addin-manifest validate appPackage/manifest.json",
```
スクリプトで、 start をに変更 appPackage/manifest.json します ../appPackage/build/appPackage.local.zip。完了したら、行は次のようになります。
```
"start": "office-addin-debugging start ../appPackage/build/appPackage.local.zip",
```
validateスクリプトと stop スクリプトで、パラメーターをに../appPackage/build/manifest.local.json変更します。完了したら、更新プログラムは次のようになります。
```
"stop": "office-addin-debugging stop ../appPackage/build/manifest.local.json",
"validate": "office-addin-manifest validate ../appPackage/build/manifest.local.json",
```
Visual Studio Code で、 TERMINAL を開きます。
アドイン フォルダーに移動し、コマンドを実行しますnpm install。
アドインフォルダーで、ファイルを webpack.config.js 開きます。
行をにfrom: "../appPackage/build/manifest*.json",変更しますfrom: "appPackage/manifest*.json",。
プロジェクトのルートでファイルを teamsapp.local.yml 開き、セクションを provision 見つけます。マニフェストテンプレートを # 検証する行をコメントアウトするには、文字を使用します。これは、Teams マニフェスト検証システムがマニフェストテンプレートに加えた変更とまだ互換性がないために必要です。完了すると、行は次のコードのようになります。
```
# - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json 
```
セクションのみを teamsApp/validateManifest コメントアウトしてください。セクションをコメントアウト teamsManifest/validateAppPackage しないでください。
ファイルに対して前の手順を繰り返します teamsapp.yml 。 3 つの行は、セクションとセクションの両方 provision にあります publish 。両方の場所でコメントアウトします。
.vscode\tasks.jsonアドイン プロジェクトでファイルを開き、配列内のすべてのタスクをtasksコピーします。それらを tasks Teams プロジェクト内の同じファイルの配列に追加します。既に存在するタスクは削除しないでください。すべてのタスクがコンマで区切っていることを確認します。

コピーしたタスクオブジェクトごとに、次 options のプロパティを追加して、これらのタスクが アドイン フォルダーで実行されるようにします。

"options": {
    "cwd": "${workspaceFolder}/add-in/"
}

たとえば、完了したら、 Debug: Outlook Desktop タスクは次の JSON のように表示される必要があります。

{
    "label": "Debug: Outlook Desktop",
    "type": "npm",
    "script": "start",
    "dependsOn": [
      "Check OS",
      "Install"
    ],
    "presentation": {
      "clear": true,
      "panel": "dedicated",
    },
    problemMatcher": [],
    "options": {
        "cwd": "${workspaceFolder}/add-in/"
    }
}

プロジェクトのファイル内の tasks 配列に次のタスクを .vscode\tasks.json 追加します。特に、このタスクは最終的なマニフェストを作成します。

{
    // Create the debug resources.
    // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
    "label": "Create resources",
    "type": "teamsfx",
    "command": "provision",
    "args": {
        "template": "${workspaceFolder}/teamsapp.local.yml",
        "env": "local"
    }
},

tasks 配列に次のタスクを追加します。タブアプリの Start Add-in Locally タスクとアドインの Create resources デバッグタスクを組み合わせ、その順序で実行する必要があることを指定するタスクが追加されることに注意してください。
```
{
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},
```
tasks 配列に次のタスクを追加します。タスクStart Add-in LocallyをとStart Teams App Locally組み合わせ、その順序で実行する必要があることを指定します。
```
 {
     "label": "Start App and Add-in Locally",
     "dependsOn": [
         "Start Teams App Locally",
         "Start Add-in Locally"
     ],
     "dependsOrder": "sequence"
 },
```

プロジェクトでファイルを .vscode\launch.json 開き、Visual Studio Code で RUN AND DEBUG UI を構成し、次の 2 つのオブジェクトを "構成" 配列の先頭に追加します。

{
    "name": "Launch Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start Add-in Locally",
    "postDebugTask": "Stop Debug"
},
{
    "name": "Launch App and Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start App and Add-in Locally",
    "postDebugTask": "Stop Debug"
},

compounds同じファイルのセクションで、複合の名前を Debug in Teams (Edge) にLaunch App Debug (Edge)変更し、複合の名前をにLaunch App Debug (Chrome)変更しますDebug in Teams (Chrome)。
次の手順で、Teams アプリのアドイン機能を Outlook にサイドロードできることを確認します。
1. Outlook デスクトップが閉じられていることを確認します。
2. Visual Studio Code を開きます。
3. アクティビティバーから [Teams Toolkit] を選択します。
4. [ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
5. [Visual Studio Code で実行の表示]を選択します>。
6. [ 実行とデバッグ ] ドロップダウンメニューで、[ アドインの起動] Outlook Desktop (Edge Chromium) を選択し、F5 キーを押します。プロジェクトがビルドされ、Webpack 開発サーバーウィンドウが開きます。このプロセスには数分かかる場合があり、Outlook デスクトップウィンドウが開きます。
7. Outlook に移動します。
8. Microsoft 365 アカウント ID の 受信トレイ を開きます。
9. メッセージを開きます。
  
  2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
10. [ タスクウィンドウの表示 ] ボタンを選択します。作業ウィンドウが開きます。
11. [アクションの実行] ボタンを選択します。メッセージの上部近くに小さな通知が表示されます。
12. デバッグを停止し、アドインをアンインストールするには、Visual Studio Code で [デバッグの停止の実行>] を選択します。 Webpack 開発サーバーウィンドウが閉じられない場合は、プロジェクトのルートで Visual Studio Code TERMINAL を 開き、を実行 npm stopします。

アプリとアドインを同時にローカルで実行する

アプリとアドインを同時にサイドロードして実行できますが、両方の実行時にデバッガーを確実にアタッチすることはできません。そのため、デバッグするには、一度に 1 つだけを実行します。

アプリをデバッグするには、「 Teams アプリプロジェクトの準備」セクションの最後の手順を参照してください。

アドインをデバッグするには、「ツール構成ファイルの編集」セクションの最後の手順を参照してください。

アプリとアドインの両方が同時に実行されているのを確認するには、次の手順を実行します。

Outlook デスクトップが閉じられていることを確認します。
Visual Studio Code を開きます。
アクティビティバーから [Teams Toolkit] を選択します。
[ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
[Visual Studio Code で実行の表示]を選択します>。
[ 実行とデバッグ ] ドロップダウンメニューで、[ アプリの起動とアドインの Outlook Desktop (Edge Chromium)] を選択し、F5 キーを押します。プロジェクトがビルドされ、Webpack 開発サーバーウィンドウが開きます。タブアプリは、Visual Studio Code ターミナルでホストされます。このプロセスには数分かかる場合があり、次のアクションが発生します。
- Teams がブラウザーで開き、タブアプリを追加するように求められます。 Outlook デスクトップが開くまでに Teams が開かれない場合、自動サイドローディングは失敗しています。手動でサイドロードして、アプリとアドインの両方が同時に実行されているのを確認できます。サイドローディング手順については、「 Teams でアプリをアップロードする」を参照してください。アップロードする manifest.zip ファイルはにあります C:\Users\{yourname}\AppData\Local\Temp。
- Outlook デスクトップが開きます。
Teams プロンプトで [ 追加 ] を選択し、タブが開きます。
Outlook に移動します。
Outlook で、Microsoft 365 アカウント ID の 受信トレイ を開きます。
メッセージを開きます。

2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
[ タスクウィンドウの表示 ] ボタンを選択します。作業ウィンドウが開きます。
[アクションの実行] ボタンを選択します。メッセージの上部近くに小さな通知が表示されます。
デバッグを停止し、アドインをアンインストールするには、Visual Studio Code で [デバッグの停止の実行>] を選択します。 Webpack 開発サーバーウィンドウが閉じられない場合は、プロジェクトのルートで Visual Studio Code TERMINAL を 開き、を実行 npm stopします。
Teams タブアプリを手動でサイドロードする必要がある場合は、「アプリの削除」の指示に従って Teams から削除します。

アプリケーションを Azure に移動する

プロジェクトの teamsapp.yml ルートでファイルを開き、行 deploymentName: Create-resources-for-tabを見つけます。これを deploymentName: Create-resources-for-tab-and-addin に変更します。
同じファイルで、セクションの末尾に次のコードを provision: 追加します。

注:

インデントは YAML では意味があるため- uses- name、ステートメントには 2 つのスペースをインデントし、ステートメントをにuses揃え、withのwith子をさらに 2 つのスペースにインデントする必要があります。
```
provision:

  -- other YAML omitted --

  - uses: azureStorage/enableStaticWebsite
    with:
      storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
      indexPage: index.html
      errorPage: error.html
```

同じファイルで、セクション全体 deploy: を次のコードに置き換えます。これらの変更は、新しいフォルダー構造と、アドインファイルとタブファイルの両方を展開する必要があるという事実を考慮します。

deploy:
  - name: InstallAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: install

  - name: BuildAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: run build --if-present

  - name: DeployTab
    uses: azureAppService/zipDeploy
    with:
      artifactFolder: tab
      ignoreFile: ./tab/.webappignore
      # The ID of the cloud resource where the tab app will be deployed.
      # This key will be generated by arm/deploy action automatically.
      resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}} 

  - name: DeployAddin
    uses: azureStorage/deploy
    with:
      workingDirectory: .
      # Deploy base folder
      artifactFolder: add-in/dist
      # The ID of the cloud resource where the add-in will be deployed.
      resourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}

プロジェクトの infra/azure.parameters.json ルートでファイルを開き、その内容を次の JSON に置き換えます。

{
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
      "resourceBaseName": {
        "value": "tabandaddin${{RESOURCE_SUFFIX}}"
      },
      "webAppSku": {
        "value": "F1"
      },
      "storageSku": {
        "value": "Standard_LRS"
      }
    }
}

プロジェクトの infra/azure.bicep ルート (タブサブフォルダーまたはアドインサブフォルダー内のファイルではなく) でファイルを開き、その内容を次のコードに置き換えます。

// Params for Teams tab resources
@maxLength(20)
@minLength(4)
@description('Used to generate names for all resources in this file')
param resourceBaseName string
param webAppSku string
param serverfarmsName string = resourceBaseName
param webAppName string = resourceBaseName
param location string = resourceGroup().location
param storageSku string
param storageName string = resourceBaseName

module tabModule '../tab/infra/azure.bicep' = {
  name: 'tabModule'
  params: {
    resourceBaseName: resourceBaseName
    webAppSku: webAppSku
    serverfarmsName: serverfarmsName
    webAppName: webAppName
    location: location
  }
}

module addinModule '../add-in/infra/azure.bicep' = {
  name: 'addinModule'
  params: {
    resourceBaseName: resourceBaseName
    storageSku: storageSku
    storageName: storageName
    location: location
  }
}

// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
output TAB_AZURE_APP_SERVICE_RESOURCE_ID string = tabModule.outputs.TAB_AZURE_APP_SERVICE_RESOURCE_ID // used in deploy stage
output TAB_DOMAIN string = tabModule.outputs.TAB_DOMAIN
output TAB_ENDPOINT string = tabModule.outputs.TAB_ENDPOINT

output ADDIN_AZURE_STORAGE_RESOURCE_ID string = addinModule.outputs.ADDIN_AZURE_STORAGE_RESOURCE_ID // used in deploy stage
output ADDIN_DOMAIN string = addinModule.outputs.ADDIN_DOMAIN
output ADDIN_ENDPOINT string = addinModule.outputs.ADDIN_ENDPOINT

Visual Studio Code で、Teams Toolkit を開きます。
[ ACCOUNTS ] セクションで、(Microsoft 365 アカウントにサインインするだけでなく) Azure アカウントにサインインしていることを確認します。サインインの詳細については、「演習 - Teams タブアプリをホストする Azure リソースを作成する」を開き、[ Teams Toolkit で Azure にサインインする ] セクションまでスクロールします。
Teams Toolkit の [ライフサイクル ] セクションで、[ プロビジョニング] を選択します。数分かかる場合があります。 Azure リソースグループの 1 つを選択するように求められる場合があります。
プロビジョニングが完了したら、[ デプロイ ] を選択してアプリコードを Azure にデプロイします。

リモート展開からタブ機能を実行する

Visual Studio Code で、[実行の表示] を選択します>。
ドロップダウンメニューで、[ Teams でリモートを起動する (Edge)] または [ Teams でリモートを起動する (Chrome)] を選択します。
F5 キーを押して Teams タブ機能をプレビューします。

リモート展開からアドイン機能を実行する

イン env/.env.dev ファイルからADDIN_ENDPOINT運用 URL をコピーします。
ファイルを編集 \add-in\webpack.config.js し、定数値をコピーした値に変更 urlProd します。 URL の末尾に '/' を必ず追加してください。
Visual Studio Code TERMINAL で、プロジェクトのルートに移動し、を実行 npm run build:add-inします。
ファイル \add-in\dist\manifest.dev.json をフォルダーに \appPackage コピーします。
フォルダー内のコピーの名前を \appPackage に manifest.addinPreview.json変更します。
ターミナルでを実行npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.jsonします。このプロセスには数分かかる場合があり、Outlook デスクトップが開きます。 (インストール office-addin-dev-settingsするように求められた場合は、 はいに応答します)。
Outlook に移動します。
Microsoft 365 アカウント ID の 受信トレイ を開きます。
メッセージを開きます。

2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
[ タスクウィンドウの表示 ] ボタンを選択します。作業ウィンドウが開きます。
[アクションの実行] ボタンを選択します。メッセージの上部近くに小さな通知が表示されます。

次の内容

一般的に推奨されるその他の次の手順があります。たとえば、次に示します。

認証を追加し、Graph API 呼び出しを行います。タブ機能については、「 Teams アプリにシングルサインオンを追加する」を参照してください。アドイン機能については、「Office アドインでシングルサインオン (SSO) を有効にする」を参照してください。
CI/CD パイプラインを設定します。
バックエンド API を呼び出します。

次の方法で共有

Teams アプリに Outlook アドインを追加する

概要

前提条件

Teams アプリに Outlook アドインを追加する

Teams アプリプロジェクトを準備する

Outlook アドインプロジェクトを作成する

マニフェストをマージする

Outlook アドインファイルを Teams アプリプロジェクトにコピーする

ツール構成ファイルを編集する

アプリとアドインを同時にローカルで実行する

アプリケーションを Azure に移動する

リモート展開からタブ機能を実行する

リモート展開からアドイン機能を実行する

次の内容

関連項目

フィードバック

その他のリソース

次の方法で共有

Teams アプリに Outlook アドインを追加する

概要

前提条件

Teams アプリに Outlook アドインを追加する

Teams アプリ プロジェクトを準備する

Outlook アドイン プロジェクトを作成する

マニフェストをマージする

Outlook アドイン ファイルを Teams アプリ プロジェクトにコピーする

ツール構成ファイルを編集する

アプリとアドインを同時にローカルで実行する

アプリケーションを Azure に移動する

リモート展開からタブ機能を実行する

リモート展開からアドイン機能を実行する

次の内容

関連項目

フィードバック

その他のリソース

Teams アプリプロジェクトを準備する

Outlook アドインプロジェクトを作成する

Outlook アドインファイルを Teams アプリプロジェクトにコピーする