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 # で 実 装 す る ⾃ 社 サ ー ビ ス 開 発 の 挑 戦 

Agenda - ⾃⼰紹介 - Microsoft Teams × Sansanの簡単な紹介 - 技術的な取り組み - カレンダー連携 - ビデオ会議連携 1 

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

3 

Sansan株式会社とは 名刺管理から、営業を強くする 名刺でつながる、 ビジネスのためのSNS あらゆる請求書を オンラインで受け取る 設⽴年 2007年6⽉ 資本⾦ 63億12百万円 （2021年5⽉31⽇時点） 代表者 寺⽥親弘（代表取締役社⻑） 事業 働き⽅を変えるDXサービス （クラウド名刺管理サービス等）の 企画・開発・販売 拠点 表参道本社 Sansan One Sansan パラシオ 関⻄⽀店 福岡⽀店 名古屋⽀店 東京証券取引所市場第⼀部 グループ会社 Sansan Global Pte. Ltd. （シンガポール） Sansan Corporation （アメリカ） ログミー株式会社 上場証券取引所 4 

Microsoft Teams × Sansanについて ※Microsoft、Microsoft Teams、Microsoft Azureは、⽶国Microsoft Corporationの⽶国およびその他の国における登録商標または商標です。 5 

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

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

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

技術的な取り組み 9 

カレンダー連携 10 

- manifest.json と呼ばれるアプリの定義ファイル等を圧縮した zip で定義し た Web ページを Teams 内で iframe で表⽰している - Sansan に CSP(Content Security Policy) の設定を追加 > Teams での iframe 内の表⽰を許可 - Sansan の SameSite 属性を None に変更 > 別ドメインからの Cookie 送信を許可 Teams内でアプリをどうやって表⽰しているのか？ 11 

- 出席者をまとめて⼀つのリクエストで取得していたところを、⼀⼈の出席 者を取得するリクエストを並列で叩くように変更 - ASP.NET のデフォルトの挙動で同⼀セッションのリクエストをロックし てしまう（並列にリクエストが処理されない） - SessionStateBehavior を ReadOnly にすることで対応 - クラスに付与する Attribute になるため、ReadOnly ⽤のクラスを新たに作成 > このクラスに社内・社外の出席者を⼀⼈取得するアクションを追加 - ⾒込み：約26秒 → 5秒以内 出席者取得のパフォーマンス改善 12 

ビデオ会議連携 13 

- チャットに投稿するメッセージのサイズを 28KB に収める必要があった - メッセージの内容 - (変更前)「本⽂ + 名刺画像 + 顔写真画像」* 参加者数 > 400 Bad Request で投稿できない - (変更後) 「本⽂ + 名刺画像 + 顔写真画像」 > 変更前のメッセージを参加者⼈数分に分割して投稿 > 名刺画像が 30KB 以上になる場合もあったため、リサイズ処理を追加 - 30秒ごとの⾃動ポーリングで参加者情報を取得すると BAN される可能性 - やむを得ず⼿動更新するように仕様を変更 GraphAPIの制限 14 

- リアルタイムでビデオ会議に参加している参加者を取得して、アプリに反 映するために Bot Framework の使⽤を検討 - 試験的に導⼊してみたところ、ユーザーがビデオ会議に参加・退出するイ ベントをキャッチすることができないことが判明 - GraphAPI を使⽤してビデオ会議のチャットに参加しているユーザーを取得す るように変更 > リアルタイムにビデオ会議に参加しているユーザー > + 予定に登録されているもののビデオ会議には参加していないユーザー Bot Framework 15 

AdaptiveCards形式のメッセージ Sansan の Web ページ Microsoft Teams の 画 16 

- Teams 内のチャット(Sansan のアプリではない)でグラフィカルに名刺情 報を表⽰するために Microsoft 側で⽤意されている AdaptiveCards を利⽤ - 表現できるデザインに⼀定の制限はある AdaptiveCards形式のメッセージ 17 

Tips 18 

- manifest.json で指定できるのは同じ Web ページ - Microsoft Teams JavaScript SDK で表⽰されている画⾯のタイプを取得 - タイプが sidePanel であれば、別画⾯にリダイレクトするようにして対応 sidePanelの表⽰の切り替え 予定詳細のアプリ部分 ビデオ会議のアプリ部 分 19 

- アプリを開発者プレビュー版に変更 - インジケーターで Teams を右クリック、「DevTools を開く」を選択 - DevTools が開かれ、Web 版と同様に開発を進められる デスクトップアプリ版のデバッグ 20 

- パートナーセンターから申請開始 - Microsoft の⽅に対してアプリのデモを実施 - 修正が必要な個所が送られてくるので対応もしくは交渉 - スムーズにいけば1ヶ⽉ぐらい ストア公開対応 21 

まとめ 22 

まとめ - 外部連携ならではの難しさ - そもそも何ができるかを0から調査する必要がある - 細かい調整などは、仕組みが提供されていない限り、できないことがある > ⾒せ⽅や仕様を途中で変更する必要が出ることもある - ストア公開にかかる期間が読めないため、⼀般公開がいつになるかの⾒積もり が難しい > Sansan for Teams アプリも2021年8⽉下旬時点ではストア公開できていない - ビジネスインパクトの⼤きさ - Microsoft Teams とコラボレーションすることで、オンライン名刺の利⽤促進 を図ることができた ※Microsoft、Microsoft Teams、Microsoft Azureは、⽶国Microsoft Corporationの⽶国およびその他の国における登録商標または商標です。 23 

※ 登録の際、紹介コードの欄に「0 8 3 1 勉 強 会 」と⼊⼒ください。 

We are hiring！ 新規事業開発 新規事業開発エンジニア ウェブアプリケーションエンジニア PdM（プロダクトマネージャー） 社内システム開発 コーポレートエンジニア セキュリティーエンジニア （SOC、社内教育・監査） DSOC / 研究開発 インフラエンジニア ⾃然⾔語処理 研究員 社会科学分野 研究員 機械学習 研究員 OCR開発技術者 R&D DevOpsエンジニア データエンジニア サービス基盤エンジニア データサイエンティスト サービス開発 サービス開発エンジニア ウェブアプリケーションエンジニア インフラエンジニア iOSエンジニア Android エンジニア SETエンジニア ブランディング・マーケティング フロントエンドエンジニア 募集中のポジション詳細はこちらから https://jp.corp-sansan.com/recruit/midcareer 25 

No content