[Microsoft Teams] Developer Portal を使う(App Studio 編)

Microsoft Teams からインストールできるアプリに「Developer Portal」というものがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/6a6cf070-aa2d-c5d5-d3d8-5e589681d103.png)
これは開発者向けツール集なのですが、非開発者や市民開発者向けのツールもありますのでご活用ください。

このアプリは「App Studio」として公開されていた（いる）アプリの後継になります。「App Studio」はサードパーティ製アプリとして公開されていますが、「Developer Portal」はファーストパーティ（Microsoft アプリ）として公開されています。また、 App Studio 内で Manifest Editor と呼んでいたものが Developer Portal では App Studio と呼んでいます。

なので、以下 App Studio と記載してあるものは「Developer Portal にあるマニフェストを作成するツール」のことだと思っていただければと思います。

# マニフェストって？

そもそもマニフェストって何か、ということですが、Microsoft Teams 上で動作するアプリの正体はすべてWebサービスのことです。要するにタブだろうがボットだろうがコネクタだろうが、何らかの形で https://～～～ といった URL アクセスしてリクエストしたりレスポンスを受けたりしているのです。
マニフェストでは「このアプリはボットなのか？タブなのか？」といった情報や「どこの URL にアクセスするのか」といった情報が、JSON形式で記載されています。それに加えてアプリのアイコンの画像ファイルが２点（色付きのものと透過のもの）を用意し、ZIP形式でまとめます。
（その他ローカライズメッセージも格納できます）
このZIPファイルを「カスタムアプリ」と呼んでいて Microsoft Teams クライアントや管理センターからアップロードすることによって Teams 上で利用可能になります。

# マニフェストを作成してみる

まずは Developer Portal を起動し、 App Studio タブをクリックしてみます。[Create a new app]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/53d1e2d5-f77b-76ca-59e9-33675c36c3d7.png)

以下のような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/3f89f6be-6f4d-dbc3-78ca-426bab6303d2.png)

## App Details
まずはアプリに関する情報 [App Details]を埋めていきます。結構な項目が必須項目になっていますので頑張って埋めていきましょう。

**Short name** アプリの名前（短いもの）です。
**Full name** アプリの名前（長いもの）です。略称と正式名称のように分けるとよいでしょう。領域によってどちらが表示されるかは変わります。
**App ID** アプリのIDです。一意であればなんでもよいので、 Generate ボタンを押して作成されたGUIDをそのまま利用してください。特に Azure アプリ登録したものを使わなければならないということはありません。
**Package name** パッケージ名です。一般的には会社名.作者名.アプリ名といったようになります。 com.onmicrosoft.contoso.app1 のようにドメイン名を逆に書いたような（？）形式が良いと思います。
**Version** バージョンは1.0.0のようにメジャーバージョン、マイナーバージョン、パッチバージョンの順にドットで区切ります。
**Short description** アプリの説明文です、インストール時や情報を参照したときに表示されます。
**Full description** アプリの説明文（長いほう）です。
**Developer/Company Name** アプリを作った人の名前です。
**Website** その人（会社）のURLを記載します。
**Partner Information (MPN ID)** パートナーでなければここは空白で問題ありません。
**Privacy Statement** 個人情報の扱いに関する記載があるURLを記入します。アプリからハイパーリンクが生成されます。
**Terms in use** アプリの利用方法などが記載されているURLを記入します。こちらもアプリからハイパーリンクが生成されます。

以下はアイコン/テーマカラーになります。
**Full color** アプリのアイコンになります。インストール時やBotの場合は顔写真部分などいろいろなところで表示されます。サイズは192x192でpng形式になります。
**Transparent Outline** 透過アイコンになります。例えばTeamsの左側（個人タブ）に表示されるようなアイコンです。こちらは32x32と小さめになります。
**Accent Color** アプリのテーマカラーを選択します。

## Capabilities (Tab)

どのタイプのアプリとして動作するのかを定義します。詳細は別のエントリーで書こうかと思いますが、 Teams アプリは大別すると以下のようになります。
- タブ…チャネルの上部や各ユーザーの左側にピン止めされるアプリのこと
- ボット…何か話しかけると何かを返してくれるアプリのこと
- コネクタ…チャネルに対してメッセージを放り込んだり、チャネルからメッセージを送ると何らかの処理をするアプリのこと
- メッセージ拡張…メッセージを投稿するときに検索したりカード形式にしてくれるアプリのこと

一つのアプリで複数の機能を持たせることができます。例えば一つのアプリをタブ＆ボットとして動作させることができます（＝ピン止めしつつ話しかけられるアプリ）。ここではタブアプリを作成してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/5569dd76-7a32-71d9-618e-5d7d1d9c19f2.png)

Team Tab はチーム内のチャネルやグループチャットで利用するタブのことです。構成ページという設定情報を入力するページと実際にタブとして表示するページを用意する必要があります。なのである程度開発が必要になります。
Add a personal tab は個人用タブであり、iframeに対応したWebページを指定すればいいだけなので比較的容易に実装できます。今回はこちらを指定してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/63d54efb-bdbb-1783-8391-56e38c7377b1.png)

**Name** タブの名前です。
**Entity ID** 一意に識別する文字列です。アプリ内の他のタブと重複していなければ何でもよいので「１」とかでも構いません
**Content URL** タブ内で表示するURLです。例ではhttps://www.bing.comを指定します（Bingはiframeに対応しています）
**Website URL** Webブラウザを起動してアクセスするアイコンが表示されるのですが、そちらをクリックした場合に表示されるURLを指定します。例のようにContentURLと同じものを指定しても構いませんし、別のURLでも大丈夫です。

設定したらSaveします。以下のようになりました。（せっかくのでもう一つ、SharePointのURLを設定しておきました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/1d1af572-37be-4705-519e-652c46d0ec2f.png)


## マニフェストの生成

さて、実際に生成されるマニフェスト（JSON)を見てみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/cd7a001a-71c8-ddb4-cebf-a575a1c1d8fc.png)

ざっと確認したらZIPファイルを生成します。　Test and Distributeをクリックして、Downloadをクリックします。ここまでで何か不備があるとエラーメッセージが表示されているはずですので修正してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/c82ab83f-6228-4dc3-bf2c-ac174c5a446c.png)

# アプリの追加（ユーザー操作）

さて、個人タブアプリを生成したのでこれを利用してみましょう。この操作をするためには「カスタムアプリのアップロード」が許可されている必要がありますので、管理者がこの操作を禁止していた場合はできません。

[アプリ]->[アプリを管理]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/5a0a0115-3554-b801-2b39-a2b74a6f0b03.png)

カスタムアプリをアップロードを選択し、先ほどのZIPファイルを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/857781e3-3c88-50eb-2d7a-898f19e242f5.png)


アプリ名や説明、アイコンなど先ほど設定したものが表示されています。[追加]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/d3f8acfa-17dd-1849-8ba4-5616674909bf.png)

表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/833a2f09-54b5-96c4-5979-3a2bef9e0259.png)

# アプリの追加（管理者操作）

例えば、社内ポータルサイトなどを個人タブに追加しておいて、管理者が「強制ピン止め」をすることができます。

Teams管理センターから[アプリの管理]をクリックし、アップロードをクリックします。先ほどのZIPファイルをアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/13e5bd37-2672-fcfa-5d33-779740622e5b.png)

[アクセス許可ポリシー]でしかるべき人が当該アプリを利用できるようにします。例えば下記のようにカスタムアプリで「特定のアプリを許可する」にしたり、「すべてのアプリを許可する」にしたりです。そのようなポリシーを、アプリの利用を許可する人に割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/ebdbce5b-fcd4-ae0b-2218-564c56ba93b0.png)

[セットアップポリシー]でポリシーを選択し、インストール済みアプリに当該アプリを追加し、ピン止めされたアプリにも追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/edcdfbdb-4595-fef8-323e-0714984b14dd.png)

↑上に移動と↓下に移動を駆使して、適切な位置にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/4c42fa3d-4f7f-72b1-736f-65e047cc5083.png)

少し時間はかかりますが、Teamsにサインインするとアプリが強制ピン止めされることが確認できます。

# 応用

タブアプリとして追加できるのはiframe対応のWebページになります。例えばBingはできますがyahooはできません。
上記の例ではSharePointサイトもタブにしていますが、PowerAppsアプリもiframeに対応しておりタブ化できます。

以下のようにPowerAppsホームからアプリを選択し、「・・・」からダイレクトにマニフェストを作ることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/a219d0e9-b510-1d73-2ab9-b3a6478a2ee5.png)

それとは別に詳細をクリックしWebリンクのURLを取得することで App Studio からタブアプリ化することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/3e519ebd-969e-a1d4-792e-edb5dafe651b.png)

すると、以下のように一つの個人タブアプリとしてPowerAppsアプリをまとめることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2095776/97d77711-2dd6-85f5-a0a5-a439b84c24f2.png)

# まとめ
Developer Portal は主に開発者向けのツールですが、SharePointサイトやPowerAppsアプリをTeamsタブアプリ化できるので、管理者がユーザーがTeamsから容易にアクセスできるようにする、ということができるようになります。