みなさん、いかがお過ごしでしょうか👋
前回の Microsoft Teams 開発者プラットフォームに関連する記事では、Tab と Bot、そしてメッセージ拡張機能といった機能を構築する方法を紹介しました。それらのチュートリアルでは Teams アプリ機能の種類や概念についてに焦点をあてるために App Studio を使用し、手動で最小限のローカル環境のみをセットアップする方法をとりました。
今回のチュートリアルでは、最近リリースされた開発者ツールを使っての開発方法を紹介したいと思います。
この VS Code 用の Teams Toolkit (プレビュー版)を使うと複雑な Teams アプリを構築するのに必要な、統合されたアイデンティティ、クラウド ストレージへのアクセス、Microsoft Graph からのデータ取得、および Azure および M365 の他のサービスを使用することが以前よりラクにできるようになります。
さて、開始する前にまず必要な作業環境の準備ができているかチェックしましょう。
📓 始める前に
まず、チーム クライアントでカスタム アプリを「サイドロード」できるかどうかを確認します。開始する前にカスタム Teams アプリを有効にするをオンにし、カスタム アプリのアップロードを有効にします。
または、無料の Microsoft 365 開発者プログラムにサインアップして、サンプル データ パックが付属された開発者テナントのサンドボックスを取得してください。
そして最新バージョンの Visual Studio Code を入手してください。(以前のバージョンでは、ツールキットでは動作しない場合があります)。
🖥 Teams Toolkit のインストール
まず、VS Code を起動し、Teams アプリの開発に役立つ拡張機能をインストールしていきましょう。
左側のアクティビティバーの拡張機能アイコンを選択し、Microsoft Teams ツールキットをインストールします。2 つの異なるバージョンのチーム、ツールキットが表示される場合は、このチュートリアルで使う「プレビュー」バージョン 2.x を選択してください。
🔧 オプションツール
Teams ツールキット拡張機能は、必要に応じて以下のツールが自動的にインストールされます。ただし、Linux (WSL を含む) を使用する場合は、次のツールを自分でインストールしてから使用する必要があります。
🧰 ツールキットで新規プロジェクトの作成をする
Microsoft Teams 左側のアクティビティバーのアイコンを選択し Create New Project をクリックし新しいプロジェクトの作成を開始します。そしてポップアップされるメニューから、Create a new Teams app を選択します。
Select capabilities セクションで機能を選択します。このチュートリアルでは、Bot のみを選択して Tab を選択解除し、OKを選択します。
Bot registration セクションで、Create a new bot registration を選択し、新規ボットの登録をします。
Programming Language セクションで、JavaScript を選択します。
次にワークスペースを選択します。プロジェクトのワークスペース内に新しいフォルダが作成されます。
アプリの名前を入力してください。
設定にはしばらく時間がかかりますのでしばらく待ちましょう。
このプロセスでツールキットが自動的に次のことをしています：
- M365 テナント内での Azure アクティブ ディレクトリ アプリケーションの登録
- アプリ マニフェストの作成
- アプリをサポートするために Azure Functions コア ツールを使用して API をローカルで実行
- ローカルホストからチームクライアントへのセキュアなトンネルを提供する ngrok のインストールと設定
🤖 サンプルボットをローカルで実行する
プロジェクトを設定したら、テンプレート アプリがどのようなものか見ていきましょう。
まず詳しく見ていく前に、先にこのサンプル アプリをビルドしてローカルで実行しましょう。
キーボードの F5 キーを押してデバッグ モードを有効にします。
もしくは、このようにサイドメニューからデバッグアイコンをクリックします。
アプリが初めてビルドされる際には、すべての依存関係がダウンロードされますので完了までに数分かかる場合があります。
完了すると、チームの Web クライアントが自動的にブラウザー ウィンドウで開かれます。Add をクリックしてローカルにインストールします。
アプリをインストールしたら、 Bot を試してみましょう。
🔏 ユーザー権限の付与
この Bot 用の show コマンドを試してみると、アプリが次のように情報を表示する許可を求めることがわかります。
続行 (Continue) をクリックすると、認証画面が開きます。
つまり、アプリ (およびサードパーティ製アプリ) は、ユーザーの同意なしではユーザーの情報を自動的に取得することはできないのです。
次のチュートリアルでは、ユーザー情報にアクセスする Microsoft Graph について説明し、チームの実装方法について説明しますので、ご期待👋
🇺🇸 この記事は先に英語で書いたものを和訳しています。原文（英語）で読みたいという方は dev.to のリンクからどうぞ！