de:code 2019 PR03

これでできる！

Microsoft Teams アプリ開発の

ポイント徹底解説日本マイクロソフト株式会社

パートナー事業本部 テクニカルエバンジェリスト

物江 修

さまざまな Teams のセッションをご用意しています

PR08

速習! Microsoft Teams ～最新情報を一気にキャッチ アップ～

PR04

これからはじめる!

やさしい Microsoft

Teams アプリ開発の

基本

PR03

これでできる!

Microsoft Teams

アプリ開発のポイント

徹底解説

本セッションはこちら

このセッションの目的

• Teams アプリケーションの概念の理解(おさらい)

• アプリ開発を開始するための具体的な方法

• Teams が提供する代表的なリソースの利用方法

Microsoft Teams アプリケーションの開発について

対象者 : コーディングスキルを持ったプログラマー

アジェンダ

1. Microsoft Teams での開発

2. アプリケーションの実装

3. アプリの配布

Microsoft Teams での開発

Microsoft Teams

Microsoft 365 における

チームワークのハブ

コミュニケーション

コラボレーション

さまざまなツールとの連携

安心・安全

タブ

Microsoft Teams が提供する拡張可能なプラットフォーム

アプリの配布と管理

ボット

音声と

ビデオ

メッセージ

拡張

Microsoft Graph

アダプティブ

カード

通知

アプリをビルドチャット、チャネル、個人のワークスペース

Bot Framework

Microsoft Teams SDK

Microsoft Teams

API

Microsoft Teams の開発

ボットメッセージ

拡張/アクションタスクモジュール

Web

Microsoft

Graph

APIs

Web アプリかボットをマッシュアップ + Teams 固有の機能

タブ

Microsoft Teams の SDK と API

.NET

JS

Teams Bot Builder SDK

• Microsoft

Teams JavaScript

client SDK

• C#/.NET (v3)

• C#/.NET - Beta (v4)

• Node.js (v3)

• Node.js - Beta (v4)

Microsoft Graph

{ REST }

• Microsoft

Teams API v1.0

• Microsoft

Teams API - Beta

Teams のタブから使用 ボットを Teams 固有の機能で拡張 Teams にコードからアクセス

アプリの定義

•アプリ マニフェストを

作成

•機能を指定

1

機能の実装

•Web やサービス

アプリケーションを

ホスティング

•ボット、タブなどを

実装

• Teams SDK を

利用

2

アプリのテスト

•アプリ パッケージを

作成

• Teams に

サイド ロード

3

アプリの配布

•パッケージを

アップロード

•組織のユーザーの

アプリを有効化

4

Teams におけるアプリ開発のワークフロー

開発の準備 1/2

開発用 Office 365 サブスクリプションの準備

https://developer.microsoft.com/ja-JP/office/dev-program

開発の準備 2/2

Microsoft 365 管理センターで外部アプリのサイドローディングを有効化

Teams アプリケーションの実装

アプリの定義 : アプリマニフェストの記述

manifest.json に JSON でアプリケーションの機能を定義

アプリの定義

App Studio を使用したアプリマニフェストの編集

• アプリ プロジェクトの作成と保存

• manifest.json の編集

• カードのコードのプレビューと生成

• 1 クリック サイド ロード

• ボット認証情報と設定管理を完全に統合

GUI ツールでアプリマニフェストを作成

タブ

• Teams JavaScript client SDK で

Teams の情報にアクセス可能

• 静的タブと構成可能タブ

• 個々のユーザーをサポート (静的)

• チャネルの一部として動作 (構成可能)

Web サイト/アプリをマッシュアップ

Teams JavaScript client SDK の使用

//DOM がロードされたらdocument.addEventListener('DOMContentLoaded', () => {

//Microsoft Teams のユーザーコンテキストを取得microsoftTeams.getContext((context) => {

$id('showUpn').innerText = context.upn; $id('showUoid').innerText = context.userObjectId;$id('showTheme').innerText = context.theme;$id('showLocale').innerText = context.locale;

});

タブ内の JavaScript でユーザー情報を取得

デモ : タブとTeams JavaScript client SDK

ボット

• コマンド

• アクション可能なメッセージ

Microsoft Bot Framework に登録されたボットに接続

Teams へのボットの登録

アプリマニフェストに登録する情報

• App パスワード

App Studio から直接ボットの登録を行える

ボットプロジェクトの作成

New Visual Studio template

MSBOT/npm コマンド

Teams 開発におけるボットサービスのホスト

開発の段階に合わせてホストする方法を変える

デモ : ボット作成と Teams での公開

Bot Builder SDK の Teams 拡張

ボットを Teams 固有の機能で拡張

メッセージ拡張

メッセージアクション

タスクモジュール (※)

Microsoft

Teams SDK

(※) ボット/タブ内から使用

メッセージ拡張の構成

Bot Builder SDK

Teams 拡張

JSON

アダプティブカード/

タスクモジュール等

"composeExtensions": [{"botId": "92f1101b-3b54-46af-98e9-c542a30a8d77","commands": [{"id": "queryCards","description": "Test command to run query","title": "Query cards","parameters": [{"name": "queryText","title": "Query parameter","description": "Query parameter"

}]

},{"id": "createCard","type": "action","description": "Test command to run action to create a card","title": "Create cards","fetchTask": true,

メッセージ拡張の UI 定義

←メッセージ拡張

←① ←①

←②

←②

←③

←③

メッセージ拡張

メッセージ作成時にボットの機能を呼び出す

• 投稿時にアプリ コンテンツをクエリしたり、会話に挿入

• コマンドボックスからも利用可能

メッセージ アクション New!

投稿済メッセージの内容を取得してアクション

• [その他のオプション] から起動

• JSON 形式で投稿内容を取得

デモ : メッセージ拡張とメッセージアクション

• 共通かつ一貫した方法でUI コンテンツを交換できるオープンなカード交換形式(https://adaptivecards.io)

• Web、デスクトップ、モバイルでの完全サポート

• iOS および Android の UI に対

• 迅速な対話とタスク完了

アダプティブ カード

機能豊富で柔軟性の高い対話式カードでボット エクスペリエンスを向上

デモ : アダプティブカード

コネクタ

他のサービスの更新をチャネルに配信

デモ : カスタムコネクタの作成

ボット

メッセージ拡張

タブ

コネクタ

アダプティブ カード

タスク モジュール

自然言語コマンドによる会話

構造化 UI ベースの

ボット コマンド呼び出し

コンテンツの完全埋め込み

エクスペリエンスの実現

チャネルへの通知送信のための

シンプルな着信 Web フック統合

対話コンテンツの機能豊富で

柔軟性の高いレイアウト

ユーザー入力や

レンダリング詳細情報の収集

既存の資産を以下に

接続:

• SharePoint

• Microsoft Graph

• Azure Bot Service

• Flow &

PowerApps

Teams 拡張のチートシート

Teams アプリケーションの配布

アプリの配布

A. Teams アプリ ストアによる

一般公開配布

• Microsoft 販売者ダッシュボードから

• アプリ パッケージを提出 (パートナー セ

ンターからもまもなく可能)

B. テナント アプリ カタログによる、

社内ユーザーのみを対象とした配布

• Teams 内から、または API 経由で

アップロード

アプリ配布の 2 つのオプション

Office 365 管理ポータル

きめ細かい許可管理アプリへのユーザー アクセスを管理

アプリ設定のポリシーアプリのプレインストールと

プレピン留めで組織アプリの検出と

利用を促進

開発の制御アプリの「サイド ロード」を特定の

個人に限定

アプリの管理

まとめ

多様性を活かした開発

Microsoft Teams アプリ

Teams デベロッパー センター

• Microsoft Teams の優れたアプリ、ボット、

タブのビルドを開始する

• トレーニングとチュートリアル

• 開発を迅速に進めるために用意されたリソース

Developer サポート

•アナウンスとプログラム情報

•ベスト プラクティスや最新情報を常に

入手

Teams デベロッパー ガイダンス

Microsoft Teams の計画、配信、採

用、管理の方法を学ぶ

チームの移行ガイダンスに Skype for

Business を含める

https://aka.ms/TeamsDeveloper https://aka.ms/TeamsDevSupport https://aka.ms/TeamsDevDocs

Microsoft Teams 開発のリソース

リソース次のステップ

• さぁ、はじめようMicrosoft Teams

Teamwork Solution Accelerator

• リソースとサポートへアクセスする

• FastTrack

• https://aka.ms/SuccessWithTeams

•

• https://developer.microsoft.com/ja-

JP/office/dev-program

•

• https://github.com/OfficeDev/BotBuilder-

MicrosoftTeams-node

https://aka.ms/TeamworkSolutionAccelerator

aka.ms/TeamworkAssessment

https://aka.ms/TeamsDeveloper

https://aka.ms/TeamsDevSupport

https://aka.ms/TeamsDevDocs

© 2018 Microsoft Corporation. All rights reserved.

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

© 2019 Microsoft Corporation. All rights reserved.

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

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