Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

これでできる! Microsoft Teams アプリ開発のポイント徹底解説

459 views

Published on

de:code 2019 での登壇資料です。

Published in: Technology
  • Be the first to comment

これでできる! Microsoft Teams アプリ開発のポイント徹底解説

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

×