これでできる！ Microsoft Teams アプリ開発のポイント徹底解説
8 likes10,939 views
de:code 2019 での登壇資料です。
!["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 定義
←メッセージ拡張
←① ←①
←②
←②
←③
←③](https://image.slidesharecdn.com/pr03osamumprint-190603024625/85/Microsoft-Teams-27-320.jpg)
![メッセージ アクション New!
投稿済メッセージの内容を取得してアクション
• [その他のオプション] から起動
• JSON 形式で投稿内容を取得](https://image.slidesharecdn.com/pr03osamumprint-190603024625/85/Microsoft-Teams-29-320.jpg)
これでできる！ Microsoft Teams アプリ開発のポイント徹底解説
- 1. Ask the Speaker 写真撮影 動画撮影 セッション資料 後日公開 Twitter ハッシュタグ PR03 これでできる！ Microsoft Teams アプリ開発のポイント徹底解説 日本マイクロソフト株式会社 パートナー事業本部 テクニカルエバンジェリスト 物江 修 #decode19 #PR03
- 2. de:code 2019 PR03 これでできる！ Microsoft Teams アプリ開発の ポイント徹底解説 日本マイクロソフト株式会社 パートナー事業本部 テクニカルエバンジェリスト 物江 修
- 3. さまざまな Teams のセッションをご用意しています PR08 速習! Microsoft Teams ～最新情報を一気に キャッチ アップ～ PR04 これからはじめる! やさしい Microsoft Teams アプリ開発の 基本 PR03 これでできる! Microsoft Teams アプリ開発のポイント 徹底解説 本セッションはこちら
- 4. このセッションの目的 • Teams アプリケーションの概念の理解(おさらい) • アプリ開発を開始するための具体的な方法 • Teams が提供する代表的なリソースの利用方法 Microsoft Teams アプリケーションの開発について 対象者 : コーディングスキルを持ったプログラマー
- 5. アジェンダ 1. Microsoft Teams での開発 2. アプリケーションの実装 3. アプリの配布
- 7. Microsoft Teams Microsoft 365 における チームワークのハブ コミュニケーション コラボレーション さまざまなツールとの連携 安心・安全
- 8. タブ Microsoft Teams が提供する拡張可能なプラットフォーム アプリの配布と管理 ボット 音声と ビデオ メッセージ 拡張 Microsoft Graph アダプティブ カード 通知 アプリをビルド チャット、チャネル、個人のワークスペース
- 9. Bot Framework Microsoft Teams SDK Microsoft Teams API Microsoft Teams の開発 ボット メッセージ 拡張/アクション タスク モジュール Web Microsoft Graph APIs Web アプリかボットをマッシュアップ + Teams 固有の機能 タブ
- 10. 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 にコードからアクセス
- 11. アプリの 定義 • アプリ マニフェストを 作成 • 機能を指定 1 機能の 実装 • Web やサービス アプリケーションを ホスティング • ボット、タブなどを 実装 • Teams SDK を 利用 2 アプリの テスト • アプリ パッケージを 作成 • Teams に サイド ロード 3 アプリの 配布 • パッケージを アップロード • 組織のユーザーの アプリを有効化 4 Teams におけるアプリ開発のワークフロー
- 12. 開発の準備 1/2 開発用 Office 365 サブスクリプションの準備 https://developer.microsoft.com/ja-JP/office/dev-program
- 13. 開発の準備 2/2 Microsoft 365 管理センターで外部アプリの サイドローディングを有効化
- 15. アプリの定義 : アプリマニフェストの記述 manifest.json に JSON でアプリケーションの機能を定義 アプリの定義
- 16. App Studio を使用したアプリマニフェストの編集 • アプリ プロジェクトの作成と保存 • manifest.json の編集 • カードのコードのプレビューと生成 • 1 クリック サイド ロード • ボット認証情報と 設定管理を完全に統合 GUI ツールで アプリマニフェストを作成
- 17. タブ • Teams JavaScript client SDK で Teams の情報にアクセス可能 • 静的タブと構成可能タブ • 個々のユーザーをサポート (静的) • チャネルの一部として動作 (構成可能) Web サイト/アプリをマッシュアップ
- 18. 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 でユーザー情報を取得
- 19. デモ : タブと Teams JavaScript client SDK
- 20. ボット • コマンド • アクション可能なメッセージ Microsoft Bot Framework に登録されたボットに接続
- 21. Teams へのボットの登録 アプリマニフェストに登録する情報 • App パスワード App Studio から直接ボットの登録を 行える
- 22. ボットプロジェクトの作成 New Visual Studio template MSBOT/npm コマンド
- 24. デモ : ボット作成と Teams での 公開
- 25. Bot Builder SDK の Teams 拡張 ボットを Teams 固有の機能で拡張 メッセージ拡張 メッセージアクション タスクモジュール (※) Microsoft Teams SDK (※) ボット/タブ内から使用
- 26. メッセージ拡張の構成 Bot Builder SDK Teams 拡張 JSON アダプティブカード/ タスクモジュール等
- 27. "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 定義 ←メッセージ拡張 ←① ←① ←② ←② ←③ ←③
- 28. メッセージ拡張 メッセージ作成時にボットの機能を呼び出す • 投稿時にアプリ コンテンツを クエリしたり、会話に挿入 • コマンドボックスからも利用可能
- 29. メッセージ アクション New! 投稿済メッセージの内容を取得してアクション • [その他のオプション] から起動 • JSON 形式で投稿内容を取得
- 31. • 共通かつ一貫した方法で UI コンテンツを交換できるオープンな カード交換形式 (https://adaptivecards.io) • Web、デスクトップ、モバイルでの 完全サポート • iOS および Android の UI に対 • 迅速な対話とタスク完了 アダプティブ カード 機能豊富で柔軟性の高い対話式カードで ボット エクスペリエンスを向上
- 32. デモ : アダプティブカード
- 34. デモ : カスタムコネクタの作成
- 35. ボット メッセージ拡張 タブ コネクタ アダプティブ カード タスク モジュール 自然言語コマンドによる会話 構造化 UI ベースの ボット コマンド呼び出し コンテンツの完全埋め込み エクスペリエンスの実現 チャネルへの通知送信のための シンプルな着信 Web フック統合 対話コンテンツの機能豊富で 柔軟性の高いレイアウト ユーザー入力や レンダリング詳細情報の収集 既存の資産を以下に 接続: • SharePoint • Microsoft Graph • Azure Bot Service • Flow & PowerApps Teams 拡張のチートシート
- 37. アプリの配布 A. Teams アプリ ストアによる 一般公開配布 • Microsoft 販売者ダッシュボードから • アプリ パッケージを提出 (パートナー セ ンターからもまもなく可能) B. テナント アプリ カタログによる、 社内ユーザーのみを対象とした配布 • Teams 内から、または API 経由で アップロード アプリ配布の 2 つのオプション
- 38. Office 365 管理ポータル きめ細かい許可管理 アプリへのユーザー アクセスを管理 アプリ設定のポリシー アプリのプレインストールと プレピン留めで組織アプリの検出と 利用を促進 開発の制御 アプリの「サイド ロード」を特定の 個人に限定 アプリの管理
- 40. Teams デベロッパー センター • Microsoft Teams の優れたアプリ、ボット、 タブのビルドを開始する • トレーニングとチュートリアル • 開発を迅速に進めるために用意されたリソース Developer サポート •アナウンスとプログラム情報 •ベスト プラクティスや最新情報を常に 入手 Teams デベロッパー ガイダンス Microsoft Teams の計画、配信、採 用、管理の方法を学ぶ チームの移行ガイダンスに Skype for Business を含める https://aka.ms/TeamsDeveloper https://aka.ms/TeamsDevSupport https://aka.ms/TeamsDevDocs Microsoft Teams 開発のリソース
- 41. リソース次のステップ • さぁ、はじめよう 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
- 42. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。 © 2019 Microsoft Corporation. All rights reserved. 本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。 本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。