Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
これもフロントエンド!画面つきスピーカーで遊んでみた
Search
hitsuji-haneta
October 21, 2019
Programming
0
100
これもフロントエンド!画面つきスピーカーで遊んでみた
hitsuji-haneta
October 21, 2019
Tweet
Share
More Decks by hitsuji-haneta
See All by hitsuji-haneta
SSIで覗き見るPWAの世界 / SSI on PWA
hitsuji_haneta
2
1.1k
GoとMicroserviceでDDDやってみました
hitsuji_haneta
0
380
やってみたよVueNative
hitsuji_haneta
2
470
VueではじめるWeb Components
hitsuji_haneta
1
550
webエンジニア向けブロックチェーンの技術的「へぇ」 / Blockchain tech tips for web developers
hitsuji_haneta
0
160
Other Decks in Programming
See All in Programming
Comparing decimals in Swift Testing
417_72ki
0
150
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
240
TypeScriptでDXを上げろ! Hono編
yusukebe
4
910
What's new in Adaptive Android development
fornewid
0
130
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
340
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
QA x AIエコシステム段階構築作戦
osu
0
220
Go製CLIツールをnpmで配布するには
syumai
2
1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
decksh - a little language for decks
ajstarks
4
21k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Producing Creativity
orderedlist
PRO
346
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
これもフロントエンド! で遊んでみた 画面付き スマートスピーカー 2019/10/21 @Sendai Frontend User Group 高橋翔太
自己紹介 高橋翔太 hitsuji-haneta LasTrust株式会社 h1tsuj1_haneta https://lastrust.io 元はフリーランス でした ・ブロックチェーン証明書の発行 ・証明書の管理アプリの開発
(ヒツジハネタ)
ちょっと宣伝を
Sendai スタートアップが集まる会 宮城でスタートアップってどうなの? Wack Hack vol.1 株式会社diddyworks 三浦成哉 代表取締役CEO 株式会社Co-LABO
MAKER 古谷優貴 代表取締役CEO LasTrust株式会社 髙橋翔太 取締役CTO 株式会社diddyworks 齋藤尚希 取締役COO 宮城~東京で半々 宮城に拠点 主にリモート トークセッション&交流会 11. 7(木) モデレーター 19:15~
Wack Hack Sendai ▪12/5(木) 19:00 ~ ブロックチェーンハンズオン ▪12/19(木) 19:00 ~
git ハンズオン
さて本題
スマートスピーカーを 持ってる人いますか?
実はここ、 webと同じように 書けるんです。 NestHubならね。 どうやって実装してる?
というわけで作ってみました!
つくったもの ・Togglを操作できる (時間管理アプリ) ・声でもタッチでも操作できる まずはデモを…
全体図 Google Assistant Dialogflow Firebase Function React Cloud Function ①発話
②解析 ③webhook ④呼び出し ⑤APIたたく (プロキシ経由) ⑥表示
Google Assistant Dialogflow 大丈夫!GUIコンソールだけ!
フロントエンドは どうなってるの?
<script type="text/javascript" src=“https://www.gstatic.com/assistant/ interactivecanvas/api/interactive_canvas.min.js"> </script> index.html const interactiveCanvas = window.interactiveCanvas;
interactiveCanvas.ready({ onUpdate(data) { if (data.type === 'start') startTimer(hoge); if (data.type === 'stop') stopTimer(hoge); } }); interactiveCanvas.sendTextQuery(`λΠϚʔελʔτ${title}`); hoge.jsx Interactive Canvas
まずまず簡単! とはいえ苦労したことも…
苦労したこと 2. 動作が不安定 1. 外部API
外部APIのつらみ 最初は仮想通貨関連のアプリにしようかと → ちょっと間違いで外部APIにリクエストを 送り続けてしまい、月間無料枠を超えた
外部APIのつらみ togglに変更。クライアントから直でAPI叩く。 →CORSで普通にダメだった。 Whitelistの登録を待っている時間はない。
Qiitaアプリに再変更。CORS大丈夫そう! →タグ取得、ユーザー情報取得は行けるのに 記事一覧の取得だけできなかった。 外部APIのつらみ
Togglに戻してプロキシサーバーを経由 外部APIのつらみ →やっとこさ行けた
Google Assistantが不安定 新しいアクションを作っても すぐには反映されない(数時間) キャッシュを持ってるっぽく フロントエンドの変更が反映されない
よかったこと まだまだ新しく、アプリが全然ない 今がチャンス! みなさんもどうですか?
ありがとうございました