2019年4月12日金曜日

MANICAモバイル貸出返却時にGoogle Homeに喋らせる


■環境
Android
 MANICAモバイルをインストールします。
 https://play.google.com/store/apps/details?id=info.hayato.manicamobile
Google Home
PC(Windows10)
 Node.js、google-home-notifier等をインストールします。
※Google HomeとPCは同一LAN上に設置します。

■処理の流れ

①MANICAモバイルで貸出返却時にIFTTTのWebhooksにWebリクエストを投げます。
②IFTTTのWebhooksでngrokにWebリクエストを投げます。
③ngrokへのWebリクエストをPC上のNode.jsで受け取ります。
④google-home-notifierでGoogleHomeに喋らせます。
⑤MANICAモバイルから直接ngrokにWebリクエストを投げると404が返ってきてしまうので、IFTTTを噛ますようにしました。

■環境構築
1.PC
・Node.jsをインストール  
下記サイトより8.12.0をダウンロードしてインストールします。 

 https://nodejs.org/ja/

Node.jsはJavaScriptで動作するプラットフォームで、サーバサイドプログラムをJavaScriptで記述することができます。シングルスレッドで非同期処理を行い高いスケーラビリティを持ち、リアルタイム性が必要で小規模なWebアプリケーションなどに用いられます。

・Python2.7をインストール
下記サイトより2.7.15をインストールします。

 https://www.python.org/downloads/

・コマンドプロンプトを管理者権限で起動し、作業用のフォルダを作成します。
C:\>mkdir mmbot
C:\>cd mmbot
・windows-build-toolsをインストールします。
npmを使用し、下記コマンドでインストールします。
C:\mmbot>npm install –g windows-build-tools

npmはNode Package Managerの略で、Node.jsのパッケージを管理するツールです。npmではパッケージをインストールする方法が、グローバルインストールとローカルインストールの2種類存在します。
グローバルインストールは「-g」をつけてインストールし、全てのプロジェクトで使用することができます。
ローカルインストールはプロジェクトのルート配下にあるnode_moduleフォルダにパッケージがインストールされ、対象のプロジェクトのみで使用することができます。
  
Windows-build-toolsはWindows環境でnode-gypを使用するのに必要になります。

・node-gypをインストールします。
C:\mmbot>npm install –g node-gyp
node-gypはNode.jsで書かれたクロスプラットフォームのコマンドラインツールで、Node.jsのネイティブアドオンモジュールをビルドするツールです。

・Bonjour SDK、Bonjour Print Serviceをインストールします。

https://developer.apple.com/download/more/?=Bonjour SDK for Windows

https://support.apple.com/kb/DL999?locale=ja_JP

Bonjourはgoogle-home-notifierのインストールに必要になります。

・google-home-notifierをインストールします。
C:\mmbot>npm install google-home-notifier
作業フォルダ配下にnode_modulesフォルダが作成され、各種パッケージが作成されます。
google-home-notifierはNode.jsで動作するGoogle Homeに喋らせることができるモジュールです。
google-home-notifierをインストールすると、ngrokも一緒にインストールされます。
ngrokは. ローカルPC上で稼働しているWebサーバを外部公開できるサービスです。

・example.jsをテキストエディタで編集します。
google-home-notifierをインストールすると、node_modules\google-home-notifierフォルダにexample.jsファイルが作成されるので、テキストエディタで編集します。
下記赤字部分で、GoogleHomeに喋らせる言語を日本語に設定しています。
var express = require('express');
var googlehome = require('./google-home-notifier');
var ngrok = require('ngrok');
var bodyParser = require('body-parser');
var app = express();
const serverPort = 8080; 
const deviceName = 'Google Home';
const language = 'ja';

googlehome.device(deviceName, language);
googlehome.accent(language);

var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.post('/google-home-notifier', urlencodedParser, function (req, res) {
  if (!req.body) return res.sendStatus(400)
  console.log(req.body);
  var text = req.body.text;
  if (text){
    try {
      googlehome.notify(text, function(notifyRes) {
        console.log(notifyRes);
        res.send(deviceName + ' will say: ' + text + '\n');
      });
    } catch(err) {
      console.log(err);
      res.sendStatus(500);
      res.send(err);
    }
  }else{
    res.send('Please POST "text=Hello Google Home"');
  }
})

app.listen(serverPort, function () {
  ngrok.connect(serverPort, function (err, url) {
    console.log('POST "text=Hello Google Home" to:');
    console.log('    http://localhost:' + serverPort + '/google-home-notifier');
    console.log('    ' +url + '/google-home-notifier');
    console.log('example:');
    console.log('curl -X POST -d "text=Hello Google Home" ' + url + '/google-home-notifier');
  });
})


example.jsを起動します。
コマンドプロンプトで「node example.js」を入力して起動します。
ngrokからURLが発行されます。

c:\mmbot\node_modules\google-home-notifier>node example.js
POST "text=Hello Google Home" to:
    http://localhost:8080/google-home-notifier
    https://xxxxxxxx.ngrok.io/google-home-notifier
example:
curl -X POST -d "text=Hello Google Home" https://xxxxxxxx.ngrok.io/google-home-notifier

別のコマンドプロンプトを開き、上記の赤字の部分をコピペして実行すると、Google Homeが「Hello Google Home」と喋ります。
発行されたURLは後で使用します。
※「xxxxxxxx」の部分はexample.jsを起動する度に変わります。また、8時間でURLは失効しますが、ngrokの無料アカウント登録をすることでトークンを貰えるので、それをexample.jsに加えると失効しなくなります。
アカウント登録をしてもexample.jsを止めて再度起動すると新しいURLになってしまいます。

2.IFTTT(イフト)
IFTTTのMy Applets→New AppletからAppletを新規作成します。
「this」をクリックします。



トリガとしてWebhooksを選択します。
 「Receive a web request」を選択します。Webリクエストを受け取った時に実行されるトリガーになります。
 Event Nameに適当な文言を設定します。この文言がURLの一部になります。
例では「manicamobile」と設定しています。

 次にアクションを設定します。「that」をクリックします。
 同様にWebhooksを選択します。
 「Make a web request」を選択します。Webリクエストを投げるというアクションになります。
 URLにexample.jsを起動した時にngrokから発行されたURLを記入します。
Methodは「POST」を選択します。
Bodyに「text=」と入力し「Add ingredient」から「Value1」を選択します。
「Value1」の箇所にはトリガー(MANICAモバイルからのWebリクエスト)からもらうパラメータが入ります。実際にGooogle Homeに喋らせたい文言が入ります。


3.MANICAモバイル

MANICAモバイルで店舗設定ページを開くと、貸出時/返却時のWebリクエストを設定することができるので、先程登録したIFTTTのWebhooks宛てのリクエストを登録します。


https://manica-mobile.appspot.com/

WebリクエストURL
https://maker.ifttt.com/trigger/{EventName}/with/key/{Key}?value1={Message}

{EventName}…トリガーで設定したEventNameの「manicamobile」を指定します。
{key}…Webhooksで与えられるKeyを指定します。
(IFTTTのMyApplets→Services→Webhooks→Documentationで確認できます。)
{Message}…Google Homeに喋らせる文言を指定します。
例では「MANICAモバイルで貸し出ししました」「MANICAモバイルで返却しました」が設定されています。


例)
https://maker.ifttt.com/trigger/manicamobile/with/key/xxxxxxxxxx?value1=MANICAモバイルで貸し出ししました。


以上の設定を終えAndroidアプリのMANICAモバイルで貸出/返却をすると、Google Homeがしゃべります。