WebhookでIFTTTと連携

イベントには Webhook というトリガーもあり、特定の URL が呼ばれたらプログラムを実行するということができます。

SlackやFacebook など様々なサービスが Webhook に対応していて、なにかあるごとに Webhook を叩いてくれます。

今回はIFTTTというサービスが色々なきっかけを元に Webhook を叩くように設定できて便利ですので、これを使ってみましょう。

リマインダーを管理

今回作るのはスマートフォンのリマインダー(iPhone などにあるタスク管理機能)にタスクがあれば、旗を上げて、完了したら旗を下げるというものです。
次の２つの webhook を作成します。

IFTTT でリマインダーの作成時に Webhook を叩くように設定。obniz Event で Webhook が来たらサーボモーターを回す。
IFTTT でリマインダーの完了時に Webhook を叩くように設定。obniz Event で Webhook が来たらサーボモーターを逆に回す。

モーターを繋ぐ

サーボモーターに旗を取り付け、obniz につなぎます。
まずは、ボタンを押してきちんと旗が上がり下がりするか確認してみましょう

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.5.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>

    <button id="up">Up</button>
    <button id="down">Down</button>

    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");
      obniz.onconnect = async function() {
        var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });
        $("#up").click(function() {
          servo.angle(90);
        });
        $("#down").click(function() {
          servo.angle(180);
        });
      };

      obniz.onclose = async function() {
        $("#up").off("click");
        $("#down").off("click");
      };
    </script>
  </body>
</html>

開いて実行すると、UP Down を押すごとにモーターが回転すると思います。

イベント設定

次にイベントに対応させます。まず、IFTTT で登録する Webhook から request body を受け取れるようにして、タスクが作られたのかタスクが終わったのか分かるようにします。
Webhook の body をどのように取得するかは(詳しくはこちらで)

以下のようにして body に created があれば、タスクの作成。done があればタスクの完了だと判断することにします。
この値は後で IFTTT で登録することにします。

<!-- HTML Example -->
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.31.0/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");
      obniz.onconnect = async function() {
        if (typeof req === "object") {
          if (req.body.created) {
            var servo = obniz.wired("ServoMotor", {
              gnd: 0,
              vcc: 1,
              signal: 2,
            });
            servo.angle(90);
            await obniz.wait(2000);
          } else if (req.body.done) {
            var servo = obniz.wired("ServoMotor", {
              gnd: 0,
              vcc: 1,
              signal: 2,
            });
            servo.angle(180);
            await obniz.wait(2000);
          }
        }

        if (typeof done === "function") {
          done();
        }
      };
    </script>
  </body>
</html>

servo.angle()のあとにモーターがちゃんと回るまで少し待つために wait を入れてあります。

作成できたらイベントを作成します。

Project Name: なんでも良いです。
トリガー: Webhook を選択します。
実行するアプリケーション: 「リポジトリ内」を選び、先ほど作成した flag にします。

作成すると Webhook の欄に URL が表示されると思います。 https://obniz.com/events で始まる URL です。
この URL が呼ばれると登録した flag が実行されることになります。
それでは、これを IFTTT に登録しましょう。

IFTTT に登録

iPhone に IFTTT アプリを入れます。My Applets から新規作成を選びます。
きっかけとして reminder を選択します。
ここで Any new reminder を選択。

次に何をするかで、webhook を選択します。

webhook の URL に先程 obniz Event で出てきた URL を入力します。
Method を POST にし、ContentType を application/json とします。
Body には{"created":true}という json を作成します。(このときにダブルクォーテーション "" が間違いやすいので気をつけて下さい。”ではなく"です)

次に reminder のタスクが完了したら同じ URL に{"done":true}の json を送る webhook を作成します。

これで完了です。

動作させる

それでは、さっそく iPhone のリマインダーでタスクを作って見ましょう。

少し待つと旗がモーターにより上がると思います。IFTTT はイベントの検知に時間がかかるので、あまりに時間がかかる場合は IFTTT アプリを起動すると検知しやすくなります。旗が正常に上がったら完了も試してみましょう。

リマインダーは Siri などからも作成できるので非常に便利です。声で旗の上げ下げができるようになります。Webhook は IFTTT だけでも色々なことが可能です。ぜひ色々作成してみて下さい。

リマインダーを管理

モーターを繋ぐ

イベント設定

IFTTT に登録

動作させる

タイトル