IFTTTを使ってBOCCO emoと家電を繋げる~BOCCO emoのお見送りとお出迎え~ 詳細手順編

ユカイ工学

2022年9月1日 15:30

こんにちは！エンジニアアルバイトの高橋です。
本記事では、「IFTTTを使ってBOCCO emoと家電を繋げる~BOCCO emoのお見送りとお出迎え~」の詳細の設定手順について紹介します。

こちらはBOCCO emoの機能を開発したい人向けの記事となっており、複雑な手順も多いのでご注意ください。

大まかな手順とシステム構成図は以下のようになります。

家電リモコンのセットアップ
BOCCO emoアプリのIFTTTの設定
IFTTTのアプレット作成
Google Apps Script（GAS）プログラムの作成
BOCCO emo Platform API設定

家電リモコンのセットアップ

スマート家電リモコンのセットアップをします。
システム構成図で赤矢印が指している箇所にあたります。

スマート家電コントローラーのアプリをインストールし、家電リモコンをWi-Fiに接続します。

家電リモコンセットアップ手順を参考に、家電の登録をします。

IFTTTとの連携を参考に、家電リモコンとIFTTTを連携します。

これで家電リモコンの設定は完了です。

BOCCO emoアプリのIFTTTの設定

BOCCO emoとIFTTTを連携するためには、BOCCO emoのスマートフォンアプリから利用開始設定をする必要があります。
アプリのBOCCOチャンネルから外部連携を選択し、「IFTTT（イフト）連携」を開始します。

IFTTTのアプレット作成

BOCCO emoとIFTTT連携するためのアプレットを作成します。
システム構成図で赤矢印が指している箇所にあたります。

アプレットとは、あるきっかけに対して、実行する内容を設定するものです。

例えば、Google CalendarとLINEを連携してアプレットを作成すると、「Google Calendarに予定が追加されたら、LINEに通知する」ようなアプレットが作成できます。

今回は、Google Apps Script（GAS）からのWebhookを受け取り、エアコンの電源をON/OFFをしたり、BOCCO emoを喋らせたりするために以下の3つのアプレットを作成します。

①Webhookが来たら、エアコンをつける
②Webhookが来たら、エアコンを消す
③Webhookが来たら、BOCCO emoがあいさつする

Webhookが来てから各アプレットが動作する流れは以下の図のようになっています。

はじめに、「①Webhookが来たら、エアコンをつける」のアプレットを作成します。
IFTTTのアプレット一覧画面にアクセスし、右上にある「Create」を選択します。

まず、きっかけにあたる「If This」を設定するために、横の「add」を選択します。

「Webhooks」を探し、選択します。

中央にある「Receive a web request」を選択します。

「Event Name」に自分で決めたイベント名を記述して、「Create trigger」を選択します。
（ここでは、on_appという名前にしました。）

これで「If This」の設定は完了です。

次に、実行する内容「Then That」の設定をします。
先ほどと同様に横にある「add」を選択します。

「RATOC Remocon」を探し、選択します。

「エアコンの操作」を選択します。

家電リモコンアプリで設定したリモコン名、エアコンのモード（暖房・冷房など）とその温度を設定して、「Create action」を選択します。

これで「Then That」の設定が完了しました。「Continue」を選択します。

「Applet Title」の設定をし、「Finish」を選択します。
（ここでは、Applet Titleを「BOCCO emoがエアコンをつける」と設定しました。）

下記のような画面になればOKです。

つぎに、「②BOCCO emoがエアコンを消す」のアプレットを作成します。
先ほどの「①BOCCO emoがエアコンをつける」と作成手順は同じですが、下記の点に注意してください。

「If This」の設定をする際、Webhooksの「Event name」は、「①Webhookが来たら、エアコンをつける」とは異なる名前にしてください。（ここでは、Event nameをoff_appにしています。）
「Then That」の設定をする際、RATOCRemoconのエアコン操作は「停止」を選択してください。
「Applet Title」を「BOCCO emoがエアコンを消す」にします。

最後に「③BOCCO emoがあいさつする」のアプレットを作成します。「If This」の設定はアプレット①②と同じように「Webhooks」を設定します。
（ここではEvent nameをgreetingにしています。）

「Then That」の設定では、「BOCCO emo」を選択します。

「Speak by BOCCO emo」を選択します。

「room」はBOCCO emoアプリの部屋名と同じ名前を選択してください。
(ここで表示されない方は、BOCCO emoとIFTTTの連携ができていない可能性があるので、「emoアプリのIFTTTの設定」を確認してください。）

「text」にはBOCCO emoに発話させたい内容を入力します。
今回は、Webhookで受信した内容を発話させます。
「Add ingredient」を選択し、「Value1」を追加してください。
（Value1にはWebhookで通知された内容が入ります。）

「Create action」を選択し、「Then That」の設定は完了です。

あとは①②と同じように、Continueを選択し、Applet Titleを設定し、Finishを選択して完成です。
Applet Titleは「BOCCO emoがあいさつする」にしました。

これで必要な3つのアプレットが完成しました。

GASプログラムの作成

BOCCO emo platform APIからのWebhookを受け取り、IFTTTにWebhookを送るためのGASプログラムを作成します。
システム構成図で赤矢印が指している箇所にあたります。

まず、スプレッドシートを新規作成します。
作成したスプレッドシートを開き、拡張機能から「Apps Script」を選択します。

そうすると、下記の画面が表示されます。

ソースコードの欄に、下記のプログラムを入力します。

// POSTリクエストに対する処理
function doPost(e) {
  const jsonContents = JSON.parse(e.postData.contents)

  // イベント名を取得し、「BOCCO emoが音声コマンドを認識」でない場合は無視する。
  if(jsonContents.event != "vui_command.detected"){
    return;
  }
  // uuidを確認し、異なる場合は無視する。
  if(jsonContents.uuid != PropertiesService.getScriptProperties().getProperty("uuid")){
    return;
  }

  // 家を出たとき（行ってきますと言ったとき）
  if(jsonContents.data.vui_command.kind =='greeting.i_am_going'){
    var options1 = {
    };

    const data = { 
      'value1': "行ってらっしゃい",
    };

    var options2 = {
      'method' : 'post',
      'contentType': 'application/json',
      'payload' : JSON.stringify(data)
    };

    // 家電を消すようにIFTTTにWebhook通知を送る
    const webhook_url_off_app = "https://maker.ifttt.com/trigger/off_app/with/key/…"
    UrlFetchApp.fetch(webhook_url_off_app, options1);
    
    // BOCCO emoに行ってらっしゃいと言ってもらうためにIFTTTにWebhook通知を送る
    const webhook_url_greeting = "https://maker.ifttt.com/trigger/greeting/with/key/…"
    UrlFetchApp.fetch(webhook_url_greeting, options2);
  }

  // 帰ってきたとき（ただいまと言ったとき）
  else if(jsonContents.data.vui_command.kind =='greeting.i_am_back'){
    var options1 = {
    };

    const data = { 
      'value1': "おかえりなさい",
    };

    var options2 = {
      'method' : 'post',
      'contentType': 'application/json',
      'payload' : JSON.stringify(data)
    };

    //家電をつけるようにIFTTTにWebhook通知を送る
    const webhook_url_on_app = "https://maker.ifttt.com/trigger/on_app/with/key/…"
    UrlFetchApp.fetch(webhook_url_on_app, options1);
    
    //エモちゃんにおかえりなさいと言ってもらうためにIFTTTにWebhookを送る
    const webhook_url_greeting = "https://maker.ifttt.com/trigger/greeting/with/key/…"
    UrlFetchApp.fetch(webhook_url_greeting, options2);

  }

  else{
    return;
  }
}

変数「webhook_url_on_app」、「webhook_url_off_app」、「webhook_url_greeting」のそれぞれのURLは下記の手順で取得します。

IFTTTで3つのアプレットのうちどれか1つ選択し、Webhookのアイコンを選択します。

Documentationを選択します。

そうすると、下記の画面が出てくるので、「Make a POST or GET web request to:」に書かれているURLをコピーします。
{event}の部分は、各アプレットで設定したEvent Nameに置き換えて、ソースコードにペーストしてください。

ソースコードをデプロイします。新しいデプロイを選択してください。

種類の選択でウェブアプリを選択し、「説明」のところに任意の文を設定してください。
また、「アクセスできるユーザ」のところを、全員にしてください。
各種設定ができたら、「デプロイ」を選択します。

下記のような画面になれば、デプロイ完了です。
下の方にあるURLは、後ほど行うBOCCO emo Platform APIのWebhookの設定で使うので、控えておいてください。

BOCCO emo Platform APIの設定

BOCCO emoにあいさつをしたら、GASへWebhookを通知する設定を行います。
システム構成図で赤矢印が指している箇所にあたります。

BOCCO emoは本体に搭載されている各種センサやメッセージ着信などのイベントをWebhookを用いて通知することができます。
Webhookの設定はBOCCO emo Platform APIのWebhookの新規設定及びWebhookのイベント種別設定を実行する必要があります。
今回はAPIをブラウザで実行可能とするサービス、Swagger Editorを利用して、APIを実行します。
BOCCO emo Platform APIの管理画面にログインし、APIを実行するための、アクセストークンを取得します。