LoginSignup
12

More than 3 years have passed since last update.

Google Homeをブラウザから喋らせてみる

Last updated at Posted at 2018-02-26

はじめに

Google Homeを最近買ったのでいろいろ遊んでみました。

Google Homeでは自発的に喋らせる機能が標準で備わっていません。
しかし、google-home-notifierを使うと、コマンドで喋らせることが可能です。

↓こちらの記事が参考になりました。
Google Home開発入門 / google-home-notifier解説

ちょっと試してみましょう。

コマンドで喋らせてみる

google-home-notifierをインストール

$ npm init
$ npm i -S google-home-notifier

jsファイルの作成

main.js

/**
* 設定
*/
const googlehome = require('google-home-notifier');
const msg = process.argv[2] || 'なんか喋ってよ'; // process.argv[2]で引数を取得。ない場合はデフォルトメッセージを代入


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

say(msg); // 英語にしたい場合は第二引数を'en'にする

あとは、以下コマンドを叩くだけ!
main.jsの後に好きな日本語を書くと、その通りにGoogle homeが喋ってくれます。

$ node main.js 私はGoogleだっ!

ただし、実態はGoogle Text To Speachを使って音声ファイルを再生しているので、Google Homeが喋ってるわけではありません。(Google Homeよりちょっとカタコトです)

うーん、ちょっと残念。
早くGoogle Homeに直接喋らせるAPIができて欲しいです。

ブラウザから実行できるようにする

コマンド打つのは面倒だし、誰でも気軽にできるように、ブラウザから実行できるようにしてみようと思います。

必要なプラグインをインストール

$ npm init
$ npm i -S express body-parser

先ほどのmain.jsを以下のようにカスタマイズ

コマンドではなく、postで受け取ったタイミングで実行するようにしています。

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;


/**
* ローカルサーバー起動
*/
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);
  });
}

/**
* POST時の処理
*/
app.post('/', function(req, res){
  let msg = req.body.msg;

  say(msg);
  res.send({ response : msg });
});

htmlを作成する

あとは、上記main.jsをブラウザから実行できるようにfetch()でpostします。

index.html(主要な部分だけ)
fetch('./', {
  method: 'POST',
  cache: 'no-cache',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ msg: '★ここに喋らせたい内容を投げ込む' })
})
.then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

画面の作成

あとはこんな感じの画面を作って上記scriptを実行させるだけです。
(コードは割愛します)

画面

コマンドを実行

main.jsを実行します。

$ node main.js

これでローカルサーバーが立ち上がるので、http://localhost:8001/ にアクセスして遊んでみましょう

また、http://***.localhost:8001/のURLでスマホからもアクセスできるので、手軽に遊べます。(***はMacのマシン名)

ただし、Macがスリープしちゃうともちろん実行できなくなくなるので、ご注意を。

最後に

意外とカンタンにGoogle Homeを喋らせることができました。
ただ、今回のサンプルでは自宅内でしかできないので、外部から実行ができません。
Raspberry Piなどで自宅サーバーを作ればいいんでしょうけど、そこまでするのは面倒。。
なので、そのうちGoogle公式で便利な機能を提供してくれるといいなーと思っています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12