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

　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

　開発中のアプリをTeamsにインストールする場合、Microsoft 365管理センターで設定を変更してサイドローディングを許可してあげる必要があります。

　設定してないと下の画像のように「このチームに{App Name}を追加するためのアクセス許可がありません。」と表示されます。

Teams上で開発中のアプリをインストールする画面

　Microsoft 365管理センターで設定を変更するための管理者アカウントが必要になるわけですね。

　(開発用のMicrosoft 365アカウントでも可能だと思いますが、とりあえず手元にあるMicrosoft 365アカウントでやってみました)

(Microsoft 365 管理センター)

https://admin.microsoft.com/

　Microsoft 365管理センターにサインインします。

　続いて、「ホーム」の「基本」項目にあるMicrosoft Teams欄の下部「Teamsを管理する」をクリックします。

　画面右にメニューが表示される(下画像)ので、　

「‎Teams‎ 管理センターに移動して追加の設定を管理する」をクリックします。

　左のメニューから「Teams のアプリ」を展開し「セットアップポリシー」をクリックします。

　表示された「アプリの設定ポリシー」から「グローバル（組織全体の規定値）」をクリックします。

*ポリシーが複数ある場合は、組織の運用に従って適切なポリシーを選択する必要があるかも？

　「カスタムアプリをアップロード」の項目をオンに変更します。

　ページ下部の「保存を」クリックして変更を保存します。

　すぐには反映されないので最大24時間待ちます。私の場合は2時間ぐらいで反映されました。

　Teams側で下画像のように「追加」ボタンが押せるようになっていればOK。

　機械翻訳っぽいけど公式のドキュメントも掲載しておきます。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant

Tweet