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

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

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

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

このアプリに 3 つの機能があることを示す図のスクリーンショット。

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

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

前提条件

残り 4 分

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

	インストール	使用するには...
必須
	Node.js と NPM	バックエンド JavaScript ランタイム環境。詳細については、「プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。
	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 Chrome 用開発者ツールまたは Microsoft Edge 用 React 開発者ツール	JavaScript を使用したタブ開発用のブラウザーツール。
	Microsoft Graph Explorer	Microsoft Graph エクスプローラー。Microsoft Graph データからクエリを実行できるブラウザーベースのツール。
	Teams の開発者ポータル	Organizationや Microsoft Teams Store など、Teams アプリを構成、管理、配布するための Web ベースのポータル。
	Visual Studio Code 拡張機能
	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 開発者テナントをCreateする

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 では、などの https://d0ac14a5.ngrok.io Web アドレスを取得できます (この URL は単なる例です)。ご利用の環境に合わせて ngrok をダウンロードしてインストールできます。の場所 PATHに追加してください。

ngrok トンネルCreate

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 ビルドする

を使用 gulp CLI して、Node.js 用のアプリパッケージをビルドできます。

ターミナルウィンドウを開きます。
が複製されているディレクトリ 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

注:

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

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

残り 2 分

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

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

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

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

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

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

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

開発者ポータルが開きます。
[アプリ] タブを選択します。
[アプリのインポート] を選択します。
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 つのスコープをすべて選択します。
[ボット] ウィンドウ内を移動して、"コマンド" セクションを表示し、[+ コマンドの追加] を選択します。
適切な名前と説明を入力し、コマンドの 3 つのスコープをすべて選択し、[追加] を選択します。
- 個人用
- チーム
- グループチャット
新しいコマンドは、[ボット] ウィンドウの "コマンド" セクションに追加されます。
[保存] を選択します。

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

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

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

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

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

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

メッセージ拡張機能が保存され、"コマンド" セクションが [メッセージ拡張機能] ウィンドウに表示されます。
[+ コマンドの追加] を選択して、メッセージ拡張機能アプリで実行できる処理の範囲を定義します。

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

Hello World アプリ用に構成された 3 つの機能 (個人用タブアプリ、ボット、メッセージ拡張機能) がすべて表示されます。