R筋

プログラミングと時々育児

slackで育児ログをとる

一ヶ月前に作ったやつなんですけど我が家では全く活用されませんでしたので、すごく簡単にメモ。

何なの?

こんなウェブページを作りました。
f:id:anpontan382:20180726232311p:plain

ローカルからアクセスして、💩(うんち)を押すと、botがslackにうんち時刻を投稿してくれます。
f:id:anpontan382:20180726232833p:plain


どうやったの?

○クライアントサイド
CSSはこちらを参考にした。
saruwakakun.com

ボタンが押されたら、jqueryでpostする。

$(function(){
    $(document).on('click','#1',function(){
                   $.post('/lifelog',{"type":"うんち"})
                   });
}

○サーバサイド(raspberry pi
httpのボディを解析するためにはbodyParserが必要

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended:false}));

expressのpostメソッドで受け取った上で、slackのincoming webhockへrequestを飛ばす。

app.post('/lifelog',function(req,res){
    var options={
        url:'https://hooks.slack.com/services/*****************:',
        method:'POST',
        headers:{'Content-Type':'application/json'},
        json:true,
        body:{"text":JSON.stringify(req.body.type)}
    };
    request(options, function (error, response, body) {
    });
    console.log(JSON.stringify(req.body.type)); 
});

slackの設定はこれとかを参照。
qiita.com

使い勝手

○メリット
スマホのお気に入りに入れておけば、寝起きやうんちのタイミングでこのページを開いて、ボタンを押すだけで簡単に育児ログが取れる。
僕からも妻からも投稿でき、外にいてもslackにアクセスすることで確認できる。
○デメリット
めんどい!!!
寝起きやうんちの直後っていうのは、結構慌てふためいていることが多いため、ボタンを押してる余裕がない。