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
82
これもフロントエンド!画面つきスピーカーで遊んでみた
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
340
やってみたよVueNative
hitsuji_haneta
2
400
VueではじめるWeb Components
hitsuji_haneta
1
500
webエンジニア向けブロックチェーンの技術的「へぇ」 / Blockchain tech tips for web developers
hitsuji_haneta
0
130
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
150
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Securify_エンジニア採用資料
3shake
0
100
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
270
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
実践!難読化ガイド
mitchan
0
200
Featured
See All Featured
Web development in the modern age
philhawksworth
205
10k
Unsuck your backbone
ammeep
667
57k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
A Tale of Four Properties
chriscoyier
155
22k
The Invisible Side of Design
smashingmag
296
50k
The Mythical Team-Month
searls
218
43k
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が不安定 新しいアクションを作っても すぐには反映されない(数時間) キャッシュを持ってるっぽく フロントエンドの変更が反映されない
よかったこと まだまだ新しく、アプリが全然ない 今がチャンス! みなさんもどうですか?
ありがとうございました