これもフロントエンド！画面つきスピーカーで遊んでみた

Transcript

1. これもフロントエンド！ で遊んでみた 画面付き スマートスピーカー 2019/10/21 @Sendai Frontend User Group 高橋翔太

2. 自己紹介 高橋翔太 hitsuji-haneta LasTrust株式会社 h1tsuj1_haneta https://lastrust.io 元はフリーランス でした ・ブロックチェーン証明書の発行 ・証明書の管理アプリの開発

   （ヒツジハネタ）

3. ちょっと宣伝を

4. Sendai スタートアップが集まる会 宮城でスタートアップってどうなの？ Wack Hack vol.1 株式会社diddyworks 三浦成哉 代表取締役CEO 株式会社Co-LABO

   MAKER 古谷優貴 代表取締役CEO LasTrust株式会社 髙橋翔太 取締役CTO 株式会社diddyworks 齋藤尚希 取締役COO 宮城~東京で半々 宮城に拠点 主にリモート トークセッション＆交流会 11. 7(木) モデレーター 19:15~

5. Wack Hack Sendai ▪12/5(木) 19:00 ~ ブロックチェーンハンズオン ▪12/19(木) 19:00 ~

   git ハンズオン

6. さて本題

7. スマートスピーカーを 持ってる人いますか？

8. 実はここ、 webと同じように 書けるんです。 NestHubならね。 どうやって実装してる？

9. というわけで作ってみました！

10. つくったもの ・Togglを操作できる (時間管理アプリ) ・声でもタッチでも操作できる まずはデモを…

11. 全体図 Google Assistant Dialogflow Firebase Function React Cloud Function ①発話

    ②解析 ③webhook ④呼び出し ⑤APIたたく 　(プロキシ経由) ⑥表示

12. Google Assistant Dialogflow 大丈夫！GUIコンソールだけ！

13. フロントエンドは どうなってるの？

14. <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

15. まずまず簡単！ とはいえ苦労したことも…

16. 苦労したこと ２. 動作が不安定 １. 外部API

17. 外部APIのつらみ 最初は仮想通貨関連のアプリにしようかと → ちょっと間違いで外部APIにリクエストを 　 送り続けてしまい、月間無料枠を超えた

18. 外部APIのつらみ togglに変更。クライアントから直でAPI叩く。 →CORSで普通にダメだった。 　Whitelistの登録を待っている時間はない。

19. Qiitaアプリに再変更。CORS大丈夫そう！ →タグ取得、ユーザー情報取得は行けるのに 　記事一覧の取得だけできなかった。 外部APIのつらみ

20. Togglに戻してプロキシサーバーを経由 外部APIのつらみ →やっとこさ行けた

21. Google Assistantが不安定 新しいアクションを作っても すぐには反映されない（数時間） キャッシュを持ってるっぽく フロントエンドの変更が反映されない

22. よかったこと まだまだ新しく、アプリが全然ない 今がチャンス！ みなさんもどうですか？

23. ありがとうございました