enebularで勤怠メールツールを作ってみる

by pokiiio

Slide 1

Slide 1 text

enebularで勤怠メールツールを作ってみるポキオ

Slide 2

Slide 2 text

ポキオ ● https://pokiiio.github.io/ ● R&D 園児にゃー ● Twitter/GitHub : @pokiiio ● Blog : Androidのメモとか（https://relativelayout.hatenablog.com/）

Slide 3

Slide 3 text

京急が大好き

Slide 4

Slide 4 text

京急ガジェットをいろいろ作ってます

Slide 5

Slide 5 text

京急は神 (個人の感想です)

Slide 6

Slide 6 text

今日の内容はデブサミ2019とほぼ一緒です ● https://event.shoeisha.jp/devsumi/20190214/session/1967/ photo by @n0bisuke

Slide 7

Slide 7 text

今日の内容はdotstudioさんのブログで公開中 ● https://dotstud.io/blog/pokio-esp-keikyu-chien2/

Slide 8

Slide 8 text

にぎやかし

Slide 9

Slide 9 text

勤怠メールツールを作る

Slide 10

Slide 10 text

簡単にツールを作れる時代 ● 無料で使えるクラウドサービスが整ってきている ○ enebular、IFTTT、IBM Cloud、Google Apps Script、とかとか ● ハードウェアにも手を出しやすい ○ Arduino、Raspberry Pi、MESH、とかとか ● ノンプログラミングでプログラミングができる ○ Node-RED、Scratch、Dialogflow、Noid、とかとか

Slide 11

Slide 11 text

たとえばIFTTT

Slide 12

Slide 12 text

たとえばIFTTT ● 簡単にオートメーション化 ● いろいろなサービスとサービスを連携できる ● 個々のサービスのAPIや実装を考える必要がない ● ほかにも ○ Zapier ○ myThings（なくなっちゃいましたね・・・）

Slide 13

Slide 13 text

if this then that だけでは物足りないこともありますよねそして簡単に済ませたい

Slide 14

Slide 14 text

そこで Node-RED

Slide 15

Slide 15 text

Node-REDのよさみ ● Node.js上で動作する処理を設計できるツール ● ノードとノードをつなげてデータのフローをグラフィカルに作る ● 他のWebサービスをトリガーにしたり定期実行の処理もかける ● JavaScriptなどで詳細な処理も設計可能

Slide 16

Slide 16 text

簡単な静的サイトならチョッパヤで作れる

Slide 17

Slide 17 text

他サービスとの連携も可能

Slide 18

Slide 18 text

これをつかって作ったものが…

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

仮にJRからの振替輸送受託の影響で京急線が遅れてイライラしていてもシュッと勤怠メールを送れるツール

Slide 21

Slide 21 text

「本当に電車遅延で遅れたの？」とあとからグチグチ言われないために遅延証明書へのリンクも貼り付けるやさしい機能つき

Slide 22

Slide 22 text

京急の遅延証明書ページをパースして発行されている遅延証明書のリスト表示

Slide 23

Slide 23 text

遅刻理由を選択するとメール本文が自動で切り替わる

Slide 24

Slide 24 text

遅延証明書へのリンクも貼れますよ

Slide 25

Slide 25 text

ボタンを押してメーラーを起動メールを送ったら落ち着いて出勤だ！

Slide 26

Slide 26 text

これを実現するためのフロー

Slide 27

Slide 27 text

実際のフロー

Slide 28

Slide 28 text

差出人名や宛先を初期化 HTTPリクエストの度に京急HPをパースしツールを表示 HTTPエンドポイントを作成 BASIC認証をかけておく CORS対策などのため外部WebAPI実行用に別途エンドポイントを作成

Slide 29

Slide 29 text

ポイント① ● 差出人名・宛先を初期化 ○ globalにset ■ global.set('name', 'ポキオ'); ■ global.set('address', '[email protected]'); ○ globalからget ■ let name = global.get('name'); ■ let address = global.get('address');

Slide 30

Slide 30 text

ポイント② ● BASIC認証をつける ○ node-red-contrib-httpauth ■ https://flows.nodered.org/node/node-red-contrib-httpauth ○ BASIC認証、Digest認証の設定が可能 ■ 今回はBASIC認証

Slide 31

Slide 31 text

ポイント③ ● 京急様のページを愚直にパース ○ https://delay.keikyu.co.jp/delay/ ○ tableを力技で解析

Slide 32

Slide 32 text

ポイント④ ● CORS対策のためプロキシサーバーみたいなものを作る ○ HTMLムズカシイ ○ POSTを更にPOSTするだけ ○ ResponseノードでAccess-Control-Allow-Originで *を指定してもダメだった

Slide 33

Slide 33 text

実際につかってみた

Slide 34

Slide 34 text

実際につかってみた ● 差出人名をポキオにしたまま送ってしまった（NEW） ○ やっちまった案件 ● 京急はあまり遅れない ○ むしろ、嫁に「〇〇時に帰るよ」 LINEを送る機会のほうが多い ○ そっちを自動化すればよかった ● 寒くてお腹が痛い ○ 腹痛で遅刻することのほうが多い