Slackの特定のチャンネルを監視して、IoT ブロック MESH LEDを光らせる

# 目的
スマフォの通知ではダメなの？

はい、だめなのです！
私のスマフォは常時マナーモードで単純に気づかないのです(´ﾉω・｀*)ﾅｹﾙ－

そこで、IoT ブロック MESH LEDを使って
Slackの障害報告専用チャンネルを監視して光で知らせることができれば
晩ご飯つくってるときとかTVみているときでもすぐに反応ができるのではと考えました。

ちなみに社畜ではありませんが
エンジニアとして最低限の責任を果たしたいだけです(　･`ω･´)ｷﾘｯ

# MESHとは
以下リンクを確認ください

https://meshprj.com/jp/

今回利用するMESH LEDはこちら

https://meshprj.com/jp/products/blocks/MESH-100LE.html

# 事前準備
- MESH LEDを購入
- Googleスプレッドシートを作成してGoogle Apps ScriptをWebアプリ化する
- Slack APIを利用するたにBOTを作成
- MESH アプリをダウンロード
- MESH SDK利用のためのアカウントを登録  
MESH SDKとは、ざっくりオリジナルのレシピを作成するもの  
参考：https://meshprj.com/sdk-jp/

# Let's try!

## 光らせるまでの整理
1. 一定間隔で監視を走らせる
1. :triangular_flag_on_post:Slackの障害報告専用チャンネルのメッセージを取得して`最終投稿日を取得`
1. Googleスプレッドシート
    1. :triangular_flag_on_post:で取得した最終投稿日をPOST
    1. シートA１の登録済みの最終投稿日を取得
    1. シートA１の値を:triangular_flag_on_post:で取得した最終投稿日で更新
    1. `登録済みの最終投稿日`と`POSTされた最終投稿日`を比較
    1. 比較した結果をレスポンスに含めて返す
1. レスポンスの結果をみて`MESH LEDを光らせる`OR`処理を止める`

## 1. MESH LEDを購入
公式サイトにリンクがあるので買いましょう。

https://meshprj.com/jp/tag/

## 2. Googleスプレッドシートを作成してGoogle Apps ScriptをWebアプリ化する
1. Googleスプレッドシートを作成
![スクリーンショット 2021-04-28 15.31.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/5b4e8244-a8a2-510d-aec7-5ade1041cdef.png)

1. ツールのスクリプトエディタをクリックして開く
1. コード.gs

    ```javascript
    function doPost(e) {
      const sheet = SpreadsheetApp.getActive().getSheetByName('alert');
      const range = sheet.getRange('A2');
      const value = range.getValue();
      const params = e.parameter;
      let result = {
        'isAlert': false
      };

      if (!'latest_timestamp' in params) {
        return postResult(result);
      }
  
      if (value !== params['latest_timestamp']) {
        range.setValue(params['latest_timestamp']);
        result.isAlert = true;
        return postResult(result);
      }
  
      return postResult(result);
    }
    
    function postResult (obj) {
      return ContentService.createTextOutput(JSON.stringify(obj)).setMimeType(ContentService.MimeType.JSON);
    }
    ```
1. デプロイしてWebアプリ化
![スクリーンショット 2021-04-28 14.06.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/f29186b1-9c48-94ca-c8f1-4cb019a83fc5.png)

1. デプロイ完了後にウェブアプリのURLが発行されるのでメモ

## 3. Slack APIを利用するたにBOTを作成
手順はググればたくさんでてくるので省略します。
必要なのはAPI利用のためのTokenと適切な権限を設定してください。

今回利用するAPI

https://api.slack.com/methods/conversations.history

## 4. MESH SDKを利用してオリジナルレシピを作成
MESH SDK利用のためのアカウントを登録済みであることが前提

MESH SDKのドキュメント
https://meshprj.com/sdk/doc/ja/

### Slack レシピ
特定チャンネルのメッセージを取得して最新投稿データのタイムスタンプを取得する
Connectorのラベル名はなくてもよい
![スクリーンショット 2021-04-28 14.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/c445b89f-769b-01d7-2d49-1f96811085b6.png)

#### Code詳細

callbackSuccessが呼ばれたら
それ以降に記述された処理がどうなるかまでは調べ切れていないのであしからず。

##### Initialize
```javascript
return {
    resultType : 'pause'
}
```
##### Receive
```javascript
記述なし
```
##### Execute
```javascript
var url = "https://slack.com/api/conversations.history";
var token = '＊＊＊＊';
var data = {
	'channel' : '＊＊＊＊',
	'limit' : 10
};
 
ajax ({
    url : url,
    data : data,
    type : 'get',
	contentType : 'application/x-www-form-urlencoded',
	dataType : 'json',
    timeout : 10000,
	beforeSend: function( xhr ) {
		xhr.setRequestHeader('Authorization', 'Bearer ' + token );
	},
    success : function ( contents ) {
		log('Slack Response : ' + contents);
		if (contents.ok) {
			for (k in contents.messages) {
				var v = contents.messages[k];
				log('text : ' + v.text);
				if ('blocks' in v) {
					callbackSuccess( {
						resultType : 'continue',
						messageValues : {
							latestTimestamp : v.ts
						}
					} );
					break;
				}
			}
		} else {
			callbackSuccess( {
            	resultType : 'stop'
        	} );
		}
    },
    error : function ( request, errorMessage ) {
		log('Slack Error : ' + errorMessage);
        callbackSuccess( {
            resultType : 'stop'
        } );
    }
});
 
return {
    resultType : 'pause'
};
```
##### Result
```javascript
return {
    resultType : 'continue'
};
```

### Google Sheets レシピ
Slackレシピで取得したタイムスタンプをGoogle SheetsにPOSTする
Connectorのラベル名はなくてもよい
![スクリーンショット 2021-04-28 14.28.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/94b2c302-e7c4-2186-fb96-68c15a9d4f58.png)

#### Code詳細

callbackSuccessが呼ばれたら
それ以降に記述された処理がどうなるかまでは調べ切れていないのであしからず。

##### Initialize
```javascript
return {
    resultType : 'pause'
}
```
##### Receive
```javascript
記述なし
```
##### Execute
```javascript
var url = "https://script.google.com/macros/s/****/exec";
var data = {
	'latest_timestamp' :  messageValues.latestTimestamp
};

log(messageValues.latestTimestamp);

ajax ({
    url : url,
    data : data,
    type : 'post',
	contentType : 'application/x-www-form-urlencoded',
	dataType : 'json',
    timeout : 10000,
    success : function ( contents ) {
		log('Google Response : ' + contents);
		if (contents.isAlert) {
			log('Alert occurs');
			callbackSuccess( {
				resultType : 'continue'
			} );
		} else {
			log('Peace');
			callbackSuccess( {
				resultType : 'stop'
			} );
		}
    },
    error : function ( request, errorMessage ) {
		log('Google Error : ' + errorMessage);
        callbackSuccess( {
            resultType : 'stop'
        } );
    }
});
 
return {
    resultType : 'pause'
};
```
##### Result
```javascript
return {
    resultType : 'continue'
};
```

## 5. MESH アプリで組み立てる
MESH SDKで作成したレシピの追加方法は下記URLの`2. 追加`で説明があります。
https://meshprj.com/sdk/doc/ja/

完成図
![C6500534-12BB-473C-818F-FC6412D09B67.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/c8dc5264-aac9-e5ce-1f30-5f8eaf6f8f99.jpeg)

### 各タグの詳細

#### ①　既存レシピのタイマーを設置して`一定の間隔で`を設定
![A2D2A8FD-57BE-4F81-BC8A-62E5D0DADEA0.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/a0d00075-d3b4-7717-0350-eb954a1f59a8.jpeg)
#### ②　MESH SDKで作成したレシピの Slack関数を設定
![32F12E59-FC3A-41E5-836D-D5C160413874.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/47429aa9-844e-6da1-9ff1-38ef863c34af.jpeg)
#### ③　MESH SDKで作成したレシピの Google Sheets関数を設定
![6F62DCD0-92CF-4270-935E-7C7E4F4C0CD1.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/cc916f1e-9bc7-5270-5279-f95ec58d37fe.jpeg)
#### ④　ご自由に
![00E0060F-7639-412C-A3DD-C584CDEC4C72.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529223/5ee01fba-11d6-4e05-341d-67a45f680af6.jpeg)

## 6. 以上で完成


# 光らせてみた感想

単純に楽しい:bangbang:
可能性は無限大:bangbang:

ただ、おそらくですが
光らせるまでの処理はiPhoneに入れたMESHアプリが担当するので
バッテリーの減りとかが気になる:sweat_smile:

今回は機種変して不要となったiPhoneを利用したのでよいけど
iPhoneの役割をRaspberry Piに置き換えることも可能とのこと:sunglasses:

https://meshprj.com/jp/hub/