de:code 2019 PR04

これからはじめる!

やさしいMicrosoft Teams アプリ開発の基本

日本マイクロソフト株式会社

パートナー事業本部 パートナーソリューションプロフェッショナル

佐伯理美

TeamsはOffice 365 のチーム コラボレーションのハブ

カスタマイズ & 機能拡張

コミュニケーション

コラボレーション

安心・安全

カスタマイズ & 機能拡張サードパーティ アプリ、業務プロセス連携

なぜ Teams のアプリ開発なのか？

組織が使用する全てのアプリとツールを 1 つの UI に

チームやコミュニケーションと連携したアプリの開発

PC、タブレット、スマートフォンでも使える

1

3

2

Teams の機能

チャット ファイル共有

ビデオ会議 音声通話

Office 365 アプリケーション

カスタム アプリ

Teams を起点にはじまる “コラボレーション” と “業務”

メッセージ アクションの機能は開発者プレビュー

タスクを作成

Web サイトの表示崩れ

タイトル

中

緊急度

昨日更新した Web サイトの表示が崩れているようです。

内容

タスク管理アプリ

例) 会話からワークフローを開始する

参考：Initiate actions with messaging extensions

詳細は PR03

近日中に、ボット以外の Teams のアプリ機能もモバイル デバイスで使用できるようになります。参考：Build 2019 で発表された Microsoft Teams プラットフォームの機能強化

Coming soon

なぜ Teams のアプリ開発なのか？

組織が使用する全てのアプリとツールを 1 つの UI に

チームやコミュニケーションと連携したアプリの開発

PC、タブレット、スマートフォンでも使える

1

3

2

Teams を拡張することで、さらに便利に利用し、働く環境を変える

Teamsのアプリ開発を行う上で必要なもの

Teams で実行するアプリケーションは Web アプリケーション

Documentation Package GitHub

Package GitHub

Package GitHub

Documentation Install App Studio in Teams

DocumentationPackage GitHub

Package GitHub

Teamsのアプリに必要なアプリケーションパッケージ

Teams への展開には、アプリケー

ション パッケージが必要

参考：Create an app package for your Microsoft Teams app

アプリ A

Microsoft Teams

アプリケーション パッケージの中身

Teams のアプリを作ろう

Teamsのアプリを作ろう

1. App Studio を使用する

2. ジェネレーターを使用する

3. アプリ テンプレートを使用する

1. App Studio を使用する

4. PowerApps を使用する Appendix

App Studio でmanifest やコードの作成を容易に

参考：Quickly develop apps with App Studio for Microsoft Teams

App Studio で Teams のアプリを作成し、

開発テスト用に展開する

Demo

このデモで準備しておくもの：

• 任意の Web ページ

Teamsのアプリを作ろう

1. App Studio を使用する

2. ジェネレーターを使用する

3. アプリ テンプレートを使用する

4. PowerApps を使用する Appendix

ジェネレーターを使用して、アプリのプロジェクトを作成

Yeoman

http://yeoman.io

npm install -g yonpm install -g generator-teams

アプリをローカルにホストして実行する

参考：Run and debug your Microsoft Teams app

Teams でアプリを動作させるために、① HTTPS エンドポイントを使用してアクセスできるようにする② ローカルで実行中のインスタンスに外部からアクセス可能にする

トンネリング ソフトウェアを利用する (ngrok など)

ジェネレーターを使用してアプリを作成し、

開発テスト用に展開する

Demo

このデモで準備しておくもの：

• Node.js、npm、gulp、Yeoman のインストール

• Yeoman の Teams ジェネレーターのインストール

• ngrok (ローカル環境でアプリを動作させるために必要)

• Visual Studio Code

Appendix に詳細あり

ここで、Teams のアプリ機能を解説

Teams のアプリ機能 “タブ”

• Teams のタブはWeb ページがベースとなる

Teams のアプリ機能 “ボット”

ボット アプリケーションがベースとなる

詳細は PR03

Teams のアプリ機能を組み合わせて使う

本セッションはタブを中心に解説

参考：Concepts

タブの概要

PC の Teams デスクトップ アプリ、Web ブラウザーの場合

• スクラッチから作成

• 既存

タブ

https://teams.microsoft.com/...

ここが開発する部分

https://yourapp.contoso.com/...

• Azure

• 別のホスト サーバー

タブのWeb ページの作成にあたって

① HTTPS エンドポイント上にホストする

② Teams の iframe 内でコンテンツが動作するようにするX-Frame-Options/Content-Security-Policy を使用するなど

多くの Web ページでは、iframe で参照されることを許可しないように構成されているので、注意が必要です

③ タブで表示するページのドメインを manifest の にリストする

Content-Security-Policy: frame-ancestors teams.microsoft.com *.teams.microsoft.com *.skype.com

X-Frame-Options: ALLOW-FROM https://teams.microsoft.com/または

参考：Requirements for tab pages in Microsoft Teams

validDomains

タブのWeb ページの作成にあたって

④ Microsoft Teams JavaScript client SDK を使用する

Teams 上で Web ページが読み込まれたら、以下を実行

Teams SDK を使用することで、以下が可能

• 現在サインインしているユーザー情報の取得内容によっては、Graph API を使用する必要あり

• コンテキストの取得タブにアクセスしているユーザーが今いるチーム/チャネル/タブの情報、どのクライアントからのアクセスであるか (desktop, web, ios, android) など

• Teams に特化した操作チャット画面、会議作成ダイアログ、アプリのインストール ダイアログの起動など

microsoftTeams.initialize();

参考：Microsoft Teams JavaScript client SDK

【タブと組み合わせたい機能】 ディープ リンク

タブ上のリンクやボタンをクリック

チャットの画面を開く

アプリのインストール画面を開く

会議の作成画面を開く開発者プレビュー

https://teams.microsoft.com/l/chat/0/0?users=<user1>,<user2>,...&topicName=<chatname>&message=<precannedtext>

タブでディープ リンクを使用する際、タブのWeb ページ上で Teams SDKのexecuteDeepLink関数を使用します。

// タブからチャット画面を開く

microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/chat/0/0?users=joe@contoso.com,bob@contoso.com&topicName=Prep%20For%20Meeting%20Tomorrow&message=Hi%20folks%2C%20kicking%20off%20a%20chat%20about%20our%20meeting%20tomorrow");

// タブからスケジュール ダイアログを開く

microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/meeting/new?subject=test%20subject&attendees=joe@contoso.com,bob@contoso.com&startTime=10%2F24%2F2018%2010%3A30%3A00&endTime=10%2F24%2F2018%2010%3A30%3A00&content=test%3Acontent");

// タブからアプリのインストール ダイアログを開く

microsoftTeams.executeDeepLink("https://teams.microsoft.com/l/app/f46ad259-0fe5-4f12-872d-c737b174bcb4");

参考：Create deep links to content and features in Microsoft Teams

【タブと組み合わせたい機能】 タスク モジュール

アイテムの作成フォームを表示する リッチなコンテンツを表示する

タブでタスクモジュールを使用する際、Teams SDKの startTaskおよびsubmitTask関数を使用します。

参考：Using task modules in tabs

// タスク モジュールを開く

・・・ 省略 ・・・

taskInfo.url = "https://www.contoso.com/teamsapp/customform";taskInfo.title = "Custom Form";taskInfo.height = 510;taskInfo.width = 430;microsoftTeams.tasks.startTask(taskInfo, submitHandler);

// タスク モジュールの内容を Submit する・・・ 省略 ・・・

var customerInfo = {name: document.forms["customerForm"]["name"].value,email: document.forms["customerForm"]["email"].value}microsoftTeams.tasks.submitTask(customerInfo, "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");

<html><head></head><body>・・・入力フォームの実装・・・</body>

</html>

【タブと組み合わせたい機能】 ボット

Microsoft Teams

参考：Combine bots with tabs

/teams/content1.html

/api/messages

あなたが担当のタスクが作成されました。

ボット

【タブと組み合わせたい機能】 ボット

Microsoft Teams

タブ アプリで自分のタスクが作成されたら、ボットで通知する

タブ

作成

1

2

1

2

【タブと組み合わせたい機能】 ボット

Microsoft Teams

[タイトル] PR イベント準備[内容] フライヤー作成[担当者] Jiro Micro

タブ

ボットで登録した情報をタブ アプリで確認する

タスクの名前は？ボット

Jiro Micro

担当者は誰にしますか？

PR イベント準備1

2

2

1

Teamsのアプリを作成する

1. App Studio を使用する

2. ジェネレーターを使用する

3. アプリ テンプレートを使用する

4. PowerApps を使用する Appendix

Azure にデプロイ

Customer Stickers こちら

Teamsアプリテンプレート

Customer Stickers IcebreakerAvailable

Coming soon Celebrations Approvals Company comms

メッセージ拡張を実装 ボットを実装

Teamsのアプリを作成する

1. App Studio を使用する

2. ジェネレーターを使用する

3. アプリ テンプレートを使用する

4. PowerApps を使用する Appendix

Teams のアプリ開発を検討しよう

Teamsのアプリ開発を検討するポイント

業務用アプリケーションとコミュニケーション基盤が分か

れていることで、手間になっていることはありませんか？

部門やチームなどの複数人での作業を活性化 / 効率

化しませんか？

開発者の皆様へ

◼Teams カスタム アプリの開発をご検討ください

◼すでにアプリケーションをお持ちの方は、Teams に取り込むことをご検討ください

※Bot は Azure Bot Service が必要

さいごに

© 2018 Microsoft Corporation. All rights reserved.

本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。

© 2019 Microsoft Corporation. All rights reserved.

本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。

本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。

Appendix

アプリのテスト時の注意点

参考：組織の Microsoft Teams の設定を管理する

Teams のカスタム アプリを作成し、

開発テスト用に展開する

Demo (画面ショット)

このデモで準備しておくもの：

• 任意の Web ページ

ジェネレーターを使用してアプリを作成し、

開発テスト用に展開する

Demo (セットアップ)

このデモで準備しておくもの：

• Node.js、npm、gulp、Yeoman のインストール

• Yeoman の Teams ジェネレーターのインストール

• ngrok (ローカル環境でアプリを動作させるために必要)

• Visual Studio Code

開発環境のセットアップ

◼ Node.js のインストール

Node.js をインストールします。

◼ コード エディターのインストール

Visual Studio Code をインストールします。 (その他の任意のエディターでも可)

◼ Yeoman と gulp のインストール

以下のコマンドを実行してインストールします。

◼ Yeoman の Teams ジェネレーターのインストール

以下のコマンドを実行してインストールします。

◼ ngrok のインストール

ngrok をインストールします。

npm install -g yo gulp

npm install -g generator-teams

参考：Get started on the Microsoft Teams platform with Node.js and App Studio

Microsoft Teams のセットアップポリシーセットアップ ポリシーは現在展開中です

アプリをここに固定して表示することで、すぐに見つけ、すぐに使える状態に

参考：Microsoft Teams のアプリ

のセットアップ ポリシーを管理する

Microsoft Teams JavaScript client SDK

• SDK をインストールするnpm もしくは yarn を使用してインストールが可能

• SDK を使用する

npm install --save @microsoft/teams-js

yarn add @microsoft/teams-js

または

import * as microsoftTeams from "@microsoft/teams-js";

TypeScript

参考：Microsoft Teams JavaScript client SDK

<html><head></head><body><div>〇〇〇〇アプリ

</div><div>

...

</body></html>

],"staticTabs": [{"entityId": "sampletab","name": "サンプル タブ","contentUrl": "https://

yourapp.contoso.com/content1","scopes": [ "personal" ]}],

コンテンツ ページ：https://yourapp.contoso.com/content1

1. タブを追加する 2. タブが展開される

参考：Static tabs

<html><body>...</body></html>

],"configurableTabs": [{"configurationUrl": "ht

tps://yourapp.contoso.com/tab/config.html","canUpdateConfiguration

": true,"scopes": ["team","groupchat",]}],

構成ページ：https://yourapp.contoso.com/tab/config.html

//設定の保存時の JavaScript の実装

microsoftTeams.settings.setSettings({entityId: "sampletab",contentUrl: "https://yourapp.contoso.com/content2",removeUrl: "https://yourapp.contoso.com/tabremove.html",});

<html><head></head><body><div>□□□□アプリ

</div><div>

...

</body></html>

コンテンツ ページ：https://yourapp.contoso.com/content2

参考： Configurable tabs

1. タブを追加する 2. タブの設定をする 3. タブが展開される

【タブと組み合わせたい機能】 ボット + ディープ リンク

お問い合わせSR00123 と SR00456 を確認してください。

ボットMicrosoft Teams

ボットのメッセージからタブ アプリの特定のコンテンツに誘導する

[SR ID] SR00123[タイトル] ○○○○

[SR ID] SR00456[タイトル] ■■■■

タブ

参考：Create deep links to content and features in Microsoft Teams

タブへのディープリンクの実装

参考：Create deep links to content and features in Microsoft Teams

みなさん、こちらの Task 456 を見てもらえませんか？

会話

[タスク] Task 456[内容] イベント カタログ作成

タブ

https://teams.microsoft.com/l/entity/fe4a8eba-2a31-4737-8e33-e5fae6fee194/tasklist123?webUrl=https://tasklist.example.com/123/456&label=Task 456&context={"subEntityId": "task456","canvasUrl": "https://tab.tasklist.example.com/123","channelId": "19:cbe3683f25094106b826c9cada3afbe0@thread.skype"}

//例microsoftTeams.getContext(function(context: microsoftTeams.Context) {this.subEntityId = context.subEntityId; //以降で、この

subEntityId を使用して、処理を実装

});

Teamsのアプリを作成する

1. App Studio を使用する

2. ジェネレーターを使用する

3. アプリ テンプレートを使用する

4. PowerApps を使用する Appendix

Teams で PowerApps アプリを使用する

この部分を PowerApps アプリで作成

参考：Microsoft Teams にアプリを追加する

PowerApps のサンプル アプリを使用して、すぐに試すことができます。

タスクモジュールなどで PowerApps アプリを iframe に埋め込む場合、iframe 用の URLを使用

https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

<!DOCTYPE html><html lang="ja"><head></head><body><div id="embed-container"><iframe height="400" width="500"src="https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/fdbf743d-88ca-45eb-afce-786545485f3e"></iframe></div></body></html>

参考：キャンバス アプリを Web サイトなどのサービスに統合する

例) powerapps.html

Microsoft Teams Developer Platform

https://aka.ms/TeamsDev

Sample Description

Hello World in Microsoft Teams with

Node.js

A sample teams app in Node.js introducing you to the basic app capabilities.

Hello World in Microsoft Teams with

C#.NET

A sample teams app in C# .NET introducing you to the basic app capabilities.

Complete sample in Node.js This sample shows how to use all the features of the Microsoft Teams platform

Complete sample in C#/.NET This project is meant to help a Teams developers in two ways. First, it shows many examples

of how an app can integrate into Teams. Second, it gives a set of patterns, templates, and

tools that can be used as a starting point for creating a larger, scalable, more enterprise level

app to work within Teams.

Line of Business apps in C#/.NET This repository contains multiple example Line of Business apps that can be used for either

inspiration or as templates to build on top of.

Sample bot for C#/.NET This sample bot shows how to use the [Teams extensions for the Bot Builder SDK] (~/get-

started/code.md#microsoft-teams-extensions-for-the-bot-builder-sdk) in C#.NET.

Sample bot for Node.js This sample bot shows how to use the [Teams extensions for the Bot Builder SDK] (~/get-

started/code.md#microsoft-teams-extensions-for-the-bot-builder-sdk) in Node.js.

Outgoing Webhook for C#/.NET Illustrates how to create an Outgoing Webhook for Microsoft Teams in C#/.NET.

Outgoing Webhook for Node.js Illustrates how to create a simple Outgoing Webhook for Microsoft Teams in ~50 lines of

Node.js code.

Sample connector for Node.js This sample, written in Node.js, showcases how to build a connector for Microsoft Teams

using GitHub as an example to generate connector notifications.

Sample connector for C#/.NET This sample, written in C#, showcases how to build a connector for Microsoft Teams using a

sample task list app as an example to generate connector notifications.