[Teams App Template]リモートサポートを使ってみた

はじめに

• Teams App templateのリモートサポートを作ってみます。
• guthubの翻訳記事
• 作り方の参考動画

前提準備

• 次のサービスを作れるAzureサブスクリプションを用意
  • App service
  • App service plan
  • Bot channels registration
  • Azure storage account
  • Azure search
  • Application Insights
• エキスパート用のMicrosoft Teamsのチーム
• Remote support用のアプリGit URL

ステップ１：Azure AD applicationsの登録

1. Azure portalにログインして、[ここ](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps)から「アプリの登録」に進む 2. 「新規登録」をクリックして、Azure AD applicationを作成 3. 名前 - Teamsアプリの名前。「リモートサポート」とか。 4. サポートされているアカウントの種類 - 任意の組織ディレクトリ内のアカウント (任意の Azure AD ディレクトリ - マルチテナント) 5. リダイレクトURI - 空欄  3. 「登録」クリック 4. アプリが登録されたら、「概要」ページに遷移。あとで使うので、アプリケーション(クライアント)IDをコピーしておく。サポートされているアカウントの種類が複数の組織であることを確認  5. 管理セクションから証明書とシークレットをに遷移。 + 新しいクライアントシークレットをクリック。説明を入力し、有効期限を選択したあと、「追加」をクリック  6. シークレットが作成できたら、値をコピーしておく

ここまでで3つの値が生成できている

• ボット用アプリケーション（クライアント）ID
• ボット用クライアントシークレット
• ディレクトリ（テナント）ID

ステップ２：Azureサブスクリプションにデプロイ

1. [カスタムデプロイ](https://portal.azure.com/#create/Microsoft.Template)をクリック 2. Azureサブスクリプションにログイン 3. エディターで独自のテンプレートを作成するをクリック 4. [azuredeployment.json](https://github.com/OfficeDev/microsoft-teams-apps-remotesupport/blob/master/Deployment/azuredeploy.json)をコピーして貼り付け、「保存」をクリック 5. 入力したテンプレートに基づいて、パラメータの入力が促される  6. リソースグループの選択 * 新しいリソースグループを作成することを勧めます * リソースグループはApplication InsighsとAzure Searchをサポートしているデータセンターを選択しなければならない。確認は[こちら](https://azure.microsoft.com/en-us/global-infrastructure/services/?products=logic-apps,cognitive-services,search,monitor) 7. Base Resource Nameの入力 * Base Resaource Name、Base Resouce Name-congは他で使われていてはならない

1. 各種IDを入力

   • Bot Client ID: アプリケーション（クライアント）ID
   • Bot Client Secret: ボット用クライアントシークレット
   • Tenant ID: ディレクトリ（テナント）ID
   • Team link: ボットを加えるTeamsリンク

2. 「確認および作成」をクリックし、検証が終わったら「作成」をクリックしてデプロイメントが開始される
   

3. Azureポータルの通知で状況確認ができる。１０分ぐらいで完了する

4. デプロイメントが成功したら、Outputsをクリック。3つの値が得られる

   • botId - リモートサポートボットのアプリケーションID
   • appDomain - リモートサポートボットのベースドメイン
   • configurationAppUrl - webアプリケーション設定用のURL

ステップ３：Teamsアプリパッケージの作成

1. テキストエディタでManifest\manifest_enduser.jsonを開く

2. 自分用の適切な値にplaceholderを変更する

   • developer.name developer.nameとは
   • developer.websiteUrl
   • developer.privacyUrl
   • developer.termsOfUseUrl

3. はBot Client IDに変更

4. validDomainsセクションのは[BaseResouceName].azurewebsites.netに変更

5. manifest_enduser.jsonをmanifest.jsonにリネームして保存

6. 「manifest.json」「color.png」「outline.png」をまとめてZIP作成

   • remotesupport-enduser.zipの名前で保存
   • 3ファイルはZIPパッケージのルートに配置
     

7. manifest.jsonを削除

Manifest\manifest_sme.jsonについても繰り返し、remote-support-experts,zipを作成

ステップ４：Teams上でアプリを稼働

1. ここに従ってアプリをインストール
2. ここをみて、テナントみんながインストールできるように
3. エキスパート用アプリ(remotesupport-experts.zip)をエキスパート用にインストール
4. エンドユーザ用アプリ(remotesupport-enduser.zip)をインストール

以上