Microsoft Teams 開発ハンズオン 2020/11/10 篠原敬志 (@karamem0)

自己紹介 Name 篠原敬志 (Takashi Shinohara) Company アバナード株式会社 シニアコンサルタント Award Microsoft MVP for Office Development (2018-) Twitter @karamem0 Facebook t.shinohara.56 Blog https://blog.karamem0.jp Community Japan M365 Dev User Group

本日のハッシュタグ SNS に共有する場合は以下のハッシュタグをお使いください。 #GM365TOKYO

はじめに 本日のコンテンツは Microsoft Learn の以下のモジュールをベースにしています。 ハンズオン後もモジュールを学習することで振り返りが可能です。 Microsoft Teams のアプリの構築について Microsoft Teams のタブによる 埋め込み Web エクスペリエンスの作成

事前準備をお願いします！ - M365 開発者プログラム Microsoft 365 開発者プログラムへの参加をお願いします。 90 日間有効な開発者向け Microsoft 365 E5 25 ユーザー ライセンス アクティビティがあれば 90 日後に更新可能 サンプル データ パックでテスト データを簡単作成

事前準備をお願いします！ - Node.js コマンド プロンプトで「node --version」を実行してエラーが出るまたは v10 よ り前のバージョンがインストールされている場合は 10.23.0 (2020/11/9 時点の 最新版) をインストールしてください。 https://nodejs.org/dist/latest-v10.x/ v12 や v14 でも動作するとは思いますが検証はしていません。自己責任でお願い します。

事前準備をお願いします！ - npm パッケージ インストールされているパッケージを確認するには以下のコマンドを実行します。 npm list -g --depth 0 yo、gulp、および generator-teams (2.15.0) をインストールしていない場合は 以下のコマンドを実行してください。 npm install yo gulp –g npm install [email protected] –g generator-teams は最新版の 2.16.0 ではハンズオンが動作しません。必ず 2.15.0 をインストールするようにしてください。

Microsoft Teams のアプリの構築について

Microsoft Teams アプリとは Microsoft Teams はカスタム アプリを作成可能なプラットフォームです。 Microsoft Teams 向けのアプリは、チャネルやユーザーへの通知の送信から、会 話ボット、自然言語処理、埋め込みの Web エクスペリエンスを含む複雑なマルチ サーフェス アプリまで、必要に応じてシンプルまたは複雑にすることができます。 アプリは、個人、チーム、組織、またはすべての Microsoft Teams ユーザー向け に構築できます。

Microsoft Teams アプリの構成要素 Teams クライアント Web サービス Teams アプリ パッケージ 登録 定義 表示

Microsoft Teams アプリの種類 タブ ボット コネクタ メッセージ拡張

Microsoft Teams クライアントの拡張 チームのチャネルと グループ チャット 個人用アプリ メッセージ 会話ボット 会話ボット 検索コマンド 構成可能なタブ 個人用タブ アクション コマンド Webhook とコネクタ リンクの展開

Microsoft Teams アプリの開発プロセス アプリのデザイン • タブ • ボット • コネクタ • メッセージ拡張 開発環境の準備 • Microsoft 365 開発者 プログラム 開発環境の選択 • Yeoman ジェネレーター • Microsoft Teams Toolkit Web サービスの構築 • Bot Framework SDK • Teams SDK • Fluent UI アプリ パッケージの作成 • App Studio アプリの配布 • アプリの共有 • アプリを組織に公開 • アプリを App Source に公開 アプリのインストール

Microsoft Teams アプリを作成するシナリオ 作成に適したシナリオ 作成に適さないシナリオ コミュニケーションと共同作業の強化 有効な実行方法が既に存在する場合 ソーシャルな交流活動の促進 定期的に使用されることが想定されていないアプリ 一般的なビジネス プロセスの開始と促進 一部 (またはすべて) の既存のアプリを表示する タブとボットを使用した個人用アプリ

まとめ Microsoft Teams はホスティング プラットフォームではありません。Teams ア プリを稼働させるには、Web サービスのホスティングをご自身で手配していただ く必要があります。 効果的な Teams アプリを作成するポイントは、適切な拡張ポイントと UI 要素を 選択することにあります。 Teams アプリは一部の限られたユーザーまたはチームに配布することも組織全体 に配布することもでき、また、Microsoft のアプリ ストアに配布することもでき ます。

Microsoft Teams のタブによる 埋め込み Web エクスペリエンスの作成

Microsoft Teams におけるタブの表示方法 タブの Web コンテンツは常に として表示されます。特定のドメインの Web ページのみを 内に表示されるように制限することができます。 Web コンテンツの認証はポップアップ ウィンドウの呼び出しによって行われます。 Microsoft Teams クライアントの現在のテーマに合わせてスタイルを適用するこ とができます。 Web コンテンツからは JavaScript SDK を使って Microsoft Teams クライアン トと通信することができます。

タブのスコープ: 個人用タブ アプリ バーにはアプリの 一覧が表示されます。ア プリは個人で追加したり 組織で固定したりするこ とができます。 チームとは紐づかないタ ブは個人用タブとして独 立して存在します。

タブのスコープ: チーム タブ チームにはチャネルごと にタブがあり追加または 削除することができます。

タブのスコープ: グループ チャット タブ グループ チャットを開始 するとタブを追加または 削除することができます。

ハンズオンのシナリオ カスタムの個人用タブを作成する カスタムのチャットまたはグループのタブを作成する カスタムのタブに認証を実装する

ハンズオン カスタムの個人用タブを作成する

ハンズオン カスタムのチャットまたはグループのタブを作成する

ハンズオン カスタムのタブに認証を実装する

まとめ Microsoft Teams の 2 種類のカスタム タブの構築方法をハンズオンを通して学習 しました。また、カスタム タブに認証を実装し、外部サービスからデータを取得 して表示する方法を学習しました。

お疲れさまでした！ アンケートのご協力をお願いします。 https://aka.ms/M365BootcampJapanese