Teams アプリに Outlook アドインを追加する
概要
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 フォルダーを新しいサブフォルダーに移動します。
.webappignore、package-lock.json、package.json、tsconfig.json、web.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で、scriptsオブジェクトからdev:teamsfxという名前のスクリプトを削除します。 このスクリプトは、次の手順で新しい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" } }必要に応じて、
name、version、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ファイルがタブ フォルダーに作成されます (まだ存在しない場合)。次の手順でタブをサイドロードできることを確認します。
Teams Toolkit を開きます。
[ ACCOUNTS ] セクションで、Microsoft 365 アカウントにサインインしていることを確認します。
Visual Studio Code で [表示>Run] を 選択します。
[ 実行とデバッグ ] ドロップダウン メニューで、[ Teams (Edge)] で [デバッグ ] を選択し、F5 キーを押します。
プロジェクトがビルドされ、実行されます。 このプロセスには数分かかることがあります。 完了すると、Teams はブラウザーで開き、タブ アプリを追加するように求められます。
注:
このコンピューターで Teams アプリを初めてデバッグする場合は、SSL 証明書をインストールするように求められます。 [ インストール ] を選択し、2 番目のプロンプトに 対して [はい ] を選択します。 メッセージが表示されたら、Microsoft 365 アカウントにログインします。
[追加] を選択します。
デバッグを停止してアプリをアンインストールするには、[Visual Studio Code で 実行>Stop デバッグ ] を選択します。
Outlook アドイン プロジェクトを作成する
Visual Studio Code の 2 番目のインスタンスを開きます。
アクティビティ バーから [Teams Toolkit] を選択します。
[ 新しいアプリの作成] を選択します。
[ オプションの選択 ] ドロップダウン メニューで、[ Outlook アドイン>Taskpane] を選択します。
アドインを作成するフォルダーを選択します。
プロンプトが表示されたら、プロジェクトに名前 (スペースなし) を指定します。
Teams Toolkit は、基本的なファイルとスキャフォールディングを使用してプロジェクトを作成し、新しい Visual Studio Code ウィンドウで開きます。 このプロジェクトは、Teams プロジェクトに追加するファイルとマークアップのソースとして使用します。
このプロジェクトは開発しませんが、続行する前に、次の手順を実行して、Visual Studio Code からサイドロードできることを確認します。
Outlook デスクトップが閉じられていることを確認します。
Visual Studio Code を開きます。
アクティビティ バーから [Teams Toolkit] を選択します。
[ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
Visual Studio Code で [表示>Run] を 選択します。
[ 実行とデバッグ ] ドロップダウン メニューで、[ Outlook Desktop (Edge Chromium)] を選択し、F5 キーを押します。
プロジェクトがビルドされ、Webpack 開発サーバー ウィンドウが開きます。 このプロセスには数分かかる場合があり、Outlook デスクトップ ウィンドウが開きます。
Outlook に移動します。
Microsoft 365 アカウント ID の 受信トレイ を開きます。
メッセージを開きます。
2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
[ タスクウィンドウの表示 ] ボタンを選択します。 作業ウィンドウが開きます。
[アクションの実行] ボタンを選択します。 メッセージの上部近くに小さな通知が表示されます。
デバッグを停止し、アドインをアンインストールするには、[Visual Studio Code で 実行>Stop デバッグ ] を選択します。 Webpack dev-server ウィンドウが閉じられない場合は、プロジェクトのルートで 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_DOMAIN変数とTAB_ENDPOINT変数に値を割り当てる行を見つけます。 そのすぐ下に次の行を追加します。ADDIN_DOMAIN=localhost:3000 ADDIN_ENDPOINT=https://localhost:3000env/.env.devファイルで、次の行をTAB_ENDPOINT=... の下に追加します。線：ADDIN_ENDPOINT=Teams マニフェスト テンプレートで、
"validDomains"配列の上部にプレースホルダー"${{ADDIN_DOMAIN}}",を追加します。 ローカルで開発する場合、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ファイルを開きます (タブ フォルダーやプロジェクトのルートではありません)。scriptsオブジェクト内の 3 つのスクリプトには、次の例のように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/manifest*.json",をfrom: "../appPackage/build/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配列内のすべてのタスクをコピーします。 Teams プロジェクト内tasks同じファイルの配列に追加します。 既に存在するタスクは削除しないでください。 すべてのタスクがコンマで区切っていることを確認します。コピーした各タスク オブジェクトに、次の
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/" } }プロジェクトの
.vscode\tasks.jsonファイルの tasks 配列に次のタスクを追加します。 特に、このタスクは最終的なマニフェストを作成します。{ // 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 配列に次のタスクを追加します。 タブ アプリの
Create resourcesタスクとアドインのデバッグ タスクを組み合わせ、その順序で実行する必要があることを指定するStart Add-in Locallyタスクが追加されることに注意してください。{ "label": "Start Add-in Locally", "dependsOn": [ "Create resources", "Debug: Outlook Desktop" ], "dependsOrder": "sequence" },tasks 配列に次のタスクを追加します。
Start Teams App LocallyタスクとStart Add-in 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)に変更し、Debug in Teams (Chrome)の名前をLaunch App Debug (Chrome)に変更します。次の手順で、Teams アプリのアドイン機能を Outlook にサイドロードできることを確認します。
Outlook デスクトップが閉じられていることを確認します。
Visual Studio Code を開きます。
アクティビティ バーから [Teams Toolkit] を選択します。
[ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
Visual Studio Code で [表示>Run] を 選択します。
[ 実行とデバッグ ] ドロップダウン メニューで、[ アドインの起動] Outlook Desktop (Edge Chromium) を選択し、F5 キーを押します。 プロジェクトがビルドされ、Webpack 開発サーバー ウィンドウが開きます。 このプロセスには数分かかる場合があり、Outlook デスクトップ ウィンドウが開きます。
Outlook に移動します。
Microsoft 365 アカウント ID の 受信トレイ を開きます。
メッセージを開きます。
2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
[ タスクウィンドウの表示 ] ボタンを選択します。 作業ウィンドウが開きます。
[アクションの実行] ボタンを選択します。 メッセージの上部近くに小さな通知が表示されます。
デバッグを停止し、アドインをアンインストールするには、[Visual Studio Code で 実行>Stop デバッグ ] を選択します。 Webpack dev-server ウィンドウが閉じられない場合は、プロジェクトのルートで Visual Studio Code TERMINAL を 開き、
npm stopを実行します。
アプリとアドインを同時にローカルで実行する
アプリとアドインを同時にサイドロードして実行できますが、両方の実行時にデバッガーを確実にアタッチすることはできません。 そのため、デバッグするには、一度に 1 つだけを実行します。
アプリをデバッグするには、「 Teams アプリ プロジェクトの準備 」セクションの最後の手順を参照してください。
アドインをデバッグするには、「 ツール構成ファイルの編集 」セクションの最後の手順を参照してください。
アプリとアドインの両方が同時に実行されているのを確認するには、次の手順を実行します。
Outlook デスクトップが閉じられていることを確認します。
Visual Studio Code を開きます。
アクティビティ バーから [Teams Toolkit] を選択します。
[ ACCOUNTS ] セクションで、Microsoft 365 にサインインしていることを確認します。
Visual Studio Code で [表示>Run] を 選択します。
[ 実行とデバッグ ] ドロップダウン メニューで、[ アプリの起動とアドインの Outlook Desktop (Edge Chromium)] を選択し、F5 キーを押します。 プロジェクトがビルドされ、Webpack 開発サーバー ウィンドウが開きます。 タブ アプリは、Visual Studio Code ターミナルでホストされます。 このプロセスには数分かかる場合があり、次のアクションが発生します。
- Teams がブラウザーで開き、タブ アプリを追加するように求められます。 Outlook デスクトップが開くまでに Teams が開かれない場合、自動サイドローディングは失敗しています。 手動でサイドロードして、アプリとアドインの両方が同時に実行されているのを確認できます。 サイドローディング手順については、「 Teams でアプリをアップロードする」を参照してください。 アップロードする manifest.zip ファイルは、
C:\Users\{yourname}\AppData\Local\Tempにあります。 - Outlook デスクトップが開きます。
- Teams がブラウザーで開き、タブ アプリを追加するように求められます。 Outlook デスクトップが開くまでに Teams が開かれない場合、自動サイドローディングは失敗しています。 手動でサイドロードして、アプリとアドインの両方が同時に実行されているのを確認できます。 サイドローディング手順については、「 Teams でアプリをアップロードする」を参照してください。 アップロードする manifest.zip ファイルは、
Teams プロンプトで [ 追加 ] を選択し、タブが開きます。
Outlook に移動します。
Outlook で、Microsoft 365 アカウント ID の 受信トレイ を開きます。
メッセージを開きます。
2 つのボタンがある Contoso アドイン タブが [ホーム ] リボンに表示されます (または、 独自のウィンドウ でメッセージを開いた場合は [メッセージ] リボン)。
[ タスクウィンドウの表示 ] ボタンを選択します。 作業ウィンドウが開きます。
[アクションの実行] ボタンを選択します。 メッセージの上部近くに小さな通知が表示されます。
デバッグを停止し、アドインをアンインストールするには、[Visual Studio Code で 実行>Stop デバッグ ] を選択します。 Webpack dev-server ウィンドウが閉じられない場合は、プロジェクトのルートで 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 つのスペースをインデントする必要があります。withステートメントはusesに揃え、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_ENDPOINTVisual Studio Code で、Teams Toolkit を開きます。
[ ACCOUNTS ] セクションで、(Microsoft 365 アカウントにサインインするだけでなく) Azure アカウントにサインインしていることを確認します。 サインインの詳細については、「 演習 - Teams タブ アプリをホストする Azure リソースを作成する」を 開き、[ Teams Toolkit で Azure にサインインする ] セクションまでスクロールします。
Teams Toolkit の [ライフサイクル ] セクションで、[ プロビジョニング] を選択します。 数分かかる場合があります。 Azure リソース グループの 1 つを選択するように求められる場合があります。
プロビジョニングが完了したら、[ デプロイ ] を選択してアプリ コードを Azure にデプロイします。
リモート展開からタブ機能を実行する
- Visual Studio Code で、[ 表示>Run] を選択します。
- ドロップダウン メニューで、[ 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 を呼び出します。
関連項目
Platform Docs