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
340
フロントエンドの人に勧めるスマートスピーカースキル作成のハナシ #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
「ソフトウェアアーキテクチャの基礎」を読む #ゆるWeb札幌
tacck
0
66
ゆるWeb勉強会@札幌 OnLine #19 #ゆるWeb札幌
tacck
0
58
AWS Amplify で触れる AWS CDK #jawsug_cdk #jawsug
tacck
1
290
ゆるWeb勉強会@札幌 OnLine #18 #ゆるWeb札幌
tacck
0
140
AWS Amplify でホスティングしよう #ゆるWeb札幌
tacck
0
83
AWS Amplify と AWS CDK の良い関係 #awsbasics #AWSAmplifyJP
tacck
1
890
ゆるWeb勉強会@札幌 OnLine #17 #ゆるWeb札幌
tacck
0
66
Twitter の OAuth 2.0 を使ってみた #ゆるWeb札幌
tacck
0
110
ゆるWeb勉強会@札幌 OnLine #16 #ゆるWeb札幌
tacck
0
78
Other Decks in Technology
See All in Technology
LINSTOR — это как Kubernetes, но для блочных устройств
flant
0
3.9k
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
3.1k
ECS on EC2 で Auto Scaling やってみる!
sayjoy
1
280
psql, my favorite tool!
nuko_yokohama
1
180
Cloud Foundryの移行先はどこか? オープンソースPaaS探し
kolinz
0
360
Azure DevOps Online Vol.6 - 業務で必要なCIをみんなで考えよう
kkamegawa
0
290
Simplify Cloud Native Security with Trivy
knqyf263
0
730
ECS Exec を使った ECS の トラブルシューティング
dohara
0
160
ロボットの実行すらメンドクサイ!?
kou12092
0
220
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
320
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
260
Dangerous attack paths: Modern Development Environment Security - Devices and CI/CD pipelines
rung
PRO
0
170
Featured
See All Featured
Designing for humans not robots
tammielis
242
24k
Clear Off the Table
cherdarchuk
79
290k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Done Done
chrislema
174
14k
Designing for Performance
lara
597
64k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Art, The Web, and Tiny UX
lynnandtonic
280
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Optimizing for Happiness
mojombo
364
64k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
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 ͓ࢠ͞Μͷษڧʹ • Ωϟϓςϯ(ΫοΫ)Λ։͍ͯɻ