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

<h1>はじめに</h1>

* Teams App templateの[リモートサポート](https://docs.microsoft.com/ja-jp/microsoftteams/platform/samples/app-templates#remote-support)を作ってみます。
* [guthub](https://github.com/OfficeDev/microsoft-teams-apps-remotesupport/wiki/Deployment-Guide)の翻訳記事
* [作り方の参考動画](https://www.youtube.com/watch?v=0MQ3Xz19YYU)

<h1>前提準備</h1>

* 次のサービスを作れるAzureサブスクリプションを用意
    * App service
    * App service plan
    * Bot channels registration
    * Azure storage account
    * Azure search
    * Application Insights
* エキスパート用のMicrosoft Teamsのチーム
* Remote support用のアプリ[Git URL](https://github.com/OfficeDev/microsoft-teams-apps-remotesupport/wiki/Deployment-Guide)

<h1>ステップ１：Azure AD applicationsの登録</h1>
1. Azure portalにログインして、[ここ](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps)から「アプリの登録」に進む
2. 「新規登録」をクリックして、Azure AD applicationを作成
    3. 名前 - Teamsアプリの名前。「リモートサポート」とか。
    4. サポートされているアカウントの種類 - 任意の組織ディレクトリ内のアカウント (任意の Azure AD ディレクトリ - マルチテナント)
    5. リダイレクトURI - 空欄
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/c73fcbd0-3590-d34a-b244-ff1a5d26414f.png)
3. 「登録」クリック
4. アプリが登録されたら、「概要」ページに遷移。あとで使うので、<b>アプリケーション(クライアント)ID</b>をコピーしておく。サポートされているアカウントの種類が<b>複数の組織</b>であることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/1f9606c6-7b32-6038-68ff-63164fcef572.png)
5. 管理セクションから<b>証明書とシークレット</b>をに遷移。<b> + 新しいクライアントシークレット</b>をクリック。説明を入力し、有効期限を選択したあと、「追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/767ceef0-2ea7-9377-713c-b2003995384a.png)
6. シークレットが作成できたら、値をコピーしておく

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

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

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

8. 各種IDを入力
    * Bot Client ID: アプリケーション（クライアント）ID
    * Bot Client Secret: ボット用クライアントシークレット
    * Tenant ID: ディレクトリ（テナント）ID
    * Team link: ボットを加える[Teamsリンク](https://support.microsoft.com/ja-jp/office/%E3%83%81%E3%83%BC%E3%83%A0%E5%8F%82%E5%8A%A0%E7%94%A8%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%BE%E3%81%9F%E3%81%AF%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-11b0de3b-9288-4cb4-bc49-795e7028296f)

9. 「確認および作成」をクリックし、検証が終わったら「作成」をクリックしてデプロイメントが開始される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/bacaa615-d891-1fbc-9b19-f0d3abdc354f.png)


10. Azureポータルの通知で状況確認ができる。１０分ぐらいで完了する
11. デプロイメントが成功したら、<b>Outputs</b>をクリック。3つの値が得られる
    * botId - リモートサポートボットのアプリケーションID
    * appDomain - リモートサポートボットのベースドメイン
    * configurationAppUrl - webアプリケーション設定用のURL

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/f581b2af-a856-f8b4-f7a7-281e030e1897.png)

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

1. テキストエディタで<b>Manifest\manifest_enduser.json</b>を開く
2. 自分用の適切な値にplaceholderを変更する
    * developer.name [developer.nameとは](https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema#developer)
    * developer.websiteUrl
    * developer.privacyUrl
    * developer.termsOfUseUrl
   
3. <botId>はBot Client IDに変更
4. <b>validDomains</b>セクションの<appDomain>は<b>[BaseResouceName].azurewebsites.net</b>に変更
5. manifest_enduser.jsonをmanifest.jsonにリネームして保存
6. 「manifest.json」「color.png」「outline.png」をまとめてZIP作成
    * <b>remotesupport-enduser.zip</b>の名前で保存
    * 3ファイルはZIPパッケージのルートに配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/5847fdaf-7b95-edfc-7e1b-c9bf6d304ede.png)

7. <b>manifest.json</b>を削除

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

<h1>ステップ４：Teams上でアプリを稼働</h1>

1. [ここ](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/apps/apps-upload#load-your-package-into-teams)に従ってアプリをインストール
2. [ここ](https://docs.microsoft.com/en-us/microsoftteams/tenant-apps-catalog-teams)をみて、テナントみんながインストールできるように
3. エキスパート用アプリ(<b>remotesupport-experts.zip</b>)をエキスパート用にインストール
4. エンドユーザ用アプリ(<b>remotesupport-enduser.zip</b>)をインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/77cb5c5c-af62-1dba-83bf-85bac536f68a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271751/ecf61d6b-c001-93aa-e344-fd23eb0b149e.png)


以上