Global Microsoft 365 Developer Bootcamp 2020 Tokyo: Teams 開発ハンズオン / Hands-on training for Global Microsoft 365 Developer Bootcamp 2020 Tokyo: Teams Development

Global Microsoft 365 Developer Bootcamp 2020 Tokyo (https://connpass.com/event/188084) のハンズオンのスライドです。

Transcript

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

   View Slide

2. 自己紹介
   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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide