Edited at

Google Nest Hubでちょまどさんのブログを声で操作してみた ~Azure Functionsを添えて~

詳しい画面対応方法はこちらに詳細を記載しています。

https://qiita.com/h-takauma/items/1425abe44a050dfb3269

今回はAzure Functionsを使ってちょまどさんのブログを声で操作したいと思います。

■2019/07/22

仕様が変わったので、修正しました。


完成動画


1. Azure FunctionsのCLIツールをインストール

詳しい部分はかずきさんのブログが詳しいのでみてください。

https://blog.okazuki.jp/entry/2018/09/03/182959

サクッとCLIツールを入れる

$ npm install -g azure-functions-core-tools 


2. プロジェクト作成

CLIコマンドを実行していきます。適当なフォルダを作ってそこに作成していきます。

必要なモジュールをインストールしていきます。

$ mkdir chomado-blog-viewer-azure-functions

$ cd chomado-blog-viewer-azure-functions
$ func init # 選択肢が出てくるのでnodeとjavascriptを選ぶ
$ func new # Http triggerを選択し、blog-viewerという名前で作成する
$ npm init -y
$ npm i -s actions-on-google@preview # プレビュー版を入れる
$ npm i -s azure-function-express # azure-function-expressを入れる
$ npm i -s express
$ npm i -s firebase-admin


2-1. functions.jsonを編集する

HTTPで受け入れるリクエストが定義されているのですが、デフォルトだと GET, POST なので今回は GET が不要なので削除しましょう。誰でもアクセスできるようにanonymousにもしておきます。


blog-viewer/functions.json

{

"bindings": [
{
"authLevel": "anonymous", // anonymousにしておく
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": [
"post" // getは使わないので消しておく
]
},
{
"type": "http",
"direction": "out",
"name": "res"
}
]
}


2-2. プログラムを記述する

実際に動作するプログラムを入力していきます。これでAzure Functionsにデプロイすれば動かすことができます。


blog-viewer/index.js

const createHandler = require("azure-function-express").createHandler;

const express = require("express");
const {dialogflow, HtmlResponse} = require('actions-on-google');

const app = dialogflow({debug: true});

// キャラクター名を言うと、画面に表示される
app.intent('TargetPictureIntent', (conv, {index}) => {
const picture = [
{"url": "https://chomado.com/wp-content/uploads/2017/10/sabaru.png", "title": "サーバルちゃん"},
{"url": "https://chomado.com/wp-content/uploads/2018/07/180724_unity-chan-937x1024.jpg", "title": "ユニティちゃん"},
{"url": "https://chomado.com/wp-content/uploads/2014/01/e37c14637977651b5962fee49b3a577f-1.png", "title": "ちょまどちゃん"}
];

const selPicture = picture[index];

conv.ask(`${selPicture.title}の絵です。`);
conv.ask(new HtmlResponse({
url: selPicture.url,
suppress: true
}));
});

// ランダムで見せる
app.intent('PictureIntent', (conv) => {
const picture = [
{"url": "https://chomado.com/wp-content/uploads/2017/10/sabaru.png", "title": "サーバルちゃん"},
{"url": "https://chomado.com/wp-content/uploads/2018/07/180724_unity-chan-937x1024.jpg", "title": "ユニティちゃん"},
{"url": "https://chomado.com/wp-content/uploads/2014/01/e37c14637977651b5962fee49b3a577f-1.png", "title": "ちょまどちゃん"}
];

const pictureIndex = Math.floor(Math.random() * picture.length);
const selPicture = picture[pictureIndex];

conv.ask(`${selPicture.title}の絵です。`);
conv.ask(new HtmlResponse({
url: selPicture.url,
suppress: true
}));
});

// 起動時
app.intent('welcome', (conv) => {
conv.ask('ちょまどブログへようこそ!');
conv.ask(new HtmlResponse({
url: `https://chomado.com/`,
suppress: true
}));
});

// ページ切り替え
app.intent('PageIntent', (conv, {page}) => {
var speechText = `${page}ページです。`;
conv.ask(speechText);
conv.ask(new HtmlResponse({
url: `https://chomado.com/page/${page}/`,
suppress: true
}));
});

// functionsの名前を一致させておく
const expressApp = express();
expressApp.post('/api/blog-viewer', app);
module.exports = createHandler(expressApp);



3. デプロイする


3-1. ローカル環境で試す

ngrok使ってローカルで動作確認してみましょう。ローカルの場合は7071のポートを指定します。

https://xxxxxxxx.ngrok.io 部分をメモっておく。

$ ngrok http 7071

Azure Functionsをローカルで起動

$ func host start

DialogflowのFulfillmentのWebhookURLを記述する

s100.png


3-2. Azure Functionsへデプロイする

リソースを作成します。

s101.png

VSCodeでデプロイします。

s102.png

関数をクリックして、アクセスするためのURLを取得します。

s103.png

ポップアップ表示されて、そこに書かれているURLをDialogflowのFulfillmentにコピペします。

s104.png


まとめ

Azure Functionsを使えば、手軽にローカル環境でテストが出来て、本番環境にデプロイできるお手軽な感じが良かったです。

今後はウェブブラウザをマウスで操作するのではなく、声で命令することがメインになるかもしれませんね。

システム化のご検討やご相談は弊社までお問い合わせください。

https://i-enter.co.jp/contact/