からめもぶろぐ。

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

Global Microsoft 365 Developer Bootcamp 2020 Tokyo に登壇しました

2020/11/09 および 2020/11/10 に開催された Global Microsoft 365 Developer Bootcamp 2020 Tokyo で Microsoft Teams 開発のハンズオン担当として登壇しました。

connpass.com

今回ははじめてのオンラインでのハンズオン イベントということで不慣れな点も多々ありましたが最後までやりきれてよかったです。

スライドは Speaker Deck にアップロードしています。

今回のハンズオンについては Microsoft Learn のモジュールを使っていますのでそちらを参照いただくのがいいかと思います。

docs.microsoft.com

docs.microsoft.com

ハンズオン中に「Teams タブのデバックはどのようにやればいいのか」という質問をいただきました。こちらでも試してみたのですが、Visual Studio Code の Debugger for Chrome 拡張を使ってブレーク ポイントに止めることはできたのですが、ステップ インがうまく動かなかったので、ちょっと難しいかもしれません。Visual Studio Code に詳しい人だったらなんとかなるのかなあと思ったりしています。

Microsoft Teams の Power Apps からメッセージを投稿してみる

前回の記事では Param("hostClientType") を使って Microsoft Teams の実行されている環境を取得しました。

blog.karamem0.jp

Microsoft Teams から Power Apps には他にも情報が取得できるので、サンプルとして、現在表示されているチームとチャネルの情報を取得して、メッセージを投稿してみたいと思います。

画面イメージは以下のような感じです。Param("groupId") と Param("channelId") でチーム ID とチャネル ID をそれぞれ取得できます。メッセージを入力して [Post] をクリックすると Power Automate の呼び出しを行います。

f:id:karamem0:20201028142330p:plain

Power Automate ではシンプルに引数を受け取って Teams のメッセージを投稿するアクションを実行します。

f:id:karamem0:20201028142836p:plain

試しに実行してみます。適当にメッセージを入れて [Post] をクリックします。

f:id:karamem0:20201028142921p:plain

メッセージが投稿されているのがわかります。

f:id:karamem0:20201028143007p:plain

Microsoft Teams と Power Apps の相互作用ができるようになると Power Apps の作成はもっと可能性が見えてくると思います。ぜひいろいろ試してみていただければと思います。

Microsoft Teams の Power Apps でアプリがどの環境で実行されているのかを判断する

Project Oakdale によって Microsoft Teams で Power Apps を作成することができるようになりましたが、例えば特定のユーザーとのチャットにリンクするなど、Power Apps から Microsoft Teams の機能を呼び出したいことがあると思います。これは Microsoft Teams のディープ リンクを使用することで解決できます。

docs.microsoft.com

ただし以下のようにして呼び出すと必ずブラウザーが開いてしまいます。

Launch("https://teams.microsoft.com/_#/l/chat/0/0?users=someone@example.com")

Web 版の Teams はまだ問題ないのですが、デスクトップ版の Teams の場合はそのまま遷移してほしいので、以下のように URI スキームで呼び出したいです。

Launch("msteams://teams.microsoft.com/l/chat/0/0?users=someone@example.com")

ということで Web 版の Teams と デスクトップ版の Teams のどちらで実行されているかを判断したいのですが、これは Microsoft Teams から Power Apps を呼び出すときに渡される URL パラメーターを取得することで判断できます。具体的には Param("hostClientType") を呼び出すことで実行されている環境を取得することができます。

  • Web 版の場合

f:id:karamem0:20201028103226p:plain

  • デスクトップ版の場合

f:id:karamem0:20201028103420p:plain

他にも例えば Param("theme") とすれば Microsoft Teams で適用しているテーマの情報が取れたりもするので、テーマに合わせてデザインを変えるようなこともできます。

SPFxCalendar 1.5.3 を公開しました

SPFxCalendar 1.5.3 を公開しました。

SPFxCalendar はモダン UI で予定表リストをカレンダー表示するための Web パーツです。

github.com

変更点は以下の通りです。

  • イベントの登録および編集がダイアログ表示になりました。
  • 繰り返しイベントの登録ができるようになりました。
  • 繰り返しイベントの表示に関する不具合を修正しました。

Power Apps の Office365Users.RelevantPeople 関数が結果を 10 件しか結果を返してくれない

Power Apps の Office 365 ユーザー コネクタにはユーザーに関連する人物をサジェストしてくれる RelevantPeople という関数があります。

docs.microsoft.com

しかしこの関数ですが、結果を 10 件しか返してくれません。

f:id:karamem0:20201001103301p:plain

その理由は、RelevantPeople 関数は Microsoft Graph の People API を呼び出しており、その既定値が 10 件しか値を返さないことによります。Microsoft Graph を直接呼び出すのであれば、OData クエリの $top を指定することによって結果の件数を変更することができるのですが、Office 365 ユーザー コネクタではその手段が提供されていません。よって 10 件以上の結果を取りたい場合はカスタム コネクタで Microsoft Graph を呼び出すことになります。

カスタム コネクタの作成についてはすでに素晴らしい記事が存在します。今回はこちらを参考にしながら手順を追っていきたいと思います。

idea.tostring.jp

手順

アプリケーションの登録

まずは Azure ポータルから Azure Active Directory にアプリケーションを登録します。

f:id:karamem0:20201001103844p:plain

[証明書とシークレット] から新しいクライアント シークレットを取得します。

f:id:karamem0:20201001103925p:plain

[API のアクセス許可] で「People.Read」を追加します。

f:id:karamem0:20201001104020p:plain

これで準備は完了です。

カスタム コネクタの作成

全般

以下の通りに設定します。

スキーマ HTTPS
ホスト graph.microsoft.com
ベース URL /
セキュリティ

認証タイプには OAuth を指定します。

ID プロバイダー Azure Active Directory
Client id (登録したアプリケーションのクライアント ID)
Client secret (登録したアプリケーションのクライアント シークレット)
Login URL https://login.windows.net
Tenant ID (登録したアプリケーションのテナント ID)
Resource URL https://graph.microsoft.com
スコープ https://graph.microsoft.com/.default
定義

要求の [サンプルからインポート] より以下のように入力します。

動詞 GET
URL https://graph.microsoft.com/v1.0/me/people?$top=100

応答は Graph Explorer を使って https://graph.microsoft.com/v1.0/me/people を叩いてみて(ログインする必要はありません)その結果の JSON を [サンプルからインポート] で登録すればよいでしょう。

ここまでできたらいったんカスタム コネクタを保存します。

リダイレクト URL の登録

Azure ポータルに戻り、カスタム コネクタの [セキュリティ] に表示されているリダイレクト URL をアプリケーションに登録します。

f:id:karamem0:20201001111249p:plain

これでカスタム コネクタの設定は完了です。念のため接続を作成してテストを実行し結果が返ってくることを確認するといいでしょう。

実行

カスタム コネクタを実行してみます。$top を指定することができるようになっており、10 件以上結果が返ってくるのがわかります。*1 この方法を使って、$filter を指定できるようにしてあげれば、結果として返ってくるユーザーからグループを除外したり、組織内のユーザーに限定したりすることが可能となります。

f:id:karamem0:20201001111737p:plain

*1:キャプチャは 100 を指定したのに 50 件しか取ってこれていませんがもともと 50 件しかないだけです。