Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
フロントエンドの人に勧めるスマートスピーカースキル作成のハナシ #sacss
Kihara, Takuya
October 16, 2019
Technology
1
250
フロントエンドの人に勧めるスマートスピーカースキル作成のハナシ #sacss
SaCSS vol.107 の発表資料。
https://connpass.com/event/147812/
Kihara, Takuya
October 16, 2019
Tweet
Share
More Decks by Kihara, Takuya
See All by Kihara, Takuya
tacck
0
33
tacck
0
35
tacck
0
41
tacck
0
65
tacck
1
410
tacck
1
85
tacck
1
120
tacck
1
100
tacck
1
68
Other Decks in Technology
See All in Technology
satoshirobatofujimoto
0
110
yasuakiomokawa
0
380
harshbothra
0
140
yamasaki696
0
340
layerx
1
950
clustervr
0
200
yosuke_furukawa
PRO
47
16k
helayoty
0
140
neo_analytics
1
1.1k
kanaugust
PRO
0
250
kanaugust
PRO
0
180
nkjzm
1
860
Featured
See All Featured
tanoku
86
8.5k
sachag
267
17k
thoeni
4
550
bryan
30
3.3k
lara
16
2.6k
imathis
478
150k
tenderlove
52
3.4k
lara
590
61k
tmm1
61
8.5k
colly
66
3k
62gerente
587
200k
jponch
103
5k
Transcript
4B$44WPM !UBDDL ϑϩϯτΤϯυͷਓʹקΊΔ εϚʔτεϐʔΧʔεΩϧ࡞ͷ ϋφγ ݄
!UBDDL 4B$44WPMTBDTT ୭ • ໊લ tacck / ݪ •
ॴଐ גࣜձࣾϊʔεσΟςʔϧ • ओ࠵ • ΏΔWebษڧձ@ࡳຈ • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ • ͖ͳϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ • Έͳ͞Μ͍࣋ͬͯ·͔͢?
!UBDDL 4B$44WPMTBDTT ͬ͘͟ΓΈ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ʮ"MFYBʯͱ ݺͼ͔͚ΒΕͨ ͜ͱΛೝࣝ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ʮࠓͷ࣌ؒʯ ԻΛૹ৴
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ Ի͔Β ςΩετʹม
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ʮࠓʯͷʮ࣌ؒʯ ˠݱࡏ࣌ࠁΛਘͶΒΕ͍ͯΔ ͱཧղ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ݱࡏ࣌ࠁͷճจΛ ࡞
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ճจΛ Իʹม
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ԻΛड৴ͯ͠ ൃ ޕޙ࣌ Ͱ͢
!UBDDL 4B$44WPMTBDTT εΩϧͷ࡞Γํ
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "MFYB ࠓͷ࣌ؒ ݱࡏ࣌ࠁͷճจΛ ࡞
!UBDDL 4B$44WPMTBDTT εϚʔτεϐʔΧʔ Τϯδϯ ௨৴ ϚΠΫ εϐʔΧʔ Իೝࣝ จষղੳ Իೝࣝ
ର࡞ Ի߹ "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 ମݧձΓ·͢ • 201910݄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 ͓ࢠ͞Μͷษڧʹ • Ωϟϓςϯ(ΫοΫ)Λ։͍ͯɻ