【Teamsアプリ開発】Developer Portal/App Studioでアプリをパッケージ化する手順【完全ノーコード！】

おはようございます。今日は、Developer Portal / App Studioを使ってノーコードでTeamsアプリのパッケージ化を行う手順について備忘メモを残しておきたいと思います。

なお、今回はより新しいDeveloper Portalを使っていますが、設定項目などはほぼほぼ同じかと思います。

それではまいります！

Contents

Developer Portal / App Studioって？

という方は、先日以下の記事にまとめたのでご参照ください。

【Teamsアプリ開発】App StudioとDeveloper Portalの違い【何が変わったの？】

事前準備

事前に以下のものが準備されている前提で進めてまいります。

Teamsアプリ（今回は、Azure Bot Serviceで作ったボットアプリがAzure上にある状態からスタートしています）が用意されている
Teamsクライアントで、Developer Portalアプリがインストールされている

Teams アプリパッケージとは？

そもそもTeamsのアプリパッケージとは何でしょう？公式Docに説明があります。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/concepts/build-and-test/apps-package

Microsoft Teams アプリの配布を計画している場合は、アプリパッケージが必要です。有効なパッケージは、次を含む ZIP ファイルです。
アプリマニフェスト: アプリの機能、必要なリソース、その他の重要な属性など、アプリの構成方法について説明します。
アプリアイコン: 各パッケージには、アプリの色とアウトラインアイコンが必要です。
公式Docより

加えて、下にも説明がありますが、アプリパッケージは、別にアプリの実体を含むものではないようです。一般的にはサービス自体はクラウド上などで稼働しており、Teamsアプリパッケージでは、そのサービスへの接続情報や、Teams上でアプリとして展開する際の説明文やアイコン、といったメタ情報をまとめたもの、のようです。

それではこのパッケージをノーコードで作成していきたいと思います。

アプリをパッケージ化する手順

ノーコードでパッケージ化できるツールとして、Developer Portal / App Studioが使えます。今回はより新しいDeveloper Portalを使った手順を解説しています。

また、以下の手順で設定する項目の意味については、manifest.jsonの定義ドキュメントの中でも確認することができそうです。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/resources/schema/manifest-schema

新規Teamsアプリを作成する

Developer Portalから新しいアプリの作成に進みます。最終的には、このTeamsアプリに事前に作成していたBotを紐づけるイメージです。

アプリ名を入力します。このアプリ名は、Teamsでアプリを検索した際にアプリ名として表示される名称になります。

すると、ガラはできました。

基本情報を登録する

今回の入力内容

ご自由に入力ください。
アプリケーションID、MPN IDは必須でないため入力しませんでした。

基本情報では以下の情報を記入します。うーむ、UI上の注釈をみるだけだと、何が実際にどう反映されるのか、どういう役割を果たすのかよく分かりにくいですよね、、

下で、公開後のアプリと見比べてそれぞれどこに反映されているのか確認していますので、参考になりましたら。

登録する内容

” “はUI上の注釈

項目	内容
アプリ名 – 短い名前	アプリの名称。30文字以内。
アプリ名 – フルネーム	“優先する名前が 30 文字を超える場合は、こちらにより長い名称を登録しておけます。”100文字以内。
アプリID	TeamsアプリのアプリID。アプリ作成後、テナントのAzure ADのアプリ登録一覧からも確認することができます。デフォルトで生成されているので変える必要はないのではないかと思います。
説明 – 短い説明	“短い説明と長い説明は異なっている必要があります。アプリを Teams ストアに公開する場合、提出物の説明はここの説明と一致する必要があります。” アプリの説明。
説明 – 詳細な説明	アプリの詳細説明。4000文字以内。
バージョン	アプリのバージョン。
開発者情報 – 開発者または会社の名前	開発者または会社の名前
開発者情報 – Web サイト	開発者情報が分かるWebサイトのURL
アプリの URL – プライバシーポリシー	“プライバシーポリシーと利用規約へのリンクを提供する必要があります。リンクのベストプラクティスに関する詳細情報をご覧ください。“ プライバシーポリシーが書かれたWebサイトのURL
アプリの URL – 使用条件	アプリ使用条件が書かれたWebサイトのURL
アプリケーション (クライアント) ID*	“Specify the app ID assigned when you registered your app with Azure Active Directory.”
Microsoft Partner Network ID	“Microsoft Partner Networkに参加している場合は、MPN ID を指定してください。 Microsoft との提携に関する詳細情報をご覧ください。“ Microsoft Partner Networkに参加している企業の場合は、こちらを設定することができるようです。MPNについては、こちらに日本語の分かりやすい整理がありました。が、ここにIDを指定すると何が起こるのでしょう・・？Docに記載もないので不明です・・笑

メモ

例えば、以下のように入力してみると、リリース後、アプリのどの部分に反映されるのでしょうか。

まずはアプリ一覧。「アプリ名 – 短い名前」と「開発者または会社の名前」情報が反映されています。「アプリ名 – フルネーム」については確認することができませんでした。どこかで使われるんだろうか・・？

続いてアプリの詳細（インストール）画面。「短い説明」と「詳細の説明」が反映されていますね。その他、プライバシーポリシーや使用条件もリンクになっていて、クリックすると指定したURLに遷移するようになっています。

ブランドを登録する

続けてブランドの登録です。

今回の入力内容

アイコンは規定値のままとしました。アクセントカラーは、テストのため、適当なVividな色に変えてみました。

登録する内容

項目	内容
カラーアイコン	ストアや、ほとんどのシナリオで表示されます。アイコンは合計 192×192 ピクセルで、中央に 96×96 ピクセルの記号が配置されている必要があります。
アウトラインアイコン	アプリを使用しているときは、主に Teams の左側に表示されます。アイコンは 32 x 32 ピクセルで、白または透明にする必要があります。
アクセントカラー	プライマリアクションとその他のアプリ UI コンポーネントを表示します。

メモ

カラーアイコンは、以下のようにアプリ一覧や詳細画面で見かけることになります。アクセントカラーは、アイコンの背景色になるようですね。

アプリの機能を構成する

続けてアプリ機能の構成です。

今回の入力内容

ボットを追加しました。
ボットのIDには、作成済Azure Bot ServiceのアプリIDを設定しました。
スコープはすべて選択しました。

登録する内容

今回は、ボットアプリなので”ボット”を選択します。ここで設定する内容は以下の通り。

項目	内容
ボットID	ここに、既に作成済のボットアプリのアプリIDを指定します。Azure Bot Serviceを利用したアプリの場合、Azure Bot Serviceリソースの”構成”から確認できます。
ボットで何ができますか?	ボットに以下の機能をプラスアルファする場合には有効化しておきます。・ファイルをアップロードしてダウンロードする・通知の送信のみ (一方向の会話) ・音声通話をサポート・ビデオ通話をサポート
ユーザーがこのコマンドを使用できるようにする範囲を選択してください	チャットボットの利用スコープを以下から選択できるようです。・Personal ・Team ・Group Chat
コマンド	ボットの動作を決定するコマンドを含めます。

上記は以下のスキーマ定義と対応しています。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/resources/schema/manifest-schema#bots

メモ

ボットスコープが動作に与える影響

ここはどう動作が変わるのか調べ中です。指定したスコープでだけボットがメンションできるのかなと推測していましたが、何も指定しなくても各スコープにボットを追加してメンションできる模様・・謎だ・・

その他気になること

とここで気になる動作を見つけました。ボットのスコープの”Personal”にチェックを入れた場合だけ、アプリ機能に「個人のアプリ」が自動追加されています。

Personalにチェックをいれると・・・

「アプリの機能」で「個人用のアプリ」機能が自動的に追加されている模様。

中をのぞいてみる。

ふむ・・これを追加することで具体的に何ができるようになっているのか、まだ検証できていないので分かったら更新します。

権限を設定する

続いてアプリに付与する権限の設定です。チャネル/チャット/会議/ユーザの単位でそれぞれ構成できるようです。

今回の入力内容

今回のボットアプリの場合は、いずれの操作も発生しないので、特に何も設定しません。

登録する内容

項目	内容
デバイスのアクセス許可	“アプリをユーザーのデバイス機能と統合します。ユーザーはアプリを追加するときに選択したデバイスのアクセス許可に同意します。デバイスのアクセス許可に関する詳細情報をご覧ください。“ 例えばアプリでユーザの位置情報を取得する必要がある場合などには、これらの権限を規定で（インストール段階で）許可しておくことができます。
Team Permissions	“Select permissions specific to a team instance. チームとチャットのアクセス許可に関する詳細情報をご覧ください。“ アプリが、チャネルに関する操作（情報取得、更新、削除等）を必要とする場合に、構成が必要なように見受けられます。
Chat/Meeting Permissions	“Select permissions specific to a chat/meeting instance. チームとチャットのアクセス許可に関する詳細情報をご覧ください。“ 上のTeam Permissionsと同様ですが、こちらはチャネルではなくチャットや会議の構成に関する操作を行う際に必要となりそうです。
User Permissions	“Select permissions specific to a user instance.” こちらはTeamsユーザの構成に関する操作を行う際に必要となりそうです。