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

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

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

!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ

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

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

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

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮ"MFYBʯͱ ݺͼ͔͚ΒΕͨ ͜ͱΛೝࣝ

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮࠓͷ࣌ؒ͸ʯ Ի੠Λૹ৴

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ Ի੠͔Β ςΩετʹม׵

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ʮࠓʯͷʮ࣌ؒʯ ˠݱࡏ࣌ࠁΛਘͶΒΕ͍ͯΔ ͱཧղ

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ճ౴จΛ Ի੠ʹม׵

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ Ի੠Λड৴ͯ͠ ൃ࿩ ޕޙ࣌ ෼Ͱ͢

!UBDDL 4B$44WPMTBDTT εΩϧͷ࡞Γํ

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒

ର࿩࡞੒ Ի੠߹੒ "MFYB ࠓͷ࣌ؒ͸ ݱࡏ࣌ࠁͷճ౴จΛ ࡞੒ εΩϧ࡞੒͸ ͜͜ͷ࡞ΓࠐΈ

!UBDDL 4B$44WPMTBDTT جຊతͳߟ͑ํ • Ϣʔβʔ͸εϚʔτεϐʔΧʔ΁ʮݺͼ͔͚ʯʮ࣭໰ʯΛߦͳ͏ • εϚʔτεϐʔΧʔ͸ͦΕʹԠͨ͡ʮ౴͑ʯΛฦ͢ • ݺͼ͔͚࣌ͷݴ༿͔ΒʮҙਤʯΛͲΕ͚ͩर͑Δ͔͕ΧΪ •
Intent (ର࿩ҙਤ) • ʮͲ͏͍͏ҙਤΛ࣋ͬͨݺͼ͔͚͔ʯͱ͍͏ɺ  ର࿩ͷछྨΛද͢΋ͷɻ  • Slot (ύϥϝʔλ) • ݺͼ͔͚ͷதͷʮ೔෇ʯ΍ʮ਺ྔʯͱ͍ͬͨɺ  มԽ͢Δ৔ॴΛද͢΋ͷɻ

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

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

!UBDDL 4B$44WPMTBDTT ఱؾ༧ใͷ৔߹ • ʮࠓ೔ʯ͕೔࣌Λද͢ Slot • ʮఱؾΛڭ͑ͯʯ͕ձ࿩ͷྲྀΕΛܾΊΔ Intent Ϣʔβʔ
ࠓ೔ͷఱؾΛڭ͑ͯɻ  (ݱࡏҐஔ͸ࡳຈͰొ࿥ࡁΈ) ࠓ೔ͷࡳຈͷఱؾ͸੖ΕͰ͢ɻ εϚʔτ  εϐʔΧʔ

!UBDDL 4B$44WPMTBDTT Ͳ͏͍͏ड͚౴͑ʹ͢Δ͔ • Ϣʔβʔͷ஌Γ͍ͨ͜ͱʹର͠ɺձ࿩ͷྲྀΕΛߟ͑Δɻ • ձ࿩ͷྲྀΕͷத͔Β Intent (ҙਤ) Λݟ͚ͭΔɻ
• Intent ͝ͱʹɺ۩ମతͳฦ౴ͷϓϩάϥϜΛॻ͍͍ͯ͘ɻ ࠓ೔ͷఱؾ͸? ࡳຈͷࠓ೔ͷఱؾ͸ɺ  ͘΋Γ ͷͪ ੖Ε Ͱ͢ɻ

!UBDDL 4B$44WPMTBDTT ը໘෇͖εϚʔτεϐʔΧʔ

!UBDDL 4B$44WPMTBDTT ը໘෇͖σόΠε ը໘දࣔͷ࢓૊Έ ɹɹɹɹɹɹɹAmazon Echo Show Echo Show 5
Echo Spot APL ɹɹɹɹɹɹɹGoogle Google Nest Hub Interactive Canvas  (Web) ɹɹɹɹɹɹɹLINE Clova Desk ඇެ։

!UBDDL 4B$44WPMTBDTT ϑϩϯτΤϯυΤϯδχΞͷ  օ༷ʹ࿕ใ

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

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

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

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

!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}`); } } };

!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 ૹ৴

!UBDDL 4B$44WPMTBDTT όοΫΤϯυ  "DUJPOTPO(PPHMF

!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 }));

!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 })); දࣔίϯςϯπ͕  ը໘ʹग़ΔΑ͏ʹࢦఆ

!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;

!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; λοϓ͞ΕͨΧʔυΛ  ׬ྃࡁΈϦετ΁Ҡಈ ࠶౓ɺදࣔίϯςπ͕  ը໘ʹදࣔ͞ΕΔ

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

!UBDDL 4B$44WPMTBDTT ·ͱΊ

!UBDDL 4B$44WPMTBDTT (PPHMF/FTU)VC͍͍Α • εΩϧ։ൃʹɺطଘͷWebΞϓϦ։ൃͷ஌͕ࣝɺ  ͔ͳΓ׆͔ͤΔɻ • ը໘͕ಈ͘ͷ΋ָ͍͠ɻ • ࣮͸ɺInteractive
Canvas ͸ɺ  Android ͷ Google Assistant Ͱ΋࢖͑Δ!  → AndroidϢʔβʔͳΒɺ͙͢ʹࢼͤΔͶ!

!UBDDL 4B$44WPMTBDTT ͦΕͧΕͷಛ௃ • Echo • γϦʔζల։͕๛෋ɾຊؾग़͢ͱʮεϚʔτϗʔϜʯԽՄೳ • ը໘෇͖ͷ “Echo
Show 5” ͕͓खࠒ (¥9,980) • Google Home • Android ΋ؚΊͨڧΈ • ը໘෇͖ͷ “Google Nest Hub” Λ࣠ʹࠓޙల։͞ΕΔͦ͏ • LINE Clova • LINE ΍ LINE Bot ͱͷ࿈ܞ͕ڧ͍(ϝοηʔδ࢖͏ͳΒ͜Ε) • ࠓޙͷల։͸ɾɾɾΧʔφϏ?

!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ • Έͳ͞Μങ͍·͠ΐ͏!

!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/

!UBDDL 4B$44WPMTBDTT FOE

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

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

!UBDDL 4B$44WPMTBDTT ඪ४ػೳ

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

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

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

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

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

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

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

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

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

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

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

More Decks by Kihara, Takuya

Other Decks in Technology

Featured

Transcript