Microsoft Teams Toolkit を使って Teams アプリの開発環境を構築する
はじめに
Teams アプリの開発をこれから始めるというときに環境構築のための機能がいくつか提供されています。
- Yeoman ジェネレーター (Yo teams)
- Microsoft Teams Toolkit
Yeoman ジェネレーターについては Microsoft Learn で使用方法が説明されています。
Global Microsoft 365 Developer Bootcamp でもお話しさせていただきました。
もう一つの Microsoft Teams Toolkit での Teams アプリについて、Yeoman ジェネレーターとの違いや、実際に構築してみてのハマリどころをまとめてみたいと思います。
Yeoman ジェネレーターと Microsoft Teams Toolkit の違い
どちらも React を使ったアプリを構築できるという点では同じですがいくつかの相違点があります。
| Yeoman ジェネレーター | Microsoft Teams Toolkit | |
|---|---|---|
| 言語 | TypeScript | JavaScript |
| タスク ランナー | gulp | react-scripts |
| ngrok | あり | なし |
Yeoman ジェネレーターのほうがいろいろ親切ではありますが、Microsoft Teams Toolkit は create-react-app で作ったのに近い構成になるため、React に慣れている人には扱いやすいです。個人的には、よりシンプルな Microsoft Teams Toolkit で始めるのをおすすめしたいです。
Microsoft Teams Toolkit を使ったプロジェクトの作成
Microsoft Teams Toolkit は Visual Studio Code の拡張機能です。なのでまずは Visual Studio Code で拡張機能をインストールします。
インストールするとアクティビティー バーに Microsoft Teams のアイコンが追加されるのでクリックします。[Create a new Teams app] をクリックします。サインインを要求されるので Teams アプリをホストするテナントのアカウントでサインインします。
Tab を選択して Next をクリックします。
Finish をクリックします。ワークスペースの保存先を聞かれるので任意のフォルダーを選択します。
ワークスペースが Visual Studio Code で開きます。
ターミナルで以下のコマンドを実行します。
npm install
npm run start
デバッグを開始するとブラウザーが起動します。[1]
追加 をクリックします。
アプリが表示されるはずですが、実は表示されません。これは localhost を HTTPS で起動しているのに証明書が正しくないことが原因です。なので自己証明書を作成してエラーが出ないようにする必要があります。
自己証明書の作成と設定
Windows PowerShell (.NET Core ベースの PowerShell では駄目です) を管理者として起動し以下のコマンドを実行します。
New-SelfSignedCertificate -Subject "localhost" -DnsName "localhost" -NotAfter "2099/12/31" -CertStoreLocation "cert:\CurrentUser\My"
作成した証明書を秘密キーをつけて .pfx ファイルとしてエクスポートします。
エクスポートした .pfx ファイルを 信頼されたルート証明機関 にインポートします。
OpenSSL を使って以下のコマンドを実行します。
openssl pkcs12 -in localhost.pfx -nocerts -nodes -out localhost.key
openssl pkcs12 -in localhost.pfx -clcerts -nokeys -out localhost.crt
ワークスペースに cert というフォルダーを作成して localhost.key と localhost.crt をコピーします。.env ファイルに以下を追加します。
SSL_CRT_FILE=./cert/localhost.crt
SSL_KEY_FILE=./cert/localhost.key
パラメーターの意味については公式ドキュメントを参照してください。
さてこれで準備ができたので再度 npm run start を実行しデバッグを開始します。
表示されました！
おわりに
よく Teams アプリの開発をするときに「ngrok は必須です」という話を見ますが、見ていただいたとおり必須ではなく、localhost でも実行可能です。ただし、HTTPS であることは必須なので、今回の手順のように自己証明書を用意するか、ngrok を使うということになります。ただ Microsoft Teams Toolkit の場合、ngrok だと URL がランダムになってしまうので大変かもしれません。Yeoman ジェネレーターはそのあたりよろしくやってくれます。
-
うまくいかない場合は Visual Studio Code の Debugger for Chrome や Debugger for Microsoft Edge がインストールされていない可能性があります。 ↩︎
Discussion