フロントエンドの人に勧めるスマートスピーカースキル作成のハナシ #sacss

フロントエンドの人に勧めるスマートスピーカースキル作成のハナシ #sacss

SaCSS vol.107 の発表資料。
https://connpass.com/event/147812/

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

October 16, 2019
Tweet

Transcript

  1. 4B$44WPM !UBDDL ϑϩϯτΤϯυͷਓʹקΊΔ
 εϚʔτεϐʔΧʔεΩϧ࡞੒ͷ
 ϋφγ ೥݄೔

  2. !UBDDL 4B$44WPMTBDTT ୭ • ໊લ tacck / ໦ݪ ୎໵ •

    ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  3. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ

  4. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ • Έͳ͞Μ͍࣋ͬͯ·͔͢?

  5. !UBDDL 4B$44WPMTBDTT ͬ͘͟Γ࢓૊Έ

  6. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒
  7. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸
  8. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮ"MFYBʯͱ ݺͼ͔͚ΒΕͨ ͜ͱΛೝࣝ
  9. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮࠓͷ࣌ؒ͸ʯ Ի੠Λૹ৴
  10. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ Ի੠͔Β ςΩετʹม׵
  11. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮࠓʯͷʮ࣌ؒʯ ˠݱࡏ࣌ࠁΛਘͶΒΕ͍ͯΔ ͱཧղ
  12. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒
  13. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ճ౴จΛ Ի੠ʹม׵
  14. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ Ի੠Λड৴ͯ͠ ൃ࿩ ޕޙ࣌ ෼Ͱ͢
  15. !UBDDL 4B$44WPMTBDTT εΩϧͷ࡞Γํ

  16. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒
  17. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒ εΩϧ࡞੒͸ ͜͜ͷ࡞ΓࠐΈ
  18. !UBDDL 4B$44WPMTBDTT جຊతͳߟ͑ํ • Ϣʔβʔ͸εϚʔτεϐʔΧʔ΁ʮݺͼ͔͚ʯʮ࣭໰ʯΛߦͳ͏ • εϚʔτεϐʔΧʔ͸ͦΕʹԠͨ͡ʮ౴͑ʯΛฦ͢ • ݺͼ͔͚࣌ͷݴ༿͔ΒʮҙਤʯΛͲΕ͚ͩर͑Δ͔͕ΧΪ •

    Intent (ର࿩ҙਤ) • ʮͲ͏͍͏ҙਤΛ࣋ͬͨݺͼ͔͚͔ʯͱ͍͏ɺ
 ର࿩ͷछྨΛද͢΋ͷɻ
 • Slot (ύϥϝʔλ) • ݺͼ͔͚ͷதͷʮ೔෇ʯ΍ʮ਺ྔʯͱ͍ͬͨɺ
 มԽ͢Δ৔ॴΛද͢΋ͷɻ
  19. !UBDDL 4B$44WPMTBDTT ఱؾ༧ใͷ৔߹ • ʮ10݄17೔ʯ͕೔࣌Λද͢ Slot • ʮ౦ژʯ͕৔ॴΛද͢ Slot •

    ʮఱؾΛڭ͑ͯʯ͕ձ࿩ͷྲྀΕΛܾΊΔ Intent Ϣʔβʔ 10݄17೔ͷ౦ژͷఱؾΛڭ͑ͯɻ ໌೔ͷ౦ژͷఱؾ͸ಶΓͷ༧ใͰ͢ɻ εϚʔτ
 εϐʔΧʔ
  20. !UBDDL 4B$44WPMTBDTT ఱؾ༧ใͷ৔߹ • ʮ10݄17೔ʯ͕೔࣌Λද͢ Slot • ʮ౦ژʯ͕৔ॴΛද͢ Slot •

    ʮ࠷ߴؾԹΛڭ͑ͯʯ͕ձ࿩ͷྲྀΕΛܾΊΔ Intent Ϣʔβʔ 10݄17೔ͷ౦ژͷ࠷ߴؾԹΛڭ͑ͯɻ ໌೔ͷ౦ژͷ༧૝࠷ߴؾԹ͸20℃Ͱ͢ɻ εϚʔτ
 εϐʔΧʔ
  21. !UBDDL 4B$44WPMTBDTT ఱؾ༧ใͷ৔߹ • ʮࠓ೔ʯ͕೔࣌Λද͢ Slot • ʮఱؾΛڭ͑ͯʯ͕ձ࿩ͷྲྀΕΛܾΊΔ Intent Ϣʔβʔ

    ࠓ೔ͷఱؾΛڭ͑ͯɻ
 (ݱࡏҐஔ͸ࡳຈͰొ࿥ࡁΈ) ࠓ೔ͷࡳຈͷఱؾ͸੖ΕͰ͢ɻ εϚʔτ
 εϐʔΧʔ
  22. !UBDDL 4B$44WPMTBDTT Ͳ͏͍͏ड͚౴͑ʹ͢Δ͔ • Ϣʔβʔͷ஌Γ͍ͨ͜ͱʹର͠ɺձ࿩ͷྲྀΕΛߟ͑Δɻ • ձ࿩ͷྲྀΕͷத͔Β Intent (ҙਤ) Λݟ͚ͭΔɻ

    • Intent ͝ͱʹɺ۩ମతͳฦ౴ͷϓϩάϥϜΛॻ͍͍ͯ͘ɻ ࠓ೔ͷఱؾ͸? ࡳຈͷࠓ೔ͷఱؾ͸ɺ
 ͘΋Γ ͷͪ ੖Ε Ͱ͢ɻ
  23. !UBDDL 4B$44WPMTBDTT ը໘෇͖εϚʔτεϐʔΧʔ

  24. !UBDDL 4B$44WPMTBDTT ը໘෇͖σόΠε ը໘දࣔͷ࢓૊Έ ɹɹɹɹɹɹɹAmazon Echo Show Echo Show 5

    Echo Spot APL ɹɹɹɹɹɹɹGoogle Google Nest Hub Interactive Canvas
 (Web) ɹɹɹɹɹɹɹLINE Clova Desk ඇެ։
  25. !UBDDL 4B$44WPMTBDTT ϑϩϯτΤϯυΤϯδχΞͷ
 օ༷ʹ࿕ใ

  26. !UBDDL 4B$44WPMTBDTT "DUJPOTPO(PPHMF *OUFSBDUJWF$BOWBT

  27. !UBDDL 4B$44WPMTBDTT ੠ͱλονͰૢ࡞Ͱ͖Δ
 8FCΞϓϦέʔγϣϯ
 Ά͍ײ͡ͰεΩϧΛ࡞ΕΔ  ˠීஈ࡞͍ͬͯΔ΋ͷʹʮ੠ʯΛ෇Ճ͢Δ

  28. !UBDDL 4B$44WPMTBDTT ྫ λεΫ֬ೝΞϓϦ ɹɾ5SFMMPͷΧʔυΛݺͼग़͠ ɹɾλονͰ׬ྃ

  29. !UBDDL 4B$44WPMTBDTT දࣔίϯςϯπ 7VFKT

  30. !UBDDL 4B$44WPMTBDTT import axios from "axios"; export default { props:

    ["listId", "apiKey", "apiToken"], data: function() { return { itemsPerPageOptions: [], itemsPerPage: 5, lists: [] }; }, mounted: async function() { const response = await axios.get( `https://api.trello.com/1/lists/${this.listId}/cards? fields=all&key=${this.apiKey}&token=${this.apiToken}` ); this.lists = response.data; }, methods: { finish: function(id) { window.interactiveCanvas.sendTextQuery(`finishedTask-${id}`); } } };
  31. !UBDDL 4B$44WPMTBDTT import axios from "axios"; export default { props:

    ["listId", "apiKey", "apiToken"], data: function() { return { itemsPerPageOptions: [], itemsPerPage: 5, lists: [] }; }, mounted: async function() { const response = await axios.get( `https://api.trello.com/1/lists/${this.listId}/cards? fields=all&key=${this.apiKey}&token=${this.apiToken}` ); this.lists = response.data; }, methods: { finish: function(id) { window.interactiveCanvas.sendTextQuery(`finishedTask-${id}`); } } }; TrelloͷಛఆͷList͔Β
 CardҰཡΛऔಘ Card ͕λοϓ͞ΕͨΒ Intent ૹ৴
  32. !UBDDL 4B$44WPMTBDTT όοΫΤϯυ
 "DUJPOTPO(PPHMF

  33. !UBDDL 4B$44WPMTBDTT 'use strict'; const axios = require('axios'); const {

    dialogflow, HtmlResponse } = require('actions-on-google'); const app = dialogflow({ debug: false }); const tasksUrl = 'https://show-today-tasks.netlify.com' const currentListId = process.env.CURRENT_LIST_ID const finishedListId = process.env.FINISHED_LIST_ID const apiKey = process.env.API_KEY const apiToken = process.env.API_TOKEN // ىಈ࣌Intent app.intent('welcome', (conv) => { conv.ask('ࠓ೔ͷλεΫҰཡͰ͢ɻ֬ೝ͠·͠ΐ͏ɻ'); conv.ask(new HtmlResponse({ url: `${tasksUrl}/?listId=${currentListId}&apiKey=${apiKey} &apiToken=${apiToken}`, suppress: true }));
  34. !UBDDL 4B$44WPMTBDTT 'use strict'; const axios = require('axios'); const {

    dialogflow, HtmlResponse } = require('actions-on-google'); const app = dialogflow({ debug: false }); const tasksUrl = 'https://show-today-tasks.netlify.com' const currentListId = process.env.CURRENT_LIST_ID const finishedListId = process.env.FINISHED_LIST_ID const apiKey = process.env.API_KEY const apiToken = process.env.API_TOKEN // ىಈ࣌Intent app.intent('welcome', (conv) => { conv.ask('ࠓ೔ͷλεΫҰཡͰ͢ɻ֬ೝ͠·͠ΐ͏ɻ'); conv.ask(new HtmlResponse({ url: `${tasksUrl}/?listId=${currentListId}&apiKey=${apiKey} &apiToken=${apiToken}`, suppress: true })); දࣔίϯςϯπ͕
 ը໘ʹग़ΔΑ͏ʹࢦఆ
  35. !UBDDL 4B$44WPMTBDTT app.intent('finishedTask', async (conv, { cardId }) => {

    // TrelloͷΧʔυΛ׬ྃʹҠ͢ const response = await axios.put(`https://api.trello.com/1/cards/$ {cardId}?idList=${finishedListId}&key=${apiKey}&token=${apiToken} &pos=bottom`) const now = Date.now() conv.ask('ΧʔυΛ׬ྃʹ͠·ͨ͠ɻ') conv.ask(new HtmlResponse({ url: `${tasksUrl}/?listId=${currentListId}&apiKey=${apiKey} &apiToken=${apiToken}&d=${now}`, suppress: true })); }); module.exports.fulfillment = app;
  36. !UBDDL 4B$44WPMTBDTT app.intent('finishedTask', async (conv, { cardId }) => {

    // TrelloͷΧʔυΛ׬ྃʹҠ͢ const response = await axios.put(`https://api.trello.com/1/cards/$ {cardId}?idList=${finishedListId}&key=${apiKey}&token=${apiToken} &pos=bottom`) const now = Date.now() conv.ask('ΧʔυΛ׬ྃʹ͠·ͨ͠ɻ') conv.ask(new HtmlResponse({ url: `${tasksUrl}/?listId=${currentListId}&apiKey=${apiKey} &apiToken=${apiToken}&d=${now}`, suppress: true })); }); module.exports.fulfillment = app; λοϓ͞ΕͨΧʔυΛ
 ׬ྃࡁΈϦετ΁Ҡಈ ࠶౓ɺදࣔίϯςπ͕
 ը໘ʹදࣔ͞ΕΔ
  37. !UBDDL 4B$44WPMTBDTT σϞ λεΫ֬ೝΞϓϦ ɹɾ5SFMMPͷΧʔυΛݺͼग़͠ ɹɾλονͰ׬ྃ

  38. !UBDDL 4B$44WPMTBDTT ·ͱΊ

  39. !UBDDL 4B$44WPMTBDTT (PPHMF/FTU)VC͍͍Α • εΩϧ։ൃʹɺطଘͷWebΞϓϦ։ൃͷ஌͕ࣝɺ
 ͔ͳΓ׆͔ͤΔɻ • ը໘͕ಈ͘ͷ΋ָ͍͠ɻ • ࣮͸ɺInteractive

    Canvas ͸ɺ
 Android ͷ Google Assistant Ͱ΋࢖͑Δ!
 → AndroidϢʔβʔͳΒɺ͙͢ʹࢼͤΔͶ!
  40. !UBDDL 4B$44WPMTBDTT ͦΕͧΕͷಛ௃ • Echo • γϦʔζల։͕๛෋ɾຊؾग़͢ͱʮεϚʔτϗʔϜʯԽՄೳ • ը໘෇͖ͷ “Echo

    Show 5” ͕͓खࠒ (¥9,980) • Google Home • Android ΋ؚΊͨڧΈ • ը໘෇͖ͷ “Google Nest Hub” Λ࣠ʹࠓޙల։͞ΕΔͦ͏ • LINE Clova • LINE ΍ LINE Bot ͱͷ࿈ܞ͕ڧ͍(ϝοηʔδ࢖͏ͳΒ͜Ε) • ࠓޙͷల։͸ɾɾɾΧʔφϏ?
  41. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ • Έͳ͞Μങ͍·͠ΐ͏!

  42. !UBDDL 4B$44WPMTBDTT ମݧձ΍Γ·͢ • 2019೥10݄26೔ (౔) • 12:00ʙ12:30 • 12:30ʙ13:00

    • 13:00ʙ13:30 • 13:30ʙ14:00 • ֤ճগਓ਺Ͱ࣮ࢪ༧ఆ https://play-smaspi-sap.connpass.com/event/138571/
  43. !UBDDL 4B$44WPMTBDTT FOE

  44. !UBDDL 4B$44WPMTBDTT ެ։༻௥Ճ৘ใ

  45. !UBDDL 4B$44WPMTBDTT ΦεεϝεΩϧΛগ͠

  46. !UBDDL 4B$44WPMTBDTT ඪ४ػೳ

  47. !UBDDL 4B$44WPMTBDTT ໨֮·͕͠ΘΓʹ • ໌೔ͷே7࣌ʹىͯ͜͠ɻ

  48. !UBDDL 4B$44WPMTBDTT Χοϓϥʔϝϯ࡞Γʹ • λΠϚʔ3෼ɻ

  49. !UBDDL 4B$44WPMTBDTT #(.ʹ • J-POPΛ͔͚ͯɻ
 ※ԻָετϦʔϛϯάαʔϏεͱͷ࿈ܞ͕ผ్ඞཁ

  50. !UBDDL 4B$44WPMTBDTT ͳΜͱͳ͘ • ໘ന͍͜ͱΛݴͬͯɻ

  51. !UBDDL 4B$44WPMTBDTT αʔυύʔςΟεΩϧ

  52. !UBDDL 4B$44WPMTBDTT ΰϛͷ೔֬ೝ • ΞϨΫαɺࡳຈ͝Έͳ͛ΧϨϯμʔΛ։͍ͯɻ

  53. !UBDDL 4B$44WPMTBDTT ϨγϐΛௐ΂ͨΓ • ΫοΫύουΛ։͍ͯɻ

  54. !UBDDL 4B$44WPMTBDTT ήʔϜ΋ • κϯϏͷ·ͪΛ։͍ͯɻ

  55. !UBDDL 4B$44WPMTBDTT ͓ࢠ͞Μͷษڧʹ΋ • Ωϟϓςϯ۝۝(ΫοΫ)Λ։͍ͯɻ