Web無料相談会2018冬
Web無料相談会2018冬
2017.03.24
#50
それいけ!フロントエンド

【社畜必見】カスタマイズした「Amazon Dash Button」で定時Dash帰宅したった

まろ

こんにちは。フロントエンドエンジニアのまろCです。

みなさん「Amazon Dash Button」はご存知ですか? Amazonが発売している、特定の商品をボタンひとつで注文できるガジェットです。

dashbutton

面白そうだったので、一個買いました。
でも、特に水が欲しいわけではないので、これを、退勤登録ができるガジェットに変えてみることにします。

具体的には、ボタンを押したら自動的に会社の基幹システムにログインして、退勤登録をしてくれるようにします。これによって短縮できる時間は 1日に約 1分ほどですが、年間で換算するとおよそ365分。休日も働く社畜にとっては馬鹿にならない時間の短縮です。

それでは、早速作ってみます。。。!

構成

ボタンを押したら、同一ネットワーク上にある、サーバー上のnode.jsに通知がいきます。その通知を受け取ったnode.jsが、casperjsを使い、基幹へログインし、退勤する動作を僕の代わりにする仕組みです。

※Amaon Dash Buttonの利用にはAmazonのアカウントと、スマホ用のAmazon公式アプリが必要です。
※Amazon Dash Buttonと、サーバーとなるPCが、同一のLAN内にいることが必要です。

Amazon Dash Buttonのセットアップ

最初に、このボタンが水を注文しないように設定を変更します。

まずは、アプリを立ち上げましょう。アプリはストアからダウンロードできます。

 

dashbutton2

左上のハンバーガーメニューから、アカウントサービス → Dash端末の、「新しい端末をセットアップ」を選択します。

 

dashbutton3

指示に従って、ネットワークの設定を行います。

 

148754856229595300_46

ネットワークに繋ぐことができればOKなので、商品選択画面で、右上のXを押して設定を中断します。これでOKです。

node.jsのスクリプト実装

Dash button for Nodeのインストール

これで、端末の情報がとれます。
sudoでないと、パーミッションで怒られます。

npm i dash-button -g 
sudo dash-button scan

ここで表示された
Scanning for DHCP requests and ARP probes on en0...
Detected a DHCP request or ARP probe from XX:XX:XX:XX:XX:XX

XX:XX:XX:XX:XX:XXの部分が、Amazon Dash ButtonのMACアドレスになり、以降必要になりますのでメモしておきましょう。

ボタン押下を待ち受けるところ

app.jsを作成し、待受のロジックを記述していきます。

const DashButton = require("dash-button"); 
const MAC_ADDRESS = "XXXXXXXX"; 
let button = new DashButton(MAC_ADDRESS); 
let subscription = button.addListener(() => { console.log("ボタン押した!"); });

 

先程インストールしたdash-buttonを使います。前章でメモしたMACアドレスをここで使います。イベントを登録したら、それだけで押したことが取得できます。

簡単ですね。

casperjsで基幹にログインするところ

casperjsは、ヘッドレスブラウザのPhantomJSを使ってブラウザ操作やテストができるライブラリです。

プログラムで、指定したサイトにアクセスしリンクをクリックして、フォームに値を入れて送信して……といった動作を確認するために使うライブラリですが、サイト上での行動を自動化するのにも使えます。

まずは、phantomjsをグローバルにインストールし、casparjsをインストールします。

npm i phantomjs -g
npm i casperjs -g

 

インストールできたら、casper.jsという名前のファイルを作成し、基幹システムを操作するスクリプトを書きます。次に、casperをnewして、オブジェクトを作成します。そこまできたら、以下のように設定していきます。

const casper = require('casper').create();


casper.start('https://kintaisisutemu.hoge').then(function() {
    this.echo('login page: ' + this.getTitle());
	this.fillSelectors('form', {
        'input[name="id"]': id,
        'input[name="pass"]': pass
    }, true);
}).then(function() {
	casper.wait(1000, function() {
		this.echo(this.getTitle());
	      //退勤のロジックは非公開
	});
}).run();

参考:http://docs.casperjs.org/en/latest/modules/casper.html

手順
  1. start関数の引数に対象のURLを指定します。
  2. casperオブジェクトのthenメソッドで処理を繋いでいきます。
  3. ログイン情報をフォームにセットし、第一引数にターゲットとなるフォームを指定、第二引数に値をセットしたいフォームのキーと値をオブジェクトで指定します。第三引数は、そのままsubmitするかどうかをbool値で指定します。
  4. idやclass名で対象の要素を指定します。
  5. ログインできたら、次のthen中で、退勤の処理をします。
  6. 最後に、run()で実行させます。

 

最後に、app.jsにcasperjsを起動するスクリプトを追記します。

//先頭に追記
const exec = require('child_process').exec;
let isDash = false;

//addListener内に追記
exec('casperjs casper.js', (err, stdout, stderr) => {
    if (err) { console.log(err); }
    console.log(stdout);
    isDash = false;  //2回イベントが走ることあるので、フラグで制御
});

 

待受実行状態にしておきます(ルート権限で実行します)。

sudo node app.js

帰宅

19:00です! 華麗に帰宅。

dushbutton4

また明日。