Developer Blog エンジニアブログ

2019.04.20

【オフィスIoT】ICカードで出退勤する。3

はじめに

さて、3回目です。ICカードリーダの稟議が無事通りました。

こんな電子工作でもお金出してもらえるのは地味に嬉しいです。

前回まで

1人アジャイル開発

SlackAPIでコマンド打ち込もうとしたらエスケープされた。

仕方がないのでヘッドレスChromeを使って強引にコマンドを叩く。

今回のゴール

Node.jsでヘッドレスChromeを動かしてSlackで/jobcan_touchする。

現状

まずヘッドレスChromeをインストールします。
Nodeは気合いで入れましょう。Nodeのインストールはこちら。

今回はpuppeteerというNode.jsからヘッドレスChromeを操作するパッケージを使います。最近ようやく日本語の記事が増えてきましたが、リリース当初は公式APIの英語を首をフクロウみたいに捻りながら使ってたのを思い出します。

$ npm install puppeteer

また、今回セキュアな情報も取り扱うのでdotenvというパッケージでパスワードなどを隔離します。

$ npm install dotenv

これでインストールされるはずです。簡単ですね。

あとはざらっと処理を書きます。


const puppeteer = require('puppeteer');
require('dotenv').config();
const slack_touch_command = '/jobcan_touch';

まず変数宣言はこんな感じ。

昨今ではブロックスコープがあるlet/constを使うのがお約束らしいですね。
今回は再代入することがないのでconstでいきましょう。

(async() => {

  const browser = await puppeteer.launch({
    headless:false,
  });
  const page = await browser.newPage();
  await page.goto('https://work-space.slack.com/');

今回まだ本番環境でもないのでヘッドレスモードはオフにしておきます。

開発中では動きが見えた方が嬉しいのでね。

goto()を使うと指定したURLに飛びます。多言語の悪いgotoとは訳が違うので優しくしてあげましょう。

  await page.waitFor('input#email');
  await page.type('input#email',process.env.EMAIL_ADDRESS);
  await sleep(1000);
  await page.type('input#password',process.env.PASSWORD);
  await sleep(1000);
  await page.click('button#signin_btn');
  await sleep(7000);

ここら辺はが非常に不服なところでして、ログインの処理をするところですね。
waitFor(1000);では動かないので悲しくなりました。

記事を書いてる最中にまた一つ良さげな関数が見つかったので次回までに改善しましょう。

  switch (page.url()) {
    case 'https://work-space.slack.com/messages/' + process.env.GENERAL_ID + '/':
      break;
    default:
      browser.close();
  }

ここでログインが成功した場合generalのURLに飛ぶはずなので、その判定を行います。
もしそれ以外のURL出会った場合はログイン失敗とみなしてブラウザを閉じます。

  await page.goto('https://work-space.slack.com/messages/' + process.env.CHAT_ID + '/');
  await page.waitFor('#msg_input .ql-editor');
  console.log('Login');
  await page.type('#msg_input .ql-editor', slack_touch_command);
  await page.click('#msg_input_send');
  browser.close();
})();

async function sleep(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

あとは個人のページへ移動して、テキストボックスに/jobcan_touchを入力して送信ボタン押しておしまいです。

こんな感じですね。個人的には文字入力待ちにsleep使うのがかなりイケてないので不服ですが、時間がありませんで今回はこのような形で我慢することにします。

新規事業開発はスピード命なので、後からリファクタリングする感じですね。

というわけで、芦川社長、岩切さん、新規事業開発のお話お待ちしております!

とまあ、こんな感じで打刻する側の仕組みは完成しました。

来週はいよいよICカードリーダーを使って打刻システムを作っていきます。

この記事を書いたメンバー
Avatar
佐藤樹
2019年4月にハッピーズへ新卒入社。 面白いものを作るのが好きで、1年目の目標は月1で新作を作ること。