SSMLのマークアップ効率化のためにTypeScriptとJSXに手を出した話/aajug-202005

Transcript

1. SSMLͷϚʔΫΞοϓΛ ޮ཰Խ͢ΔͨΊʹ TypeScriptͱJSXʹखΛग़ͨ͠࿩ AAJUG Online 2020/05/29 Hidetaka Okamoto #aajug
2. ֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ
3. ֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ
4. Α͋͘ΔSSMLͷॻ͖ํ handlerInput.responseBuilder .speak( [ “<p>͜Ε͸SSMLͷαϯϓϧͰ͢ɻ</p>”, “<break strength=\"weak\" />”, “࣍͸ԿΛ͠·͔͢ʁ</p>” ].join(‘’)) .getResponse();
5. จࣈྻͰMarkup LanguageΛॻ͘ͱ͍͏͜ͱ • จࣈྻͷதʹɺSSMLλάΛهड़͢Δ • ASK SDKΛͦͷ··࢖͏৔߹ͷఆੴ • speakλά͸ASK SDK͕ࣗಈͰηοτͯ͘͠ΕΔ • λάͷ਺͕૿͑Δͱϛε͕ੜ͡΍͍͢
6. ؒҧ͍୳͠ handlerInput.responseBuilder .speak( [ “<p>͜Ε͸SSMLͷαϯϓϧͰ͢ɻ</p>”, “<break strength=\"weak\" />”, “࣍͸ԿΛ͠·͔͢ʁ</p>” ].join(‘’)) .getResponse();
7. ਖ਼ղɿ։࢝λά͕ͳ͍ handlerInput.responseBuilder .speak( [ “<p>͜Ε͸SSMLͷαϯϓϧͰ͢ɻ</p>”, “<break strength=\"weak\" />”, “࣍͸ԿΛ͠·͔͢ʁ</p>” ].join(‘’)) .getResponse();
8. SSMLΛ͍͔ʹޮ཰Α͘ॻ͚ΔΑ͏ʹ͢Δ͔ʁ • SSMLΛจࣈྻͱͯ͠ѻ͏͜ͱ͕໰୊ • จࣈྻҎ֎Ͱهड़Ͱ͖ΔΑ͏ʹ͢Δ • Solution A: SSML BuilderΫϥε • Solution B: MarkdownͳͲͷϑΥʔϚοτΛ࢖͏
9. 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Λදݱ • ม׵݁ՌΛϨεϙϯε΁ ௥ՃͰ͖Δ • ϝιουνΣʔϯͰ ॊೈʹ௥ՃՄೳ
10. 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 === <speak> Sample <break time="3s"/> speech <break time="250ms"/> markdown </speak> • MarkdownͰSSMLΛهड़ • ϚϧνϓϥοτϑΥʔϜରԠ • fsͳͲΛ૊Έ߹Θͤͯ .mdϑΝΠϧʹهड़΋Մೳ
11. One more things…
13. ֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ
14. ReactͷΑ͏ʹ SSMLΛॻ͖͍ͨ import React from 'react'; import { CopyToClipboard } from 'react-copy-to- clipboard'; const CopyLink = ({param}: {param: string}) => ( <CopyToClipboard text={param}> <span> {param} <i className="fa fa-copy ml-1" style={{ cursor: 'pointer' }} /> </span> </CopyToClipboard> ); export default () => { return <CopyLink param={`https://google.com`} /> } • ॻ͖׳ΕͨϑΥʔϚοτ • View (Speech)΁ͷϑΥʔΧε Λڧ੍Ͱ͖Δ • JSΒ͍͠ಈతͳॲཧ΋Մೳ
15. ϥΠϒϥϦ͸͋Δ ߟ͑Δ͜ͱ͸օಉ͡ JSXΛstringʹม׵͢Δπʔϧ ϝϯς͞Ε͍ͯͳ͍΋ͷଟΊ ssml-tsxҰ୒ঢ়ଶ
16. npm i -S ssml-tsx /** @jsx ssml */ import ssml, { rendetToString, FC } from "ssml-tsx"; const Foo= ({ name }) => ( <speak> <say-as interpret-as="characters">{name}</say-as> <break time="2s" /> <p>What would you like to do today?</p> </speak> ); console.log(renderToString(<Foo name="bar" />)); • SSMLΛJSXͰॻ͚Δ • from TimeTree • GitHubͷϨεϙϯε΋ૣ͍ • ݱঢ়͜ΕҰ୒
17. JSX / TSX͸ ม׵ඞਢ // Example for Babel { "plugins": [ ["transform-jsx", { "function": "ssml", "useVariables": true }] ] } • JSX / TSX͸JSͰಈ͔ͳ͍ • BabelͰͷม׵͕Ұൠత • ४උͷҰखؒΛڐ༰Ͱ͖Δ͔ ͕෼ਫྮ • Ͳ͏ͤ΍ΔͳΒTypeScript
18. ֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ
19. JSX΍ΔͳΒ TypeScript { "compilerOptions": { ..., + "jsx": "react", } } • tscίϚϯυͰ·ͱΊͯ ίϯύΠϧ • ܕݕূͷԸܙ͸େ͖͍ • ASK SDK΋TypeScriptରԠ
20. IDEͰϛε͕Θ͔Γ΍͍͢
21. ֓ཁ • SSMLͷϚʔΫΞοϓΛจࣈྻͰ΍Δͷ͸ΩπΠ • JSXΛ͔ͭ͑͹ɺReactͷΑ͏ʹSSML͕ॻ͚Δ • TypeScript (TSX)ͳΒ͹ɺϓϩύςΟͷݕূ·Ͱ͍͚Δ • ask-sdk޲͚ͷϥούʔΛ࡞ͬͯΈͨ
22. @ask-utils/speech- script ssml-tsxͷϥούʔ ASK SDKͰͷར༻ʹಛԽ ஋ͷऔΓճ͠Λޮ཰Խ
23. ࣮૷αϯϓϧ ʢSSMLʣ /** @jsx ssml */ import { ssml, SpeechScriptJSX } from '@ask-utils/speech-script' class LaunchRequestScriptForEnglish extends SpeechScriptJSX { speech() { return ( <speak> Hello! <break time="0.5s"/>How are you? </speak> ) } reprompt() { return ( <speak> How are you?<break time="0.5s"/> <amazon-effect name="whispered">I hope you to have a good day.</amazon-effect> </speak> ) } } • speech / repromptͦΕͧΕʹ JSXͰϚʔΫΞοϓ • this.props͔ΒϦΫΤετ಺༰ ͕ͱΕΔ • ReactϥΠΫʹهड़Մೳ
24. ࣮૷αϯϓϧ ʢ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
25. SSML-TSX Λಋೖͯ͠มΘͬͨ͜ͱ • RequestHandlerͷਆΦϒδΣΫτԽΛ્ࢭ • View (SSML)ͱσʔλͷॲཧͷ੹຿Λ෼཭͠ɺςελϒϧʹ • ࢠίϯϙʔωϯτΛར༻ͨ͠࠶ར༻ੑͷ޲্ • ReactͰॻ͍ͯΔϊϦͰAlexaͷൃ࿩Λॻ͚Δ
26. ViewΛ੾Γ཭ͨ͠RequestHandler
27. ΑΓॊೈͳ Viewͷදݱʹ
28. Next Step: Localization class LaunchRequestScriptForJapanse extends LaunchRequestScript { speech() { return ( <speak>͜Μʹͪ͸</speak> ) } } class LaunchRequestScriptForEnglish extends LaunchRequestScript { speech() { return ( <speak>Hello! <break time="0.5s"/>How are you?</speak> ) } } 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͚ͩͰ·ΔΊΔ؇͍੔߹ ྆ํΛαϙʔτʢ༧ఆʣ
29. ͓ΘΓʹ • RequestHandler͸ͦͷ··࢖͏ʹ͸ॏ͗͢Δ • MVC΍FluxͳͲͷ֓೦͕ͳ͍ੈքͰઓ͏ʹ͸ɺձ࿩͸ෳࡶ͗͢Δ • ͤΊͯSSMLͱAPL͸ந৅Խ͠Α͏ • speechmarkdown-js / ssml-tsx͕ݸਓతʹ͸͓͢͢Ί • ͩΕ͔ASK SDK on Railsͭͬͯ͘͘Εʢ੾࣮ʣ