Microsoft Teams ビデオ会議アプリの作り方の紹介

こんにちは。技術本部 Sansan Engineering Unit 所属の八藤丸です。

私は中途採用で昨年9月に入社して11ヶ月ほどになる、関西支店で勤務するエンジニアです。

今回の記事では、6月末にリリース*1した Microsoft Teams ビデオ会議連携機能の概要とビデオ会議のアプリの作り方をご紹介します。

Microsoft Teams ビデオ会議連携とは

ビデオ会議システムですと、Zoom や Google Meet などを普段使っている方もいらっしゃるかと思いますが、Microsoft Teams でもビデオ会議を無料で利用することができます。
Microsoft Teams は最近のアップデートでビデオ会議中に画面のサイドパネルを表示できるようになり、そのサイドパネルにはサードパーティーがアプリとして画面を提供することが可能になりました。
これらのアプリを上手く活用することで、会議中に会話をしながら並行して会議の付加価値を上げることができるようになったと言えます。

Sansan はビデオ会議システムを社外の方との商談などで利用することを想定して、ビデオ会議中に名刺交換できるアプリをリリースしました。
Sansan アプリをこのビデオ会議に導入することで、会議の始めに自分や同僚のオンライン名刺*2を送信することができるので、メンバー紹介をスマートに行うことができます。*3。
また、チャットで共有されたオンライン名刺のリンクからオンライン名刺交換を行うことが可能になります。

オンライン名刺についての詳細は、以下のコーポレートサイトや記事をご覧ください。
オンライン名刺 | Sansan - 法人向けクラウド名刺管理サービス
オンライン名刺の価値 - Sansan Builders Blog

ビデオ会議画面のサイドパネル

サードパーティ製のアプリ一覧

ビデオ会議アプリの全体像

まず初めにこれから作成するビデオ会議アプリの全体像をご紹介します。
今回のサンプルに関しては、ローカル開発環境で作成した Web ページを Microsoft Teams ビデオ会議アプリのサイドパネル内に表示するという内容*4になるので、必要になるのは、Microsoft Teams とアプリで表示する画面を提供するローカルサーバーのみになります。
Sansan のビデオ会議アプリでは、Microsoft GraphAPI*5 で参加者情報を取得していて、図のような連携も行っています。
Microsoft Teams で登録したカレンダーの情報やビデオ会議の参加者の情報を取得したりしようとする場合は、別途 Azure AD を作成する必要などが出てきます*6。

ビデオ会議アプリの全体像

ビデオ会議アプリの作り方

1. manifest.json を作成

manifest.json とは、Microsoft Teams 用のアプリの概要を記載する JSON ファイルです。
今回のサンプルで利用する manifest.json は以下のようになります。
ビデオ会議アプリを出すのに関係する項目は、configurableTabsの中の内容になるので、ビデオ会議に関する設定を変更したい場合は、個々の内容をドキュメントを確認しながら調整していくことになります。
ロゴや翻訳用の JSON ファイルは適当なものを用意していただけたらと思います。
また、各環境毎に書き換えが必要なところは環境に合わせて置き換えていただけたらと思います。

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
    "manifestVersion": "1.9",
    "version": "1.0.0",
    "id": { 指定の形式の適当な ID },
    "packageName": "com.example.myapp",
    "localizationInfo": {
        "defaultLanguageTag": "ja",
        "additionalLanguages": [
            {
                "languageTag": "en",
                "file": "en.json"
            },
            {
                "languageTag": "zh",
                "file": "zh.json"
            }
        ]
    },
    "developer": {
        "name": { 開発者名 },
        "websiteUrl": { ユーザーまたは会社の LP の URL },
        "privacyUrl": "{ プライバシーポリシーページの URL },
        "termsOfUseUrl": { 利用規約ページの URL }
    },
    "icons": {
        "color": "sbb_192x192.png",
        "outline": "sbb_32x32.png"
    },
    "name": {
        "short": "SBB Sample",
        "full": "SBB Sample"
    },
    "description": {
        "short": "ビデオ会議アプリのサンプルを作ります。",
        "full": "■ ビデオ会議アプリのサンプルを作ります。"
    },
    "accentColor": "#FFFFFF",
    "configurableTabs": [
        {
            "configurationUrl": { 下の項目で追加する画面の URL },
            "canUpdateConfiguration": true,
            "scopes": [
                "team",
                "groupchat"
            ],
            "context": [
                "channelTab",
                "meetingChatTab",
                "meetingDetailsTab",
                "meetingSidePanel"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        { localhost }
    ]
}

参考

マニフェスト スキーマ参照 - Teams | Microsoft Docs

2. JavaScript Microsoft Teams SDK を追加

こちらの SDK は、Microsoft Teams の情報へのアクセスを可能にします。
以下のコードでは、アプリを保存した後に追加されるタブにどの画面を表示するかを指定しています。

<script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js"></script>
<script>
    microsoftTeams.initialize(function () {
        microsoftTeams.appInitialization.notifySuccess();
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                entityID: "SBB Sample",
                contentUrl: { 追加されたタブに表示する画面のURL },
                suggestedTabName: "SBB Sample",
            });
            saveEvent.notifySuccess();
        });
        microsoftTeams.settings.setValidityState(true); 
    });
</script>

注: この例では SDK バージョン 1.10.0 を使用しています。コードが期待どおりに動作しない場合は、使用しているバージョンを確認してください。

この時点で 1の manifest.json とアイコンの画像データ(sbb_192x192.png, sbb_32x32.png)と翻訳用の JSON ファイル(en.json, zh.json)をまとめて圧縮することで Microsoft Teams にアップロードする zip ファイルを作成できます。

Microsoft Teams の「カレンダーから予定を作成 > 作成した予定を編集 > +アイコンを押下(タブを追加) > アプリを管理 > カスタムアプリをアップロード」から zip ファイルをアップロードすることができます。

参考

JavaScript クライアント SDK でタブやその他のホストされたエクスペリエンスを構築する - Teams | Microsoft Docs
Settings interface - Teams | Microsoft Docs

zip アップロード後に表示されるモーダル

contentUrl で指定した画面がタブに表示される

3. SidePanel かどうかを判定

2の項目で contentUrl に指定した画面でさらに以下のコードを追加する必要があります。
再度 SDK を利用して frameContext を取得することで、表示されている画面のタイプを判別することができます。
ビデオ会議中に画面のサイドパネルに表示されるアプリ画面の場合、frameContext が sidePanel になります。
以下のコードで frameContext によって表示する画面を分けているのは、アプリのタブに表示される画面とビデオ会議のアプリに表示される画面は同じなので、sidePanel の場合のみ別画面にリダイレクトするようにしています。

<script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js"></script>
<script>
    microsoftTeams.initialize(function () {
        microsoftTeams.getContext(function (context) {
            let frameContext = context.frameContext || "";
            if ('sidePanel' === frameContext) {
                location.href = { アプリに表示する画面のURL };
            } else 
                // このタイミングでタブに表示する画面の要素を visible にする
            }
        });
    });
</script>

ここまで完了したら、2の項目の手順でアプリをアップロードした後、「再度+アイコンを押下 > 追加したアプリを選択する > 表示されるモーダルの保存を押下」で予定のタブに追加したアプリ名のタブが表示され、2の項目で指定した contentUrl に指定した画面が表示されます。

作成したアプリのタブが追加された状態で、対象の予定のビデオ会議に参加すると、zip に圧縮したアイコンがタブに追加されています。
このアイコンを押下すると、上で指定した「アプリに表示する画面のURL」が表示されます。

アプリ追加時に表示されるモーダル

ビデオ会議に表示されるアイコン

ビデオ会議のサイドパネルに表示される画面

最後に

今回のビデオ会議のアプリを開発者プレビュー版で追加することができるようになったのは、今年の2月頃からだったので、参考にできるドキュメントもサンプルコードもほとんどなかったため、ここまでの動きを再現するのにも多少苦労しました。。。

上記のビデオ会連携では、今回ご紹介した Microsoft Teams に関係する技術の他にも Microsoft の GraphAPI や AdaptiveCard Message などを利用していたりもするのですが、特に情報が少なくハマる人が多そうなアプリの表示までの流れをご紹介させていただきました。
これから Microsoft Teams ビデオ会議のアプリを作成しようとされている方の参考になれば幸いです。

最後まで読んでいただき、ありがとうございました！

buildersbox.corp-sansan.com

*1:Microsoft Teams のストア公開対応が完了していないため、まだストアからアプリを追加することはできません。。。

*2:オンライン名刺とは、インターネット上で名刺交換を実現するための機能です。

*3:Microsoft Team デスクトップアプリでのみ利用可能です。

*4:ビデオ会議アプリに表示する内容は zip で定義した Web ページを Microsoft Teams 内で iframe で表示しています。

*5:Microsoft Graph API を使用する - Microsoft Graph | Microsoft Docs

*6:クイック スタート:Azure Active Directory (Azure AD) テナントにアプリケーションを追加する | Microsoft Docs