Google Apps Scriptを使ってみる(1)

Google Apps Scriptで使用できるJavaScript

JavaScript 1.6をベースに、1.7や1.8のいくつかの機能が使える。(Basic JavaScript features)

Apps Scriptはサーバーサイドで実行されるため、Window.alert()やWindow.console.log()などのWindow APIは使用できない。

Logger

Window.console.log()が使えない代わりに、Logger.log()が使える。

Logger.log("Hello");

出力したログは、エディターのメニュー「表示」→「ログ」で確認できる。

msgBox

Window.alert()やWindow.prompt()が使えない代わりに、Browser.msgBox()が用意されている。

function msgBox() {
    Browser.msgBox("Hello");
}

function msgBox_OkCancel() {
    var result = Browser.msgBox("Hello", Browser.Buttons.OK_CANCEL);
    Logger.log(result);
}

function msgBox_YesNo() {
    var result = Browser.msgBox("Hello", Browser.Buttons.YES_NO);
    Logger.log(result);
}

function msgBox_TitlePrompt() {
    var result = Browser.msgBox("title", "prompt", Browser.Buttons.YES_NO_CANCEL);
    Logger.log(result);
}

nodistでnpmを最新版にバージョンアップするには

nodistでnpmを最新版にバージョンアップするには

最新版のNode.jsをインストール

nodist latest

現在のnodeのバージョンにあったnpmを使用する

nodist npm match

Google Homeに話をさせる

castv2-clientのインストール

castv2-clientをインストールします。

npm install castv2-client

Windowsの場合は、

npm install castv2-client --no-optional

google-tts-apiのインストール

google-tts-apiをインストールします。

npm install google-tts-api --save

Google Homeに話をさせるプログラム

Google Homeに話をさせるプログラムです。

環境に合わせて、変数ipの値を変更してください。

// Google-HomeのIPアドレス
const ip = '192.168.97.2';

次の変数を変更することで、話す言葉を変更できます。
Google TTS APIの制限により、変数textは最大200文字までです。

// 読み上げる文字列
const text = 'こんにちは';
// 言語
const lang = 'ja-JP';
// 読み上げ速度
const speed = 1;

以下、プログラムです。

const googleTTS = require('google-tts-api');
const Client = require('castv2-client').Client;
const DefaultMediaReceiver = require('castv2-client').DefaultMediaReceiver;

// 読み上げる文字列
const text = 'こんにちは';
// 言語
const lang = 'ja-JP';
// 読み上げ速度
const speed = 1;
// Google-HomeのIPアドレス
const ip = '192.168.97.2';

const get_TTS_URL = (text, lang, speed) => {
    return googleTTS(text, lang, speed).then(function (url) {
        return url;
    }).catch(function (err) {
        console.error(err.stack);
        return '';
    });
};

const say = (host, content) => {
    const client = new Client();
    client.connect(host, function () {
        client.launch(DefaultMediaReceiver, function (err, player) {
            if (err) {
                console.log(err);
                return;
            }

            player.on('status', function (status) {
                console.log(`status broadcast playerState=${status.playerState}`);
            });

            const media = {
                contentId: content,
                contentType: 'audio/mp3',
                streamType: 'BUFFERED'
            };
            player.load(media, { autoplay: true }, function (err, status) {
                client.close();
            });
        });
    });
    client.on('error', function (err) {
        console.log(`Error: ${err.message}`);
        client.close();
    });
};

async function main() {
    const url = await get_TTS_URL(text, lang, speed);
    if (url == '') return;
    say(ip, url);
}

main();

Ubuntuにnode.jsの最新版をインストールするには

node.jsのサイトにインストール方法が書かれています。

Node.js v9 を利用するには

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

Node.js v8 を利用するには

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Google Homeの名前とIPアドレスを検出する方法

Google Homeの名前とIPアドレスを検出する方法です。

[Signagify 3] Node.js で Sender アプリ作って mDNS + CastV2 で Chromecast とお話 – Qiita」を参考にしました。

ちなみに、Google HomeアプリでIPアドレスを確認できます。

  1. Google Homeアプリを起動します。
  2. アプリのホーム画面の左上にあるメニューをタップします。
  3. 「デバイス」→「設定」→「情報」にIPアドレスが表示されています。

Google-Homeの検出

multicast-dnsを使ってGoogle-Homeを検出します。

multicast-dnsのインストール

次のコマンドを実行して、multicast-dnsをインストールします。

npm install multicast-dns

Google-Homeの名前とIPアドレスを出力します。

var mdns = require('multicast-dns')();

mdns.on('response', function (response) {
    let name = '';
    let ip = '';
    for (const additional of response.additionals) {
        if (additional.type == 'TXT') name = additional.name;
        if (additional.type == 'A') ip = additional.data;
    }
    if (name != '') console.log(`${name}(${ip})`);
});

mdns.query({
    questions: [{
        name: '_googlecast._tcp.local',
        type: 'PTR'
    }]
});

次のコマンドでプログラムを実行します。

nodejs detect.js

実行すると、次のように出力されます。

Google-Home-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX._googlecast._tcp.local(192.168.XX.X)

Google TTS (Text-To-Speech)でテキストを読み上げた音声ファイルを取得する

Google TTS (Text-To-Speech)でテキストを読み上げた音声ファイルをする方法です。

google-tts-apiのインストール

google-tts-apiをインストールします。

npm install google-tts-api --save

音声ファイルのURLを取得する

引数に読み上げる文字列と、言語、読み上げ速度を指定すると、音声ファイルのURLを取得できます。

const googleTTS = require('google-tts-api');

// 読み上げる文字列
const text = 'こんにちは';
// 言語設定
const lang = 'ja-JP';
// 読み上げ速度
const speed = 1;

googleTTS(text, lang, speed).then(function (url) {
  console.log(url);
}).catch(function (err) {
  console.error(err.stack);
});

表示されたURLからmp3の音声ファイルをダウンロードできます。

JavaScriptで<input type=”file”>で選択された画像をimgタグで表示する

<input type=”file”>で選択された画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>↓画像ファイルを選択します。</p>
    <input type="file" id="target" accept="image/*">
    <p>↓ここに選択された画像を表示します。</p>
    <img id="myImage">
    <script src="load.js"></script>
</body>
</html>

<input type=”file” id=”target”>で選択された画像をid=”MyImage”のimgに表示します。

const target = document.getElementById('target');
target.addEventListener('change', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

JavaScriptでドロップされた画像をimgタグで表示する

JavaScriptでドロップされた画像をimgタグで表示する

ドロップされた画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="target" style="border: solid 1px #0000ff; height: 3em;text-align: center;">
        ここに画像ファイルをドロップします。
    </div>
    <p>↓ここにドロップされた画像を表示します。</p>
    <img id="myImage">
    <script src="drop.js"></script>
</body>
</html>

id=”target”の領域にドロップされた画像をid=”MyImage”のimgに表示します。

const handleDragEvent = function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
};

const target = document.getElementById("target");
target.addEventListener("dragover", handleDragEvent, false);
target.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();

    const file = e.dataTransfer.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

e.dataTransfer.dropEffect = ‘copy’; は、マウスカーソルを変更するためのコードです。
なくても動作しますが、ブラウザによっては、ドロップできないような印象を与えるため、追加しています。

JavaScriptで画像中のテキストを認識する

JavaScriptで画像中のテキストを認識するサンプルアプリケーションを作りました。

ブラウザ上でこういうこともできるのですね。

日本語の認識はいまいちな気がしますが、使い方次第では役に立つかも。

Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ エラーになったら

Google Chromeで、file:///~/index.htmlにアクセスしていると、次のようなエラーが表示された。

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ローカルファイルへのアクセスは、セキュリティのため、制限があるようだ

Webサーバーを起動して、http://localhost/~/index.htmlにアクセスすると、エラーは発生しない。

Webサーバーを起動するには、node.jsがインストールされている環境であれば、「http-serverがお勧めだ。

次のコマンドでインストールする。

npm install http-server -g

Webサーバーを起動するには、次のコマンドを実行する。

http-server

publicフォルダーがあればpublicフォルダーが、なければカレントディレクトリがルートになる。

あとは下記のURLにアクセスすれば良い。

http://127.0.0.1:8080/

使用するポート変更するには-pオプションを使用する。
例えば、8000にするなら

http-server -p 8000

とすれば、

http://127.0.0.1:8000/

で、アクセスできるようになる。