こんにちは、みなさん元気にお過ごしでしょうか？
ここ一年ほど、一連のブログ記事(英語)で Teams Toolkit プレビュー版を紹介してきましたが、今回、Visual Studio Code 用 Teams Toolkit と Teams Toolkit CLI が GA (Generally available) リリースになったことをお知らせします。そして、.NET の Web アプリを構築している方のための Visual Studio 用 Teams Toolkit がプレビュー版で利用できるようになりました。Build カンファレンスでの発表も聞いていただけたでしょうか？
さて、プレビュー版以来、多くのアップデートや改善が行われていますが、この記事では VS Code のための Teams Toolkit の主要な新機能のいくつかについて紹介します。
🎞 シナリオベースの Teams アプリの紹介
本リリース以前の Teams Toolkit プレビュー版では、タブ、Bot、メッセージ・エクステンション など、Teams の基本機能をベースにしたアプリのテンプレートコードが提供されていました。
しかし、現実にアプリを設計する際にはリアルライフ・シナリオに基づいて製品を設計をするのが普通でしょう。
リアルなシナリオとは、例えばこのように「旅行系サービスを作っているのエンジニアが旅程にあわせて天気予報の通知を送るアプリを作りたい」などというようなユーザ・ストーリーがあげられます。
ですので今回のGAリリースでは、既存の基本機能テンプレートに加え、シナリオベースの Teams アプリテンプレートを追加しました。
以下は、新しく追加された機能になります。
🤖 Bot 通知
チャットボットアプリや Teams アプリが通知を送信するというのはよくあるシナリオでしょう。しかし従来の Teams アプリにおけるボット通知の開発プロセスは正直言って面倒なものでした。ですのでこれをもっと楽にするために。今回りリースされた Toolkit では、生成されたコードを微調整することでアプリの通知機能を作成できるようになりました。
Teams Toolkit で新規アプリを作成するとき、このように。シナリオベースの Teams アプリの下にある Notification bot をクリックすると、Toolkit が通知を送信するボットを作成するための雛形を生成します。
メッセージのイベントは、トリガーまたはタイマーで指定できます。もし、ボットに定期的なリマインダーを送信させたい場合は、タイマートリガー (Timer Trigger) を選択します。
JavaScript と TypeScript の選択ができますが、たとえば前者を使用している場合、source/adaptiveCards/notification-default.jsonというファイルを見て、JSONでメッセージの構造を指定している箇所を確認してください。シンプルなテキストだけでなく、リストやテーブル、ボタンなどを使ってメッセージを表示することもできます。
また、JSON が Adaptive Card としてどのように表示されるかをライブでプレビューすることもできます。プレビューするには、Preview and Debug Adaptive Cards と書いてあるところをクリックするか、VS Code extension を入手してください。
また、src/timerTrigger.js (Timer ベースの通知用)では、送信するメッセージが Adaptive Card にどのように適用されるかを見ることができます。文字列を変更してみて、Teams クライアントでどのように動作するか見てみましょう。
for (const target of await bot.notification.installations()) {
await target.sendAdaptiveCard(
AdaptiveCards.declare(notificationTemplate).render({
title: 'Aloha! This is your daily reminder.',
appName: 'Contoso Bot',
description: `This is a sample time-triggered notification (${timeStamp}).`,
notificationUrl: 'https://www.adaptivecards.io/',
})
);
}
F5 デバッガでこの bot アプリを実行すると、予定した時間に bot から通知が届きます。
Bot でできることはまだまだあります。
💬 コマンド Bot
もう一つの典型的なシナリオは、コマンドに応答するボットでしょう。会話型の複雑なボットを想像するかもしれませんが、ほとんどの場合において必要なのはいくつかのコマンドに応答するシンプルなボットでしょう。たとえば他のサービスに見られる「スラッシュ・コマンド」もこのひとつになるでしょう。
Toolkit を使えば、これまでよりも簡単にコマンドボットを作成することができます。
Teams Toolkit の Create a new Teams アプリをクリックした後、メニューから Command bot を選択し、残りの作業を行います。
テンプレートコードが生成されたら、commandHandler関数を参照してください。例えば、JavaScript を選択した場合、bot/src/helloWorldCommandHandler.js というファイルが生成され、トリガーとなる単語と応答メッセージが表示されます。
このハンドラを変更して（あるいは新しいハンドラを作成して）、コマンドを作成することができます。
class HelloWorldCommandHandler {
triggerPatterns = 'Hi kitty';
async handleCommandReceived(context, message) {
// 返答メッセージを adaptive card で表示
const cardData = {
title: 'MeowBot 🐱 says',
body: 'Meow meow meow',
image: 'https://placekitten.com/500/400',
imageAlt: 'cat'
};
return MessageBuilder.attachAdaptiveCard(helloWorldCard, cardData);
}
}
そして、Adaptive Cards プレビューアーを使って応答メッセージの UI を bot/src/adaptiveCards/helloworldCommand.json で定義します。
これで、ユーザーがボットに「Hi kitty」とメッセージを送ると、ボットが応答するようになります。この例ではこのコマンドの通りでないとボットが返答しませんが、特定の単語を含むだけとか、大文字小文字を問わない、などと条件をつけたい場合は、正規表現などを使うといいでしょう。
📬 Outlook と Office 用にアプリを拡張
もう一つの嬉しいニュースは、Teams アプリが Outlook と Office 上でも動作するようになったということです。
新しいアプリを作成する際、以前のバージョンの Toolkit では1つの機能しか選択できませんでしたが、新しい Toolkit では、より多くの選択肢が増えました。
Outlook や Office のような他の M365 製品上で動作するアプリを作成するには、Extended Teams app across Microsoft 365 から1つを選択します。これは、役に立つコードテンプレートとサンプルを含む雛形コードを生成します。
「F5」デバッグ機能は、VS Code でコードをテストしているときの強い味方。そして今、Teams Toolkit のデバッグプロファイルには Outlook と Office が含まれており、どちらかを選択するだけでアプリの実行を確認することができます。
📢 Teams 開発に関するその他の更新情報
Teams や M365 アプリの開発関連でさらにアップデートがあります。
📜 Teams SDK v2 & Manifest の更新
Teams クライアント SDK は、タブやタスクモジュールを作成し、タブの設定やテーマの検出、認証などの機能を備えています。この SDK は v2 にアップグレードされ、最新バージョンでは Outlook や Office で動作するTeams アプリを拡張する機能が搭載されています。
また、新しい Teams Toolkit ユーティリティは、Teams-js SDK v1 を使用している既存のアプリを SDK v2 にアップグレードすることができ、インポートと API コールが更新されています。
Toolkit は、Office および Outlook をサポートするために、Teams マニフェストを最新のスキーマに修正することもできます。
🖼 タブを使ったアプリに特化した Fluent UI コンポーネント・ライブラリ
タブアプリ（Teams の Web埋め込み）を作成する際、アプリの UI を Teams と同じ様なインターフェイスにするための Teams UI Component Library というライブラリが用意されています。
Teams UI Component Library は、Fluent UI React の上に構築された UI ライブラリです。Fluent はマイクロソフトのデザインシステムで、すべての M365 に対応したUIライブラリのセットを提供します。
そして、そのベースとなるコンポーネントライブラリである Fluent UI React がv9にバージョンアップし、デザイン・トークンに対応し、パフォーマンスが大幅に改善されました 🎉
この記事を読んで、Teams Toolkit を使った Teams アプリ開発を始めるきっかけになれば幸いです。特に Teams アプリ開発初心者の方は、ぜひ参考にしてみてください。
また、コメントやフィードバックもお待ちしております。
それではまた、次の記事でお会いしましょう 👋
📚 Learn More
📢 Shoutout
この記事を書くにあたって、いろいろ助けてくださったみなさん、特に Teams Toolkit エンジニアチーム、そして Yu Zhang、Zhidi Shang、John Miller、Zhenya Savchenko、Pierce Boggan （敬称略）ありがとう ❤️
原文の英語で読みたい方はこちら
Microsoft Teams Toolkit for VS Code is now GA 🎉