忘年会の余興をGoogle Homeにやらせる

新人なので忘年会の幹事をすることになりました。余興でするのはビンゴ＋くじびき

余興の司会を担当することになったのですが、人前で話すのが上手くないので、Google Homeにやらせてみました。

まつよう

努力のベクトルがおかしい自覚はある

Contents

1 状況
2 やったこと
3 結果と感想

状況

●30人規模の忘年会。お店は貸し切り

●余興の時間は30分。例年ビンゴやくじ引きをしている

●そこまで盛り上がりを求められているわけでもない

●できれば無難に終わらせたいが、ただこなすだけなのも気にくわない

●プロジェクターが使えるが、マイクとPCの場所が離れている

やったこと

●スマホのWi-Fiテザリングで、PCとGoogle Homeをインターネットに接続

●景品一覧スライド、くじびきマクロ、ビンゴサイトの用意

●RemoteMouceでスマホからPCを遠隔操作

●ビンゴサイトをローカルサーバー上で動かす

●ビンゴサイトの表示に応じてGoogle Homeを喋らせる

ビンゴ、くじびき、スライドの用意

余興ですが、ビンゴをして、当たった人からくじびきに挑戦できるという流れになりました。

まずはビンゴをどうするか。

調べたところ、GitHubでJavaScriptで動作するビンゴのコードを制作されている方がいました。

結婚式の二次会などのビンゴ大会で利用できるJavaScript製のビンゴスクリプト

これを改変して使わせていただくことにしました。

次にくじ引き。エクセルシートを用いて自作しました。

該当箇所をダブルクリックすると画像が表示されるようにマクロを組んでいます。

ジャンルごとに色分けし、少しだけ参加者に判断の余地を持たせました。

あとは景品一覧のスライドをいい感じに作りました。

RemoteMouce でPCを遠隔操作

ブラウザでビンゴ、エクセルでくじ引き、パワポでスライドを作成。

ここで問題となるのが、この3つをどう素早く切り替えて表示するのかということです。

また、物理的にマイクの操作とPCの操作を同時にできないことも問題でした。

しかし、これらの問題を解決してくれたのが、RemoteMouse というアプリでした。

こちらをスマホ側、PC側両方にインストールすることで、簡単に遠隔操作、ウィンドウの切り替えが可能になりました。

ビンゴをローカルサーバーで動かす

今回初めてNode.jsを触ってみました。

参考1： windows10にNode.jsをインストールする
参考2： node.js 超入門 ①node.jsでwebサーバを作ってみる
参考3： node.js 超入門②webサーバを作る(ルーティングもやってみる)

とりあえずlocalhostで先ほどのビンゴのページが表示・動作するようにしました。

ビンゴサイトの表示に応じてGoogle Homeを喋らせる

参考1
Google Home MiniをWindows10で喋らせる
参考2
GoogleHomeが数日前から話さなくなり「Error: get key failed from google」を吐き出していたので対処しました
参考3
Google Homeをブラウザから喋らせてみる

node.js環境からGoogle Home Mini を喋らせるところで一番苦戦しました。

google-home-notifierというnpmパッケージを用います。

npm install google-home-notifier

1	npm install google-home-notifier

だけでいいのかと思いきや、インストール時にエラーが発生。

調べたところ、windows-build-toolsや、node-gyp、Bonjour for Windows といったものを事前にインストールする必要があるようでした。(参考1)

また、上記をインストールしてもエラーが。

Error: get key failed from google

google-tts-api のバージョンが上がった(0.0.2→0.0.4)ことが原因のようです。

修正後、エラーが解消されました。(参考2)

これで、google-home-notifierのインストールが正常完了。

コマンドを使って自由にGoogle Homeが話せるようになりました。(参考3)

次に、ビンゴのサイトと連携させていきます。

最低限やりたいこととしては、

スタートボタンを押す→ドラムロールが流れる→ストップボタンを押す→数字を読み上げる

という一連の流れ。

まずはWeb上のボタンをトリガーとして、ローカルサーバーに情報をPOSTで送るように修正します。

ビンゴシステムの partybingo.js ファイルでは、スタート、ストップボタン実行時の処理を、start関数、stop関数で行っています。

これらの関数を、次のように変更しました。

	var stop = function(time) {
		isStarted = false;
		startButton.text('Start');
		var n = removeNumberRamdom();
		pingoNumber.text(toBingoString(n));
		addHistory(n);
		//drumAudio.pause();

		//google-homeに喋らせる
		fetch('./', {
			method: 'POST',
			cache: 'no-cache',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ msg: 'No.'+n+'ばんです' })
		})
		.then(res => res.json())
		.catch(error => console.error('Error:', error))
		.then(response => console.log('Success:', response));
	};
	var start = function(){
		isStarted = true;
		startButton.text('Stop');
		//drumAudio.currentTime = 0;
		//drumAudio.play();

		//google-homeに喋らせる
		fetch('./', {
			method: 'POST',
			cache: 'no-cache',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify({ msg: 'drum' })
		})
		rourletto();
	};

var stop = function(time) {

isStarted = false;

startButton.text('Start');

var n = removeNumberRamdom();

pingoNumber.text(toBingoString(n));

addHistory(n);

//drumAudio.pause();

//google-homeに喋らせる

fetch('./', {

method: 'POST',

cache: 'no-cache',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ msg: 'No.'+n+'ばんです' })

})

.then(res => res.json())

.catch(error => console.error('Error:', error))

.then(response => console.log('Success:', response));

};

var start = function(){

isStarted = true;

startButton.text('Stop');

//drumAudio.currentTime = 0;

//drumAudio.play();

//google-homeに喋らせる

fetch('./', {

method: 'POST',

cache: 'no-cache',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({ msg: 'drum' })

})

rourletto();

};

start時には”drum”の文字列を、

stop時には”NO.○○番です”という文字列を送信します。

続いて、受け取る側のjsファイルの作成(main.js)

/**
* 設定
*/
const googlehome = require('google-home-notifier');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const msg = process.argv[2]; // process.argv[2]で引数を取得。
const port = 8001;
const audio = "○○○○.mp3";  //ドラムロールの音声ファイル

/**
* ローカルサーバー起動
*/
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static('./'));
app.listen(port, ()=> {
  console.log(`http://localhost:${port}/`);
});

/**
* 喋らせる関数
*/
function say(text, language = 'ja'){
  googlehome.device('Google-Home', language);
  googlehome.notify(text, function(res) {
    console.log(res);
  });
}

/*
* 音鳴らす関数
*/
function drum(language = 'ja'){
  googlehome.device('Google-Home', language);
  googlehome.play(audio, function(notifyRes) {
      console.log(notifyRes);
  });
}

/**
* POST時の処理
*/
app.post('/', function(req, res){
  let msg = req.body.msg;
  if(msg == "drum"){
    drum();
  }else{
    say(msg);
  }
  res.send({ response : msg });
});

/**

* 設定

const googlehome = require('google-home-notifier');

const express = require('express');

const bodyParser = require('body-parser');

const app = express();

const msg = process.argv[2]; // process.argv[2]で引数を取得。

const port = 8001;

const audio = "○○○○.mp3"; //ドラムロールの音声ファイル

/**

* ローカルサーバー起動

app.use(bodyParser.urlencoded({extended: true}));

app.use(bodyParser.json());

app.use(express.static('./'));

app.listen(port, ()=> {

console.log(`http://localhost:${port}/`);

});

/**

* 喋らせる関数

function say(text, language = 'ja'){

googlehome.device('Google-Home', language);

googlehome.notify(text, function(res) {

console.log(res);

});

}

* 音鳴らす関数

function drum(language = 'ja'){

googlehome.device('Google-Home', language);

googlehome.play(audio, function(notifyRes) {

console.log(notifyRes);

});

}

/**

* POST時の処理

app.post('/', function(req, res){

let msg = req.body.msg;

if(msg == "drum"){

drum();

}else{

say(msg);

}

res.send({ response : msg });

});

作成したmain.jsと同階層に修正したビンゴファイルをすべて格納。

あとはコマンドを実行してサーバー起動。

$ node main.js

1	$ node main.js

http://localhost:8001/にアクセスすると、ビンゴの画面が表示されます。

pic.twitter.com/uV6dheItkZ

— まつよう (@matsu4091) January 2, 2020

無事に意図したとおりにGoogle Home も喋ってくれました。

ボタンを押してから喋るまでタイムラグがありますが、どうしようもなかったです。

ほかにもセリフを加えたり、尺が足りないとき用に演出なしモードを実装したりもしました。

結果と感想

●突然話し出すGoogel Homeに会場が少しざわざわした。

●遠隔操作と切り替えが上手くいき、かなりスムーズに進行できた。

●てきとうに作ったエクセルのくじ引きが一番評判良かった。

~~●よく考えたらスマートスピーカーである必要がなかった~~

●結局なんやかんやで自分が一番しゃべった。

といった感じでした。

これを無意味な時間外労働と捉えるか、有意義な趣味と捉えるか……

少なくとも得るものはあったと思います。

まつよう

結局必要なのは話術