日本発売の三種スマートスピーカーにHelloWorldを喋らせる(Alexa Clova Google Home)

Ateam Lifestyle x cyma Advent Calendar 2018、6日目です！
株式会社エイチーム 19卒内定者エンジニア @yutaroudが担当します。

はじめに

最近めちゃくちゃスマートスピーカーにはまっています。
全部のスマートスピーカーを試してみて、それぞれ一長一短あるなあと実感しております。
例えば、Google Homeは音声認識に強く、Alexaは機能が豊富で、Clovaは対話力が優れているといった特徴があると感じています。
どれがいいかというよりは、目的に応じて使い分けるという形がベストなのかと思います。
話し相手が欲しい人はClovaがオススメだし、言ったことを忠実にこなして欲しいならAlexaだし、聞き間違いにイライラしてしまう人はGoogle Homeがおすすめと言った感じです。

そんなスマートスピーカーですが、使い方で僕が一番便利だと考えているのが、電気を消したりつけたり
といったスマートホーム機能です！！
寝る前におやすみと言うと、わざわざ電気を消しにいかなくても勝手に消してくれるこの便利さがわかるでしょうか！！

しかし・・・僕はもうただ使うだけでは満足できません！！！
自分で拡張機能を作りたくなってしまいました。

スマートスピーカーの拡張機能を作成する上で基本となる例として、それぞれの端末でHello Worldを試します！
そこで、それぞれの最初の一歩を、今回は解説します。

スキル/アクション開発

それぞれ、公式が提供しているサービスを利用して開発を進めていく必要があります。
今回、作成してみて、どれも簡単に作れるように設計されているなという印象を受けました！
どれもよっぽどのことがない限りは無料で使えて、無料で作れるので、ぜひ試して欲しいです！

Alexa

日本では開発されたスキル数がすでに1000以上ということで、一番使われているプラットフォームではないかと思います。
また、SpotとShowというデバイスの画面付きスキルも作成することができます。（液晶付きのスマートスピーカーについてClovaは今冬、Google Homeも海外で発表されてはいます。)

必要なアカウント

Alexaアカウント(Amazon.co.jpのアカウントを持っている人はそのアカウントを利用可能)
AWSアカウント

使うサービス

Alexa Skills Kit
AWS Lambda (コードのホスティング)
Lambdaを使うのは、どんな形であれサーバーが必要になるのですが、設定のアレコレを省けて、手軽に試すことができるため、今回はLambdaを使います。

Alexaスキル開発方法

公式がSDKを出してくれているので、そちらを使います。
Ver1とVer2があります。
今回は両方使ってみます。

Alexa Skills Kitの設定

AlexaDeveloperConsoleにアクセスし、スキルの作成をしてください。

今回はカスタムスキルを作ります。カスタムを選択して、スキルを作成します。
言語を選ぶ欄があるので、日本語にしてください。

スキルを作成すると下記のコンソール画面が出るので、呼び出し名をまずは設定します。
仮にテストマンという呼び出し名を設定しました！
設定できたら、モデルの保存を押します。

続いてインターフェースを選択し、Displayインターフェースにチェックを入れ、保存してください。

その後、CancelIntentを選択し、やめて、キャンセルと言ったサンプル発話をいれ、保存し、モデルをビルドしてください。

AWS Lambdaの設定

ここまで終えたら、AWSのLambdaを使用します。
右上のエリアが東京と表示されていることを確認して、関数の作成を選択してください。

設計図から作成します。フィルターにalexaと打つと、最初に出てくるalexa-skill-kit-sdk-factskillを使います。

続いて、ロールの作成をします。名前はなんでも良いので、カスタムロールの作成を選んでください。
今回はalexatestmanという名前にしています。

今回はデフォルトのIAMロールをそのまま使用し、ポリシー名は新しいポリシーの作成を選んで、許可を押してください。

すると、関数が作成されるので、トリガーの追加からAlexa Skills Kitを選択します。

スキルIDを入れる欄があると思うので、一度Alexa Skill Kitに戻り、スキルIDを取得します。

エンドポイントにあるAWS LambdaのARNにチェックを入れ、スキルIDがあるので、クリップボードにコピーを選択します。そうしたら、先ほどのスキルIDを入れる欄にペーストし、右上の保存を押してください。

デフォルトの地域にはLambda画面上部にあるARNより後ろの部分をコピーし、ペーストしてください。

ここまでで一度テストをしてみます。
Alexa Consoleのテストタブを選択し、自分でつけた呼び出し名でテストしてください。
すると、Heres'your~~と出ると思います。このコードはサンプルで用意されているコードでVer1のSDKで記述されています。個人的には、アレクサに何か喋らせる程度であれば、Ver1のSDKでも問題なく開発できるかなと思います。同期処理などをやりたい場合にはVer2の方が好ましいです。

ver2の場合の設定

まずはローカルで作業をします。
Node.jsとnpmの環境が必要になります。

$ mkdir HelloAlexa
$ npm init
$ npm install --save ask-sdk
$ touch index.js

作成したindex.jsファイルの記述は下記のように設定してください。

'use strict';

const Alexa = require('ask-sdk-core');

let skill;
exports.handler = async function (event, context) {
    if (!skill) {
        skill = Alexa.SkillBuilders.custom()
            .addRequestHandlers(
                HelloHandler,
                HelpHandler,
                ExitHandler,
                SessionEndedRequestHandler,
            )
            .addErrorHandlers(ErrorHandler)
            .create();
    }
    return skill.invoke(event);
}

const HelloHandler = {
    canHandle(handlerInput) {
        const request = handlerInput.requestEnvelope.request;
        // checks request type
        return request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
        return handlerInput.responseBuilder
            .speak('HelloWorld')
            .getResponse();
    }
};

const HelpHandler = {
    canHandle(handlerInput) {
        const request = handlerInput.requestEnvelope.request;
        return request.type === 'IntentRequest'
            && request.intent.name === 'AMAZON.HelpIntent';
    },
    handle(handlerInput) {
        const requestAttributes = handlerInput.attributesManager.getRequestAttributes();
        return handlerInput.responseBuilder
            .speak('ヘルプインテント')
            .reprompt('こちらヘルプインテントもう一度どうぞ')
            .getResponse();
    },
};

const ExitHandler = {
    canHandle(handlerInput) {
        const request = handlerInput.requestEnvelope.request;
        return request.type === 'IntentRequest'
            && (request.intent.name === 'AMAZON.CancelIntent'
            || request.intent.name === 'AMAZON.StopIntent');
    },
    handle(handlerInput) {
        const requestAttributes = handlerInput.attributesManager.getRequestAttributes();
        return handlerInput.responseBuilder
            .speak("処理を終了します")
            .getResponse();
    },
};

const SessionEndedRequestHandler = {
    canHandle(handlerInput) {
        const request = handlerInput.requestEnvelope.request;
        return request.type === 'SessionEndedRequest';
    },
    handle(handlerInput) {
        console.log(`Session ended with reason: ${handlerInput.requestEnvelope.request.reason}`);
        return handlerInput.responseBuilder.getResponse();
    },
};

const ErrorHandler = {
    canHandle() {
        return true;
    },
    handle(handlerInput, error) {
        console.log(`Error handled: ${error.message}`);
        console.log(`Error stack: ${error.stack}`);
        const requestAttributes = handlerInput.attributesManager.getRequestAttributes();
        return handlerInput.responseBuilder
            .speak("エラーです。")
            .reprompt("エラーです。")
            .getResponse();
    },
};

Handlerとしてリクエストされたインテントを処理しています。
HelpHandlerはHelpIntentの処理、ExitHandlerはCancelIntentやStopIntentの処理といったような形ですね。

作成を終えたらZipフォルダにして、アップロードします。ランタイムがNode.js 8.10になっていることを確認し、右上の保存を押してください。

$ rm ../HelloAlexa.zip; zip -r ../HelloAlexa.zip .

あとはver1と同様に設定し、テストします。以下の画像のような形になっていれば成功です。
右側の僕の入力です。

Clova

2018年7月12日に一般向け開発者が利用できるようになりました。まだまだ、開設されてからそこまで期間が経ってないので、スキルを新しく作ろうとした時に被ることはあまりないのかなと思います。

必要なアカウント

LINE@アカウント
AWSアカウント(lambdaでホスティングします）

使うサービス

AWS Lambda
Lambdaを使うのは、どんな形であれサーバーが必要になるのですが、設定のアレコレを省けて、手軽に試すことができるため、今回はLambdaを使います。
Clova Developer Center

Clovaスキル開発方法

Clova側の設定

line@アカウントを開設したら、Clova Developer Centerに行き、Clova Extensions Kitで
Clova対応スキルを作成していきます。下記のボタンがあると思うので、押して、スキルチャネルを新規作成します。

プロパイダーを作成していない場合は、新規プロパイダー作成にチェックを入れて次のページへ進みます。

チャネル名を入力します。今回はHelloWorldとしています。

タイプをカスタムと選択すると、Extension IDの設定やスキル名など出てくると思います。
Extension IDは作成するスキルのIDみたいなもので、被らないものを入力する必要があります。
スキル名はClovaのストアに並ぶ時の名称で、呼び出し名と近い形にした方が、ユーザーにとってはわかりやすいので、呼び出し名と同じにするか、近い名前にしましょう。
呼び出し名は、「Clova 呼び出し名をスタートして」のような形でスキルが呼び出されるので、呼びやすい名前にしましょう。
今回はハローワールドという呼び出し名とスキル名にしました。（呼び出し名は日本語推奨です。）

呼び出し名(サブ)は　音声で入力を受け付けているので、うまく変換されない場合の処理を考えて入れます。
提供者区分を個人にすると、提供者名とメールアドレスが出てくるので入れましょう。

今回は配布情報については飛ばします。スキルを公開したい方はこちらを記入する必要があります。
個人情報の保護及び規約同意に飛び、下の方にある対話モデルを選択してください。

対話モデルを開くと下記のようなウィンドウが出ます。
左下にあるカスタムインテントから+ボタンを押して、新規のカスタムインテントを作成します。
インテントというのは、発話の分類のようなもので、相手が話した言葉によってインテントが変わります。
例えば、初期からあるClova.CancelIntentでは、ユーザーが"やめて"、"ストップ"などと話すと分類されるIntentです。CancelIntentに分類された場合は、スキルが終了します。

インテントを作成したら、サンプル発話リストにこんにちはと入れておきます。
入れたら、保存を押してください。
今回はスロットは使いませんが、スロットは相手から値を受け取りたい時に使います。
例えば、星座占いのスキルを作りたいときは、相手から何座か受け取りたいので、スロットを作成する必要があります。
ここまで終了したら左上のビルドを押してください。

今度はサーバー側の設定へ移ります。

AWS Lambda側の設定

新しく関数を作成します。一から作成を選択し、名前はなんでも良いので、カスタムロールの作成を選択します。

すると、下記のページに飛ぶと思うので、今回はデフォルトのまま保存します。

そして、関数が作成されるので、左側のトリガーからAPI GateWayを選択します。

APIGateWayの設定は下記画像のようにしてください。
API→新規APIの作成
セキュリティ→オープン　（スキルを公開する場合はAPI GateWay上からPOSTだけにするなどの対策を行ってください）
追加を押す。
そして右上の保存を押します。

すると、APIのエンドポイントが出てくるので、コピーをします。

コピーしたURLはClova Develop Centerのサーバー設定にあるExtensionサーバーのURLにペーストし、保存してください。これで、LambdaとClovaの連携は終わりです。

コードの記述

公式SDKのサンプルがありますが、今回は使用しません。

下記コードを記述し、lambdaに貼り付けてください。

exports.handler = (event, context, callback) => {
  let reqJson = JSON.parse(event.body);
  let text = ``;

  //ユーザのアクションによって処理を振り分ける
  switch (reqJson.request.type) {
    case 'LaunchRequest':
      text = 'Hello World';
      break;
    case 'SessionEndedRequest':
      text = 'また遊んでください!';
      break;
    case 'IntentRequest':
      if(reqJson.request.intent.name == 'HelloIntent'){
        text = "Hello World";
      }else{
        text = "ハローワールド";
      }
      break;
    default:
      text = "HelloWorld";
  }

  //返却するJSONを用意する
  let res_json = {
    "version": "1.0",
    "sessionAttributes": {},
    "response": {
      "outputSpeech": {
        "type": "SimpleSpeech",
        "values": {
          "type": "PlainText",
          "lang": "ja",
          "value": text
        }
      },
      "card": {},
      "directives": [],
      "shouldEndSession": false
    }
  };

  //レスポンスを返す
  var res ={
    "statusCode": 200,
    "headers": {
      "Content-Type": "application/json;charset=UTF-8"
    },
    body: JSON.stringify(res_json)
  };
  callback(null, res);
};

Clovaからjson形式でデータが飛んでくるので、それをJSON.parse(event.body)で取得しています。
そして、どのIntentがリクエストされたかで分岐を行い、その値に応じてtextに値を代入し、res_jsonでClovaに出力するjsonを返しています。

テストの実行

こんにちはと入力して、HelloWorldと返って来ていれば成功です！

Google Home

Google Homeのアクションは、Googleアシスタント（スマートフォンで音声操作できるCMのアレ）の作成も同時に行えるところが一番良いところかな〜と思います。
ただ、作成する部分が日本語対応してないです。
英語ができなくても、基本的な部分さえわかればなんとかなります！一緒に頑張っていきましょう！

必要なアカウント

Googleアカウント

使うサービス

Actions on Google
DialogFlow

Google Action開発方法

Actions on Googleの設定

Actions on Googleにアクセスします。
Add/import projectと記入されている部分を選択！

すると下記のような画面が出てきます。　
最初のは利用規約に同意するかどうかで、三つ目はGoogleActionに関するメールを送ってもいいですか？
4つ目の質問はGoogleAction改善のための調査に協力しますか？というような内容です。

そして先ほどの問いに答えると、新規プロジェクトと出てくるので、適当な名前をつけます。
今回はMy Projectという名前をつけています。
下部のEnglish→Japanese, United States→Japanに変えるのを忘れないでください。
変更できたらCREATE PROJECTします。

この画面が出てきたらSKIPを押してください。

すると、下記のような画面が出てくると思います。
まずはSETUPの項目にあるInvocationの登録を行います。
これは呼び出し名という認識で問題ないです。

呼び出し名は単語ひとつだったり、他と被っているとつけられないので、気をつけてください。
Google Assistant Voiceのところで、男性の声だったり女性の声だったりが選べます。
設定を変更したら忘れず右上の保存を押しましょう。

次はActionの設定をします。BuildのActionsを選んでください。
まずは下記のような画面が表示されると思うので ADD YOUR FIRST ACTIONを選択

すると、以下のポップアップが出るので、そのまま右下のBuildを押してください。
DialogflowがGoogleアカウントへのアクセスをリクエストしています。と出たら許可してください。

下記画面が表示されたら、国は日本で、Terms of Serviceにチェックを入れてください。

Dialogflowの設定

そうすると、Dialogflowの画面に行けます。
Default LanguageはJapanese でTimeZoneもTokyoになっていることを確認してプロジェクトを作成します。右上のCREATEをクリック。

すると、左部に色々出てきます。Intentsを選択して右上のCREATEINTENTを押します。

またまたぞろぞろと出てきますが、 Training phrasesとResponsesを今回は入力します。
Training phrasesはサンプル発話のようなものです。Responsesは返答です。
ここまでできたら右上のSAVEを押します。

Googleアクションのシミュレーション

Actions on Googleの方に戻ると下記画面のように表示されていることを確認してください。

Simulatorに移動して、LanguageをJapaneseに変更し、START TESTING → DONE
で、テストを実行します。

テストが下記のような形で返ってくれば成功です！

参考

Google Homeアプリ開発と申請方法～Actions on GoogleとDialogflowの使い方〜
Dialogflow入門
Clova公式SDK(Node.js)のAWS、Firebaseでの動かし方
[AWS LambdaでLINE Clovaのスキルを作成する]
(https://qiita.com/takanakahiko/items/8c816b52411f91d7c6b4)

終わりに

いかがでしたでしょうか。Alexa Clova Google Homeそれぞれの最初の設定方法についてご紹介しました。
どの端末でも、意外と簡単に新しいスキル/アクションを作れることがわかっていただければ幸いです。
僕は、もうAlexaスキルを四つとClovaスキルを一つ公開しています！開発する時期によっては、スマートスピーカー本体が貰えたり、Tシャツが貰えたりするので、ぜひご自身でも試してみることをお勧めします！

Ateam Lifestyle x cyma Advent Calendar 2018
明日は @turkeyzawa さんがReactについて書いてくれるらしいので、お楽しみに。

お知らせ

エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
http://www.a-tm.co.jp/recruit/