NoodlをIFTTTのWebhookのトリガーにしてみる


本記事について

誰向けの記事?

  • Noodl そのものに興味ある人
  • Noodl 触ってて IFTTT 連携に興味ある人
  • IFTTT については詳しく書かないのである程度わかってる前提

Noodl とは

IFTTT とは

  • トリガーに対してアクションを指定できる、つまり、色んなサービス間をつなげることができる便利なやつ
  • https://ifttt.com/

簡単にまとめると

  • Noodl で画面(ボタン)作って IFTTT の Webhook へ REST 通信することで IFTTT のトリガーにしてみた
  • Noodl 初心者が触ってみて一時間くらいでできた

IFTTT 側

THIS - トリガーをつくる

  • Webhooks を選ぶ
  • Event Name を入力
    • ここの Event Name が Endpoint の URL に含まれるので忘れないこと

THAT - アクションをつくる

  • Google Sheets を選ぶ
    • アクションの結果がわかりやすいものなら何でもよいです
    • 以下画像の Formatted row では Value1 と頭文字が大文字ですが、実際に REST 通信時に指定する際には value1 と小文字にしなくてはならないのが罠

Endpoint の URL を取得

  • Webhooks の Documentation にある

    • 先ほどの Event Name を使うことになる
  • curl コマンドなどで実際に走るか実行テスト

  • Google ドライブ上に、上記設定した通りの path に該当のシートが作成されていて、シート内に行が書き込まれていれば OK

Noodl 側

以下のような画面を作ってみることにする

  • 注:本当は Text Input で入力された値を REST に渡したいのだけれど、まだよくわかってなくてうまくいっていない ( 2019/10/25 時点 )

  • 以下のノードを作成

    • Group
    • Circle
    • Rectangle
    • Text Input
    • REST
  • Group ノードを Root の子要素にし、 REST 以外のノードを Group の子要素にする

    • Noodl では、下方向にいくほど画面のレイヤーが手前側になる、という仕様なので Rectangle より Text Input を下にすること
  • Circle, Rectangle, Text Input の見た目をお好みにカスタマイズ

    • 以下、参考までに



  • Circle から REST に向けてノードの接続をおこなう
    • Tap -> Fetch
  • Text Input から REST に向けてのノードの接続は、まだよく分かっていないので後日あらためて…… ( 2019/10/25 時点 )

REST ノードの設定

  • 以下の画像のような状態になるよう

  • Resource …… 空欄で構わない
  • Method …… POST
  • Script …… 以下参照
    • ここで inputs の定義をおこなうと、入力欄が増えることになる
define({
  inputs:{
    text: 'string'
  },

  outputs:{
  },

  request:function(inputs,request) {
    request.parameters.value1 = inputs.text;
  },

  response:function(outputs,response) {
  }
})
  • Backend type …… External
  • Endpoint …… IFTTT 側で取得してきたものをここへペースト

完成

検証

  • 以上で作業は完了
  • Noodl の画面上に作成されているサークルをタップ/クリックすると、スプレッドシートに行が書き込まれるはず
  • 用意した text 欄に書き込んだテキスト内容は、スプレッドシートの C 列に書き込まれるはず
    • もしうまくいっていない場合は request.parameters.value1 の部分が大文字の Value1 になっていないか要確認

こんごの ToDo

  • Noodl の画面上で用意してある Text Input に入力した内容が渡るようにしたい
  • 便利な使い道を考えたい
    • Noodl はソースコードを書き出すことで簡単に WEB サーバへデプロイすることもできるので PWA にしてスマートフォンからの手軽な IoT スイッチにできないかなーなどと考えているところ
    • LINE Clova があればしゃべらせることができるので GoogleHome や Alexa に命令したいけれど発話したくないときなどに、ボタン一つで Clova に代理で発話指令をしてもらうことができる(何を言っているんだろう)