SPFx を使用して初めてのアプリをビルドする

[アーティクル]
Developer (初級)
完了まで 5 分

タブ、ボット、メッセージ拡張機能のある最初のアプリをビルドして、Microsoft Teams アプリ開発を始めます。

このアプリには全ての機能が含まれ、それぞれ独自の UI と UX を提供します。

このアプリを示すダイアグラムには、3 つの機能があります。

このチュートリアルでは以下を学習します。

新しいプロジェクトを設定する方法。
C# と Visual Studio 2019 を使用して、それぞれ異なる機能を持つ 3 つのアプリ (タブ、ボット、メッセージ拡張機能) をビルドする方法。
開発者ポータルからアプリをデプロイする方法。

前提条件

残り 4 分

Teams アプリをビルドして展開するためにインストールする必要があるツールのリストを次に示します。

	インストール	使用するには...
必須
	Visual Studio 2019 次の 2 つのワークロードのいずれかをインストールします。 • ASP.NET と Web 開発 • .NET Core クロスプラットフォーム開発	.NET。Visual Studio 2019 の無料コミュニティエディションをインストールし、ワークロードをインストールすることもできます。
	Git	GitHub からサンプル C# アプリリポジトリを使用する Git。
	ngrok	Teams アプリの機能 (会話ボットとメッセージ拡張機能) には、受信接続が必要です。トンネルを介して開発システムを Teams に公開する必要があります。タブのみを含むアプリにはトンネルは必要ありません。このパッケージはプロジェクトディレクトリ内にインストールされます (npm `devDependencies` を使用)。
	Teams ツールキット	アプリのプロジェクトスキャフォールディングを作成する Visual Studio 2019 拡張機能。最新版をご利用ください。
	Teams の開発者ポータル	Teams アプリを構成、管理、組織や Teams ストアなどに配布するための Web ベースのポータル。
	Microsoft Teams	Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。
Optional
	Azure Tools for Visual Studio Code および Microsoft Azure CLI	保存されたデータにアクセスしたり、Azure で Teams アプリ用のクラウドベースのバックエンドをデプロイしたりするための Azure ツール。

Git のインストールを確認する

Visual Studio のインストールでパスに git を追加するように求められた場合は、それを選択します。

インストールされている Git のバージョンを確認するには:

ターミナルウィンドウを開きます。
次のコマンドを実行して、コンピューターにインストールされている git バージョンを確認します。
```
$ git --version
```
出力例: git version 2.17.1.windows.2

Teams Toolkit のインストール

Teams Toolkit は、アプリのプロジェクトスキャフォールディングを作成するためのツールを使用して開発プロセスを簡略化するのに役立ちます。選択したすべての機能に必要なディレクトリ構造が作成され、必要なファイルが配置され、プロジェクトをビルドする準備が整います。

Teams Toolkit は、Visual Studio 2019 拡張機能として利用できます。

Teams Toolkit 拡張機能をインストールするには:

Visual Studio 2019 を開き、[拡張機能] > [拡張機能の管理] を選択します。
検索ボックスに、「Teams Toolkit」と入力します。
Teams Toolkit の横にある [ダウンロード] を選択します。

変更は、Visual Studio 2019 を閉じた後に使用できます。拡張機能のインストール後に Visual Studio 2019 を再起動する必要があるため、これが必須です。
[閉じる] を選択します。
Visual Studio 2019 を閉じます。

VSIX インストーラーが開き、拡張機能をインストールする手順が表示されます。
VSIX インストーラーの指示に従って、ツールキットのインストールを完了します。
Visual Studio 2019 をもう一度開きます。

Teams アプリは、Visual Studio 2019 でテンプレートとして使用できるようになります。

Teams Toolkit は、Visual Studio Code Marketplace でも見つけることができます。

Teams 開発テナントを設定する

テナント とは、チャット、ファイルの共有、会議の実行を行う Teams の組織のスペースまたはコンテナーのようなものです。このスペースは、アプリをサイドロードしてテストする場所でもあります。テナントを使って開発する準備ができているかどうかを確認しましょう。

サイドローディングオプションを確認する

アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。このプロセスはサイドローディングと呼ばれます。このオプションを表示するには、Microsoft 365 アカウントにサインインします。

注意

サイドローディングは、Teams のローカル環境でアプリをプレビューおよびテストするために必要です。有効になっていない場合は、Teams でアプリをローカルでプレビューしてテストすることはできません。

既にテナントがあり、管理者アクセス権がありますか? 実際にそうかどうかを確認しましょう。

Teams でアプリをサイドロードできるかどうかを確認します。

Teams クライアントで、[Store] アイコンを選択します。
[アプリの管理] を選択します。
[カスタムアプリのアップロード] オプションを探します。オプションが表示された場合は、アプリのサイドローディングが有効です。

注意

Teams でカスタムアプリをアップロードするオプションが表示されない場合は、Teams 管理者に問い合わせてください。

無料の Teams 開発者テナントを作成する (省略可能)

Teams アカウントをお持ちでない場合は、無料で取得できます。Microsoft 365 開発者プログラムに参加しましょう。

Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[E5 サブスクリプションの設定] を選択します。
管理者アカウントを設定します。完了すると、次の画面が表示されます。
設定した管理者アカウントを使用して Teams にサインインします。 Teams に [カスタムアプリのアップロード] オプションがあることを確認します。

無料の Azure アカウントを取得します。

アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure サブスクリプションが必要です。開始する前に、無料アカウントを作成してください。

これで、すべてのツールを取得し、アカウントを設定しました。次に、開発環境を設定し、ビルドを開始しましょう。

注意

プラットフォームで適切なターミナルウィンドウを使用します。これらの例では Git Bash を使用しますが、ほとんどのプラットフォームで実行できます。

最新バージョンの Visual Studio を開き、更新プログラムをインストールします。

このチュートリアルでは、同じターミナルウィンドウを使用してコマンドを実行できます。

サンプルのダウンロード

このチュートリアルでは、Hello, World! を使用します C# のサンプル。 GitHub からダウンロードして複製できます。

このサンプルを使用するには、次のいずれかの方法でサンプルリポジトリを複製します:

Git Bash の使用
Visual Studio 2019 の使用

Git Bash を使用してサンプルリポジトリを複製するには

ターミナルウィンドウで次のコマンドを実行して、サンプルリポジトリをコンピューターに複製します:
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```
C# アプリのサンプルリポジトリは、既定の場所にあるコンピューターに複製されます。

ヒント

このリポジトリをフォークし、変更を修正し GitHub に保存できます。

Visual Studio 2019 で開くと、複製されたリポジトリを表示できます。

Visual Studio 2019 を使用してサンプルリポジトリを複製するには

Visual Studio 2019 を開きます。
[リポジトリの複製] を選択します。
リポジトリを複製するためのパスとして、「https://github.com/OfficeDev/Microsoft-Teams-Samples.git」を入力します。
リポジトリを複製する場所を入力し、[複製] を選択します。

サンプルリポジトリが複製され、Visual Studio が開きます。複製されたリポジトリは、ソリューションエクスプローラー で表示できます。

サンプルリポジトリを複製したので、Teams 用の最初の C# アプリをビルドしましょう。

最初の C# アプリをビルドして実行する

残り 3 分

C# サンプルアプリのリポジトリを複製したら、ローカル環境でアプリをビルドして実行できます。

このページでは、次の方法について説明します。

初めてのアプリを構築する
サンプルアプリをローカルに展開します

初めてのアプリを構築する

ワークスペースの作成後、ソリューションエクスプローラー でプロジェクト構造を表示できます。これで、アプリをビルドして実行する準備ができました。

複製されたサンプルをビルドして実行するには

ソリューションファイル Microsoft.Teams.Samples.HelloWorld.sln をサンプルの Microsoft-Teams-Samples/samples/app-hello-world/csharp ディレクトリから開きます。
[プロジェクト] メニューを選択し、Microsoft.Teams.Samples.HelloWorld.Web プロパティ を選択します。
[プロパティ] ウィンドウの左側のウィンドウから [デバッグ] を選択します。
画面を移動して、[Web サーバーの設定] を表示します。
[デバッグ] ウィンドウで次の設定を行います。
- アプリ URL を http://localhost:3333/ に設定します。
- [SSL の有効化] をクリアします。
[ビルド] メニューの [ソリューションのビルド] をクリックします。
F5 キーを選択します。または、デバッグ メニューから [デバッグの開始] を選択してサンプルを実行します。

アプリが起動すると、ブラウザーウィンドウが開きます。アプリのルートが表示されます。次の URL に移動して、すべてのアプリ URL が読み込まれているかどうかを確認できます。
- https://localhost:3333/
- https://localhost:3333/hello
- https://localhost:3333/first
- https://localhost:3333/second
注意

エラー Could not find a part of the path … bin\roslyn\csc.exe が表示された場合は、コマンド Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r でパッケージを更新します。

サンプルアプリをローカルに展開する

Microsoft Teams アプリは、1 つ以上の機能を提供する Web アプリケーションです。 Teams プラットフォームがアプリを読み込むことができるように、アプリをインターネット上で使用できるようにします。 ngrok を使用してアプリをホストし、コンピューター上のローカルプロセスへのトンネルを作成します。

アプリをホストした後、https://yourteamsapp.ngrok.io や https://yourteamsapp.azurewebsites.net などのルート URL をメモします。

ngrok を使用したトンネル

ngrok をインストールした後、アプリをローカルに展開するためのトンネルを作成できます。

新しいターミナルウィンドウを開きます。
次のコマンドを実行して、新しいセッションを作成します。サンプルアプリではポート 3333 を使用します。
```
ngrok http 3333 -host-header=localhost:3333
```
ngrok トンネルが作成されます。次に例を示します:

ngrok トンネル URL に hello、first、または second を追加して、アプリのさまざまなタブページを表示できます。

Ngrok はインターネットからの要求をリッスンし、ポート 3333 で実行されているアプリにルーティングします。

アプリのローカル展開を確認するには:

ブラウザーを開きます。
次の URL を使用してアプリを読み込みます。

https://<forwarding address in ngrok console session>/

URL の例を次に示します:
ngrok コンソールで転送先アドレスをメモします。 Teams でアプリを展開するには、この URL が必要です。

注意

ビルドで別のポートを使用した場合は、同じポート番号を使用して、ngrok トンネルをセットアップしてください。

ヒント

別のターミナルウィンドウで ngrok を実行することをお勧めします。これは、アプリを停止、リビルド、再実行する必要があるときに、ngrok がアプリに干渉しないようにするのに役立ちます。 ngrok セッションは、このウィンドウで便利なデバッグ情報を提供します。

重要

無料バージョンの ngrok を使用する場合、アプリは開発用コンピューター上の現在のセッション中でのみ使用できます。コンピューターがシャットダウンしているか、スリープ状態になった場合は使用できません。サービスを再起動すると、新しいアドレスが返されます。次に、古い住所を使用するすべての場所を更新する必要があります。テスト用にアプリを共有するときは、この手順を忘れないでください。

開発者ポータルを使用して最初の C# アプリを構成する

残り 2 分

開発者ポータルを使用して、アプリパッケージを Teams にアップロードし、アプリの機能を構成できます。開発者ポータルは、アプリの作成と登録を簡略化する Teams アプリです。 Teams ストアからインストールします。

Teams アプリをビルドしてテストしたら、開発者ポータルを使用してアプリを構成してプレビューできます。

このページでは、開発者ポータルでアプリパッケージを構成する方法について説明します。

Visual Studio 2019 の発行オプション

このチュートリアルでは、開発者ポータルを使用してアプリの機能を構成し、アプリを発行します。

ただし、Visual Studio 2019 には、Azure を含むさまざまなプロバイダーへのアプリ展開のサポートが組み込まれています。

Visual Studio 2019 で [Azure に発行] メニューを示す画像

Microsoft Azure は、無料レベルで .NET アプリケーションをホストします。 Hello World サンプルを実行するのに十分な共有インフラストラクチャを使用します。詳細については「新しい無料 Azure アカウントの作成」を参照してください。

このオプションを使用する場合は、Azure サイトと Azure リソースの詳細を入力し、アプリを発行できます。

このチュートリアルでは、この手順を使用する必要はありません。

開発者ポータルでアプリパッケージを構成する

開発者ポータルを使用して、アプリパッケージとその機能を構成できます。開発者ポータルは、アプリの作成と登録を簡略化する Teams アプリです。 Teams ストアからインストールします。

アプリパッケージの構成には、次のものが含まれます:

開発者ポータルにアプリパッケージをインポートする
アプリ機能の構成

開発者ポータルでアプリパッケージをインポートする

アプリパッケージをインポートするには:

Microsoft Teams を開きます。
左側のバーから [Store] アイコンを選択します。
検索バーで [開発者ポータル] を検索し、[開発者ポータル] を選択します。
[開く]を選択します。

開発者ポータルが開きます。
[アプリ] タブを選択します。
[アプリのインポート] を選択します。
C# サンプルリポジトリディレクトリ構造の次のパスから、アプリパッケージ helloworldapp.zip を選択します。

<path to cloned C# repo>/Source/Repos/Microsoft-Teams-Samples/samples/app-hello-world/csharp/Microsoft.Teams.Samples.HelloWorld.Web/bin/Debug/netcoreapp3.1

Hello World アプリは開発者ポータルにインポートされます。

開発者ポータルでアプリのツアーをする

アプリを開発者ポータルにインポートしたら、マニフェストファイルなどの詳細を表示できます。

アプリ情報を確認する

開発者ポータルの左側のウィンドウから [基本情報] を選択します。
基本情報の次の情報に注意してください:
- アプリ ID
- 開発者情報
- アプリの URL
左側のウィンドウから [ブランド] を選択して、ブランド情報を表示します。

これらの詳細は、配布用の新しいアプリを作成する場合に重要です。

アプリ機能の表示

開発者ポータルの左側のウィンドウから [アプリ機能] を選択します。

アプリの機能が右側のウィンドウに表示されます。個人用アプリ、ボット、メッセージ拡張機能のカードを表示できます。

アプリマニフェストの表示

マニフェストファイルを使用して、アプリの機能、必要なリソース、およびその他の重要な属性を構成します。

アプリマニフェストを表示するには:

左側のパネルから [発行] を選択してドロップダウンリストを開き、[アプリケーションパッケージ] を選択します。

マニフェストファイルが右側のウィンドウに表示されます。

アプリ機能の構成

アプリを開発者ポータルにインポートしたら、次の手順ではアプリの機能を構成します。開発者ポータルには、さまざまなセクションのすべてのアプリ情報が含まれています。これにより、アプリの機能の構成が簡単になります。

開発者ポータルを使用すると、次のことができます:

個人用タブアプリの構成
ボットの構成
メッセージ拡張機能の構成

個人用タブアプリの構成

個人用タブアプリを構成するには:

[アプリ機能] ウィンドウの [個人用アプリ] カードで、アイコンを選択し、[編集] を選択します。

[Hello] タブの詳細が表示されます。
Hello タブのアイコンを選択し、[編集] を選択して、更新用のアプリの詳細を開きます。
[個人用アプリにタブを追加] の [Hello] タブのアプリの詳細を入力します。

次の詳細を入力します:
- 名前: Hello タブ。
- コンテンツ URL および Web サイト URL: ngrok コンソールセッションの転送先アドレス。
- コンテキスト: [個人用タブ] を選択します。
[更新] を選択します。

Hello タブの詳細は、[個人用アプリ] ウィンドウに表示されます。
[保存] を選択します。

[個人用アプリ] ウィンドウに、新しいタブと自動的に作成された [バージョン情報] タブが表示されるようになりました。

ボットの構成

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

アプリ ID なしでインポートされたボットアプリを示す画像

サンプルからインポートされたボットには、関連付けられたアプリ ID がありません。これを削除し、新しいボットを作成する必要があります。開発者ポータルによって新しいアプリ ID が作成され、Teams に登録されます。

ボットの追加と構成には、次の処理が含まれます:

新しいボットの追加
アプリにボットを追加
ボットの範囲を構成

新しいボットを追加するには

[アプリ機能] ウィンドウの [ボット] カードのアイコンを選択します。[削除] を選択します。
[ツール] を選択して機能を追加します。
[ツール] ウィンドウで [ボット管理] を選択します。
[ボット管理] ウィンドウで [+ 新規のボット] を選択します。
ボットに適した名前を入力し、[追加] を選択します。

[構成] ウィンドウが表示され、左側のウィンドウに新しいボットの詳細が表示されます。
ngrok コンソールから転送 URL を入力し、[保存] を選択します。
[ クライアントシークレット] を選択し、[ クライアントシークレットをボットに追加 する] を選択して、ボットのパスワードを生成します。

開発者ポータルによりボットのパスワードが生成されます。

アイコンを使用して、パスワードをコピーできます。このチュートリアルでは、コピーする必要はありません。
[OK] を選択します。
より多くのボット を選択して、[ボット管理] ウィンドウに戻ります。

[ボット管理] ウィンドウには、アプリ ID で追加された新しいボットが表示されます。
[クライアントシークレット] セクションのパスワードと共にボット ID を保存していることを確認します。

ボットをアプリに追加するには

[アプリ機能] ウィンドウを開き、[ボット] カードを選択します。

[ボット] ウィンドウが表示されます。
[既存のボットを選択] からボットアプリを選択します。

新しいボットは、独自のアプリ ID を使用してアプリに追加されます。

ボットスコープを構成するには

新しい [ボット] カードのアイコンを選択し、[編集] を選択します。
[ボット] ウィンドウ内を移動して、"コマンド" セクションを表示し、[+ コマンドの追加] を選択します。
コマンド の適切な名前と説明を入力します。
コマンドの 3 つの範囲をすべて選択し、[追加] を選択します。
- 個人用
- チーム
- グループチャット
新しいコマンドは、[ボット] ウィンドウの "コマンド" セクションに追加されます。
[保存] を選択します。

コマンドの詳細が保存されます。
[アプリ機能] ウィンドウを開き、[個人用アプリ] カードを選択して、アプリのタブの詳細を表示します。

新しいチャットボットのタブがアプリに追加されていることがわかります。

メッセージ拡張機能の構成

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

新しいメッセージ拡張機能を追加するには:

[アプリ機能] ウィンドウの [メッセージ拡張機能] カードでアイコンを選択し、[削除] を選択します。
[アプリ機能] ウィンドウから [メッセージ拡張機能] を選択します。
からボットアプリの名前を選択し、[メッセージ拡張機能]** ウィンドウで既存のボット** ドロップダウンリストを選択します。
[保存] を選択します。

メッセージ拡張機能が保存され、"コマンド" セクションが [メッセージ拡張機能] ウィンドウに表示されます。
[+ コマンドの追加] を選択して、メッセージ拡張機能アプリで実行できる処理の範囲を定義します。
[検索] が、"コマンドの追加" ダイアログで追加するコマンドの種類として選択されていることを確認します。
適切な情報を次の詳細に入力します:
- コマンド ID
- コマンドのタイトル
- コマンドの説明
ダイアログ内を移動して、残りの詳細を表示します。
[既定値にする] が選択されていることを確認します。
メッセージ拡張コマンドに対して次のコンテキストを選択します。
- コマンドボックス
- 作成ボックス
- メッセージ
次の詳細に適した情報を入力してください:
- パラメーター名
- パラメーターのタイトル
- パラメータの説明
入力の種類として [テキスト] を選択します。
[保存] を選択します。
メッセージ拡張機能コマンドが保存され、[メッセージ拡張機能] ウィンドウのコマンドリストに表示されます。
[保存] を選択します。
[アプリ機能] ウィンドウを開きます。

Hello World アプリ用に構成された 3 つの機能 (個人用タブアプリ、ボット、メッセージ拡張機能) がすべて表示されます。次の手順では、Teams にアプリを登録し、アプリをテストします。