Amazon Dash Buttonをおかんからの電話ほしい要求に使ってみる -Mamazon Dash Button-

# 前段
12月から日本のAmazonでも発売されたAmazon Dash Button。
500円（実質0円）なのに妙にみんな買っているなと言う事で気になっていたところ、Qiitaでこの記事を見たので即購入してみた。
[Amazon Dash ButtonをただのIoTボタンとして使う](http://qiita.com/jsoizo/items/3b8bba4160f41aef20f4)

即日発送から購入したのは [PANTENE Dash Button](https://www.amazon.co.jp/Amazon-JK29LP-%E3%83%91%E3%83%B3%E3%83%86%E3%83%BC%E3%83%B3-Dash-Button/dp/B01L2WQJY0/ref=sr_1_32?s=digital-text&ie=UTF8&qid=1481762122&sr=1-32)

結婚している人は嫁が納得するものを買うのがおすすめ。
# 準備
ハードとして僕が用意したものはこれです。
- Amazon Dash Button
- Mac mini(PCは常時稼働ができれば何でもよいがLinux or OSXを推奨、理由は後述)
- AmazonアプリをインストールしたAndroid or iOS
- Wifi
# ボタンセットアップ
こちらは通常通り[Dash Buttonをセットアップする](https://www.amazon.co.jp/gp/help/customer/display.html/ref=amb_link_1?ie=UTF8&nodeId=201746340&pf_rd_m=AN1VRQENFRJN5&pf_rd_s=merchandised-search-leftnav&pf_rd_r=TSXWXYC79BGFWDKJCQD3&pf_rd_r=TSXWXYC79BGFWDKJCQD3&pf_rd_t=101&pf_rd_p=cf13d39a-e3f0-4ff4-a61f-037a02d68c1d&pf_rd_p=cf13d39a-e3f0-4ff4-a61f-037a02d68c1d&pf_rd_i=4752863051)を見ながら進める。
唯一異なるのは最後までセットアップを完了しないこと。
**具体的には商品を注文する選択画面で×ボタンを押す。**
<img width="188" alt="IMG_0387.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120983/ef511bb3-154e-7f7a-721e-5a20dc23dd5e.png">

完了状態で以下のような画面になったらセットアップは完了だ。
<img width="188" alt="D19E3A63-FDF6-4D64-8B1D-8728C7D0AA6B.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/120983/7943503b-250f-83ad-ba36-9d316f51e4e0.png">
# 利用用途を考える
買ったときには特に考えていなかった利用用途。
子供でもいれば「パパ早く帰ってきて！」というPapazon Dash Buttonに用途も名称もぴったりな利用方法もあるのだが子供がいないのであまり意味がない。

そんな時に思いだした一通のメール。
<img width="188" alt="test.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/120983/d9859d44-605e-3133-4cce-e3b3ebc38a6f.jpeg">
(脚注)画像は友達の雀太君。NHK新人大賞を見事とりました。

おかんはiPadを何とか使っているが文字は打ちにくいみたい。
ということで何か買ってほしいときや用事があるときはひらがならで「またでんわしてな」が常套句である。
たまたま弄っていた12/14は僕の誕生日でもあるので感謝の気持ちとしておかん専用のボタンを作ることを思いついた。

名前はベタだが**Mamazon Dash Button**

# windows10で環境構築（失敗）
普段VPSかAWSで試すことが多いので一応メインPCに用意しているVagrantに入っているCentOSでやろうかと思ったけど、同一のWifi環境とかいろいろ考えるとめんどくさかったので、まずはwindows10が入っているメインPCで構築することとした。

必要なソフトウェアは以下の通り
- node.js (w/ npm)
- dash-button or dasher or node-dash-button
- python

以前pythonとnode.jsは入っていたので以下コマンドでnode-dash-buttonを余裕のインストールという感じであった。しかも事前情報でwindowsでnpm installするときはVS2015入れとけよという情報を得ていたのも追記しておきたい。

```none
C:windows\system32> npm install --save -dash-button -g msvs_version=2015
C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Microsoft.CppBuild.targets(365,5): warning MSB8003: Could not fi
nd VCInstallDir variable from the registry.  TargetFrameworkVersion or PlatformToolset may be set to an invalid version
 number. [C:\Users\XXXXXX\AppData\Roaming\npm\node_modules\dash-button\node_modules\socketwatcher\build\socketwatcher.
vcxproj]
  socket_watcher.cpp
  win_delay_load_hook.cc
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10240.0\ucrt\corecrt.h(10): fatal error C1083: Cannot open include
file: 'vcruntime.h': No such file or directory (compiling source file ..\socket_watcher.cpp) [C:\Users\XXXXXX\AppData\
Roaming\npm\node_modules\dash-button\node_modules\socketwatcher\build\socketwatcher.vcxproj]
C:\Program Files (x86)\Windows Kits\8.1\Include\um\windows.h(160): fatal error C1083: Cannot open include file: 'excpt.
h': No such file or directory (compiling source file C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\src
\win_delay_load_hook.cc) [C:\Users\XXXXXX\AppData\Roaming\npm\node_modules\dash-button\node_modules\socketwatcher\buil
d\socketwatcher.vcxproj]
gyp ERR! build error
gyp ERR! stack Error: `C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:2
76:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Windows_NT 10.0.14393
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node
-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\XXXXXX\AppData\Roaming\npm\node_modules\dash-button\node_modules\socketwatcher
gyp ERR! node -v v6.9.1
gyp ERR! node-gyp -v v3.4.0
```
ほにゃらら.hファイルがないので落ちている？しょうがないので当該ディレクトリを探りにいくと確かに対象ファイルがない。
windowsで環境作ることがほぼないのでstackoverflowなんかで調べてみたけれども有益な情報なし。（Window SDK 7.1を入れろと書いてあったのでやってみたけどだめだった）

2時間ほどドはまりした結果、よくよく考えてみれば、実家に設置する際にはラズパイでやるのだからと自分を納得させて家に転がってるMac miniで試すこととした。

# Mac miniで環境構築
家に転がっているearly2012のMac miniは近頃macOS Sierra 10.12にしていたのでHomebrewなどをアップデートしたり、nodebrewをインストールしたりして準備した。

今度はnode-dash-buttonのラッパーである[Dasher](https://github.com/maddox/dasher)を入れてみる。

その前にlibpcapをbrewからインストールしておこう。

```Bash
$ brew install homebrew/dupes/libpcap
```
そのあとにDasherのインストールを行う。

```Bash
$ git clone https://github.com/maddox/dasher.git
$ cd dasher
$ npm install
```

ここまでエラーがでなければ環境準備はオッケーだ。

ところで、もしかしたらwindows10でもDasherならうまくいったんじゃないの？とは思ったが、そっと目を閉じた。

# 通知先はどうするか？
さて、通知先はどうするかを悩まなければいけない。
僕が通知を常時見るとすればSlackかLINEとなる。
最近LINEBOTがマイブームなのでSlackのほうが楽ではあるが、あえてのLINEとした。

LINE Messaging APIはPushも可能だがいろいろと制約もありめんどくさそうなので、実績もあるIFTTTと連携させることとした。

# IFTTTでMakerとLINEの連携
## Maker
IFTTTでWebhook機能を持つのは[Maker](https://ifttt.com/maker)なのでLINEとconnectする。

IFTTTにアカウントがあれば既にMakerは用意をされているのでSearchから探す。
Settingを見るとUserIDがわかるのでひかえる。
![maker.png](https://qiita-image-store.s3.amazonaws.com/0/120983/0fbd7e42-2f83-97c9-87cc-0d14551fba00.png)

## LINEの連携
LINEは連携されていないので自分のアカウントと連携をする。

## MakerとLINEでAppletを作る
LINEの連携が終わったら、MakerとLINEでAppletを作る。
IfがMakerでToがLINEだ。

EventNameは適当で大丈夫だが後ほど必要になるので控えておく。

SendMessageは「1:1でLINE Notifyから通知を受け取る」を選択する。

MessageはLINEに通知したい内容だ。Jsonでリクエストされた情報も表示できるが、今回の用途では固定で良かったのでおかんのメール癖を入れた。

# Dasher
Dasherの役割を軽く説明しておくと、ボタンを押したときにHTTPリクエストを別のサーバに飛ばすことができるもの。
ボタンのMACアドレスからのパケット通信をとらえ、config.jsonに書かれたリクエスト先に飛ばす。

## MACアドレス取得
ということでまずはボタンのMACアドレスをDasherのコマンドを用いて確認する。

```Bash
% ./script/find_button
Password:
Watching for arp & udp requests on your local network, please try to press your dash now
Dash buttons should appear as manufactured by 'Amazon Technologies Inc.'
Possible dash hardware address detected: xx:xx:xx:xx:xx:xx Manufacturer: unknown Protocol: udp
Possible dash hardware address detected: xx:xx:xx:xx:xx:xx Manufacturer: unknown Protocol: arp
```

xx:xx:xx:xx:xx:xxがMACアドレスなのでひかえておこう。

## config/config.json設定
configディレクトリ配下にconfig.jsonを作成する。

```json:config/config.json
{"buttons":[
  {
    "name" : "{YOUR_EVENT_NAME}",
    "address": "xx:xx:xx:xx:xx:xx",
    "url":"https://maker.ifttt.com/trigger/{event}/with/key/YOUR_KEY_ID",
    "method": "POST"
  }
]}
```
## Dasher起動
%  npm start

# 動作
準備が整ったので実際に動かしてみよう。動画のほうがわかりやすいので、画像は荒いがこれを見ていただきたい。
<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">Mamazon Dash Buttonの動画 <a href="https://t.co/SP9CtlHk7a">pic.twitter.com/SP9CtlHk7a</a></p>&mdash; momochan_qiita (@momochan_qiita) <a href="https://twitter.com/momochan_qiita/status/809225135458656256">2016年12月15日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

結果はこんな感じ。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Mamazon Dash Button <a href="https://t.co/gzWnhDlYr6">pic.twitter.com/gzWnhDlYr6</a></p>&mdash; momochan_qiita (@momochan_qiita) <a href="https://twitter.com/momochan_qiita/status/809226536825929732">2016年12月15日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ちょっと残念なこと。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr"><a href="https://t.co/VhN4DB5KqJ">pic.twitter.com/VhN4DB5KqJ</a></p>&mdash; momochan_qiita (@momochan_qiita) <a href="https://twitter.com/momochan_qiita/status/809239765564334080">2016年12月15日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

以上が僕がやったAmazon Dash Buttonのすべてである