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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
チームのテスト力を鍛える
goyoki
3
810
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Reading Rails 1.0 Source Code
okuramasafumi
0
250
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.4k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
Rancher と Terraform
fufuhu
2
550
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
旅行プランAIエージェント開発の裏側
ippo012
2
920
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building an army of robots
kneath
306
46k
Bash Introduction
62gerente
615
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Code Review Best Practice
trishagee
71
19k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Unsuck your backbone
ammeep
671
58k
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が不安定 新しいアクションを作っても すぐには反映されない(数時間) キャッシュを持ってるっぽく フロントエンドの変更が反映されない
よかったこと まだまだ新しく、アプリが全然ない 今がチャンス! みなさんもどうですか?
ありがとうございました