スマートスピーカーとdialogflowを使って〇〇ライフをちょっと捗らせる話

この記事は
「DeNA IPプラットフォーム事業部 Advent Calendar 2017」
14日目の記事です。

こんにちは。 @hirashunshun です。
マンガボックスという、スマホ向け電子書籍サービスのサーバーサイド/フロントエンドの担当をしています。
あと、狂ったようにパデルを愛するパデラーです。社内では名前よりもパデルと呼ばれることが多いです。

はじめに

2017年は一般家庭への普及という点では間違いなくスマートスピーカー元年となりました。
そんな良き年の瀬にGoogle Home Miniが3000円で手に入るという幸運に恵まれましたので、
IoT機器との連携や簡単なAssistantアプリ作成の過程ご紹介したいと思います。
皆様のライフが捗るご参考になれば幸いです。

おしながきはこちらです。

• 家電と連携する
  • テレビと
  • 電球と
• Google Assistant対応アプリを作ってみる
  • パデルコートの予約状況を確認する

では行ってみましょう！

家電と連携する

テレビと

自宅のテレビがAndroidが内蔵されたAndroidTVなので、
Google Home Miniをセットアップするときに使ったGoogle Homeアプリを使うことで連携可能でした。
同一のネットワークに接続すれば、自動でHomeアプリがテレビを検出してくれてそのままセットアップ完了です。

一点注意ですが、このセットアップ完了の時点ではGoogle Homeに「テレビをつけて」と語りかけてもテレビを認識することができません。
私の場合、初期の名称が型番である「KJ-...」になっていたことが原因で、
テレビのホームメニューから設定->端末情報->端末名->変更する
で「テレビ」に名称変更することで無事にGoogle Homeから認識されるようになりました。

いままでテレビでYouTube等の動画を見るには、

• 手元のスマホで探してからCastボタン
• テレビのリモコンでYouTubeアプリを開いて探して・・・

と手間がかかりましたが、
Google Homeがあれば、「おっけーグーグル、テレビで〇〇の動画を流して」といえば再生を開始してくれるので、
ご飯中でも洗濯物を干してる最中でも、布団に入ってからでもすぐに再生することができます。

実際の動画がこちらです。

ほんの若干捗った気がします。ってかそれパズルやんけ。
テレビという単語がゲシュタルト崩壊する前に次に進みたいと思います。

電球と

スマートライトというと話は早いでしょうか。
世間ではhueが有名ですが、私はLIFXを数年前から愛用しています。
hueは親機(ハブ)を中心に子機(電球)を連携させる形でしたが、
LIFXは電球単体がそれぞれwi-fiにつながるので自由度が高いというのが選定理由でした。

こちらもGoogle Homeを通せば声のみでON/OFFが実現可能です。

• 点/消灯させるためにスイッチまで歩くそして押す
• スマホでLIFXアプリを開いてON/OFF

というかつての使い方が嘘のようです。

連携方法は先にLIFXアプリ上で設定後、こちらも同じくHomeアプリでの設定となります。

このように電球を部屋、その中での場所と細かくアサインでき、アサイン先の名前で点/消灯することができます。

また、話は少し変わりますが、このLIFXは単体でIFTTTと連携可能で、

• Facebookの通知受信時に青く光らせる
• 朝6:00 ~ 7:00にかけてじわじわと明るくする

等の使い方ができます。

私はそれに加えて
「運用しているサービスのアラートをGMailで受信したら、部屋のLIFXを全て赤く光らせる」
というレシピを作りましたが

精神衛生上本当におすすめできません。（夜の3時

Google Assistant対応アプリを作ってみる

それでは本題、アプリの制作に入りましょう。
作り方の前に全体外観を先に簡単にまとめたいと思います。

処理フロー

Google Home / Phone

Google Homeは音声入力、Android/iOSのGoogle Assistantアプリではそれに加え文字入力が可能です。
入力された情報をGoogle Assistantに送ります。

Google Assistant

入ってきた値によって、web検索や電話の発信等を行います。
また値がAssistant対応のアプリを開くトリガーになっていた場合、それを開きます。

Action On Google

Google Assistantと各アプリケーションのつなげ役。
ここで言う各アプリケーションというのはDialogflowで作られたアプリをはじめ、Personality QuizやFlash Cardsといったテンプレートも用意されています。

Dialogflow

入力された自然言語の解析処理機能を使ってアプリの実装ができます。
Google Assistantはもちろん、LINE、Slack、TwitterなどのIn/Outに対応しています。
以下で実際の設定を見つつ詳しく説明します。

Application Server

Dialogflowで処理された入力を元に処理を行ういわばビジネスロジックがある部分。
Dialogflowで作ったアプリのIn/Outは固定化されているので、既存のビジネスロジックとの間に一段処理を挟む場合のそれもここに含まれると考えて良いと思います。
基本的に実装が必要なのはこの部分のみです。

Dialogflowの設定

ではパデルコートの空き状況を確認するアプリの制作に入りましょう。
Action On GoogleではProjectを作ってDialogflowでビルドするということを指定するのみですので割愛します。

Agentの作成

Agentの作成=アプリの作成と考えてよさそうです。わかりやすい名前をつけてCREATEしましょう。後から変更可能です。
DEFAULT LANGUAGEは後から変更ができません。今回は日本語で行きます。

Intents

ユーザーの入力を解析して、どの処理に回すかを司る部分です。
こちらを見ていただくとわかると思いますが、一定ルールに基いて、人間の言葉を抽出しています。

今更ですがそもそもパデルとは何なのかということに関しては完全にスルーで進みます。

自然言語で入ってくる以上、文章のゆらぎはどうしても発生してしまうため、
このようにある程度想定できる文章を指定して、その枠に収まった入力の場合はこのIntentで設定された次の処理へと進みます。

ここで注目なのが色の着いた部分です。
これは以下のように変数として抽出され、後の処理で使われることになります。

このように$court、$dateさえあればとある日時にコートが空いているかどうかの問い合わせは簡単にできそうです。

ですがこのcourt、dateであっても自然言語でのゆらぎは発生します。
それを吸収できるように設定をするのが以下のEntitieseです。

Entities

こちらでは先程のENTITYの定義を行っています。

同じ東京という意味でも人によっては荻窪や善福寺と言ってしまう可能性は十分に考えられますが、アプリケーションサーバー側でそれらを吸収する責務を負うのは非常に重いです。
ここで定義をすることでそれらの吸収を図っています。

Fulfillment

それでは抽出した単語を使ってアプリケーションサーバーに問い合わせを行いましょう。
今回はIntentsの設定部分でFulfillmentにチェックを入れてますので、こちらのWebhookに処理が流れてきます。
URLと認証情報を記載します。URLはHTTPSしか受け付けていないのでご注意ください。

また、こちらに書いてあるとおり、リクエストとレスポンスの型は決まっていますので、
それに合わせてアプリケーションサーバーを実装します。
https://dialogflow.com/docs/fulfillment

今回実装コードは割愛しますが、該当コートの予約サイトをスクレイピングして、
該当日の何時から何時が空いているかを返す実装をしています。(信じられないくらい雑多になりました・・・)

準備ができましたら画面横のTry It Nowに値を入力します。
今回はIntentの設定に乗るように「今日の荻窪の予約状況」とします。

{
  "id": "0f4dd57b-4881-4b23-969b-c43ad5bd5f9c",
  "timestamp": "2017-12-14T01:39:01.038Z",
  "lang": "ja",
  "result": {
    "source": "agent",
    "resolvedQuery": "今日の荻窪の予約状況",
    "action": "check_court_open",
    "actionIncomplete": false,
    "parameters": {
      "court": "東京",
      "date": "2017-12-14",
      "reserve": "空き状況照会"
    },
    "contexts": [],
    "metadata": {
      "intentId": "b4960b08-7605-4450-bce7-0a00ed1d0912",
      "webhookUsed": "true",
      "webhookForSlotFillingUsed": "false",
      "webhookResponseTime": 701,
      "intentName": "コート空き確認"
    },
    "fulfillment": {
      "speech": "パデル東京は本日、12時から17時が空いています",
      "source": "",
      "displayText": "パデル東京は本日、12時から17時が空いています",
      "messages": [
        {
          "type": 0,
          "speech": "パデル東京は本日、12時から17時が空いています"
        }
      ],
      "data": {}
    },
    "score": 1
  },
  "status": {
    "code": 200,
    "errorType": "success",
    "webhookTimedOut": false
  },
  "sessionId": "0f4d5788-b443-4a30-b24e-6caea6990014"
}

parametersの中に値が正しく入っていることが確認できると思います。

それではAction On GoogleのSimuratorでの挙動を見てみましょう。

よし、パデル行こう。（仕事

おわりに

パデルライフは若干捗りましたでしょうか？
かなりざっくりした解説にはなりましたが、
Dialogflowは一見複雑なGUIですが、多くのゆらぎがある人間の言葉を機械に通じる言葉に変換してくれるツールという点で非常に優秀なツールだと感じました。
今後、機械学習の力が加わってゆらぎをさらに高精度で丸められるんだろうな・・・と考えられると本当にGoogle恐ろしいです。

また、今回はFullfilmentのwebhook先の処理を手っ取り早くPerl on 手元のサーバーで実装をしてしまいましたが、せっかくなのでfirebase上でサーバーレスっぽく書いてみたかった・・・

それでは以上となります。
次回は @daponta さんよりkubernetesに関するお話ですー！お楽しみに！

宣伝

マンガボックスでは一緒に働くメンバーを熱烈に募集しています。

• アーキテクチャ設計や言語選定から関わるエンジニアリングをしたい方
• マンガに関わる仕事に興味がある方
• エンジニアとパデルを両立したい方

などなど、「ちょっと興味ありそう」「もっと色々聞いてみたい」という方も
是非こちらから応募頂くか、 @hirashunshun までゆるっとご連絡いただければと思います。

お待ちしております！