【パブリッシャー】簡単！ Microsoft Teamsにメッセージを送ってみる

今回は、クエリビルダの**Expression:拡張表現**の関数群の中から、MS Teamsにメッセージを送る関数を使用して、簡単にWebインターフェースからメッセージを送ってみようと思います。
## 前準備 ##
#### ChannelLink使用時の認証設定 ####
**Expression:拡張表現**でChannelLinkを利用してメッセージを送信する場合は、使用する関数にMicrosoft Graph API認証情報を直接渡すことができます。しかし、クエリの中にその都度設定していると、変更があった場合等の管理が煩雑になってしまいます。通常はSharperlightをインストールするアプリケーションサーバーに対し、ひとつの専用認証アカウントを準備すると思うので、Sharperlight内のどこか一か所に設定できれば管理も簡単になります。これはSharperlightの**サイトセットアップ**で実現することができます。

[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**サイトセットアップ**を起動します。
**サイトセットアップ**が起動したら、**プロダクトの設定 -> システム**を選択します。右側にMicorosoft Graph API用のプロパティが表示されるので必要な情報を記入します。'閉じる'ボタンで設定を保存し、Sharperlightサービスを再起動しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/24a00676-fe6a-0a91-849e-adee2298f08f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f7178841-8876-27da-c489-c1285d8468c3.png)
## Webインターフェースの作成 ##
Webインターフェースは[Sharperlight](https://sharperlight.jp/)**パブリッシャー**で作成するWebレポートを使用します。
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから**パブリッシャー**を起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/467b9c60-5cd0-fce8-8351-fd59ddaf6429.png)
**パブリッシャー**が起動したら`新規`ボタンでWebレポートの作成を開始します。
レポートのダイアログが開いたら一意の**コード**、**グループ**、**タイトル**、**レポートのタイトル**を記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/fe2d5fad-e156-31a8-da31-0fb28d2554f0.png)
`クエリを編集`ボタンでクエリビルダを開きます。
今回はメッセージを送るためだけなのでクエリ結果は1行だけ表示されればいいです。これは送信後のメッセージを出すためだけです。
**フィルター領域**で`製品`に**システム**、`テーブル`には**製品**を選択します。テーブルフィルターのオプションで`トップn行`を**1**に設定。これで1行しか結果は戻ってきません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/28e65930-e88b-98be-d5bb-771831effdf9.png)
**出力領域**にプロダクトId列を設定して、プレビューで結果を見てみます。よさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a79ce34e-cf8f-d2b3-9b23-de620ccab739.png)
次にメッセージを記入させるフィールドを作成します。これはテキスト型のフィルタとしてWebレポートのプロンプトに表示させるようにします。
**フィルター領域**の右クリックメニューから**その他 -> テキスト**を選択しテキスト列を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1afc6b6a-41fc-2ddd-fa83-ab8f78ea01e8.png)
このフィルター列には範囲入力は必要ないので入力フィールドを1つにします。それには追加したフィルター列のオプションを開き、**1つの値のみ**オプションを設定します。また、`説明`は**メッセージ**に、`フィルター名`は**Message**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3e635d02-4847-819b-b120-834ce406d894.png)
これでクエリの母体は完成です。'OK'ボタンで保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c1e36500-9ba8-d901-12d7-59d5d3720194.png)
レポートも`適用`ボタンで保存し、`ビュー`ボタンで実際のレポートがどのように表示されるか見てみます。少しお化粧直しが必要そうですが、ここまではこれで良しとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c2493e15-cc72-9e34-de26-a69909df39e3.png)
### ChannelLinkを利用した例 ###
ChannelLinkの使用では、Microsoft Teams側でメッセージを受け取るチャンネルのURLリンクを取得し、そのURLを使用する必要があります。今回は数チャンネルのURLを準備しておいて、Webレポートのプロンプトでどのチャンネルを利用するか選択できるようにしたいと思います。　
では先ほどのクエリを再度開き、編集を開始します。
送信先チャンネル選択フィルターを作成します。**フィルター領域**の右クリックメニューから**その他 -> テキスト**を選択しテキスト列を追加します。追加されたフィルター列のオプションを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b6ad9f7a-3a58-467d-64fd-a2df02ec6239.png)
`フィルター名`を**channel**にします。
`説明`は**チャンネル**。
**1つの値のみ**オプションを選択。
**ドロップダウンリストの使用**および**説明を表示**オプションを指定。
更にサブクエリーを利用して検索データを準備します。`サブクエリーを編集`ボタンでクエリビルダを開きます。
Microsoft Teamsで取得した数個のチャンネルURLをカスタムデータとしてこのように定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b1da1588-e1ef-77b2-7dc1-0f93b2619a5a.png)
`URL列`と`名称列`を出力します。フィルターとして選択された場合、最初の列が**選択値**となるので、今回はURLが必要なので`URL列`が一番上になっています。`OK`ボタンでチャンネルフィルター用のサブクエリを保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3ec23805-2842-e225-66d2-3f799bbe77e9.png)
**検索リストに使用**オプションをONにします。
以上でチャンネルフィルターのオプション設定は完了です。`OK`ボタンでオプション設定を保存します。
これでフィルターの設定は終了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/50e07e60-adcc-6865-3f2f-7311d297517a.png)
では次に**Expression:拡張表現**を使用して実際にメッセージを送る機能を作成します。
**出力領域**の右クリックメニューから`拡張表現を追加`を選びます。関数群の中からMicrosoft Teams - Create Message using Channel Link - MsTeamsCreateMessage(....)を選びます。テンプレートが編集フィールドにコピーされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/15b99961-cba0-f4db-8e31-5346b8585ccc.png)
この部分は上記で述べたようにサイトセットアップで既に定義済みなのでそれを利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/078b0024-610b-ca39-bfb0-1e65ad57692c.png)
なのでこの関数**AzureGraphAccessTokenSiteSetup**に置き換えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7dd30f23-5ea2-6a6f-ebc4-c2d86fc8297c.png)
2番目の引数はチャンネルのURLなので、プロンプトとして設定したチャンネル列の参照名をこのように指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/570c75fc-42ff-910e-2052-489e8c829240.png)
3番目はSubject、送信タイトルみたいなものでしょうか。今回は直接記入します。
4番目がメッセージなので、プロンプトとして設定したメッセージ列の参照名を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ee216232-746a-9218-971d-389a4640ddce.png)
5番目は送信するメッセージがHTML形式の場合はTrue、そうでない場合はFalseをしていします。
6番目は重要度を指定する引数です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7840baba-2463-b13e-f887-815ace198d80.png)
最後に`データ型`を**Text**に指定して、`OK`ボタンで**Expression:拡張表現**を保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e40faeb0-5ea1-ea17-cdf3-72b2077e31f4.png)
追加した**Expression:拡張表現**の説明を**メッセージの送信**と改名します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a4d75cbc-5d5d-86bc-ecab-deac0a41bf65.png)
これでプロンプトとして選択されたチャンネル、及び入力されたメッセージがこの**Expression:拡張表現**に渡され、送信関数によって送信されるといった機能が完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/25ae47ca-ebb4-6861-1a32-a81029a44930.png)
あとは送信結果を表示するために新たに**Expression:拡張表現**を追加します。
以下の構文は、メッセージを送信する関数を定義した**Expression:拡張表現**列に、**error**という文字列を含んだ返却値が返されるかどうかで送信結果を判断しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/88750c03-8826-8e2a-a9fa-184ef18a284f.png)
```
IIF(Instr({%メッセージの送信}, "error",0)
,"送信エラー"
,"メッセージは正常に送信されました"
)
```
`OK`ボタンで保存します。名称を**結果**とします。**プロダクトId列**は意味を持たないので出力領域から削除して完成です。また**メッセージの送信列**は表示する必要が無いので**非表示**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/73d0ac91-d582-573c-571b-fdfca8a88abe.png)
`OK`ボタンでクエリを保存します。レポートも`適用`ボタンで保存し、`ビュー`ボタンでレポートを拝見してみます。ちょっと化粧直しが必要そうですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/cc4691af-6af8-ca3f-6965-1e8c2c738fce.png)
でも機能は良さそうです。きちんと送信されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e091f927-5610-2351-4614-c32e63c83661.png)
それでは少し化粧直しをします。
レポートの定義を再度開き、`オプション`タブの`フィルターの複数行表示`を**オン**にして、`1行の項目`を**1**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d8a6eccc-26ca-d362-a35d-4c8e65109279.png)
次に以下のCSS定義を`ユーザー設定のスタイル`オプションに設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7d34431d-175d-6525-f0bc-8cd067fa5835.png)
```
<style type="text/css">
#promptFieldSet > div.dataEntryItem{
    width: 620px;
}
#pi2{
    width: 600px !important;
}
input.promptButton.k-button{
	display:none !important;
	visibility:hidden !important;
}
</style>
```
これで化粧直しが済みました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/580a1594-5610-714e-12b1-86014e74875b.png)
### Webhookを利用した例 ###
今度はIncoming Webhookを利用した機能を作成していきます。先ほどのChannelLinkを利用した機能で作成したレポートを複製して、その複製されたレポートを編集していきましょう。時間の大幅な短縮になります。
パブリッシャーで先ほどのレポートを選択し、右クリックメニューから複製を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d1c406c3-a0ff-0d4e-7bc0-73ffc50fc067.png)
複製されたレポートを開きます。先ず`クエリを編集`ボタンでクエリの編集を開始します。
Webhook方式ではチャンネルが必要ないので、`チャンネル`フィルターを削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/237f1519-9b65-a6df-fba0-9e81d249ae4d.png)
**出力領域**に移動しメッセージを送信する関数が定義されている`メッセージの送信`列を開きます。前の構文をクリアします。関数群からMicrosoft Teams - Create Message using Webhook Link - MsTeamsCreateMessageWithWebhook(...)を探し出し、テンプレートを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/89d1bde7-c2c2-7fdf-2287-e16dd871662b.png)
一度ここでこの拡張表現は保存します。
新たに拡張表現を追加して、構文欄にTeamsから取得したWebhook URLを貼り付けます。参照名をwebhookURLとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a893b586-b842-c254-b2fe-2ddcc39fc476.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/235df3bc-8024-5f47-5f6e-43a089b7d4e4.png)
もう一度`メッセージの送信`列を開きます。関数の最初の引数を`Webhook URL`列の**参照名**に置き換えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/329f2c49-0eea-e216-cb64-db2bc465b5e1.png)
残りの引数もこのように変更します。メッセージはフィルターのmessageを参照しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e5e880d8-c384-9c4e-ca8d-53b782e784a2.png)
これでこの送信関数は完成です。
最後に`結果`列の構文を編集します。このような構文を使用します。メッセージが正常に送信されると数字が戻ってくるので、IIF文を利用して正常な場合は緑のアイコン、異常があった場合は赤のアイコンを表示するようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5c218098-9114-f224-dff0-3909b97bca18.png)
```
IIF( IsNumeric({%メッセージの送信})
	, "_icon:RadioOptionOn" 
	,"_icon:RadioOptionOff"
)
```
最終的に、出力領域はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/800f6744-5c10-63bb-28bc-51f5a5d6cab9.png)
`OK`ボタンでクエリを保存します。
レポートを保存する前に少しCSS定義を編集します。チャンネルフィルターを消したので少し修正が必要です。
この箇所を**pi2**から**pi1**に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d84f096d-e8eb-db91-4c1b-4e0310696771.png)
`適用`ボタンでレポートも保存し、`ビュー`ボタンでレポートをチェックします。
メッセージを空白のまま送信すると異常が発生し、赤のアイコンが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4a3b386b-32aa-dbe0-e95c-028c644a3dfc.png)
正常終了の場合はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/94d35f87-fb35-eb11-c0db-ab0fb1336c2e.png)
届いたメッセージは、ほら！この通り。:thumbsup:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/91a52670-a777-7bd4-c182-c3a1a40cfa1b.png)
以上で、Webレポートを利用したMicrosoft Teamsにメッセージを送る機能の検証を終わります。

では、失礼します。