お袋の｢ご飯です!！｣をSlackで受け取ってみた

###我が家
息子：40代　自宅（2階の自分の部屋）でWebフロントを書いている。
母：60代　根っからの昭和生まれ。1階の茶の間にいる専業主婦

#我が家の問題
母：あんたさ、仕事で部屋に入ると部屋から全く出てこないよね
息子：仕方ないでしょ。仕事してるんだから。
母：下からの呼びかけの声、聞こえてないでしょ。このご時世、大きな声で下から呼んだら、近所迷惑だし。
息子：スマホに電話くれれば良いよ。無料通話使って。
母：同じ家にいるのにケータイを使うなんてもったいない

###母：ねえ！仕事中に連絡取りやすい手段ってないの・・・？

##そう言われて息子は考えた・・・
仕事中に連絡取りやすいと言われれば、Slackだよな・・・
でも、お袋にSlackを教えるラーニングコストは高い。

そうだ！！
##Slackbotを使ってお袋の用事を受け取れる仕組みを作ろう
準備した物
・Slackのワークスペース
　Slackbotを入れるので、個人で自由で使えるワークスペースを1アカウント作りました。
・Web用のサーバー
　Webベースのアプリを作るので、最終的にどこかのWebサーバーにアップする必要があります。

##Slackbotを作ってみる
使ってみた、Slackbotのアプリは「Incoming Webhook」です。

web版の方のSlackで、「App」から、このアプリを検索すると追加することができます。
実際には、このような画面が表示されます。

このページに従って、設定していくとこのアプリを指定したSlackのワークスペースに追加することができます。
このページのタイミングで、Slackbot自体の名前やアイコンも設定できます。

ここまでで、Slackbotの準備はできました。

##Web周りを用意する
次に上で作ったSlackbotを動かす、Webを用意してみます。
とりあえずスマホのブラウザで表示されるフロント部分を次の写真のようにマークアップしました。

HTMLとCSSは、詳しくは述べませんが、inputTextとbuttonを準備しました。
この上で、JavaScriptを書いていきます。

main.js

{
    const inputText = document.getElementById('inputText');
    const button = document.getElementById('button');

    button.addEventListener('click', () => {
        submit();
        clearText();
        alert('通知しました');
    })
    

    function submit() {
        let text = inputText.value;
　　　　//Incoming Webhookで取得した、Webhookのアドレスが入ります
        const url = "https://hooks.slack.com/services/xxxxxxxxx/xxxxxxxxx/xxxxxxxxxxxxxxxxxxxxxxxx";
        const data = {
          text: text
        };
      
        const xml = new XMLHttpRequest();
        xml.open("POST", url, false);
        xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
        xml.send(`payload=${JSON.stringify(data)}`)
      }

      function clearText() {
        inputText.value = '';
      }

}

各オブジェクトに対して、紐付けをします。
function submit()でinputTextから、値を取得し、dataとして、セットします。また、Slackbotで取得したWebhook用のアドレスを定数にセットします。
セットしたものを次にXMLHttpRecestを使い、SlackbotのWebhookのアドレスにセットしたdataを渡してあげます。
最後に、inputTextをクリアにしたいのでfunction cleearText()でその処理を行います。
これらのfunctionをbuttonの中のaddEventListnerに入れてあげて、連打を防ぐ意味でalertを最後に仕掛けておきます。

これでinputTextにtest_messageというテキストを入力し、ボタンを押すと、次のようにSlackで表示されます。

##お袋用にさらにカスタマイズ
さて、仕組みはできましたがお袋は60代、いちいちテキスト入力が求められるのは大変だと思い、フロント部分とそれに伴い、JavaScriptのfunctionも以下のように変更しました。これに伴い、お袋用のSlackbotも作ってみました。

JavaScriptのコードは、すべて載せませんが、まず用件が入ってるbuttonには、Slackのwebhookに渡すためのdataを用意し、webhookにhttpRecestを送る際に引数として渡してあげます。inputTextに入力された際も同じような仕組みを取って、webhookにdataが渡されます。
ちなみに｢ご飯です！！｣というボタンが押されると次のようにSlackで表示されます。

ちなみに、名前の白い部分にはお袋の｢名前｣を入れてあります。
こうすることで、お袋からの｢ご飯です！！｣をSlackで受け取ることができました。

##お袋にこのアプリを触ってもらった
これは、Webアプリですのでウェブサーバーにアップをし、そのリンクをお袋のスマホのホーム画面に貼ってあげました。つまり、そこをタップすれば自動でブラウザで表示されたこのアプリを開くことができます。
実際に、お袋に触ってもらったところ予想以上に喜んでもらえました。そして遠慮なく私に連絡をくれるようになりました。さらに予想よりもテキストを入力して、「今日はカレーです」とか、「今日は麺類なんで伸びないうちにきてほしい」とか情報をくれるようになりました。
本当に作って良かったと思います。

##最後に
自分の知ってる範囲で、こうしてアプリを作ることによって自分自身も勉強になりました。これからも身近な問題などをこうした仕方で解決に取り組んでいきたいです。

##GitHub(マイチャイム)
https://github.com/yows1031/chime

##参考資料
・【Slack】一番楽なBotの作り方!メッセージ送信・受信するBotを作ろう
　　https://www.sejuku.net/blog/74469
・javascript/ajaxでIncoming WebhookにPOSTするまでにつまづいた箇所
　　https://qiita.com/kamabokochan/items/4230a6164ca368944592