Node.js を使用して初めてのアプリを構築する

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

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

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

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

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

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

前提条件

残り 4 分

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

	インストール	使用するには...
必須
	Node.jsと NPM	バックエンド JavaScript ランタイム環境。最新の v16 LTS リリースを使用します。
	ngrok	Teams アプリの機能 (会話ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。トンネルは、開発システムを Teams に接続します。タブのみを含むアプリでは必須ではありません。このパッケージはプロジェクトディレクトリ内にインストールされます (npm `devDependencies` を使用)。
	Microsoft Edge (推奨) または Google Chrome	開発者ツールを備えたブラウザー。
	Visual Studio Code	JavaScript、TypeScript、または SharePoint Framework (SPFx) ビルド環境。バージョン 1.55 以降を使用してください。
	Git	Git を使用して、GitHub からサンプル Node.js アプリリポジトリを使用します。
	がぶ飲み	オープンソースの JavaScript ツールキット。バージョン 4.0.0 以降をインストールします。
	Microsoft Teams	Microsoft Teams を使用して、チャット、会議、通話用のアプリを通じて共同作業を行うすべてのユーザーと 1 か所で共同作業を行うことができます。
Optional
	Azure Tools for Visual Studio Code および Microsoft Azure CLI	保存されたデータにアクセスしたり、Azure で Teams アプリ用のクラウドベースのバックエンドをデプロイしたりするための Azure ツール。
	React Developer Tools for Chrome または React Developer Tools for Microsoft Edge	JavaScript を使用したタブ開発用のブラウザーツール。
	Microsoft Graph Explorer	Microsoft Graph エクスプローラー。Microsoft Graph データからクエリを実行できるブラウザーベースのツール。
	Teams の開発者ポータル	Teams アプリを構成、管理、組織や Teams ストアなどに配布するための Web ベースのポータル。
	Visual Studio コード拡張機能
	Azure Functions Core Tools	Azure でサービスを実行するときに必要な認証ヘルパーを含む、ローカルデバッグの実行中にバックエンドコンポーネントがローカルに配置されます。プロジェクトディレクトリ内にインストールされます (npm `devDependencies`を使用)。
	.NET SDK	ローカルデバッグとAzure Functions アプリのデプロイ用にカスタマイズされたバインド。 .NET 3.1 (またはそれ以降) SDK をグローバルにインストールしていない場合は、ポータブルバージョンをインストールできます。

インストールされているツールのバージョン番号を確認する

次のコマンドを使用して、ツールにインストールされているバージョンが必要に応じてであることを確認します。

注意

プラットフォームで最も使いやすいターミナルウィンドウを使用します。これらの例では Git Bash (Git インストールに含まれています) を使用しますが、これらのスクリプトはほとんどのプラットフォームで実行されます。

インストールされているツールのバージョン番号を確認するには、

ターミナルウィンドウを開きます。
次のコマンドを実行して、コンピューターにインストールされている git バージョンを確認します。
```
$ git --version
```
出力例: git version 2.19.0.windows.1
次のコマンドを実行して、バージョンを確認します node.js 。
```
$ node -v
```
出力例: v8.9.3
次のバージョン番号を npm確認します。
```
$ npm -v
```
出力例: 5.5.1
次のバージョン番号を gulp確認します。
```
$ gulp -v
```
出力例: CLI version 2.3.0

Local version 4.0.2
次のコマンドを実行して、Visual Studio Code のバージョン番号を確認します。
```
code --version
```
出力例: 1.28.2

929bacba01ef658b873545e26034d1a8067445e9

これらのアプリケーションの別のバージョンを問題なく使用できます。

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

テナント とは、チャット、ファイルの共有、会議の実行を行う Teams の組織のスペースまたはコンテナーのようなものです。このスペースは、アプリをサイドロードしてテストする場所でもあります。

テナントを使って開発する準備ができているかどうかを確認しましょう。

サイドローディングのオプションを有効にする

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

注意

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

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

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

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

注意

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

無料の Teams 開発者テナントを作成する

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

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

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

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

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

このターミナルウィンドウを引き続き使用して、このチュートリアルで説明するコマンドを実行できます。

サンプルのダウンロード

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

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

ターミナルウィンドウを開きます。
次のコマンドを実行して、サンプルリポジトリをコンピューターに複製します。
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```

ヒント

今後の参照のために GitHub リポジトリの変更を変更してチェックインする場合は、このリポジトリをフォークできます。

最初のNode.js アプリをビルドする

残り 3 分

サンプルアプリのリポジトリを複製した後Node.js、ローカル環境でアプリをビルドしてテストできます。

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

最初のアプリをビルドして実行する
サンプルアプリをテストする

サンプルの構築と実行

リポジトリが複製されたら、サンプルアプリをビルドできます。

ターミナルウィンドウを開きます。
ターミナルで change directory コマンドを実行して、サンプルアプリディレクトリに変更します。
```
cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
```
次のコマンドを使用して、すべての依存関係をインストールします。
```
npm install
```
多数の依存関係がインストールされていることがわかります。
インストールが完了したら、次のコマンドを使用してアプリを実行します。
```
npm start
```
Hello World アプリが起動すると、ターミナルウィンドウに表示App started listening on port 3333されます。

注意

上記のメッセージに別のポート番号が表示されている場合は、PORT 環境変数が設定されているためです。引き続きそのポートを使用するか、環境変数を 3333 に変更できます。
ブラウザーウィンドウを開き、次の URL を使用して、すべてのHello World アプリ URL が読み込まれていることを確認します。
- http://localhost:3333
- http://localhost:3333/hello
- http://localhost:3333/first
- http://localhost:3333/second

ローカル環境でサンプルアプリをテストする

Microsoft Teams のアプリは、1 つ以上の機能を公開する Web アプリケーションであることに注意してください。 Teams プラットフォームがアプリを読み込むことができるように、アプリをインターネット上で使用できるようにします。インターネットからアプリにアクセスできるようにするには、アプリを ホスト する必要があります。

ローカルテストでは、ローカルコンピューターでアプリを実行し、Web エンドポイントを使用してそれに対するトンネルを作成できます。 ngrok は無料のツールで、これを行うことができます。 ngrok を使用すると、(この URL は単なる例です) などの https://d0ac14a5.ngrok.io Web アドレスを取得できます。環境用に ngrok をダウンロードしてインストールできます。の場所 PATHに必ず追加してください。

ngrok トンネルを作成する

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

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

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

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

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

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

URL の例を次に示します:

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

Ngrok はインターネットからの要求をリッスンし、ポート 3333 で実行されているアプリにルーティングします。
ngrok コンソールで転送先アドレスをメモします。 Teams でアプリを展開するには、この URL が必要です。

注意

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

ヒント

別のターミナルウィンドウで ngrok を実行し、ノードアプリを妨げることなく実行し続けることをお勧めします。これは、後で停止、再構築、再実行する必要がある場合があります。 ngrok セッションは、このウィンドウで有用なデバッグ情報を返します。有料バージョンの ngrok では、永続的な名前が許可されます。

重要

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

アプリパッケージNode.jsビルドする

Node.js用のアプリパッケージをビルドするために使用 gulp CLI できます。

ターミナルウィンドウを開きます。
複製先のディレクトリに存在 node.js することを確認します。これは、配置される gulpfile.js フォルダーです。
次のコマンドを実行して、Node.js アプリパッケージをビルドします。

$ gulp

コマンド出力の例を次に示します。

[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js

[13:39:27] Starting 'clean'...

[13:39:27] Starting generate-manifest'...

[13:39:27] Finished 'generate-manifest' after 11 ms

[13:39:27] Finished 'clean after 21 ms

[13:39:27] Starting 'default'... Build completed. Output in manifest folder

[13:39:27] Finished 'default' after 62 μs

アプリパッケージ helloworldapp.zipが作成されます。パッケージファイルは、次のパスにあります。

<path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifest

注意

使用しているツールで場所が明確でない場合は、アプリパッケージファイル (helloworldapp.zip) を検索します。

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

残り 2 分

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

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

アプリパッケージの更新には、次のものが含まれます。

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

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

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

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

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

<path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifest

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 つの機能 (個人用タブアプリ、ボット、メッセージ拡張機能) がすべて表示されます。