App Studio C#アプリ パッケージを更新する

ヒント

開発者ポータルを試してみてください: App Studio が進化しました。 新しい開発者ポータルを使用して、Teamsアプリを構成、配布、および管理します

App Studio は、TeamsストアからインストールできるアプリTeamsです。 アプリの作成と登録が簡略化されます。

アプリ パッケージを更新するには、次の手順を実行します。

  1. App Studio をアプリ Teamsにインストールするには、左側のバーの下部にある [アプリ] アイコンを選択し、App Studio を検索します

    Finding App Studio in the Store View
  2. [ App Studio] タイルを選択し 、[インストール] を 選択します。 App Studio がインストールされています。

    Installing App Studio
  3. アプリのアプリ パッケージを作成するにはTeams App Studio の [マニフェスト エディター] タブ を選択します

    App Studio

    このサンプルには独自のマニフェストが付属し、プロジェクトのビルド時にアプリ パッケージをビルドするように設計されています。 manifest.json ファイルは、マニフェストの下のVisual Studioに配置できますMicrosoft.Teams.Samples.HelloWorld.Web

    このVisual Studio、manifest.json ファイルは [マニフェスト] の下に 配置 されますMicrosoft.Teams.Samples.HelloWorld.Web。 この手順は、次の図で説明します。

    Build the app package on .NET with Visual Studio
  4. このアプリ パッケージを変更するには、マニフェスト エディターで [ 既存のアプリの インポート] を選択します

    Importing an existing app
  5. 新しく インポートしたアプリの Hello World タイルを選択します。

    Newly imported app view

    次の図は、App Studio でインポートされたアプリ パッケージを示しています。

    Importing the app package

    マニフェスト エディターの左側には、手順の一覧があります。 右側には、各手順で入力する必要があるプロパティの一覧があります。 サンプル アプリの使用を開始すると、多くの情報が既に完了しています。 次の手順では、Hello World アプリのプロパティを更新できます。

アプリの詳細

[詳細 ] で [アプリの 詳細] を選択します。 [生成] ボタンを 選択して、新しいアプリ ID を作成します。

新しいアプリ ID はに似ています 2322041b-72bf-459d-b107-f4f335bc35bd

開発者情報やブランドの詳細など、右側のウィンドウでアプリの 詳細を確認 します。 これらの詳細は、配布用の新しいアプリを作成する場合に重要です。

タブ

アプリにタブを追加するTeamsです。 サンプル アプリは既に複数のタブをサポートし、有効にできます。

[チーム] タブ

アプリで使用できるチーム タブは次の 1 つのみです。

Adding a Teams tab

このサンプルでは、[チーム] タブに構成ページが表示されます。 タブ構成 URL の ... 記号 を選択 し、ドロップダウン メニューから [編集 ] を選択します。 URL を、アプリ https://yourteamsapp.ngrok.io/configureyourteamsapp.ngrok.io ホスト時に使用した URL に置き換える必要がある場所に変更します。

[個人] タブ

アプリには、[チーム] タブを含む最大 16 のタブを含め、16 つまで使用できます。

個人用タブは、[チーム] タブとは異なります。 Hello Tab は、プレースホルダー値を持つ個人用タブリストに既に一覧表示されています com.contoso.helloworld.hellotab。 タブ構成 URL の ... 記号 を選択 し、ドロップダウン メニューから [編集 ] を選択します。 次のダイアログ ボックスが表示されます。

Adding a personal tab dialog

アプリの URL で次のボックスを更新します。

  • [コンテンツ の URL] ボックスを に変更する https://yourteamsapp.ngrok.io/hello
  • [Web サイト の URL] ボックスをに 変更する https://yourteamsapp.ngrok.io/hello

アプリ yourteamsapp.ngrok.io をホストするときに使用した URL に置き換える。

ボット

ボット機能をアプリに簡単に追加できます。 Hello World サンプル アプリには、サンプルの一部としてボットが既に存在しますが、Microsoft に登録する必要があります。

Adding a bot

サンプルからインポートされたボットには、関連付けられたアプリ ID が含まれません。 App Studio で新しいアプリ ID を作成して Microsoft に登録するには、新しいボットを作成する必要があります。

注意

ボットの App Studio によって作成されたアプリ ID は、アプリ用に作成されたアプリ ID とは異なります。 アプリ内の各ボットには、独自のアプリ ID が必要です。

ボットをセットアップするには、次の手順を実行します。

  1. ボットリスト インポートされたボットの横にある [削除] を選択します。 これで、表示するボットは残りはありません。

  2. [ セットアップ] を 選択して 、[ ボットのセットアップ] ダイアログ ボックスを 表示します。

    Adding a bot dialog
  3. Contoso ボットのボット名 を追加し、[ スコープ] で 3 つのチェック ボックスをオン にします

  4. [保存 ] を 選択してダイアログ ボックスを終了します。 App Studio は、ボットを Microsoft に登録し、ボットリストに新しいボットを表示します。

  5. 次に、メモ帳でテキスト ファイルを開き、新しいボット ID をコピーして貼り付けます。

  6. [ 新しいパスワードの生成] をクリックし、ボット アプリ ID をメモしたのと同じテキスト ファイルにパスワードをメモします。

  7. ボット エンドポイント のアドレスを更新しhttps://yourteamsapp.ngrok.io/api/messages、アプリyourteamsapp.ngrok.ioのホスト時に使用した URL に置き換える。

  8. 次に、ボットとの安全な通信を可能にするために、ファイルからホストされたアプリに情報を追加する必要があるテキスト ファイルを保存します。

メッセージング拡張機能

メッセージング拡張機能を使用すると、ユーザーはサービスから情報を求め、その情報を投稿できます。 情報は、カードの形式でチャネル会話に投稿されます。 メッセージング拡張機能は、作成ボックスの下部に表示されます。

メッセージング拡張機能をセットアップするには、次の手順を実行します。

  1. App Studio の左側の ウィンドウで [ 機能] の下にある [メッセージング拡張機能] を選択して、メッセージング拡張機能を構成します。

    Adding a messaging extension

    サンプル メッセージング拡張機能は、[メッセージング拡張機能] ウィンドウ に一覧表示 されます。

  2. [削除] を選択してメッセージング拡張機能を削除し、[セットアップ] を選択し、ボットに使用する手順と同じ手順 を実行します。 [ メッセージング拡張機能] ダイアログ ボックスが表示されます。

  3. [既存の ボットを使用する] タブを 選択し、 既存のボットの 1 つから選択します

  4. ドロップダウン メニューから作成したボットを選択します。 ボット名 を追加し、[ 保存] を選択して ダイアログ ボックスを閉じます。

  5. [コマンド] セクションで 、[追加] を 選択します。 検索ベースのコマンドを追加するには、[ユーザーがサービスに情報をクエリしてメッセージに挿入する] オプションを選択 します。

  6. [新しい コマンド] ダイアログ ボックスで、次の値を入力します。

    [新 しいコマンド] で、次のコマンドを実行します

    • コマンド ID: ランダム テキストを入力する
    • タイトル: ランダムなタイトルを入力する
    • 説明: ランダムな説明を入力する

    [ パラメーター] の下:

    • 名前: パラメーター名を入力します。
    • タイトル: カードタイトルを入力する
    • 説明: カードの説明を入力する
  7. 情報を入力した後、[保存] を選択して ダイアログ ボックスを閉じます。

アプリをアプリに登録Teams

アプリの詳細を入力したら、次の手順を実行してアプリをアプリに登録Teams。

  1. App Studio のテストと配布 を使用して、アプリをアプリにインストールTeams。

  2. ボットのアプリ ID とパスワードを使用してホストされたアプリケーションを更新します。 サンプル アプリでは、ボットとメッセージング拡張機能の両方に同じアプリ ID とパスワードを使用します。

  3. App Studio の左側のウィンドウ****で 、[完了] で [テストと配布] を選択します。

    Testing your app
  4. アプリをアプリにアップロードするには、[テストTeams配布] の下の [ インストール] ボタンを選択します

    Adding a messaging extension dialog

    注意

    アプリをサイドロードできない場合は、カスタム アプリのアップロードを有効 にしたかどうかを確認します

  5. [チームに 追加 ] セクションで [検索] ボックスを選択 し、サンプル アプリを追加するチームを選択します。 テスト用に特別なチームを設定できます。

  6. ダイアログ ボックス の下部 にある [インストール] ボタンを選択します。

    アプリがアプリで使用Teams。 ただし、ボットとメッセージング拡張機能は、ホストされているアプリケーション環境をアプリの ID とパスワードで更新するまで機能しません。

    The finished app

アプリをアプリに登録Teams

アプリの詳細を入力したら、次の手順を実行してアプリをアプリに登録Teams。

  1. 開発者 ポータルの プレビューを使用してアプリをアプリにインストールTeams。

    [プレビュー] ボタンを表示する画像

  2. ボットのアプリ ID とパスワードを使用してホストされたアプリケーションを更新します。 サンプル アプリでは、ボットとメッセージング拡張機能の両方に同じアプリ ID とパスワードを使用します。

  3. 開発者ポータル の左側のウィンドウ****にある [発行] の下にある [発行して保存する] を選択します。

    左側のウィンドウに [発行] オプションを表示する画像

    注意

    アプリをサイドロードできない場合は、カスタム アプリのアップロードを有効 にしたかどうかを確認します

  4. [追加] を 選択してアプリをインストールTeams。

    アプリがアプリで使用Teams。 ただし、ボットとメッセージング拡張機能は、ホストされているアプリケーション環境をアプリの ID とパスワードで更新するまで機能しません。

ホストされたアプリの資格情報を更新する

サンプル アプリでは、テキスト ファイルに保存した値に環境変数を設定する必要があります。

  1. ソリューション エクスプローラーを開きます。

    c# アプリのサンプル Teams

  2. appsettings.json ファイルを開きます。

    appsettings.json ファイルを示す画像

  3. テキスト ファイル に保存したボット ID で MicrosoftAppId 値を更新します。

  4. 保存した ボット パスワードを使用して MicrosoftAppPassword を更新します。

    Azure キーの追加を示す画像

    これらの変更を行った後、アプリを再構築します。 ngrok を使用している場合は、アプリをローカルで実行できます。Azure でホストしている場合は、アプリを再展開します。

アプリの機能をテストTeams

タブをテストする

アプリをアプリにインストールTeams、アプリが読み込むタブを表示する構成を行います。

アプリ タブを構成するには、次の手順を実行します。

  1. サンプル アプリをインストールしたチームのチャネルに移動し、[ +] ボタンを選択して新しいタブを追加します。

  2. [ タブの追加] リスト から [Hello World] を選択 します。 構成ダイアログ ボックスが表示され、このチャネルに表示するタブを選択できます。

  3. [保存] を選択します。 タブ Hello World はタブと一緒に読み込まれます。

    Screenshot of configure

ボットをテストTeams

これで、ボットをテストできます。Teams。

ボットをテストするには、次の方法を実行します。

  • アプリを登録して入力したチーム内のチャネルを選択します @your-bot-name。 この種類のメッセージはメンションと呼 @ばれる。 ボットは、送信したメッセージに返信します。

    Bot responses

メッセージング拡張機能をテストする

メッセージング拡張機能をテストするには、次の方法を実行します。

  1. 会話 ビューの入力 ボックスの下にある [...] を選択します。 「Hello World」アプリ を含むメニュー が表示されます。

  2. メニューを選択すると、ランダムなテキストのセットが表示されます。 ランダムなテキストの 1 つを選択し、会話に挿入できます。

    Messaging extension menu Messaging extension result
  3. ランダムなテキストのいずれかを選択します。 独自のメッセージを使用して送信する準備が整ったカードが表示されます。

    Messaging extension send
   
Back