GoogleHomeとIFTTTとFirebaseとラズパイで指定した数に対応した音を流す（英単語読み上げツールの作成）

# はじめに
英単語を学習する時に、いちいちPCを立ち上げて音をきいたり、スマホを立ち上げて音を聞くのがめんどくさい
特定のページを指定したら、それに対応した音が流れるといいなと思い作った

# 環境

```
ラズパイ

$lsb_release -a
No LSB modules are available.
Distributor ID:	Raspbian
Description:	Raspbian GNU/Linux 9.4 (n/a)
Release:	9.4
Codename:	n/a

$npm -v
5.6.0

$node -v
v9.4.0
```

## シチュエーション
「ねえ　Google 単語帳５」と発話
GoogleHomeからは単語帳５ページに対応した音源がながれる

## 仕組み
GoogleHomeから発話された内容をIFTTTのから`Google Assistant`でうけとり`webhooks`で指定したFirebase RealtimeDatabeseに内容を記録する
ラズパイ上のnode.jsでFirebase RealtimeDatabeseが更新されたら、更新された内容を受け取り`google-home-notifier`でgoogleHomeに流してもらいたい音声のurlを渡すようにする。
流してもらう音声に関してはラズパイ上にwebサーバー(Appach)を立てて、そこに対応する音声データをおいておく

# Firebaseの設定
Firebaseで新しいプロジェクトを作成する
一番左のメニューの一番上Project OverViewの歯車マークを押しプロジェクトの設定を選択
開いたページの右下にある`ウェブアプリに Firebase を追加`をクリックすると必要な設定を見ることができる
<img width="1202" alt="スクリーンショット 2018-10-24 22.17.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/be04306b-e3b1-eadf-002e-490884c29fab.png">

<img width="1200" alt="スクリーンショット 2018-10-24 22.17.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/77c8b116-ab0b-ffdb-7f3b-10ebf4f8568e.png">


次に一番左のメニューの中から`Database`を選択しRealtimeDatabeseを選択し下記のような画面に遷移する
プロジェクトIDの横のプラスボタンを選択し`url`と`""`の項目をつくる

<img width="1205" alt="スクリーンショット 2018-10-24 22.25.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/a5896d5e-6751-4134-5fb1-e104b0eb002f.png">





# IFTTTの設定
## Google Assistantの設定
GoogleHomeと連携したGoogleアカウントでIFTTTにログインをする
`Google Assistant`を選択し、そのなかの`Say a phrse with a number`を選ぶ
この項目は発話した数字を取得し、その数字をトリガーとして使うことができる

<img width="622" alt="スクリーンショット 2018-10-23 22.25.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/32a70f38-ab3d-57cf-b0a1-b466d7353881.png">

この項目での具体的な設定は下記のように
`What do you want to say`の項目に`単語帳 # `と入力する.
#に発話した数字が入ってくる

<img width="260" alt="スクリーンショット 2018-10-23 22.26.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/2fed3155-ff64-6c62-312b-e1e6b3768bb3.png">

GoogleHomeからの返答も書いておく #を入れておくとユーザー側が発話した数字がここに入るようになる

LanguageをJapaneseに選択するのを忘れないようにしてください

<img width="263" alt="スクリーンショット 2018-10-23 22.27.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/85dea03f-c0a0-b80e-b368-cd1dd55ec68c.png">

## webhooksの設定
`URL`には

`https://{Firebaseで設定したプロジェクトID　例:XXXXXXXXXXX-12345}.firebaseio.com/url.json`
をいれる

`Body`には

```
"http://{ラズパイのIPアドレス例:192.xxx.xxx.xxx}/English/{{NumberField}}.mp3"
```

FirebaseのRealTimeDatabeseに送信する内容を入れる
以前の項目で`#`に入る数字の内容を`NumberField`でとりだすことができる
`NumberField`という項目がなければ下のAdd ingredietボタンを押すとでてくる
<img width="264" alt="スクリーンショット 2018-10-23 22.27.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/176479/db4d4d6e-c3f5-fcc6-477a-265c559e841a.png">

## ラズパイ上にwebサーバーをたてる(apache)
こちらを参照しました
[Google HomeにRaspberry Pi上の音楽ファイルを再生してもらうよ](https://note.mu/ukshampoo/n/n8c2733779090)

上記に書かれているのを引用しますが、下記三行をラズパイ上で実行します

```
$ sudo apt-get update
$ sudo apt-get upgrade
$ sudo apt-get install apache2
```

ラズパイ上で`/var/www/html`の階層に移動して`English`フォルダを作り音声ファイル`1.mp3`を入れてmacから下記URLにアクセスし再生を確認します

```
http://{ラズパイのIPアドレス例:192.xxx.xxx.xxx}/English/1.mp3
```

## ラズパイ上でnode.jsの準備

[google-home-notifier](https://github.com/noelportugal/google-home-notifier)


こちらを参照して準備を整えました
[GoogleHomeスピーカーに外部からプッシュして自発的に話してもらいます](https://qiita.com/azipinsyan/items/db4606aaa51426ac8dac)
[Google Homeで好きなポッドキャストをスマートに再生する](https://qiita.com/Yuiki/items/dce48f319adf3613dcd8)

### まず`google-home-notifier`をcloneする

```
$git clone https://github.com/noelportugal/google-home-notifier
$cd google-home-notifier/
$ls
LICENSE  README.md  example.js  google-home-notifier.js  package.json
```

### 必要なパッケージを入れる
`feedparser`、`firebase`、`google-home-notifier`、`request`をいれます

`package.json`を更新します

```
$vi package.json
```

`package.json`の中身

```
{
  "name": "google-home-notifier",
  "version": "1.2.0",
  "description": "",
  "main": "google-home-notifier.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Noel Portugal",
  "keywords": [
    "google home",
    "notifications",
    "notifier"
  ],
  "license": "MIT",
  "dependencies": {
    "body-parser": "^1.15.2",
    "castv2-client": "^1.1.2",
    "express": "^4.14.0",
    "google-tts-api": "0.0.2",
    "mdns": "^2.3.3",
    "ngrok": "^2.2.4",
    "feedparser": "^2.2.9",
    "firebase": "^5.5.1",
    "google-home-notifier": "^1.2.0",
    "request": "^2.88.0"
  }
}
```

### ライブラリを導入

```
$npm install
```


#### 新しいファイルを作る

```
$vi play-English.js
```

`play-English.js`の内容

```javascript
var FeedParser = require('feedparser');
var firebase = require('firebase');
var googleHome = require('google-home-notifier');
var request = require('request');

const lang = 'ja';
const ip = '192.xxx.xxx.xxx'; //再生したいGoogle HomeのIPアドレス

googleHome.ip(ip, lang);

//Firebaseでプロジェクトを造ったときに確認した内容
const config = {
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxx-xxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxxxxxxxx-xxxxx.firebaseio.com',
  projectId: 'xxxxxxxxxxx-xxxxx',
  storageBucket: 'xxxxxxxxxxx-xxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxxx'
};
firebase.initializeApp(config);

var db = firebase.database();
var ref = db.ref('/');

//RealTimeDatabeseが更新されるとこの関数の中に入ってくる
ref.on('child_changed', function(snapshot) {
  var url = snapshot.val()
  if (url) {
    googleHome.play(url, (notifyRes) => {
      console.log(notifyRes);
    })
  }
  ref.update({'url': ''}); // 変更をリセット
});
```

### 実行してみる
```
$node play-English.js
```

### 永続化
`forever`を利用しました

[foreverコマンドでNodeJSアプリを起動したままにする](https://qiita.com/h1y0r1n/items/a2cf8f2e8d3d31ccba49)

完成！！
発話すると単語を読み上げてくれて便利



# 参考資料
[Google HomeにRaspberry Pi上の音楽ファイルを再生してもらうよ](https://note.mu/ukshampoo/n/n8c2733779090)
[GoogleHomeスピーカーに外部からプッシュして自発的に話してもらいます](https://qiita.com/azipinsyan/items/db4606aaa51426ac8dac)
[Google Homeで好きなポッドキャストをスマートに再生する](https://qiita.com/Yuiki/items/dce48f319adf3613dcd8)

先人の皆様に感謝を込めて :pray: