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

Microsoft Teams 連携機能の開発に関する取り組み / Approach to develop Microsoft Teams integration functions

13d936e697fe0f4fa96f926d0a712f6c?s=47 Sansan
PRO
September 01, 2021

Microsoft Teams 連携機能の開発に関する取り組み / Approach to develop Microsoft Teams integration functions

■イベント

【bitFlyer x Sansan Tech Meetup】C#で実装する自社サービス開発の挑戦https://sansan.connpass.com/event/220126/

■登壇概要

タイトル:Microsoft Teams 連携機能の開発に関する取り組み

登壇者:技術本部 Sansan Engineering Unit
Web Application グループ 八藤丸 諒士

▼Sansan Builders Blog

https://buildersbox.corp-sansan.com/

13d936e697fe0f4fa96f926d0a712f6c?s=128

Sansan
PRO

September 01, 2021
Tweet

Transcript

  1. Microsoft Teams 連携機能の開発に関する取り組み Sansan株式会社 技術本部 Sansan Engineering Unit Web Application

    グループ ⼋藤丸 諒⼠ 【 b i t F l y e r x S a n s a n T e c h M e e t u p 】 C # で 実 装 す る ⾃ 社 サ ー ビ ス 開 発 の 挑 戦
  2. Agenda - ⾃⼰紹介 - Microsoft Teams × Sansanの簡単な紹介 - 技術的な取り組み

    - カレンダー連携 - ビデオ会議連携 1
  3. SEとしてエンジニアのキャリアをスタートさせ、その後株式会社ナビタイム ジャパンでWebの開発業務を担当。 2020年9⽉にSansan株式会社に⼊社。関⻄⽀店にて「Sansan」プロダクト の開発を担当する。 ⼋藤丸 諒⼠ Sansan株式会社 技術本部 Sansan Engineering

    Unit Web Application グループ 2
  4. 3

  5. Sansan株式会社とは 名刺管理から、営業を強くする 名刺でつながる、 ビジネスのためのSNS あらゆる請求書を オンラインで受け取る 設⽴年 2007年6⽉ 資本⾦ 63億12百万円

    (2021年5⽉31⽇時点) 代表者 寺⽥親弘(代表取締役社⻑) 事業 働き⽅を変えるDXサービス (クラウド名刺管理サービス等)の 企画・開発・販売 拠点 表参道本社 Sansan One Sansan パラシオ 関⻄⽀店 福岡⽀店 名古屋⽀店 東京証券取引所市場第⼀部 グループ会社 Sansan Global Pte. Ltd. (シンガポール) Sansan Corporation (アメリカ) ログミー株式会社 上場証券取引所 4
  6. Microsoft Teams × Sansanについて ※Microsoft、Microsoft Teams、Microsoft Azureは、⽶国Microsoft Corporationの⽶国およびその他の国における登録商標または商標です。 5

  7. Microsoft Teams×Sansanで、新しい働き⽅を実現 社内外とのコラボレーションに強みを持つTeamsと、 オンライン上で誰とでも名刺交換ができるSansanのオンライン名刺で、 これまでと変わらない働き⽅を実現。 オンラインの出会いも、ビジネスチャンスへつなげます。 6

  8. 商談前にオンライン名刺交換 社外との予定を⼀覧し、お会いする前に名刺交換 同僚の オンライン名刺⼀覧 社外の参加者⼀覧 7

  9. 商談中にオンライン名刺交換 ビデオ会議中に名刺交換 8

  10. 技術的な取り組み 9

  11. カレンダー連携 10

  12. - manifest.json と呼ばれるアプリの定義ファイル等を圧縮した zip で定義し た Web ページを Teams 内で

    iframe で表⽰している - Sansan に CSP(Content Security Policy) の設定を追加 > Teams での iframe 内の表⽰を許可 - Sansan の SameSite 属性を None に変更 > 別ドメインからの Cookie 送信を許可 Teams内でアプリをどうやって表⽰しているのか? 11
  13. - 出席者をまとめて⼀つのリクエストで取得していたところを、⼀⼈の出席 者を取得するリクエストを並列で叩くように変更 - ASP.NET のデフォルトの挙動で同⼀セッションのリクエストをロックし てしまう(並列にリクエストが処理されない) - SessionStateBehavior を

    ReadOnly にすることで対応 - クラスに付与する Attribute になるため、ReadOnly ⽤のクラスを新たに作成 > このクラスに社内・社外の出席者を⼀⼈取得するアクションを追加 - ⾒込み:約26秒 → 5秒以内 出席者取得のパフォーマンス改善 12
  14. ビデオ会議連携 13

  15. - チャットに投稿するメッセージのサイズを 28KB に収める必要があった - メッセージの内容 - (変更前)「本⽂ + 名刺画像

    + 顔写真画像」* 参加者数 > 400 Bad Request で投稿できない - (変更後) 「本⽂ + 名刺画像 + 顔写真画像」 > 変更前のメッセージを参加者⼈数分に分割して投稿 > 名刺画像が 30KB 以上になる場合もあったため、リサイズ処理を追加 - 30秒ごとの⾃動ポーリングで参加者情報を取得すると BAN される可能性 - やむを得ず⼿動更新するように仕様を変更 GraphAPIの制限 14
  16. - リアルタイムでビデオ会議に参加している参加者を取得して、アプリに反 映するために Bot Framework の使⽤を検討 - 試験的に導⼊してみたところ、ユーザーがビデオ会議に参加・退出するイ ベントをキャッチすることができないことが判明 -

    GraphAPI を使⽤してビデオ会議のチャットに参加しているユーザーを取得す るように変更 > リアルタイムにビデオ会議に参加しているユーザー > + 予定に登録されているもののビデオ会議には参加していないユーザー Bot Framework 15
  17. AdaptiveCards形式のメッセージ Sansan の Web ページ Microsoft Teams の 画 16

  18. - Teams 内のチャット(Sansan のアプリではない)でグラフィカルに名刺情 報を表⽰するために Microsoft 側で⽤意されている AdaptiveCards を利⽤ -

    表現できるデザインに⼀定の制限はある AdaptiveCards形式のメッセージ 17
  19. Tips 18

  20. - manifest.json で指定できるのは同じ Web ページ - Microsoft Teams JavaScript SDK

    で表⽰されている画⾯のタイプを取得 - タイプが sidePanel であれば、別画⾯にリダイレクトするようにして対応 sidePanelの表⽰の切り替え 予定詳細のアプリ部分 ビデオ会議のアプリ部 分 19
  21. - アプリを開発者プレビュー版に変更 - インジケーターで Teams を右クリック、「DevTools を開く」を選択 - DevTools が開かれ、Web

    版と同様に開発を進められる デスクトップアプリ版のデバッグ 20
  22. - パートナーセンターから申請開始 - Microsoft の⽅に対してアプリのデモを実施 - 修正が必要な個所が送られてくるので対応もしくは交渉 - スムーズにいけば1ヶ⽉ぐらい ストア公開対応

    21
  23. まとめ 22

  24. まとめ - 外部連携ならではの難しさ - そもそも何ができるかを0から調査する必要がある - 細かい調整などは、仕組みが提供されていない限り、できないことがある > ⾒せ⽅や仕様を途中で変更する必要が出ることもある -

    ストア公開にかかる期間が読めないため、⼀般公開がいつになるかの⾒積もり が難しい > Sansan for Teams アプリも2021年8⽉下旬時点ではストア公開できていない - ビジネスインパクトの⼤きさ - Microsoft Teams とコラボレーションすることで、オンライン名刺の利⽤促進 を図ることができた ※Microsoft、Microsoft Teams、Microsoft Azureは、⽶国Microsoft Corporationの⽶国およびその他の国における登録商標または商標です。 23
  25. ※ 登録の際、紹介コードの欄に「0 8 3 1 勉 強 会 」と⼊⼒ください。

  26. We are hiring! 新規事業開発 新規事業開発エンジニア ウェブアプリケーションエンジニア PdM(プロダクトマネージャー) 社内システム開発 コーポレートエンジニア セキュリティーエンジニア

    (SOC、社内教育・監査) DSOC / 研究開発 インフラエンジニア ⾃然⾔語処理 研究員 社会科学分野 研究員 機械学習 研究員 OCR開発技術者 R&D DevOpsエンジニア データエンジニア サービス基盤エンジニア データサイエンティスト サービス開発 サービス開発エンジニア ウェブアプリケーションエンジニア インフラエンジニア iOSエンジニア Android エンジニア SETエンジニア ブランディング・マーケティング フロントエンドエンジニア 募集中のポジション詳細はこちらから https://jp.corp-sansan.com/recruit/midcareer 25
  27. None