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

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

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

それではまいります!

Contents

Developer Portal / App Studioって?

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

事前準備

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

  • 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上でアプリとして展開する際の説明文やアイコン、といったメタ情報をまとめたもの、のようです。

公式Docより

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

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

ノーコードでパッケージ化できるツールとして、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文字以内。
アプリIDTeamsアプリのアプリ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ユーザの構成に関する操作を行う際に必要となりそうです。

言語を設定する

次に言語の設定です。UI上の注釈にもリンクがありますが、この設定によりTeamsアプリのローカライズが可能なようです。

今回の入力内容

Japaneseを追加してみました。(追加しなくても問題ありません)

メモ

例えば日本語を追加してみます。すると、選択した地域(日本語の場合、デフォルトで日本)のユーザがアプリを閲覧するときには、以下のフォームで設定した内容で詳細情報が表示されるように制御できるようです。

シングルサインオンの構成を設定する

続いてシングルサインオンの構成。

今回の入力内容

構成していません。

登録する内容

メモ

ちょっとこいつは別記事で検証してみようと思います。SSO連携の公式Docだけはっておきます。

https://docs.microsoft.com/ja-jp/microsoftteams/platform/bots/how-to/authentication/auth-aad-sso-bots

ドメインを設定する

最後にドメインの設定。

今回の入力内容

構成していません。

登録する情報

メモ

これも今後必要になったら検証してみます。今回のサンプルアプリでは登録しなくとも動きましたのでいったん放置。Docだけ貼っておきます。

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

ここまででパッケージ化の手続きは完了です!お疲れ様でした!

アプリパッケージの中身をみてみる

ちなみに、上の手順を経て作成したアプリパッケージの実体はどのように構成されているのでしょうか。Developer Portalからアプリパッケージをダウンロードしてみます。

なんと、この4ファイルだけ・・!アプリの構成情報はmanifest.jsonとja-jp.jsonに含まれています。(ja-jp.jsonはローカライズ設定で言語”日本語”を追加したために作成されています)

シンプルですね。

manifest.jsonの構成はこちらから確認できます。

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

パッケージ化できたら・・

パッケージ化できたら、次はテストまたは公開へ進んで行くことになるかと思います。Developer Portalでは、以下のオプションが用意されています。

こちらは、また別の記事で解説したいと思います。この記事はいったんここまでとしたいと思います。

はじめてのパッケージ化作業、分からない設定項目だらけすぎて疲れた・・この記事が少しでもお役に立ちましたら下の「いいね」をポチっていただけますと励みになります!

それではまた!

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。