Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

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

Kihara, Takuya

October 16, 2019
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

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

    ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
  2. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

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

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

    ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ Ի੠Λड৴ͯ͠ ൃ࿩ ޕޙ࣌ ෼Ͱ͢
  5. !UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Ի੠ೝࣝ จষղੳ Ի੠ೝࣝ

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

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

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

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

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

    • Intent ͝ͱʹɺ۩ମతͳฦ౴ͷϓϩάϥϜΛॻ͍͍ͯ͘ɻ ࠓ೔ͷఱؾ͸? ࡳຈͷࠓ೔ͷఱؾ͸ɺ
 ͘΋Γ ͷͪ ੖Ε Ͱ͢ɻ
  11. !UBDDL 4B$44WPMTBDTT ը໘෇͖σόΠε ը໘දࣔͷ࢓૊Έ ɹɹɹɹɹɹɹAmazon Echo Show Echo Show 5

    Echo Spot APL ɹɹɹɹɹɹɹGoogle Google Nest Hub Interactive Canvas
 (Web) ɹɹɹɹɹɹɹLINE Clova Desk ඇެ։
  12. !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}`); } } };
  13. !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 ૹ৴
  14. !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 }));
  15. !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 })); දࣔίϯςϯπ͕
 ը໘ʹग़ΔΑ͏ʹࢦఆ
  16. !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;
  17. !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; λοϓ͞ΕͨΧʔυΛ
 ׬ྃࡁΈϦετ΁Ҡಈ ࠶౓ɺදࣔίϯςπ͕
 ը໘ʹදࣔ͞ΕΔ
  18. !UBDDL 4B$44WPMTBDTT ͦΕͧΕͷಛ௃ • Echo • γϦʔζల։͕๛෋ɾຊؾग़͢ͱʮεϚʔτϗʔϜʯԽՄೳ • ը໘෇͖ͷ “Echo

    Show 5” ͕͓खࠒ (¥9,980) • Google Home • Android ΋ؚΊͨڧΈ • ը໘෇͖ͷ “Google Nest Hub” Λ࣠ʹࠓޙల։͞ΕΔͦ͏ • LINE Clova • LINE ΍ LINE Bot ͱͷ࿈ܞ͕ڧ͍(ϝοηʔδ࢖͏ͳΒ͜Ε) • ࠓޙͷల։͸ɾɾɾΧʔφϏ?
  19. !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/