VUI×obniz でメリークリスマス (VUI編)

この記事は [スマートスピーカー Advent Calendar 2018](https://qiita.com/advent-calendar/2018/smart-speaker) の24日目の記事になります。

24日ということで、クリスマスに関連する記事を書きます。

また、先日 [Obniz Advent Calendar 2018](https://qiita.com/advent-calendar/2018/obniz) の24日目が空いていることを発見してしまい、
つい、うっかり、ポチってしまったため、
「[obniz×VUI でメリークリスマス (obniz編)](https://qiita.com/chibi929/items/876912348e993927cb4b)」にて obniz 側を書いております。

## はじめに

### VUI と筆者

- 2016年11月： 特大ペッパソン2016(ハッカソン) にて
    - Google Speech API β版 (正式名忘れた) に触れる
    - Watson Speech To Text に触れる
- 2017年10月： ハママチューン(ハッカソン) にて
    - **Web Speech API** に触れる
- 2017年10月： Google Home mini 購入
    - Actions on Google / Dialogflow / Firebase でアクションを作り始める
- 2017年12月：Advent Calendar にて
    - 神龍を呼び出す ([こちら](https://qiita.com/chibi929/items/97bc64e50637b7912e94))
- 2018年3月： Amazon Echo Dot 購入
    - Alexa Skills Kit / AWS でスキルを作り始める
- 2018年7月： Amazon Echo Spot 購入
- 2018年7月： LINE CLova Frends mini 購入
    - Clova Extensions kit でスキルを作り始める

## Speech To Text

では早速、VUI でメリークリスマス :christmas_tree: 

スマートスピーカーの Advent Calendar といいつつ VUI ということで、
今回は、お手軽な **Web Speech API** で、
音声をハンドリングして「[こちら](https://qiita.com/chibi929/items/876912348e993927cb4b#ソースコード)」で用意した PIKA PIKA API を叩こうと思います。

### システム構成

<img src="https://qiita-image-store.s3.amazonaws.com/0/53393/f338a4b0-0151-9269-671f-06627185d223.png" width="768 "alt="" />

**[※]**
obniz は [SDK](https://github.com/obniz/obniz) を用いることで、
ブラウザから直接 obniz を操作することができますが、
今回は Node.js 作った API から obniz を操作しています。

理由はブラウザ以外からも操作したかったため。

### 出来たもの

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Advent Calendar 用 <a href="https://t.co/zJjX6ME6NH">pic.twitter.com/zJjX6ME6NH</a></p>&mdash; ちび (@ibihc929) <a href="https://twitter.com/ibihc929/status/1076892164561395712?ref_src=twsrc%5Etfw">2018年12月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ブラウザ側はこんな感じ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Advent Calendar 用 <a href="https://t.co/SOXMlGZBCU">pic.twitter.com/SOXMlGZBCU</a></p>&mdash; ちび (@ibihc929) <a href="https://twitter.com/ibihc929/status/1076892322900529152?ref_src=twsrc%5Etfw">2018年12月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際に obniz と繋げるとこんな感じ

### ソースコード

```html:index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <h1>SpeechRecoWrapper Example</h1>
    <p>Error State: <span id="error-state"></span></p>
    <p>Reco State: <span id="reco-state"></span></p>
    <div id="result" style="height: 300px; border: solid 1px #000000"></div>

    <script>
     const errorStateElement = document.getElementById('error-state');
     const recoStateElement = document.getElementById('reco-state');
     const resultElement = document.getElementById('result');

     const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
     const speechReco = new SpeechRecognition();
     speechReco.continuous = true;
     speechReco.interimResults = true;
     speechReco.lang = 'ja-JP';

     speechReco.onresult = evt => {
       recoStateElement.innerHTML = 'onResult';
       console.log("onResult");

       for (let i = evt.resultIndex; i < evt.results.length; ++i) {
         const result = evt.results[i];
         if (result.isFinal) {
           resultElement.innerHTML = result[0].transcript;
         } else {
           resultElement.innerHTML = '[途中経過]' + result[0].transcript;

           // 音声認識結果に「メリークリスマス」という文言が入っていたら API を叩く
           if (new RegExp('メリークリスマス').test(result[0].transcript)) {
             axios.get('https://xxxxxxxx.ngrok.io/on').then(res => {
               console.log(res.data);
             });
           }
         }
       }
     };

     speechReco.start();
    </script>
  </body>
</html>
```

※エラー処理は一切しておりません。
※また `onresult` のみハンドリングしています。

詳しくは https://developer.mozilla.org/ja/docs/Web/API/SpeechRecognition にて。

## 最後に

Speech To Text が手軽！
Lambda とか、Cloud Functions 不要なのでチャラっと試したいときに便利！

そして obniz！
手軽に百均アイテムと連携できた！