「【大阪】Google Nest Hub対応スマートディスプレイスキルを作ろう！【Vue.js】」に参加してきました
隣の部屋で「VS Code Meetup #2 - Live Share編(大阪会場)」が開催されることは知っていましたし、更には「Mix Leap Study #56 - データサイエンス ポスターセッション」とか「1on1を学びたいエンジニアのためのワークショップ」とか1/23に限って行きたいイベントが4つもあったんですよねえ。
それでもハンズオンイベントの方が実際に手を動かせて学びも多そうという理由でこちらを選びました👍
事前準備
- Googleアカウントの用意（すでに持ってますよね）
- LINEアカウントの用意（宗教上の理由次第ですかね）
- nhrokの事前インストール
1. ngrokにsign up
2. ngrokをダウンロード
3. zipを解凍し任意のディレクトリに移動する
4. PATHを通す
5. ngrok authtoken {認証キー} を実行する
- Node.jsのインストール
- v10.16.3 推奨と書かれていましたが、v12.13.0でもいけました。
- Gitのインストール
- Visual Studio Codeのインストール
事前にやっておけとありましたが、僕の場合はngrok入れるだけでしたので10分も掛からず終わりました。他もインストールだけなのでそんなに手間ではないと思います。
やったこと
あの活舌スキルを作るハンズオンでした。
資料の通りにひたすら手を動かしていく形式でした。
Dialogflowで発話設定やWebHook設定をし、LINEでAPIキーを発行しLINEにも通知が来るようにし、Google SpreadSheet + Google Apps Scriptで言葉の管理とAPIの公開をし、必要なプログラムをcloneして来て、画面表示用のサーバをローカルに立て、APIキー設定を行たサーバをローカルに立てて完了という流れでした。
全体像についての説明はなかったのですが以下のような流れになるんだと思います。
Google Assistant ↔ Dialogflow ↔ ngrok ↔ ローカルサーバ ➡ LINE
（Azure Functionsも使っているらしいのですがどの部分を担当していたのかまだ未調査…）
ngrokでページが表示されないと思ったら開くべきディレクトリが間違っていたり、ngrokでサーバ立てれないと思ったら無料版の制限だったりとそういうところでハマってしまいました。
そんなこんなでできたのがこちら！
#ATLabo pic.twitter.com/M2vClI1QBO
— ふじい (@dafujii_k) January 23, 2020
#ATLabo pic.twitter.com/ZnOV3uOsym
— ふじい (@dafujii_k) January 23, 2020
「貸借対照表」より「活舌チェック」って言葉のほうが難しくね？🤔
幸運にもスムーズに完了できたので、YouTube Liveで配信されている隣のVS Code Meetupを観たり、参加者の手助けをしていました。
見た感じハマっていた点としては、
- .envファイルが表示されない(macOS)
→ ✔ 隠しファイルとなるため。VSCodeで見てもらった
- ngrok立ち上がらない
→ ✔ 手順書に書いてある通りもう1個のコマンドを打ってもらう
→ ✔ ngrokインストール時のターミナルが残っていたので終了してもらう
- 2つ立てたサーバのURLどっち使えばいいか分からない
→ ✔ 指示して適切な方を使ってもらう
- 手順書のスクリーンショットと実際の画面の差異で場所が分からない
→ ✔ 見た目ではなく内容を理解してこの辺と指摘する
- レスポンス遅い
→ ✔ 待て
そんな感じでしょうか。お役に立てたならよかったです。
わかったこと
- 会場のWiFi繋がらない問題はDNSの問題っぽいこと
- 短時間のハンズオンイベントはハマりどころを如何に減らすか工夫される
- ngrokでローカルサーバをインターネットからアクセス可能にできる
- ngrokは無料版だとリージョンごとに1個しかサーバ立てられない
- 画面表示用のInteractive CanvasはWeb技術が使える
- Interactive Canvasはゲームカテゴリのみ
- AndroidのGoogle AssistantはInteractive Canvasに対応している
- VSCodeはいいぞ
感想
コーディングしたかったと思うんですが、複数のサービスを組み合わせて作っていくのはパズルみたいでおもしろかったです。
後はもう少し全体像の把握や個々の作業がどういうことを担っているのかという説明が理解を深めるために欲しかったですねー。
One more thing
「VS Code Meetup #2 - Live Share編(大阪会場)」に途中参加しLTを途中から聞くことができました！
---
（Alexaスキル公開してます💪）
😉