Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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: 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) のハンズオンのスライドです。

Takashi Shinohara

November 10, 2020
Tweet

More Decks by Takashi Shinohara

Other Decks in Programming

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 [email protected] –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