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
75
これもフロントエンド!画面つきスピーカーで遊んでみた
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
1k
GoとMicroserviceでDDDやってみました
hitsuji_haneta
0
330
やってみたよVueNative
hitsuji_haneta
2
360
VueではじめるWeb Components
hitsuji_haneta
1
450
webエンジニア向けブロックチェーンの技術的「へぇ」 / Blockchain tech tips for web developers
hitsuji_haneta
0
130
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
740
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.6k
Git Rebase
bkuhlmann
11
1.6k
雑に思考を整理する技術と効能
konifar
53
24k
OpenAPI を守るのは難しい
ohmori_yusuke
2
780
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
360
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
ONE WEDGE_company_guide
1wedge_one
0
340
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.1k
Featured
See All Featured
Happy Clients
brianwarren
91
6.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Six Lessons from altMBA
skipperchong
19
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Designing Experiences People Love
moore
135
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
We Have a Design System, Now What?
morganepeng
42
6.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
Design by the Numbers
sachag
274
18k
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が不安定 新しいアクションを作っても すぐには反映されない(数時間) キャッシュを持ってるっぽく フロントエンドの変更が反映されない
よかったこと まだまだ新しく、アプリが全然ない 今がチャンス! みなさんもどうですか?
ありがとうございました