眠るシーラカンスと水底のプログラマー

　Microsoft Teamsのカスタマイズアプリケーションを作成する方法の1つにタブがある。

　Microsoft Teamsに個人用またはチーム、チャネルにタブとしてWebページを表示する仕組みです。

　個人用とそれ以外の違いはまたの機会に紹介するとして、まずはサンプルを元に個人タブの動作を確認してみる。

 

Toolkitの導入

 

　Visual Studio∔C#で開発する場合は「Microsoft Teams Toolkit for Visual Studio」を入れておくと、ある程度ひな形ができた状態から開発を開始できる。

　とはいえ、ASP.NET MVCにマニフェスト用のJsonファイルと、Teams内で動かすためのJavaScript SDKの記述を加えただけなので、無くてもそんなに苦労はしない。

 

　最小限∔αのアプリケーションを作成して、変更点を確認するにはもってこいなので、今回はToolkitのテンプレートを利用す。

 

プロジェクトの作成

 

　Toolkitで追加されたプロジェクトテンプレートを利用する。

　「Microsoft Teams App」というテンプレートがあるので選択。

 

　この辺は毎度のプロジェクトの設定項目なので、説明は割愛。最初に入力された値のままでもOK。　

 

　Tab機能を使いたいので「Tab」にチェックを入れる。

　ひな形としてコードが追加されるだけなので、作成後にBotなどを追加できないわけではない。

 

　「Personal tab」にチェックを入れて個人用のタブだけ確認してみる。　

　これで最低限の機能を持った個人用タブのプロジェクトが作成できる。

 

Webアプリケーションとして動かしてみる

 

　プロジェクトの構成が下の画像のようになっているので注意。

　「IIS Express + Teams」だとブラウザーが起動して実行結果が表示されない。アプリケーション自体は動いているのだが、ブラウザーは立ち上がらないので、まずはIIS Express + Browserでデバッグしてみる。　

　起動するとブラウザーには「Teams client host not found」と表示される。

　この部分はJavaScriptで以下のように判定している。

　(Index.cshtml)

    if (window.parent === window.self) {
        message.innerText = 'Teams client host not found.';

 

　Teamsというかiframeかどうか見ている感じ？

 

ローカルのTeamsにインストールする

 

　このアプリケーションをサクッと動作確認するだけなら、同じローカルで起動しているTeamsクライアントにアップロードすることができる。

　TeamsクライアントはOffice365の組織アカウントと紐づいたMicrosoftアカウントでサインイン済みで、かつサイドローディングが許可されている必要がある。

 

　Microsoft Teams Toolkit for Visual Studioのテンプレートには1つ便利な機能があって、

　プロジェクト作成時に導入される「Microsoft Teams Toolkit」というウィンドウで「Edit app package」でアプリケーションのパッケージ用のマニフェストを編集するとローカルで起動しているTeamsクライアントのApp Studioに必要な項目が設定されたマニフェストファイルが転送されるのだ。

 

　まぁ、勝手に追加さるのが迷惑といえなくもないが。以下のようなマニフェストファイルが作られる。

　もちろん、App Studioで自分で設定してもいいけど、マニフェストファイルのJSONのルールに慣れないうちはありがたい。

 

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",
  "manifestVersion": "1.7",
  "version": "1.0.0",
  "id": "56a863ec-b3e3-476e-920f-9df7d8bb70bc",
  "packageName": "com.microsoft.teams.extension",
  "developer": {
    "name": "Developer Name",
    "websiteUrl": "https://localhost:44310",
    "privacyUrl": "https://localhost:44310/home/Privacy",
    "termsOfUseUrl": "https://localhost:44310/home/termsofuse"
  },
  "icons": {
    "color": "color.png",
    "outline": "outline.png"
  },
  "name": {
    "short": "TeamsTabSample002",
    "full": "TeamsTabSample002"
  },
  "description": {
    "short": "Short description for TeamsTabSample002",
    "full": "Full description of TeamsTabSample002"
  },
  "accentColor": "#FFFFFF",
  "configurableTabs": [
    {
      "configurationUrl": "https://localhost:44310/home/config",
      "canUpdateConfiguration": true,
      "scopes": [
        "team",
        "groupchat"
      ]
    }
  ],
  "staticTabs": [
    {
      "entityId": "index",
      "name": "Personal Tab",
      "contentUrl": "https://localhost:44310",
      "scopes": [
        "personal"
      ]
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "localhost:44310"
  ]
}

 

　あとはTeamsクライアントのApp Studioで今回のアプリケーションを選択し「Test and distribute」タブから「Install」すればOK。

 

インストールしたアプリケーションを動かす

 

　インストールしたアプリケーションはTeamsクライアントの左アイコンの下部にある三点リーダー「・・・」をクリックしてアプリケーションを選択すればOK。

　Webサイトのページがiframeで表示されます。

　今回は個人用タブだけだったので、アプリケーションを起動できるのはここからのみ。

　表示するとWebアプリケーション側でTeamsクライアントの情報であるユーザーアカウントが取得できていることがわかります。

　処理を行っているのはローカルで起動しているASP.NETアプリケーションの以下のJavaScript。

 

(index.chtml)

// Get the current Teams context for the tab
microsoftTeams.getContext((context) => {
    message.innerText = 'Congratulations ' + context.upn + '! This is the tab you made :-)';
});

 

　個人用タブ以外のタブも使いたい場合は、もう少し覚えることが出てくるけど、今回はここまで。