からめもぶろぐ。

俺たちは雰囲気で OAuth をやっている

Microsoft Teams Toolkit を使って Teams アプリの開発環境を構築する

Teams アプリの開発をこれから始めるというときに環境構築のための機能がいくつか提供されています。

  • Yeoman ジェネレーター (Yo teams)
  • Microsoft Teams Toolkit

Yeoman ジェネレーターについては Microsoft Learn で使用方法が説明されています。

docs.microsoft.com

Global Microsoft 365 Developer Bootcamp でもお話しさせていただきました。

blog.karamem0.dev

もう一つの 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 で拡張機能をインストールします。

f:id:karamem0:20210211143724p:plain

インストールするとアクティビティー バーに Microsoft Teams のアイコンが追加されるのでクリックします。[Create a new Teams app] をクリックします。サインインを要求されるので Teams アプリをホストするテナントのアカウントでサインインします。

f:id:karamem0:20210211143727p:plain

[Tab] を選択して [Next] をクリックします。

f:id:karamem0:20210211143740p:plain

[Finish] をクリックします。ワークスペースの保存先を聞かれるので任意のフォルダーを選択します。

f:id:karamem0:20210211144250p:plain

ワークスペースが Visual Studio Code で開きます。

f:id:karamem0:20210211144300p:plain

ターミナルで以下のコマンドを実行します。

npm install
npm run start

デバッグを開始するとブラウザーが起動します。*1

f:id:karamem0:20210211144921p:plain

[追加] をクリックします。

f:id:karamem0:20210211145211p:plain

アプリが表示されるはずですが、実は表示されません。これは localhost を HTTPS で起動しているのに証明書が正しくないことが原因です。なので自己証明書を作成してエラーが出ないようにする必要があります。

f:id:karamem0:20210211145254p:plain

自己証明書の作成と設定

Windows PowerShell (PowerShell 7 では駄目です) を管理者として起動し以下のコマンドを実行します。

 New-SelfSignedCertificate -Subject "localhost" -DnsName "localhost" -NotAfter "2099/12/31" -CertStoreLocation "cert:\CurrentUser\My"

作成した証明書を秘密キーをつけて pfx ファイルとしてエクスポートします。

f:id:karamem0:20210211154249p:plain

エクスポートした pfx ファイルを [信頼されたルート証明機関] にインポートします。

f:id:karamem0:20210211154401p:plain

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

パラメーターの意味については公式ドキュメントを参照してください。

create-react-app.dev

さてこれで準備ができたので再度 npm run start を実行しデバッグを開始します。

f:id:karamem0:20210211155340p:plain

表示されました!

まとめ

よく Teams アプリの開発をするときに「ngrok は必須です」という話を見ますが、見ていただいたとおり必須ではなく、localhost でも実行可能です。ただし、HTTPS であることは必須なので、今回の手順のように自己証明書を用意するか、ngrok を使うということになります。ただ Microsoft Teams Toolkit の場合、ngrok だと URL がランダムになってしまうので大変かもしれません。Yeoman ジェネレーターはそのあたりよろしくやってくれます。

*1:うまくいかない場合は Visual Studio Code の Debugger for Chrome や Debugger for Microsoft Edge がインストールされていない可能性があります。