SSMLͷϚʔΫΞοϓΛ ޮ཰Խ͢ΔͨΊʹ TypeScriptͱJSXʹखΛग़ͨ͠࿩ AAJUG Online 2020/05/29 Hidetaka Okamoto #aajug

֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ

֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ

Α͋͘ΔSSMLͷॻ͖ํ handlerInput.responseBuilder .speak( [ “

͜Ε͸SSMLͷαϯϓϧͰ͢ɻ

”, “”, “࣍͸ԿΛ͠·͔͢ʁ” ].join(‘’)) .getResponse();

จࣈྻͰMarkup LanguageΛॻ͘ͱ͍͏͜ͱ • จࣈྻͷதʹɺSSMLλάΛهड़͢Δ • ASK SDKΛͦͷ··࢖͏৔߹ͷఆੴ • speakλά͸ASK SDK͕ࣗಈͰηοτͯ͘͠ΕΔ • λάͷ਺͕૿͑Δͱϛε͕ੜ͡΍͍͢

ؒҧ͍୳͠ handlerInput.responseBuilder .speak( [ “

͜Ε͸SSMLͷαϯϓϧͰ͢ɻ

”, “”, “࣍͸ԿΛ͠·͔͢ʁ” ].join(‘’)) .getResponse();

ਖ਼ղɿ։࢝λά͕ͳ͍ handlerInput.responseBuilder .speak( [ “

͜Ε͸SSMLͷαϯϓϧͰ͢ɻ

”, “”, “࣍͸ԿΛ͠·͔͢ʁ” ].join(‘’)) .getResponse();

SSMLΛ͍͔ʹޮ཰Α͘ॻ͚ΔΑ͏ʹ͢Δ͔ʁ • SSMLΛจࣈྻͱͯ͠ѻ͏͜ͱ͕໰୊ • จࣈྻҎ֎Ͱهड़Ͱ͖ΔΑ͏ʹ͢Δ • Solution A: SSML BuilderΫϥε • Solution B: MarkdownͳͲͷϑΥʔϚοτΛ࢖͏

npm i -S ssml-builder var Speech = require('ssml-builder'); var speech = new Speech(); speech.say('Hello') .pause('1s') .say('fellow Alexa developers') .pause('500ms') .say('Testing phone numbers') .sayAs({ word: "+1-377-777-1888", interpret: "telephone" }); var speechOutput = speech.ssml(true); • ϝιουܗࣜͰSSMLΛදݱ • ม׵݁ՌΛϨεϙϯε΁ ௥ՃͰ͖Δ • ϝιουνΣʔϯͰ ॊೈʹ௥ՃՄೳ

npm i -S speechmarkdow n-js const smd = require('speechmarkdown-js'); const markdown = `Sample [3s] speech [250ms] markdown`; const options = { platform: 'amazon-alexa' }; const speech = new smd.SpeechMarkdown(); const ssml = speech.toSSML(markdown, options); === RESULT === Sample speech markdown • MarkdownͰSSMLΛهड़ • ϚϧνϓϥοτϑΥʔϜରԠ • fsͳͲΛ૊Έ߹Θͤͯ .mdϑΝΠϧʹهड़΋Մೳ

One more things…

No content

֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ

ReactͷΑ͏ʹ SSMLΛॻ͖͍ͨ import React from 'react'; import { CopyToClipboard } from 'react-copy-to- clipboard'; const CopyLink = ({param}: {param: string}) => ( {param} ); export default () => { return } • ॻ͖׳ΕͨϑΥʔϚοτ • View (Speech)΁ͷϑΥʔΧε Λڧ੍Ͱ͖Δ • JSΒ͍͠ಈతͳॲཧ΋Մೳ

ϥΠϒϥϦ͸͋Δ ߟ͑Δ͜ͱ͸օಉ͡ JSXΛstringʹม׵͢Δπʔϧ ϝϯς͞Ε͍ͯͳ͍΋ͷଟΊ ssml-tsxҰ୒ঢ়ଶ

npm i -S ssml-tsx /** @jsx ssml */ import ssml, { rendetToString, FC } from "ssml-tsx"; const Foo= ({ name }) => ( {name}

What would you like to do today?

); console.log(renderToString()); • SSMLΛJSXͰॻ͚Δ • from TimeTree • GitHubͷϨεϙϯε΋ૣ͍ • ݱঢ়͜ΕҰ୒

JSX / TSX͸ ม׵ඞਢ // Example for Babel { "plugins": [ ["transform-jsx", { "function": "ssml", "useVariables": true }] ] } • JSX / TSX͸JSͰಈ͔ͳ͍ • BabelͰͷม׵͕Ұൠత • ४උͷҰखؒΛڐ༰Ͱ͖Δ͔ ͕෼ਫྮ • Ͳ͏ͤ΍ΔͳΒTypeScript

֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ

JSX΍ΔͳΒ TypeScript { "compilerOptions": { ..., + "jsx": "react", } } • tscίϚϯυͰ·ͱΊͯ ίϯύΠϧ • ܕݕূͷԸܙ͸େ͖͍ • ASK SDK΋TypeScriptରԠ

IDEͰϛε͕Θ͔Γ΍͍͢

֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ

@ask-utils/speech- script ssml-tsxͷϥούʔ ASK SDKͰͷར༻ʹಛԽ ஋ͷऔΓճ͠Λޮ཰Խ

࣮૷αϯϓϧ ʢSSMLʣ /** @jsx ssml */ import { ssml, SpeechScriptJSX } from '@ask-utils/speech-script' class LaunchRequestScriptForEnglish extends SpeechScriptJSX { speech() { return ( Hello! How are you? ) } reprompt() { return ( How are you? I hope you to have a good day. ) } } • speech / repromptͦΕͧΕʹ JSXͰϚʔΫΞοϓ • this.props͔ΒϦΫΤετ಺༰ ͕ͱΕΔ • ReactϥΠΫʹهड़Մೳ

࣮૷αϯϓϧ ʢHandlerʣ const handler = { canHandle(handlerInput) { return handlerInput.requestEnvelope.request.type === 'LaunchRequest' }, handle(handlerInput) { const Speech = new LaunchRequestScript(handlerInput) return Speech.createResponse() } } • SSMLΛॻ͍ͨΫϥεΛར༻͢ Δ • responseBuilder಺ଂͳͷͰɺ ͦͷ··return͢Ε͹OK

SSML-TSX Λಋೖͯ͠มΘͬͨ͜ͱ • RequestHandlerͷਆΦϒδΣΫτԽΛ્ࢭ • View (SSML)ͱσʔλͷॲཧͷ੹຿Λ෼཭͠ɺςελϒϧʹ • ࢠίϯϙʔωϯτΛར༻ͨ͠࠶ར༻ੑͷ޲্ • ReactͰॻ͍ͯΔϊϦͰAlexaͷൃ࿩Λॻ͚Δ

ViewΛ੾Γ཭ͨ͠RequestHandler

ΑΓॊೈͳ Viewͷදݱʹ

Next Step: Localization class LaunchRequestScriptForJapanse extends LaunchRequestScript { speech() { return ( ͜Μʹͪ͸ ) } } class LaunchRequestScriptForEnglish extends LaunchRequestScript { speech() { return ( Hello! How are you? ) } } export const createLaunchRequestScript = (handlerInput: HandlerInput, options?: LaunchRequestProps): SpeechScriptJSX => { const factory = new L11NSpeechScriptJSXFactory({ allowLanguageMatcher: true }).putLocales({ locale: 'ja-JP', script: new LaunchRequestScriptForJapanese(handlerInput, options) }, { locale: 'en-US', script: new LaunchRequestScriptForEnglish(handlerInput, options) }) return factory.create(handlerInput) } • ݴޠ͝ͱʹSSMLΛهड़͢Δ • en-USͳͲͷݫີͳ੔߹ͱɺ en͚ͩͰ·ΔΊΔ؇͍੔߹ ྆ํΛαϙʔτʢ༧ఆʣ

͓ΘΓʹ • RequestHandler͸ͦͷ··࢖͏ʹ͸ॏ͗͢Δ • MVC΍FluxͳͲͷ֓೦͕ͳ͍ੈքͰઓ͏ʹ͸ɺձ࿩͸ෳࡶ͗͢Δ • ͤΊͯSSMLͱAPL͸ந৅Խ͠Α͏ • speechmarkdown-js / ssml-tsx͕ݸਓతʹ͸͓͢͢Ί • ͩΕ͔ASK SDK on Railsͭͬͯ͘͘Εʢ੾࣮ʣ