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

　Microsoft Teamsのタブ機能はiframeでWebサイトを表示することで実装します。

　Teamsクライアントから情報を取得する場合 Teams JavaScript client SDKなどを利用してJavaScriptで書くわけで、ブラウザみたいな開発者ツール(F12で起動するアレ)があると便利。

　TeamsにもDevTools for Microsoft Teams tabsというのが存在し、これを利用するとJavaScriptのデバッグが楽になります。

　まんまF12で起動するアレですね。

開発者向けプレビューを有効にする

　現時点(2020年8月25日)では、Teamsの開発者向けプレビューを有効にしないとDevToolsは利用できません。

　開発者向けプレビューはクライアントアプリ毎に有効無効を変更します。

（事前にMicrosoft 365管理センターから、アプリケーションのサイドローディングを許可している必要があるかもしれません）

　Teamsクライアントの右上のアイコンから・・・

　「情報」→「開発者プレビュー」をクリックします。

　「開発者プレビュー版への切り替え」をクリックすることで開発者プレビューに変更することができます。

　この際にTeamsクライアントが再起動し、再ログインが必要になります。

DevToolsの起動

　DevToolsの起動はタスクトレイから行います。

　デバッグしたいタブを開いた状態で、タスクトレイのTeamsアイコンを右クリック→「DevToolsを開く」で起動することができます。

　うん、便利。

Tweet

　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に必要な項目が設定されたマニフェストファイルが転送されるのだ。

Visual StudioのMicrosoft Teams Toolkitウィンドウで編集すると・・・

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 :-)';
});

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

Tweet

　初めてTeamsのアプリを作成する！　という場合に、Microsoftの公式ドキュメントを眺めて、チュートリアルを動かしてみる方も多いと思います。

　チュートリアルを書かれている場合通りに実行していく場合、表示言語に気をつけてください。

　例えば、C#のチュートリアルを試してみる場合、以下のURLのページに解説があります。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/tutorials/get-started-dotnet-app-studio

　日本語翻訳と英語の原文で項目が異なっていることがあります。

　該当箇所を英語と日本語並べてみると・・・

　コマンドIDはサンプルの動作に影響がある項目なので「getRandomText」である必要があるのですが、日本語版だと「Ge/domtext」と表示されています。

　この語、ちゃんと翻訳が見直されて正しく編修される可能性もありますが。こういうこともある、ということを念頭に置くと良いと思います。

Tweet