[日本語Alexa] Alexa SDK for Node.js Ver2入門（その３）レスポンスの作成

本記事は、Alexa SDK for Node.js Ver2入門と題して、入門用という位置付けで、Alexa SDKの使い方を順に紹介しているものです。 今回（その3）では、レスポンスの作成について少し詳しく見ていきたいと思います。
特集

SIN

2018.04.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

本記事は、Alexa SDK for Node.js Ver2入門と題して、入門用という位置付けで、Alexa SDKの使い方を順に紹介しているものです。（対象は、Node.js用のみです。Java用には触れておりません）

その3では、レスポンスの作成について少し詳しく見ていきたいと思います。

2 ResponseBuilder

Alexa SDKでは、ResponseBuilderというクラスがあり、このクラスで提供されてる各種のヘルパー関数によって簡単にレスポンスを組み立てられるようになっています。

基本的な使用方法は、この入門の最初に「最小限のスキル」で紹介した下記のようなものです。

ResponseBuilderオブジェクトは、handlerInputに含まれていますので、それに対してレスポンスをspeak()で追加します。 追加の作業が終わったら、getResponse()で、出来上がったレスポンスを取得して、ハンドラの戻り値として使用します。

handle(handlerInput) {
    return handlerInput.responseBuilder
        .speak('こんにちは')
        .getResponse();
}

上記では、レスポンスの追加作業が、speak()だけでしたが、例えばカード情報の追加や、ダイアログモデル用のレスポンスなど色々なレスポンスの作成が簡単に出来るようにResponseBuilderに多くのヘルパー関数が用意されています。

それでは、このヘルパー関数について、順に確認して行きたいと思います。

3 スピーチとリプロンプト

スキルで最も基本的なレスポンスは、スピーチとリプロンプトでしょう。

初回の「5 会話の継続と終了」で紹介したものと重複しますが、ここで簡単に纏めます。

(1) speak

speak()でアレクサに発話させることができます。発話の後、セッションは切断されます。

return handlerInput.responseBuilder
    .speak('こんにちは')
    .getResponse();

生成されるレスポンスは、以下のとおりです。

"response": {
    "outputSpeech": {
        "type": "SSML",
        "ssml": "<speak>こんにちは</speak>"
    }
}

(2) reprompt

reprompt()では、ユーザーからの返事がなかった時の発話を指定できます。shouldEndSessionにfalseが設定されるため、speak()で指定した最初の発話の後もセッションは継続され、ユーザーからのレスポンスを待ち受けるようになります。

reprompt()は、通常、speak()と一緒に利用されます。

return handlerInput.responseBuilder
    .speak('何になさいますか')
    .reprompt('ご注文をお願いします')
    .getResponse();

生成されるレスポンスは、以下のとおりです。

"response": {
    "outputSpeech": {
        "type": "SSML",
        "ssml": "<speak>何になさいますか</speak>"
    },
    "reprompt": {
        "outputSpeech": {
            "type": "SSML",
            "ssml": "<speak>ご注文をお願いします</speak>"
        }
    },
    "shouldEndSession": false
}

4 カード情報

(1) withSimpleCard（文字のみのカード情報）

withSimpleCard()を使用すると、Alexaアプリにカードを表示することができます。第１パラメータにタイトル、第２パラメータに本文を指定します。

withSimpleCard()だけでは、アレクサからのレスポンスが無いため、通常、speak()と一緒に利用されます。

return handlerInput.responseBuilder
    .speak('こんにちは')
    .withSimpleCard('タイトル', 'こんにちは！')
    .getResponse();

生成されるレスポンスは、以下のとおりです。

"response": {
    "outputSpeech": {
        "type": "SSML",
        "ssml": "<speak>こんにちは</speak>"
    },
    "card": {
        "type": "Simple",
        "title": "タイトル",
        "content": "こんにちは！"
    }
},

Alexaアプリには、下記のように表示されます。

(2) withStandardCard（画像＋文字のカード情報）

withStandardCard()を使用すると、Alexaアプリに画像つきのカードを表示することができます。第１パラメータにタイトル、第２パラメータに本文、第３パラメータに小さい画像、第４パラメータに大きい画像を指定します。

withSimpleCard()だけでは、アレクサからのレスポンスが無いため、通常、speak()と一緒に利用されます。

<br />const largeImageUrl = 'https://s3.amazonaws.com/xxx/large.jpg';
const smallImageUrl = 'https://s3.amazonaws.com/xxx/small.jpg';
return handlerInput.responseBuilder
    .speak('こんにちは')
    .withStandardCard('タイトル', 'こんにちは！', smallImageUrl, largeImageUrl)
    .getResponse();

生成されるレスポンスは、以下のとおりです。

"response": {
    "outputSpeech": {
        "type": "SSML",
        "ssml": "<speak>こんにちは</speak>"
    },
    "card": {
        "type": "Standard",
        "title": "タイトル",
        "text": "こんにちは！",
        "image": {
            "smallImageUrl": "https://s3.amazonaws.com/xxx/small.jpg",
            "largeImageUrl": "https://s3.amazonaws.com/xxx/large.jpg"
        }
    }
}

Alexaアプリには、下記のように表示されます。

5 getResponse

ここまでも既に使用してきましたが、getResponse()を使用すると、生成されている現時点でのレスポンスがJSONで取得できます。

const response = handlerInput.responseBuilder
            .speak('こんにちは')
            .getResponse();

console.log(JSON.stringify(response,　null,　4));

上のコードを実行すると、次ようなログが出力されます。

{
    "outputSpeech": {
        "type": "SSML",
        "ssml": "<speak>こんにちは</speak>"
    }
}

そしてこれを、ハンドラーの戻り値にすることで、SDKが responce{} に埋め込んで、最終的なレスポンスを生成するという仕組みです。

5 最後に

今回は、レスポンスを返すためのResponseBuilderについて見てきました。実は、ヘルパー関数は、まだまだ多くの機能があります。本記事では、基本的なレスポンスとカード情報についてのみの紹介となっています。

これ以外のレスポンスの生成については、関連する機能と共に、あらためて紹介させて頂きたいと考えています。

ちなみに、ResponseBuilderのインターフェースは次のとおりです。

interface ResponseBuilder {
    speak(speechOutput: string): this;
    reprompt(repromptSpeechOutput: string): this;
    withSimpleCard(cardTitle: string, cardContent: string): this;
    withStandardCard(cardTitle: string, cardContent: string, smallImageUrl?: string, largeImageUrl?: string): this;
    withLinkAccountCard(): this;
    withAskForPermissionsConsentCard(permissionArray: string[]): this;
    addDelegateDirective(updatedIntent?: Intent): this;
    addElicitSlotDirective(slotToElicit: string, updatedIntent?: Intent): this;
    addConfirmSlotDirective(slotToConfirm: string, updatedIntent?: Intent): this;
    addConfirmIntentDirective(updatedIntent?: Intent): this;
    addAudioPlayerPlayDirective(playBehavior: interfaces.audioplayer.PlayBehavior, url: string, token: string, offsetInMilliseconds: number, expectedPreviousToken?: string): this;
    addAudioPlayerStopDirective(): this;
    addAudioPlayerClearQueueDirective(clearBehavior: interfaces.audioplayer.ClearBehavior): this;
    addRenderTemplateDirective(template: interfaces.display.Template): this;
    addHintDirective(text: string): this;
    addVideoAppLaunchDirective(source: string, title?: string, subtitle?: string): this;
    withShouldEndSession(val: boolean): this;
    addDirective(directive: Directive): this;
    getResponse(): Response;
}

9 参考リンク


Alexa Skills Kit SDK for Node.js
Now Available: Version 2 of the ASK Software Development Kit for Node.js
GitHub repository for the SDK v2 for Node.js
[日本語Alexa] Alexa SDK for Node.js Ver2入門（その１）はじめの一歩
[日本語Alexa] Alexa SDK for Node.js Ver2入門（その２）ハンドラの登録
[日本語Alexa] Alexa SDK for Node.js Ver2入門（その３）レスポンスの作成
[日本語Alexa] Alexa-SDK Ver2（その4）スキル属性
[日本語Alexa] Alexa-SDK Ver2（その5）ダイアログモード
[日本語Alexa] Alexa-SDK Ver2（その6) 所在地情報
[日本語Alexa] Alexa-SDK Ver2（その7) ディスプレイ表示

AWS