GoogleHomeと連携 - obniz Docs

皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！
前回のレッスンではWebアプリの定期実行を活用して，室温をアプリステータスに表示しました．
今回のレッスンでは，Google Assistantを利用してobnizのWebアプリをスマホから呼び出してみましょう！

IFTTT : obnizとGoogle assistantの連携

皆さんは，スマホからobnizをブラウザ経由で動かすことが出来ることをもう知っているかと思います．
しかし今回は，スマホにGoogle Assistantを入れて「音声でobnizを操作」してみたいと思います．
そこで，手軽に様々なWebサービスやデバイス同士を繋ぐことの出来るIFTTTを利用してみましょう！

前準備：Google assistantを入れる

Google assistantを自分のスマートフォンに入れてみましょう．
iPhoneならApp Store, AndroidならPlay storeで「Google assistant」と検索し，インストールします．
後述しますが，IFTTTできっかけに出来るアプリケーションなら実はGoogle assistantでなくてもOKです．

obnizのプログラムを書く

今回はGoogle Assistantで「炊飯器付けて」というとobnizにつけたサーボモータが作動し，炊飯器のスイッチを押すというストーリーでプログラムしてみましょう．（炊飯器は実際に用意しなくても大丈夫です．）
ついでに，サーボモーターが動いた時にLEDマトリクスを付けることで，炊飯器のスイッチを入れていることを周りにお知らせしておきましょう．

つまり今回は「サーボモーター」と「LEDマトリクス」の2つのパーツを使うことになります．

リンクからそれぞれのパーツライブラリの使い方をみて，「プログラムが動いたらサーボを90°回転して炊飯器をONにして，LEDマトリクスに『O』を表示する」等のプログラムを（可能であれば自分で考えて）書いてみましょう．
例のごとくプログラム例を以下に載せておきます．
LEDマトリクスを0~~3ピンに，サーボモーターを9~~11ピンにセットしています．
LEDマトリクスはVCC,GNDが逆のものがあるようなので，注意してライブラリのページを見て進めましょう．

<html>

<head>
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>
    <div id="obniz-debug"></div>
    <script>
        var obniz = new Obniz("OBNIZ-ID-HERE"); //obniz ID here
        obniz.onconnect = async function () {

            const matrix = obniz.wired("Keyestudio_HT16K33", { gnd: 0, vcc: 1, sda: 2, scl: 3 });
            var servo = obniz.wired("ServoMotor", { gnd: 9, vcc: 10, signal: 11 });    //サーボーモーターのライブラリを指定

            matrix.brightness(7);
            let ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, matrix.width, matrix.height);
            ctx.fillStyle = "white";
            ctx.font = "10px sans-serif";
            ctx.fillText('O', 1, 7);
            matrix.draw(ctx);

            servo.angle(90.0);    //角度を90度に指定
            await obniz.wait(1000);
            servo.angle(60.0);    //角度を0度に指定
            await obniz.wait(1000);
        };
    </script>
</body>


</html>

WebAppを制作する

プログラムの動きが確認出来たら，今度はそのプログラムをWebAppにしてWebhookを設定しましょう．
Webhookは，あるURLにアクセスする機能です．
特にobnizにおいてはobnizのプログラムをURL経由で起動することが出来ます．

6.アプリを作る等の今までの記事のように，WebAppを新規に作成します．
この際に，設定画面で「Webhookで実行」にチェックを入れて，Webhookを有効化しておい下さい．

ON_Something_AppSetting

作成が終わったらプログラムの編集です．
[アプリ開発]-[プログラムを編集]等からアプリのプログラムの編集をします．
といっても， obniz.onconnect 内に先ほどのプログラムの script 部，すなわち Java Script の部分を移植して，プログラムの完了をWebAppに伝えるためにObniz.App.doneを追加するだけです．

<script>
    var obniz = new Obniz("OBNIZ_ID_HERE");

    // called on online
    obniz.onconnect = async function() {

        const matrix = obniz.wired("Keyestudio_HT16K33", { gnd: 0, vcc: 1, sda: 2, scl: 3 });
        var servo = obniz.wired("ServoMotor", { gnd: 9, vcc: 10, signal: 11 });    //サーボーモーターのライブラリを指定

        matrix.brightness(7);
        let ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, matrix.width, matrix.height);
        ctx.fillStyle = "white";
        ctx.font = "10px sans-serif";
        ctx.fillText('O', 1, 7);
        matrix.draw(ctx);

        servo.angle(90.0);    //角度を90度に指定
        await obniz.wait(1000);
        servo.angle(60.0);    //角度を0度に指定
        await obniz.wait(1000);

        // throw notification to app status
        Obniz.App.done({
            status: 'success',
        })

        // called while online.
        obniz.onloop = async function() {

        };
    };

    // called on offline
    obniz.onclose = async function() {

    };
</script>

出来たら，[デバイス]-[Webhook URLの確認]からWebhookのURLを確認します．

webhookURL
webhookURL2

IFTTTで連携

そうしたら次はいよいよIFTTTの機能を実装していきます．
[Get started]からアカウントを作成します．

出来たら，[create]からIFTTTを作っていきます．

まずは[If This]からきっかけに使用するアプリケーションを選択します．

Google assistantを選び，[connect]からGoogle assistantで使っているものと同じGoogleアカウントを選択します．
前述しましたが，この時点でGoogle assistantではないアプリケーションを選ぶことも可能です．

きっかけになるフレーズを登録します．
注意したいのは，Google assistantに聞き分けてもらえるような単語の組み合わせにすることです．
例として，以下のフレーズでは「オブナイズ」を用いていますが，これは一般的な言葉ではなく認識して貰えない可能性が高いので他の語句にする必要が有ります．（炊飯器つけて，等）