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
98
これもフロントエンド!画面つきスピーカーで遊んでみた
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
360
やってみたよVueNative
hitsuji_haneta
2
450
VueではじめるWeb Components
hitsuji_haneta
1
540
webエンジニア向けブロックチェーンの技術的「へぇ」 / Blockchain tech tips for web developers
hitsuji_haneta
0
150
Other Decks in Programming
See All in Programming
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
6
3k
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
eBPF Updates (March 2025)
kentatada
0
130
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
1
150
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
1k
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
970
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
Why Our Code Smells
bkeepers
PRO
336
57k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Designing for humans not robots
tammielis
250
25k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A designer walks into a library…
pauljervisheath
205
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Adaptive Systems
keathley
41
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
610
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が不安定 新しいアクションを作っても すぐには反映されない(数時間) キャッシュを持ってるっぽく フロントエンドの変更が反映されない
よかったこと まだまだ新しく、アプリが全然ない 今がチャンス! みなさんもどうですか?
ありがとうございました