javascriptで構想を練りAlexaスキルに移植する流れ #JavaScript

Alexaのスキルを作る場合、いつも同じテンプレート利用するのは、格納する情報が置き換わるだけで進歩が無い。新たな発想でスキルを作るためには、まず、やりたいことをhtml上のjavascriptで構成しプログラムを完成させてから、Alexaプログラミングに移り、ボタン操作を発声インテントに置き換えるという等の段階を踏むのが良いと思う。

事例として「数字をシャッフルしてボタンを押すと順番に表示するjsプログラム」を「数字をシャッフルして発声によりインテントを起動すると順番に読み上げるAlexaスキル」に移植する場合で紹介する。

[html js]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<script>
var arr = [1,2,3,4,5,6];
var a = arr.length;
while (a) {
var j = Math.floor( Math.random() * a );
var t = arr[--a];
arr[a] = arr[j];
arr[j] = t;
}
arr.forEach( function( value ) {console.log( value )} );
console.log(arr);
var i=0;
</script>

<input type="button" value="REMIND" onclick="OnButtonClick2();"/>
<div id="Remindme"></div>
<input type="button" value="NEXT" onclick="OnButtonClick();"/>
<div id="Nextnum"></div>

<script>
function OnButtonClick2() {
target = document.getElementById("Remindme");
target.innerHTML = arr.slice(0,i);
}
function OnButtonClick() {
target = document.getElementById("Nextnum");
target.innerHTML = arr[i]+",";
i=i+1;
}
</script>
</body>

[alexa node.js]

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

    var arr = [1,2,3,4,5,6];
    var a = arr.length;

    while (a) {
    var j = Math.floor( Math.random() * a );
    var t = arr[--a];
    arr[a] = arr[j];
    arr[j] = t;
}

    arr.forEach( function(value) {console.log(value)} );
    console.log(arr);
    var i=0;

const LaunchRequestHandler = {
    canHandle(handlerInput) {
        return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
    },

    handle(handlerInput) {
        const speechOutput = 'hogehogeへようこそ。呪文を唱えて下さい。';
        const reprompt = '呪文を唱えて下さい。';
        return handlerInput.responseBuilder
            .speak(speechOutput)
            .reprompt(reprompt)
            .getResponse();
    }
};

const RemindmeIntentHandler = {
    canHandle(handlerInput) {
        return  handlerInput.requestEnvelope.request.intent.name === 'RemindmeIntent';
    },
    handle(handlerInput) {
            const speechOutput = '' + arr.slice(0,i) +'です。呪文を唱えて下さい。';
            const reprompt = '呪文を唱えて下さい。';
            return handlerInput.responseBuilder
            .speak(speechOutput)
            .reprompt(reprompt)
            .getResponse();
    }
};

const NextnumIntentHandler = {
    canHandle(handlerInput) {
        return  handlerInput.requestEnvelope.request.intent.name === 'NextnumIntent';
    },
    handle(handlerInput) {
            const speechOutput = arr[i] + 'です。呪文を唱えて下さい。';
            const reprompt = '呪文を唱えて下さい。';
            i=i+1;
             return handlerInput.responseBuilder
            .speak(speechOutput)
            .reprompt(reprompt)
            .getResponse();
        }
};

const skillBuilder = Alexa.SkillBuilders.custom(); exports.handler = skillBuilder
  .addRequestHandlers(
    LaunchRequestHandler,
    NextnumIntentHandler,
    RemindIntentHandler,
  )
  .lambda();

ポイント

jsにおけるシャッフルプログラム部分は、Alexaプログラムのどこに置くのか？

・LaunchRequestHandlerの前におけばよい。
・シャッフルプログラムで発生させた配列（arrに格納しておく）はプログラム動作中は有効である（SessionAttribute, dynamoDBに頼る必要はない）。

jsにおけるボタン処理を発声でのインテント起動にどう置き換えるのか？

・以下を参照すれば分かります。

[html js]

<input type="button" value="NEXT" onclick="OnButtonClick();"/>
<div id="Nextnum"></div>
<script>
function OnButtonClick() {
target = document.getElementById("Nextnum");
target.innerHTML = arr[i]+",";
i=i+1;
}
</script>

[alexa node.js]

const NextnumIntentHandler = {
    canHandle(handlerInput) {
        return  handlerInput.requestEnvelope.request.intent.name === 'NextnumIntent';
    },
    handle(handlerInput) {
            const speechOutput = arr[i] + 'です。呪文を唱えて下さい。';
            const reprompt = '呪文を唱えて下さい。';
            i=i+1;
             return handlerInput.responseBuilder
            .speak(speechOutput)
            .reprompt(reprompt)
            .getResponse();
        }
};