◇はじめに
最近、Azure logic Appsをさわり始めたので、勉強がてらM5Stackと組み合わせて呼出しアプリをつくりました。
◇開発環境等
- 使用デバイス
- M5Stack Core2
- 使用ツール：
- Azure Logic Apps
- Teams
- UIFlow1.0
- Postman
Azure Logic AppsはAzure版Power Automateといった形でPower Automate使ったことがあればそこまで戸惑わずに使えました。
個人的に、プレミアムコネクタが従量制で使えるのが使い勝手がよかったです。
Azure Logic Appsの概要は以下のサイトが参考になりました。
◇最終的にできたアプリ
作成したアプリの各画面です。
選択画面から、呼び出したいユーザー名の右にある呼出しボタンをタッチしOKを押すと、Azure Logic Apps経由でTeams上のチャネルにメンション付きの通知がアダプティブカード形式で送られます。
（Teamsでの通知は受付に来客がきたという仮定の通知内容になります）
また、選択画面に表示されるユーザー名についても、Azure Logic Apps経由でOffice365 Groupのユーザー一覧を取得しています。
◇全体構成
全体の構成にM5Stackの画面遷移を加えたものを図にしました。
今回は、事前に画面遷移の設計をしていなかったので、完成したM5Stackの実際の画面を載せています。
Teams通知までの流れとしては、
- M5Stackが起動すると、Azure Logic Appsその1にアクセスし、Azure Logic Apps経由でOffice365のユーザー情報をjson形式で取得
- 受け取った情報を基に、M5Stack上にユーザー名を表示
- ユーザー名の右側にある「呼出し」ボタンを押して、「OK」ボタンを押すと、Azure Logic Appsその2にHTTPリクエストを送る
- Azure Logic Appsその2では、受け取ったUPNを基に、ユーザー情報の詳細を取得
- Teamsのチャネル上にメンション付きで通知を送る
という形になります。
◇実装
処理順とは異なりますが、Azure Logic Appsその1⏩Azure Logic Appsその2⏩M5Stackの順序で実装内容について記載します。
Azure Logic Appsその1（ユーザー情報取得）
まず、Azure Logic Appsでユーザー情報を取得するワークフローを記載していきます。
なお、今回はAzure Logic Appsのリソース作成方法については割愛します。
リソース作成方法は公式ドキュメントに手順が載っているので、こちらを参考にしてください。
なお、Azure Logic Appsには、Standardプランと従量課金プランがありますが、今回は従量課金プランを選択しています。
フロー作成
全体のフローは以下のようになります。今回はトリガは「HTTP要求の受信時」トリガを使用しました。
グループメンバーの一覧表示フローでは、指定したグループのメンバー一覧を取得します。
次に、取得したメンバー情報から必要な項目の抜き出しとjson形式への変換を行っていきます。
ユーザー毎のjson形式データをリスト化し、最後にリスト全体をemployeeキーのvalueとしてjsonの形にしています。
単体テスト
まず、このAzure Logic Appsが問題なく動作するかをテストしますが、この時点でM5Stack側は未実装のため、別の方法で確認を行う必要があります。
Python等のプログラミング言語で確認する方法もありますが、今回はAPIプラットフォームであるPostmanを使用しました。
Postmanの使い方については、過去に実施されたセミナー資料がたくさん公開されていますので、こちらを参考にしてもらえればと思います。
また、私も過去にPostmanとSwitchBotの記事を書いてますので、良かったら読んでみてください。
Postman上で、テスト用のコレクションを作成します。そのコレクション内に、2つのPOSTメソッドのリクエストを追加します。
まず、コレクション内の変数設定で'baseUrl'という変数を追加し、現在値にはAzure Logic Appsで生成されたURLを入力します。
次に、「ユーザー情報取得」リクエストを選択した状態で、「ボディ」項目内にパラメータを入力していきます。
この際、データ形式はRaw-JSONを選択します。
また、「ヘッダー」項目内でContent-Typeがapplication/jsonになっているかを確認し、もしなっていない場合は修正します。
※Content-Type項目がない場合は新規追加
この状態で、「送信」ボタンを押してHTTPリクエストを実行し、応答にユーザー情報が取得できればテスト完了です。
Azure Logic Appsその2（Teamsメンション通知）
次に、Azure Logic AppsでTeams上に通知するワークフローを記載していきます。
なお、こちらのアプリも従量課金プランを選択しています。
フロー作成
全体のフローは以下のようになります。今回はトリガは「HTTP要求の受信時」トリガを使用しました。
グループメンバーの一覧表示フローでは、指定したグループのメンバー一覧を取得します。
リクエストに含まれているUPNデータからそのユーザーの情報取得を行っています。
取得したユーザー情報を使ってメンショントークンを取得し、チャネル上にアダプティブカード形式で通知します。
アダプティブカード形式で通知を行う方法は、以前に別で記事をまとめていますので、参考にしてもらえればと思います。
単体テスト
こちらのAzure Logic Appsについても、先ほどと同様にPostmanを使ってテストします。
基本的には、先ほどと発行されるURLが変わりますので、コレクション内の変数設定内の'baseUrl'を修正します。
次に、「Teams通知」リクエストを選択した状態で、「ボディ」項目内にパラメータを入力していきます。
データ形式はさっきと同じRaw-JSONです。
このとき、UPNのvalueは、実際に自テナント内で有効なものを入力してください。
なお、nickNameについては、ボディには含めていますが、今回Azure Logic Apps内では特に参照していません（UPNからユーザープロフィールを取得させているため）
この状態で、「送信」ボタンを押してHTTPリクエストを実行し、応答が「○○を呼び出しました。」となっていればテスト完了です。
M5Stack
最後にM5Stack側のUIFlowの実装内容について記載していきます。
今回はタッチパネル機能をもつM5Stack Core2を使用しています。
全体としては、下の画像のようになります。
ボリュームが多いため、処理毎に分けて説明していきます。
初期化処理
起動後、変数の初期化とトップ画面表示のための画面初期化を行っています。
それらの初期化処理が完了後、起動画面用のテキスト（lblBoolTexg）とスクリーン（lblBoolScreen）をクリアしています。
変数初期化関数では、画面表示用の各種フラグ変数の初期化を行い、前述のAzure Logic Appsその1（ユーザー情報取得）を呼び出しています。
レスポンスのjsonデータをM5Stack内で処理しやすいように、社員リスト、社員名リスト、社員数、最大ページ数といったデータを取り出しています。
トップ画面表示
初期化処理が完了すると、トップ画面を表示します。
この画面では、「呼出」ボタンを表示するだけの画面を表示し、ボタンを押すと、選択画面の1ページ目に遷移します。
選択画面表示
選択画面では、社員名リスト変数から1ページにつき2ユーザー分を取り出し、表示しています。
ボタンA（M5Stack左下）、ボタンC（M5Stack右下）にはページ移動ボタンに割り当て、表示するユーザーを切り替えています。なお、最大ページ数を超えないようにクリップしています。
ボタンB（M5Stack下）を押すと、先ほどのトップ画面に戻ります。
ユーザー名の右側にある「呼出し」ボタンを押すと、呼出し確認画面に遷移します。
呼出し確認画面表示
呼出し確認画面では、先ほど選択したユーザー名を表示し、呼出し確認用の「OK」、「Cancel」ボタンを配置しています。
「Cancel」ボタンを押した場合は先ほどの選択画面に戻ります。
「OK」ボタンを押した場合は、Azure Logic Appsその2（Teamsメンション通知）を呼び出しています。
呼出し実行関数の中では、先ほど選択したユーザー名の社員リスト要素番号をキーとした社員データをbody内に入れています。関数実行後に呼出し完了画面に遷移します。
実際にテストしたところ、Azure Logic Apps側を無効にした状態でもHTTPリクエストが成功時側に倒れてしまったので、応答内容でチェックする必要がありそうです。
呼出し完了画面表示
完了画面では、予め設定したテキストと「HOME」ボタンを配置しています。
「HOME」ボタンを押すと、選択画面に戻ります。
結合テスト
最後に、全体を通してテストを行い、Teamsで通知されれば完了です。
もし、うまく動作しない場合、
- Azure Logic Apps側の実行履歴がある場合、その中身をチェック
- Azure Logic Apps側の実行履歴がない場合（Azure Logic AppsまでHTTPリクエストが届いていない場合）、M5Stack側でデバッグ（UIFlow上でシリアル表示など）していく
といった切り分けで進めるのがいいと思います。
◇おわりに
今回は、マイコンボード（M5Stack）とiPaaS（Azure Logic Apps）の連携事例について記事を書いてみました。どなたかの参考になれば幸いです。